WordPress Gutenberg Blocks – Heading

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

• To learn more about using the Gutenberg content editor and the editor interface, go here: WordPress Gutenberg Content Editor
• To learn more about using blocks, go here: How To Use WordPress Gutenberg Blocks

***

Heading Block Description

The Heading Block lets you introduce new sections and organize content to help visitors (and search engines) understand your content structure.

Headings are normally used to indicate the start of a new topic.

(Add headings to WordPress using the Heading Block)

How To Use The Heading Block

To add a Heading Block:

• Either:
  • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Heading’ block (in Most Used or Common Blocks section), or
  • Add the ‘Heading’ block in the Content Area.
• Type or paste in your heading.
• Use the tools in the Heading Block Editor or Block Settings section to edit and format your heading.

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select a ‘Heading’ block …

(‘Add Block’ Tool – Add Heading Block)

Or, select a Heading Block in the Content Area …

(Add a Heading Block from the Content Area)

After adding a Heading Block, type or paste in your heading …

(Type or paste in your heading)

Notes:

• The Heading Block supports all HTML heading tags (H1 – H6).
• The Heading Block also supports HTML Anchors (see below).

After adding headings:

• Edit and configure block settings,
• Save, publish, or update your post or page.

How To Edit A Heading Block

To edit a Heading Block:

• • Click inside the Heading Block to select it.
  • Use the Block Editor tools to:
    • Change the Heading Level
    • Format the text (bold, italics, strikethrough)
    • Add a hyperlink to the heading
  • Use the Block Settings to:
    • Change the Heading Level (H1 – H6).
    • Change the heading text alignment (left, centre, right).
    • Create an HTML Anchor (see below).

(How To Edit A Heading Block)

HTML Anchor

An HTML Anchor lets you add links in your content pointing to different sections of your page (e.g. like in a Table of Contents) …

(HTML Anchor)

To create an HTML Anchor Link:

• • • Click inside the Heading Block of the section you want to visitors to go to when they click on a hyperlink,
    • Select and highlight your Heading text and click on the ‘Hyperlink’ tool in the Heading Block editor
    • Add a name (ID) for the Anchor link preceded by a ‘hash’ (#)
    • Click the ‘Apply’ button.

In the example below, we have created an HTML Anchor called #main …

(Add an HTML Anchor ID to a heading)

The next step is to connect the Anchor ID in your Heading Block to your page. To do this:

• • • Click inside the Heading Block to display the Heading Block  Settings
    • Add the anchor ID (minus the ‘#’) to the HTML Anchor field in the Advanced Settings > HTML Anchor field.
    • Make sure both ID names match …

(Add Anchor ID to Advanced Settings > HTML Anchor field)

To send post/page readers to the anchor link section you have created:

• • • Select and highlight the text you want to add an Anchor link to
    • Click on the Hyperlink tool in the Block Editor
    • Enter the Anchor ID (with the # symbol)
    • Click the ‘Apply’ button
    • Publish or update your page or post to save and update your settings

(Add an Anchor link to your content)

Now, when users click on the link containing your Anchor link, they will be taken to the section of the page you have marked with an HTML Anchor …

(HTML Anchor Link)

You can also convert a Paragraph Block into a Heading Block if you know how to use WordPress keyboard shortcuts …

(Create a heading in a Paragraph Block)

Remember to update and publish your post or page to save your settings.

How To Remove A Heading Block

To delete or remove a heading block:

• • • Click inside the Heading Block to select it.
    • Select the ‘More Options’ tool in the Block Editor.
    • Click on ‘Remove Block’.
    • The block will be removed from your post or page.

(Remove a Heading Block)

Additionally …

• • • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
    • You can also convert Heading Blocks into Reusable Blocks.

Heading Block Tools, Options & Settings

The Heading Block includes tools, options, and settings for:

• • • Heading Block Editor
    • Heading Block Settings

Heading Block Editor

(Heading Block Editor)

The Heading Block Editor includes tools that let you perform the following operations:

• • • Change Block Type (See ‘Heading Block – Additional Info’ section below.)
    • HTML Heading Tags
      • H2
      • H3
      • H4
    • Format Text
      • Bold
      • Italics
      • Strikethrough
    • Add Hyperlinks
      • Paste link URL
      • Type to search and link to existing content
      • Hit ‘Enter’ or click ‘Apply’ button to create link
      • Option to open link in new tab
    • More Options
      • See ‘More Options’ menu section in the Gutenberg Content Area tutorial for more details.

(Heading Block Editor)

Heading Block Settings

(Heading Block Settings)

Heading Block settings include:

• • • Block description area
    • Text Settings
      • Level
        • • H1
          • H2
          • H3
          • H4
          • H5
          • H6
      • Text Alignment
        • Left
        • Center
        • Right
    • Advanced Settings
      • HTML Anchor
      • Additional CSS Class

(Heading Block Settings)

Heading Block – Additional Info

The Heading Block can be converted into the following block types:

• • • Paragraph Block
    • Quote Block
    • Cover Block

(Change Block Type – Heading Block)

Installing plugins or themes on your site may add new functionality, options, or settings to Heading Blocks.

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Heading Block.

• • • To learn how to use other Gutenberg blocks, go here: WordPress Gutenberg Content Editor – How To Use Blocks
    • For more tutorials on using the Gutenberg content editor, go here: WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users

***