Heading Block

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

Get Thrive Leads for WordPress

WordPress Gutenberg Blocks – Heading

WordPress Gutenberg - Heading Block

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

***

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

(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

(‘Add Block’ Tool – Add Heading Block)

Or, select a Heading Block in the Content Area

Add a Heading Block from 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

(Type or paste in your heading)

Info

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

(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

(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

(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

(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

(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

(HTML Anchor Link)

Info

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

(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

(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

(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

Heading Block Editor

(Heading Block Editor)

Heading Block Settings

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 Settings)

Heading Block – Additional Info

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

Change Block Type - Heading Block

(Change Block Type – Heading Block)

Info

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.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

Get Thrive Leads for WordPress

***

"This is an awesome training series. I have a pretty good understanding of WordPress already, but this is helping me to move somewhere from intermediate to advanced user!" - Kim Lednum

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and the author of The Small Business Digital Manager. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as Heading Block.