Style native Gutenberg paragraphs

Use the standard WordPress Paragraph block to write text with POM Theme typography and palette colors. The block remains a paragraph: its normal typing, links, bold and italic formatting, keyboard shortcuts and block transformations remain available. Icons are separate Icon Box containers rather than Paragraph settings.

This guide is for content editors. POM Theme must be active and the WordPress block editor must be enabled for the content type. The legacy Page Builder editor uses a separate Text Block interface.

Write and style a paragraph

1. Open Pages > Add Page, or edit an existing page in the block editor.
2. Insert Paragraph and write your text.
3. Select the paragraph and open its block settings sidebar.
4. Under Text, choose Text color, Text size, Font weight, Line height and Capitalization as needed.
5. Use Text alignment in the block toolbar for left, center, right or justified text. Choose Inherit alignment to follow its container.
6. Save the draft and open its frontend preview before publishing.

Inherit leaves the corresponding choice to the theme or surrounding content. Palette choices store their numbered slot, so changing that slot in the theme settings updates the paragraph's color.

Color controls show palette swatches only. Select the active swatch again to clear the color and inherit the surrounding text color. Each swatch retains its own slot even when two slots have the same color.

The available sizes use the theme's rem-based helpers: 0.375, 0.5, 0.75, 1, 1.25, 2 and 3rem. Heading appearance applies the visual style of H1–H6 without changing the paragraph's semantic element. Use an actual Heading block when introducing a document section.

Font weights range from 100 to 900; the installed font determines which weights can be displayed accurately. Line-height choices are 1, 1.2, 1.5, 1.8 and 2. Capitalization can inherit, use uppercase, or restore the original text appearance without rewriting the words.

Choose a font and text flow

Open Font and text flow in the Paragraph sidebar:

• Font family offers Inherit, Safe font, and the families registered in Theme Settings > Design system > Fonts. It saves a font-family-… helper class, not a font declaration on the paragraph. Reordering families does not change the saved choice. Renaming or removing a family requires choosing an available family again; the editor marks missing choices as not installed.
• Orientation offers Inherit, Horizontal, Vertical downward, or Vertical upward. Downward text flows top to bottom. Upward uses the same vertical flow rotated through 180 degrees so it reads from bottom to top. These choices change presentation, not text content, using theme helper classes. Previously saved writing-mode-vertical content remains downward-compatible.
• Number of text columns offers Automatic or 1–12. This divides one paragraph's text; it does not create Row or Column blocks.
• Minimum column width is optional. Combine it with a count to let the browser reduce the number of columns on narrow screens. If the whole container is narrower than this preferred width, a single column fits the available space.
• Column gap controls the space between text columns. Leave it empty to keep the browser default. It applies only while a count or minimum width is set.

Widths and gaps accept px, em, rem, ch, vw, or vh, up to 2000 units; gaps may be zero. For example, 3 columns with a 320px minimum and a 2rem gap save style="columns:320px 3;column-gap:2rem" on the paragraph. These two inline declarations are an intentional exception to the helper-only workflow. They do not generate a stylesheet or load a script. In vertical orientation, columns follow the writing mode's inline axis.

To restore ordinary text flow, choose Automatic and clear Minimum column width. Always review longer text on desktop and mobile before publishing.

Format selected words and the first letter

1. Select the words you want to format.
2. Choose Theme text formatting directly in the floating text toolbar. Its independent color icon is displayed beside the standard inline-format controls rather than inside More.
3. Choose a palette swatch, or use Custom text color for a precise color. Palette colors save an existing theme class; custom colors save one inline color declaration on the selected text, like the classic text editor.
4. The same popover also provides Selected text background, Selected text size, and the Paragraph drop-cap choice.
5. Select the active color swatch again, or choose Inherit for size, to remove that specific format without removing links, bold or other formatting.

Palette choices use existing theme helper classes, including numbered slots for selected text. A palette change therefore updates words that use that slot. A custom color is intentionally independent of the palette and remains unchanged when the palette is edited. Choosing a palette replaces the selected custom color; choosing a custom color replaces the selected text-color helper without disturbing links, emphasis, backgrounds, or size helpers.

When the complete paragraph text is selected, the palette control becomes Paragraph color and applies the palette class to the paragraph itself. A custom choice still applies inline to the selected text because it has no theme helper class. Both paths remove redundant text-color choices across that selection while preserving links, emphasis, backgrounds and other formats. Use Clear custom color to remove only the custom color.

