Heading block

Go back to the list of Blocks

Headings help to introduce new sections and organize the content on the page. They make your website more readable by humans and search engines.

To add a heading, click on the Block Inserter (+). Alternatively, you can type /heading in a new paragraph block and press enter.

You can also add a Heading block with H1 heading level by typing /h1 in a new paragraph block followed by enter. Subsequent heading blocks can be added by typing /h2, /h3, /h4, /h5, /h6 followed by enter.

The Block editor by default considers the page title as the <h1> tag, so subsequent Heading blocks are added as H2, H3, and so on.

You can also choose your heading level according to your style from the Block Toolbar.

Changing the heading levels in the Heading block

Another shortcut method to add a heading is to type ##space to add H2 heading, ###space to add H3 heading, etc.

Detailed instructions on adding blocks

Block toolbar

Each block has its own block-specific controls that allow you to customize the block right in the editor. The Heading block offers the following options in its toolbar:

  • Transform to
  • Drag icon
  • Move handles
  • Change alignment
  • Change heading level
  • Change text alignment
  • Bold
  • Italic
  • Link
  • More rich text controls
  • More options
The heading block toolbar
The heading block toolbar

Transform to

When you click on the Transform button you can convert the Heading block into a Paragraph, List, Quote, Columns, Pullquote, or Group block.

Transform option in the Heading block

Drag icon

Drag option in the Heading block

To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag to the new location. The blue separator line indicates where the block will be placed. Release the left mouse button when you find the new location to place the block.

Move handles

Move handles in the Heading block

The up and down arrow icons can be used to move a block up and down on the page.

Get more information about moving a block within the editor.

Change alignment

Using the alignment drop-down from the toolbar, you can make the Heading block wide width or full width. The wide-width and the full-width align options are only available if your theme supports them.

Change alignment in the Heading block

Change heading level

You can change the heading levels from H1 through H6 from the block toolbar.

Change heading level in the Heading block

Change text alignment

Change the text alignment in the Heading block
Block toolbar with the drop-down for alignment.

Using the alignment drop-down from the toolbar, you are able to align the whole heading text to the left, make it center-aligned or orient it to the right.

Bold

Use the Bold option or Ctrl+B / Cmd+B on your keyboard to bold it, which is usually heavier than the surrounding text.

Italic

Use the Italic option or Ctrl+I / Cmd+I on your keyboard to italicize it, which usually appears slanted to the right.

Use the link icon to insert a hyperlink to the highlighted heading text.

Read about more link editing options.

More rich text options

The drop-down menu to the left of the More options menu contains a range of additional rich text editing options such as highlighting, inline code, strikethrough, and more.

Read about more rich text editing options.

More options

These controls give you the option to copy, duplicate, and edit your block as HTML.

Read about these and other settings.

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, click the cog icon next to the Publish or Update button.

Block settings in the sidebar
The block settings can be found in the sidebar.

Color

You can customize the text color, and background color, for the Heading block. The color options available will vary based on the theme.

Color settings in the Heading block
Color settings in the Heading block

See this guide for more information about changing colors.

Typography

Typography settings allow you to adjust the Font size, Appearance, Letter case, Line height, and Letter spacing. 

Typography settings in the Heading block
Typography settings in the Heading block

Get more details about changing typography settings.

Dimensions

Dimension controls are used to control how groups of blocks are placed alongside one another, by changing the values for padding, margin, and other dimensions

Learn more about dimension controls.

Advanced

In the advanced panel of the block options, you’ll see options for HTML Anchor and Additional CSS Class.

You can add HTML Anchors and CSS classes from the sidebar.
You can add HTML Anchors and CSS classes from the sidebar.

“HTML anchor” allows you to make a unique web address for a particular Heading block. Then, you’ll be able to link directly to the Heading block of your page.

The “Additional CSS class(es)” lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.

Changelog

  • Updated 2023-03-07
    • Added missing ALT tag for text alignment image
  • Updated 2023-08-09
    • Replaced the link section with short summary linking to new dedicated page.
  • Updated 2023-06-08
    • Replaced “More rich text options” section with short summary linking to new dedicated page for rich text editing options.
  • Updated 2022-06-22
    • Updated content and screenshots for 6.0
    • Added ALT tags for the images
  • Updated 2022-02-04
    • Added further update for WP 5.9
  • Updated 2021-02-28
    • Added images and updated for WP 5.7
  • Updated 2020-08-27
    • Added images for WP 5.5
  • Updated 2020-06-18
    • Added ‘Link back to blocks’ to the top of the page
    • Added the ‘Changelog’
  • Created 2019-03-07

Was this article helpful? How could it be improved?

First published

Last updated