Gutenberg: Add toggle to hide Post/Page Title

[melchoyce]

I know the_title() isn't a block yet, but it would still be great to have a toggle to turn it off on posts/pages — maybe even the whole header, in case there's also post meta.

Quick idea:

[melchoyce]

(We probably can't hide the title because then how do you unhide it? But something to ponder.)

[senadir]

will hiding it in the editor also hide it in the front-end?
how about the posts/pages list? what will be the post named? or is this just a visual enhancement inside the editor but doesn't effect the general flow?

[melchoyce]

It would hide it on the front-end of the page/post itself, nowhere else. It would really only act as art direction in the individual post/page context. (Honestly, we might even just want to keep the appearance as-is in the editor and only hide it on the front end.)

[senadir]

this seems a bit hard to interpolate into the frontend, since many themes uses the_title() in other places not just the post title, so it means introducing a new function all together, or new arguments to it? since you can't detect where the function is being called.

some uses for the_title() include homepage loop, sidebar loops, sometimes even in the title tag, the metadata, and many other places.

this seems like it would fit more as a theme feature and not directly from Gutenberg, at least till there is a much broader support for blocks in the frontend.

[paaljoachim]

Here are two issues I made some time ago:
"Disable/hide blocks?"
https://github.com/WordPress/gutenberg/issues/4573
and
"Hide a block from being previewed on the front end."
https://github.com/WordPress/gutenberg/issues/13373

To me the process seems like this:

1. Make title into a block (one can not remove but could be moved in the layout).
2. Add a new location for post title (likely top bar above layout) when title block is removed.
3. Default post title to top bar and have a post title block to add to the layout.

Adding in a few more associated issues:
"Expanding the Editor outside of post_content"
https://github.com/WordPress/gutenberg/issues/16281
"Add Block: Title"
https://github.com/WordPress/gutenberg/issues/11553

[phpbits]

I have this feature available on my EditorsKit Plugin and here's the preview on how my integration works. I hope this could help. Thanks!

https://twitter.com/phpbits/status/1133710787686494211

[senadir]

@phpbits how do you handle this on the frontend?

[phpbits]

@senadir I'm using the_title filter and returning nothing whenever user use the Title Toggle. I'm also adding editorskit-title-hidden body class in order for them to add custom CSS to hide meta and other elements.

[senadir]

@phpbits how do you handle other uses for the_title when it's needed? say for example on the homepage loop?

[karmatosed]

I wonder if it's not a document setting as opposed to having to fake a block?

[karmatosed]

I sketched a little mock what this could look like on the document itself.

[nickcernis]

@karmatosed Should there be a hide title checkbox in the Document sidebar? I didn't see one or otherwise understand how the title would be hidden based on the mockup in https://github.com/WordPress/gutenberg/issues/16776#issuecomment-526849730.

[karmatosed]

Ah eep @nickcernis, I had uploaded wrong image and thank you for spotting that! All fixed now.

[simison]

Once the title is hidden in the content area, it could still show up in the document sidebar where folks could still modify it?

[mapk]

Ideally, a piece of content is a block. A block can be added or removed from any post/page. If there is information necessary for the post/page to exist, that information should reside in the Document settings sidebar.

Because there are explorations around a Title block happening, I'd like to close this issue.

[dogooddesignco]

For now I'm using this code (with ACF). It just immediately removes the element from the DOM. I'm only interested in this if it's a page, hence the is_page() check.

function dogooddesign_remove_post_title( $title, $id = null ) {
    if ( is_page() && is_singular() ) {
        $title = ( get_field( 'hide_title' ) ) ?
            '<script type="text/javascript">
                const postTitle = document.querySelector(".wp-block-post-title").remove();
                postTitle.parentNode.removeChild(postTitle);
                </script>'
            : $title;
    }

    return $title;
}
add_filter( 'the_title', 'dogooddesign_remove_post_title', 10, 2 );