Add option to remove h1 from heading block

[myleshyson]

This is currently possible with the classic editor through the tiny_mce_before_init filter.

I know a decision was made to deemphasize H1 which was great. However it would be even better if there was a way to remove it entirely for businesses, agencies, universities, etc that use H1 in the actual template so that admins can't accidentally (or purposefully) mess up seo for the larger organization like ours.

Anywhere that this could be added would be great. Maybe a filter similar to tiny_mce_before_init.

Thanks

[swissspidy]

Previously: #13565

[myleshyson]

Yea but this is a different matter. Our organization actually just wants a way to completely remove it. #13565 wanted to add it to the title bar.

[gu-stav]

Please not only h1, but any heading. For many cases it doesn't make sense allowing six levels of headings.

Also, I really like the google docs UI, where you can only select an h3, for example, if an h2 was used previously. Prevents many errors, where editors are just using a headline level because it looks the way they need it.

[jakewhiteley]

I also need this.

A lot of agencies use WordPress for client websites, and it is likely the case that most templates already have a H1, or as @gustavpursche pointed out, the theme we provide them does not have styling for a H6 for example.

We need a way to restrict what clients can add - for their own good!

[warudin]

Also in need for this. Most times we add the title of the page/post in an H1 in the template files. Clients shouldn't use it, so it'd be best if it wasn't available at all for them.

[wwdes]

+1

99% of sites use h1 for page title for most content. In these situations content editors should not be able to add h1 titles. What we need is to be able to disable any of the h1-h6 for any specific post type.

[dtipson]

This is also an accessibility concern. Users being able to add h1s breaks the proper document outline.

[kloh-fr]

+1 for this request.

For now the best move I've found is this one: https://github.com/yannkozon/mu-plugins/blob/master/remove-h1-wp-editor.php

[tedw]

For anyone interested, here’s one way to convert H1 to H2:

add_filter('render_block', function($block_content, $block) {
    if ( $block['blockName'] === 'core/heading' ) {
        $block_content = str_replace('<h1', '<h2', $block_content);
        $block_content = str_replace('</h1', '</h2', $block_content);
    }

    return $block_content;
}, 10, 2);

I haven't done extensive testing yet so YMMV. Works locally 😉

If you really wanted to, you could also hide the heading-level buttons in the admin with CSS by targeting the aria-label attribute (see https://davidwalsh.name/add-custom-css-wordpress-admin for how to add a custom admin stylesheet):

.components-toolbar-button[aria-label="Heading 1"] {
  display: none;
}

Just note that this will break if the label text changes, and could have unforeseen consequences so please test first. I only tested it using the browser dev tools.

[filipecsweb]

+1

[tsdexter]

I am using this code to force H1 back to H2 but +1 for giving us a filter to override toolbar buttons and inspector controls on other blocks

const { createHigherOrderComponent } = wp.compose;

const runOnTheseInnerBlocks = ["core/heading"];

const customizeHeadingBlock = createHigherOrderComponent((BlockEdit) => {
  return (props) => {
    if (!runOnTheseInnerBlocks.includes(props.name))
      return <BlockEdit {...props} />;

    const newProps = {
      ...props,
      attributes: {
        ...props.attributes,
        level: props.attributes.level === 1 ? 2 : props.attributes.level,
      },
    };
    return <BlockEdit {...newProps} />;
  };
}, "customizeHeadingBlock");

wp.hooks.addFilter(
  "editor.BlockEdit",
  "namespace/customizeHeadingBlock",
  customizeHeadingBlock
);

I've also added this to the editor CSS to hide the button:

/* hide H1 button in toolbar */
button[aria-label="Heading 1"] {
    display: none;
}

[djave-co]

We also regularly need granular control of which headings are required. The title of our pages tend to be an h1 of the page title, and the following headings need to sit beneath this. We would like to at least remove h1s, and also the option of removing one or more of the h4-h6 elements which rarely have visuals supplied by the designers.

We'd like the flexibility to control this at theme level.

With this in mind, we have the following line in https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/heading/heading-level-dropdown.js

12. const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];

Would it be possible to add something to theme.json that would allow these values to be edited:

{
    "version": 2,
    "settings": {
        "blocks": {
            "core/heading": {
               "levels": [ 2, 3, 4 ]
            },
        }
    }
}

And then we could replace the HEADING_LEVELS with something more like this:

import { useSetting } from '@wordpress/block-editor';
const HEADING_LEVELS = useSetting( 'blocks.core/heading.levels' ) || [ 1, 2, 3, 4, 5, 6 ];

Disclaimer: I have no idea how this all actually works, I'm just trying to be useful. Also I've never used useSetting or theme.json, but have been crawling the docs for examples and cobbled this together.

[JoshuaDoshua]

defining levels in theme.json would be ideal, err, the best we can do in this environment

[hannahmumma]

Is this happening. I need it

[mkismy]

+1

[carolinan]

The heading block is not the only block that has a heading level option. I think before we can add this option to theme.json, we need to unify the heading level controls: https://github.com/WordPress/gutenberg/pull/46003

[jordesign]

To my reading - https://github.com/WordPress/gutenberg/pull/46003 should mean that it's possible to remove H1 from the list in theme.json - is that correct @carolinan ?

[carolinan]

No, that has not been implemented.

One can use the new component in a custom block and decide the levels. As far as I know, there is no way to filter the defaults. It has not been implemented.

[jordesign]

Thanks for the clarification @carolinan - I'll leave this issue open 👍

[jordesign]

Closing this issue as a dupe of https://github.com/WordPress/gutenberg/issues/20213 - where there is more recent discussion (and a broader use-case)

[ndiego]

I just wanted to note that disabling H1 from the UI is now possible: https://github.com/WordPress/gutenberg/pull/63535

[tedw]

@ndiego Thanks so much for this! Love the solution 👍