The WordPress Block Editor - Heading Block

WordPress Block Editor – Heading Block

WordPress Block Editor - Heading Block

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

***

Heading Block – Description

Headings are normally used to indicate the start of a new section or topic. The Heading block lets you introduce new sections and organize content around topics to help visitors (and search engines) better understand your content structure.

Heading block
Add headings to your posts and pages with Heading blocks.

How To Use The Heading Block

In this section, we’ll cover:

  • How to add a Heading block to your content.
  • How to edit and configure your Heading block and block settings.
  • How to remove the Heading block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A Heading Block

To add a Heading block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Heading block (in Most Used or Text section),
    • 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 - Heading block
Add a Heading block to your posts and pages using the Add Block tool.

Or, select a Heading block using the Inserter tool in the Content Area.

Inserter tool - Heading block.
Use the Inserter tool to add a Heading block to your content.

Either of the above methods will add a Heading block to your content.

Heading block.
Heading block (no heading added).

After adding a Heading block, simply type or paste in your heading.

Heading block - Heading added.
Heading block with heading added.

Go through your post or page and select different heading levels (H1-H6) for different sections of your content.

Heading block - Heading styles.
Select different heading levels for your content.

Repeat this process for all your content headings.

Heading block - Heading levels
Add various heading levels to your content.

Info

Notes:

  • The Heading block supports all HTML heading tags (H1 – H6).
  • The Heading block also supports HTML Anchors (also referred to as Jump Links – see further below).
  • By default, heading styles are determined by your site’s theme. you can also customize heading styles if you have knowledge of using CSS (Cascading Style Sheets).

After adding headings to your content:

  • Edit and configure Heading 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 (H1 – H6)
      • Change the heading alignment (left, center, right)
      • Format the text (bold, italics, strikethrough, etc.)
      • Add a hyperlink or jump link to your heading.
    • Use the Block Settings to:
      • Change the heading’s typography (font size and line height).
      • Change the heading’s color settings (text color, background color).
      • Create an HTML anchor (see further below) or style your heading using CSS.

Let’s go through some of the editing functions of the Heading block.

After adding a heading using the Heading block, you can change its text or background color.

Heading block - Color settings.
Change Heading block color settings.

You can also change the size of the font and line spacing in the Typography section. Click the ‘Reset’ button to return your heading to its default setting.

Heading block - Typography.
Change typography settings in your Heading block.
HTML Anchor

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

Sample post with jump link to a Heading block.
Add jump links to Heading blocks in your content.

To create an HTML anchor:

      • Click inside the Heading block of the section you want visitors to jump to when they click on an anchor link.
      • In the Advanced Settings > HTML Anchor section of the Heading block settings, type in a unique anchor by entering one or two words without spaces (you can use hyphens to separate words).

For example, in the screenshot below we have created an HTML anchor using the text ‘main-title‘…

The next step is to connect the anchor you’ve added in your Heading block to your page.

To do this:

      • Select and highlight text in your content and click on the Hyperlink tool in the Heading block editor.
      • Add the anchor name into the URL field preceded by a ‘hash’ symbol (#). In our example, this is ‘#main-title‘ (without the quote symbols).
      • Make sure your anchor text matches the one created in the block’s advanced settings section.
      • Click the Enter button to create the link.
      • Save and publish or update your post or page.
Sample content with anchor link.
Add an anchor link to your content.

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

For more information about linking content on your site, see this tutorial: How To Link Content In WordPress

tip

You can easily convert a Paragraph Block into a Heading block if you know how to use WordPress keyboard shortcuts.

Convert paragraphs into headings using keyboard shortcuts.
Convert paragraphs into headings using keyboard shortcuts.

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’.
  • This will remove the Heading block from your content.
Heading Block: More Options - Remove block
Use the More Options menu to remove a Heading block from your content.

Additionally…

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

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.)
  • Drag & Drop Tool
  • Move Up and Down Tool
  • Change Heading Level
    • H1
    • H2
    • H3
    • H4
    • H5
    • H6
  • Change Alignment
    • Align text left
    • Align text center
    • Align text right
  • Bold – Add bold text formatting to your file’s link text.
  • Italic – Add italicized text formatting to your file’s link text.
  • Link Tool – Link and unlink text in your heading.
    • Custom URL – Paste a URL or type a search term to bring up a list of posts, pages, or custom post types on your site containing your search term.
      • Clicking on the Link settings button brings up the following options:
        • Open the link in a new tab (on/off).
      • Apply button. Once the Apply button is clicked, your link displays the following additional options:
        • View the link.
        • Edit the link.
        • Delete the link.
  • More Rich Text Controls – See How To Use Blocks to learn more about using rich text control settings.
  • More Options – See How To Use Blocks to learn how to use this section.

Heading Block Settings

Heading block settings.
Heading block settings.

Heading block settings include:

      • Block description area
      • Typography
        • Font Size
            • Default
            • Small
            • Normal
            • Medium
            • Large
            • Huge
            • Custom
        • Custom font size
          • Value field – Enter a value in points
          • Reset – Resets font size to default.
        • Line height – Enter a line height value (decimal values allowed, e.g. 2.5)
      • Color Settings – Select from the preset color palette or add a custom color using hexadecimal or RGB values. Click the Clear button to restore the default text color.
        • Text color
        • Background color (Solid/Gradient)
      • Advanced Settings
        • HTML Anchor – Create a unique web address to send users directly to the block using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
        • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

Heading Block – Additional Info

You can convert a Heading block into the following block types:

Heading block - Change block types.
Change your Heading block into other block types.

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

Sample post with Heading blocks.

Congratulations! Now you know how to use the WordPress content editor’s Heading block.

To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

Print Friendly, PDF & Email

Updated: April 9th, 2023

Terms Of Use | Privacy Policy

Scroll to Top