Style native Gutenberg headings

Use the WordPress Heading block to structure a page while choosing its appearance from existing POM Theme helpers. This guide is for content editors using POM Theme with the block editor enabled.

Choose the heading level and appearance

1. Open Pages > Add Page, or edit a page in the block editor.
2. Insert Heading and write the title.
3. Choose its H1–H6 level with the native heading-level controls. Use the level that fits the document structure, not the font size you want.
4. Open the block settings sidebar and expand Text.
5. Choose Text size: Inherit, Heading appearance 1–6, Display 1–4, or an available rem-based helper.
6. Choose Text color, Font weight, Line height and Capitalization if needed.

For example, an H2 with Heading appearance 3 remains an H2 in the page outline and rendered HTML. Inherit uses the theme's styling for the selected semantic level. Display styles are visual presets, not additional heading levels. Font weights depend on the fonts installed in the theme.

Palette selections store a numbered slot, not a separate custom color. Changes to the theme palette apply to content using that slot. These controls do not generate frontend CSS or inline styles.

Alignment, spacing and visibility

Use Text alignment in the block toolbar for inherited, left, center, right or justified alignment. Under Spacing and visibility, choose existing top/bottom margin helpers, opacity in 10% steps, small-screen centering and the devices that should display the heading.

Hidden headings remain editable with a shaded indicator in the editor. Device visibility only changes presentation; it is not a permission rule or a way to protect confidential content.

Links, selected words and anchors

• Keep using the native bold, italic and link controls. Select the full title before adding a link if the entire title should be clickable.
• Select words and open Theme text formatting directly in the floating toolbar to apply palette text/background colors or an existing size helper. These selections also use classes.
• Use Advanced > HTML anchor for a stable section link, and ensure the anchor is unique on the page.
• Native transformations between Paragraph and Heading preserve the shared POM helper settings. Paragraph icon wrappers are not transferred into a heading.

Heading does not add paragraph icons or drop-cap controls. For a simple supporting text, use Paragraph. For a coordinated subtitle and decorative layers, use Compound Heading below.

Horizontal title lines

Select a Heading and enable Title decoration > Horizontal title lines. The existing theme lines extend beside its text and follow the heading color. This works both for standalone headings and headings inside Compound Heading. The title remains editable with native text, link and heading-level tools.

Compose a title, subtitle and background title

1. Insert Compound Heading. It starts with one native Heading; no subtitle is inserted until requested. You can also transform an existing Heading into Compound Heading without retyping it.
2. Write the title directly on the canvas. Select the child Heading to choose its semantic level, visual size, palette and typography.
3. Select the parent using the toolbar's parent selector or List View. Use Add subtitle to insert an optional native Paragraph with the existing subtitle appearance.
4. Choose Composition variant: Plain title, Horizontal lines, Background title, or Lines and background. The same choice is available in the parent toolbar and Composition panel.
5. Choose Subtitle position above or below the title. Edit title and Edit subtitle return directly to their native controls. Remove an unwanted subtitle through that Paragraph's block menu.
6. For a background variant, open Decorative title and enter Background title text, its palette color and font weight. You can also edit this text on the canvas. It is decorative, is hidden from screen readers and does not create another heading in the document outline.
7. Use the parent toolbar for overall alignment. Its sidebar provides Center below 992px, top/bottom Spacing, device Visibility, and Organization for the HTML anchor and additional classes.

The background title accepts up to 500 characters of plain text; manual line breaks become spaces and text wraps naturally to the available width. Switching variants preserves it and the subtitle. Child typography and explicit alignment override inherited composition settings. A subtitle is a Paragraph, so links and emphasis remain native and editable. The normal inserter offers one title and one subtitle; extra pasted text is preserved, and List View can move it outside the composition.

Compound Heading saves ordinary HTML and existing theme helpers. It has no block-specific frontend stylesheet or script. Theme palette and typography changes therefore continue to affect it without resaving. This does not add arbitrary inline font-size formulas or a non-semantic heading tag; choose existing appearance helpers instead.

Existing headings

Previously saved native formatting remains intact. If Previous formatting appears, use Reset previous block formatting to clear old block-level styling before switching to POM helpers. This does not clear your title or its inline links and emphasis.

Verify before publishing

1. Save the draft, reopen it and confirm the text and selected settings remain intact.
2. Check the document outline: changing appearance must not change the heading level.
3. Open frontend preview and check typography, links, anchors and each device visibility choice.
4. Verify readability against the surrounding background and avoid skipping heading levels for visual effect.
5. For Compound Heading, also check both subtitle positions, line color and decorative text wrapping at phone and tablet widths. A decorative title must not carry essential information that is absent from the visible heading.

If the panels are missing, check that the selected block is Heading and that you are using the WordPress block editor. If text keeps an older color or size, check Previous formatting and any formatting applied directly to selected words. Custom CSS applied elsewhere can also affect the final result.

Related: Style paragraphs, Typography, and CSS classes and identifiers.