Add H1 in title toolbar

[wdburgdorf]

H1 for me is the most commonly used title tag, and it is still missing in the title toolbar.
There is this closed issue: Allow h1 #4234

Yes, H1 can be selected in the sidebar, but the sidebar is often hidden and especially unexperienced users won't find it.

Is your feature request related to a problem? Please describe.
Yes, it is a problem. I had to google to figure it out, and it will create lots of support requests from clients.

Describe the solution you'd like
simply add H1 to the toolbar - seems like a no-brainer to me - why has it been ommitted in the first place?

Describe alternatives you've considered
none.

[swissspidy]

The H1 heading was moved to the sidebar on purpose in order to de-emphasise it.

There should only be one H1 heading on every page for usability, accessibility, and SEO reasons. https://yoast.com/headings-use/ has a good explanation on the matter. https://core.trac.wordpress.org/ticket/38049 also has some very detailed explanations about this.

[wdburgdorf]

Yes, of course there should be only one, and also at least one. H1 is the one heading that should be on every page. Why make it hard to add it?
There may be themes and settings where H1 is added automatically from the page title. If the H1 button was only removed for those, ok, but on my sites I usually add H1 titles manually, or ask clients to do it.
So please, at least make the button optional.

[jorgefilipecosta]

Hi @lausianne,
In cases where there is a need to add H1 the title is explicitly not used, right?
One option would be to allow h1 to be emphasized if the title was disabled in a given post type. Would this fit your use case?

[aristath]

The "only 1 H1 per-page" rule no longer applies. Most of us still follow that rule and consider it best-practice, but it's really not. For reference this video from the Google Webmasters channel is plain and simple.
Keeping H1 relatively hidden in the sidebar is someone's opinion of best practices, but it's still just an opinion, nothing more than that. It shouldn't be like that (and that of course is just my personal opinion)

[wdburgdorf]

Hi @jorgefilipecosta,
How would the editor know if the title is disabled? It could be removed in the theme (in my current case). Or some plugin could mess with titles. I'd like to have a choice about the formatting of my content (or the client over their content). There are cases where the displayed title needs to be different from the title entered in the page title field.
Whether one H1 is a rule or not, I don't like the editor to interfere with my practices in such a way.

[youknowriad]

This has been discussed several times. There are arguments for and against it and a decision has been made. We can always change in the future but for the moment the consensus among the contributors is to deemphasize it. I'm going to close for now. We can reconsider once there's evidence that the consensus among the a11y and development teams has changed.

[MaximOrlovsky]

@youknowriad What about an option to allow H1 in Gutenberg? In code or on settings page?

It could be turned off by default, so it will not harm anyone.

[youknowriad]

@MaximOrlovsky H1 is already allowed in Gutenberg, you have to apply from the sidebar though.

[wdburgdorf]

I assume @MaximOrlovsky means an option to allow H1 in the main editor.
+1 from me, of course ...

[farmerpaul]

Here's how I added an H1 button to the block toolbar of the core Heading block. It's not in the dropdown along with the other headings, but it's pretty visible right beside it, and it works! Hope this helps someone else out.

/* =============================================================================
Allow <h1> as an option in the heading block's toolbar.
============================================================================= */

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { BlockControls } = wp.editor;
const { ToolbarButton, Path, SVG } = wp.components;

const addH1 = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        // Only apply this change to the core Heading block; leave other blocks alone.
        if ( 'core/heading' !== props.name ) {
            return <BlockEdit { ...props } />;
        }

        const { attributes, setAttributes } = props;
        const { level } = attributes;

        // Use the H1 icon extracted from Heading block code.
        const icon = (
            <SVG
                width="20"
                height="20"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
                isPressed={ level === 1 }
            >
                <Path d="M9 5h2v10H9v-4H5v4H3V5h2v4h4V5zm6.6 0c-.6.9-1.5 1.7-2.6 2v1h2v7h2V5h-1.4z" />
            </SVG>
        );

        // Prepend the new toolbar button before other block controls.
        return (
            <Fragment>
                <BlockControls>
                    <ToolbarButton
                        icon={ icon }
                        title="H1"
                        onClick={ () => setAttributes( { level: 1 } ) }
                        isActive={ level === 1 }
                        containerClassName="components-toolbar"
                    />
                </BlockControls>
                <BlockEdit { ...props } />
            </Fragment>
        );
    };
}, 'addH1' );

wp.hooks.addFilter( 'editor.BlockEdit', 'myprefix/core-heading', addH1 );