Native underline, inline images, superscript, subscript and mathematics remain available. Code, Keyboard input, Language and Footnote insertion are not offered in the text toolbar. Existing semantic formatting and footnote references remain readable and are preserved when editing saved content.

Drop cap — first letter applies to the paragraph's first non-whitespace character, regardless of the current selection. Choose Large initial, Boxed initial, Decorative initial or None. The rest of the paragraph's markup is preserved.

Continue with a new paragraph

Press Enter while writing to create another Paragraph. The new paragraph inherits the preceding paragraph's text color, size, weight, line height, alignment, capitalization, and font family. It does not inherit margins, opacity, device visibility, text columns, orientation, anchors, or legacy icons because those settings describe one block instance rather than continuous typography.

Group content with an Icon Box

Insert Icon Box when one icon should introduce content. The container accepts Paragraph, Heading, and List blocks, including several of them together; it does not accept unrelated interactive or layout blocks. Select its icon, left/right/top position, size, shape, palette colors, supported Color 15 hover state, and optional accessible link in the Icon Box settings. Its frontend HTML reuses the existing web-iconbox-* theme structure and does not load another stylesheet or script.

Under Container, choose a shared Text color, Center below 992px and Device Visibility for the complete icon-and-content group. Child text can override the inherited color. Advanced > Additional CSS class(es) applies helpers to the outer container, so a margin class spaces the entire Icon Box rather than one paragraph.

New Paragraphs no longer expose icon settings. When older content contains an icon embedded in a Paragraph, Previous paragraph icon offers Convert to Icon Box. This moves the text into a child Paragraph and keeps the icon settings. Remove old icon discards only that old icon. Until one of those actions is chosen, the saved legacy icon remains valid and visible.

Spacing and visibility

Open Spacing and visibility for:

• Top margin and Bottom margin: inherit or choose 0, 0.375, 0.75, 1, 1.25, 2, 3, 4, 6, or 8rem. These settings save the theme's existing mt-* and mb-* helpers and preview their root-equivalent size in the editor.
• Opacity: inherit or choose 0–100% in 10% steps.
• Center below 992px: use the theme's existing small-screen centering helper.
• Independent visibility switches for Desktop (≥992px), Landscape tablet (768–991.98px), Portrait tablet (576–767.98px) and Mobile (≤575.98px).

Enabled devices display the paragraph. In the editor, a shaded indication keeps hidden paragraphs editable; a fully transparent paragraph also remains faintly visible so it can still be selected. The frontend applies the actual visibility and opacity choices.

Device visibility is presentation, not an access restriction. Do not use it to protect confidential content. If all device switches are disabled, the paragraph will not be visible on the frontend.

Existing content and advanced options

Previously saved native formatting is preserved when opening an existing paragraph. If Previous formatting appears, Reset previous block formatting removes those old block-level settings so you can use the POM helper controls. It does not clear your written content or inline links and emphasis.

Use WordPress Advanced settings for an HTML anchor or additional CSS classes. Prefer documented existing theme helpers. Background boxes, borders, arbitrary dimensions and structural layout belong in the surrounding Section or Column.

The extension does not enqueue a frontend stylesheet or script and does not generate per-post CSS for its controls. Its editor preview loads only a focused subset of the relevant theme styles.

Native Additional CSS authoring is disabled for the curated POM blocks and the extended Paragraph, Heading, List and List Item blocks. Additional CSS class(es) remains a separate control for existing helpers. The frontend reuses theme text styles instead of loading the redundant Core Paragraph, Heading and List stylesheets; other Core blocks keep their own asset requirements.

Verify the result

Before publishing, save and reopen the page, check the paragraph in frontend preview, and review each device visibility setting. Verify that selected-word formatting is still correct after editing the surrounding sentence. For an Icon Box, also test its optional link and confirm that all child blocks remain selectable and correctly ordered.

If the POM panels are missing, confirm that you selected Paragraph in the WordPress block editor rather than a legacy Text Block. If an Icon Box icon cannot be loaded, choose another available icon; the previous saved icon is kept. If a color is hard to read, change the palette slot or the surrounding background and check the result on the frontend.

Related: Global colors, Typography, and CSS classes and identifiers.