Gutenberg: Allow h1

[benoitchantre]

When a theme doesn't use the post title as H1, users should be able to select H1 within the heading block.

Ideally, when the theme uses the post title as H1, users should not be able to select H1 within the heading block.

Tested on Gutenberg 1.9.1

[youknowriad]

Is it possible to know if a theme uses H1 for titles? I don't think so unless I'm missing some API. This could also change per CPT, per custom template etc.

The heading block allows users to use H1 already but it's not available on the block's toolbar because that's not something common, it's available in the block inspector.

[benoitchantre]

The heading block allows users to use H1 already but it's not available on the block's toolbar because that's not something common, it's available in the block inspector.

I hadn’t seen that, thanks. I think this issue can be closed.

[davidchoy]

It's fine that there is a default, but h1 should be able to be easily added to the inline heading block control, in code or otherwise. (Same deal with removing the drop cap option; many designs do not need drop caps.)

Also see https://www.youtube.com/watch?v=WsgrSxCmMbM

[zakalwe2016]

I want to second this. I would like to see all elements of a page included in Gutenberg. I know there is some work done to bring sidebars and widgets into the Gutenberg world. The title tag (and category and tag information etc) seem to to be anomalies. Currently, to display a block above the title (for example to use as a banner image) we have to employ some "hackish behaviour" (see this solution). If we want to restrict a user having more than one h1 per page via Gutenberg, it may be an idea to have a a block that handles what the title area normally does (i.e. display title, date, category, tag, author etc). It would allow for more flexible layouts to be handled as opposed to having to employ "work arounds" which is what I feel we have to do now. I would also argue (potentially controversially!!) that is not the remit of Gutenberg to dictate what a user should and should not do - essentially it's up to them. Gutenberg should be about enabling choices - whether a user makes the right choice is up to them.

[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 (I don't think we're supposed to easily be able to change that for some reason), 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 );