Heading Block

·

Go back to the list of Blocks

Headings can help structure your page and make your content more readable by humans as well as search engines.

To add a heading, click on the Add Block button. Alternatively, you can type /heading in a new block and press enter.

Alternatively, you can use a slash command to insert a heading block.

Detailed instructions on adding blocks can be found here.

The editor automates a search engine optimized layout by considering the page title is the <h1> tag, so subsequent heading blocks begin at <h2> and so on, but you can choose your heading level according to your style in the toolbar.

Shortcut/Markdown

There is another simpler way to add the heading text in the editor. Just type ## space to add H2 text, ### space for H3 etc.

Block Toolbar

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

The heading toolbar offers header tag selection, text alignment options, Bold, Italic, Hyperlinks, and more.
  • Transform
  • Align Options
  • All heading tags
  • Text Alignment
  • Text Editing Options
  • More Options

Heading block can be transformed to a Paragraph, Columns, Group, List, Quote or a Pullquote.

Align Options

The wide width and the full width align options are available if your theme supports them.

All Heading Tags

You can modify choose the heading tag from the block toolbar.

Text Editing Options

Bold and Italics

Used quite frequently, Bold and Italics formatting have their own buttons on the Toolbar. The shortcuts are CTRL+b (or Command+B) for bold and CTRL+i (or Command+i) for italics.

Insert Hyperlinks

Use the chain link icon to insert a hyperlink to your highlighted text. Or use the CTRL + k (or Command+k) keyboard shortcut.

The Search mentioned in the text box relates to searched on your own website. If you start typing a keyword, if will offer you a list of post and page titles from your own website for on-site link building.

Open in new tab

The toggle switch allows you to control where the new page should open:

  • off in the same browser tab
  • on in a new browser tab

By default the switch is set to off, as your site visitors should control how she wants to read your linked page.

Tip: If you already have the URL of the website you want to link to in the clipboard, highlight the text, you want to make into a link and use CTRL + V to add the hyperlink to the text.

More Text Editing Options

Block tool bar with the drop-down for More Text Editing Options

Inline Code

Use inline code feature to format code snippets within your text differently. Not only that, but Inline code formatting also prevents the code to be executed instead of displayed.

Inline Image

The inline image feature allows you to add an image into your paragraph. It has one option: enter the desired pixel width for your image.

Strikethrough

Using the “Strikethrough” option adds a line through your highlighted text.

SubscriptandSuperscript

The “Subscript” option allows you to add subscript to your highlighted text.

The “Superscript” option allows you to add superscript to your highlighted text.

Text Color

Using the colors from the inline Text Color tool allows you to change the color for highlighted text.

More Options

Hide Block Settings

TheHide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Copy

Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.

Duplicate

Duplicate can be used to duplicate selected block.

Insert Before

Insert a new block before the selected block(s).

Insert After

Insert a new block after the selected block(s).

Move To

If you select Move To, you will get a blue line inside your content, you can then use the arrows to move that line up and down to where you want the selected content to be moved into, hitting return on your keyboard at that point moves the block to that position.

Edit as HTML

TheEdit as HTML option allows you to modify the HTML code of the embed block.

Add to Reusable blocks

Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.

Group

Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.

Remove Block

-With the Remove Block option, you can delete the selected block from your content.

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 button.

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

Heading Settings

The heading block options offer h5, h6, and text alignment options.

If you look to the block settings in the sidebar, you can see the options to change the font size of your heading tag. You can choose from a default size or set a custom size.

You can set a custom color to your heading tags from the block settings.

Advanced

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

The heading block suggests a hierarchy based on proper SEO practices.
The heading block suggests a hierarchy based on proper SEO practices.
You can add HTML Anchors and CSS classes from the sidebar.
You can add HTML Anchors and CSS classes from the sidebar.

The HTML Anchor is a useful tool for creating page jumps. If you toggle the block to its HTML view, you’ll see that the HTML Anchor input is added as a CSS ID to the heading tag. You can also see the CSS class in the block HTML.

Changelog

  • 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