Gutenberg - Title field required

Question

I'm trying to make the title field required in Gutenberg editor interface.

The PHP functions I found work with Classic editor interface but not with Gutenberg.

I tried to add required attribute on the textarea field (title) with jQuery but I can still validate the publication of my post.

<?php  
function wp_required_title_field() {
    ?>
    <script type="text/javascript">
        jQuery(window).load(function() {
            jQuery('.editor-post-title textarea').prop('required',true);
        });
    </script>
    <?php
}

add_action ('in_admin_footer' , 'wp_required_title_field');
?>

I tried another way too :

<?php  
function force_post_title() {
    ?>
    <script type="text/javascript">
        jQuery(window).load(function() {
            jQuery('.editor-post-publish-button__button').click(function(){
              var testervar = jQuery('.editor-post-title').find('.editor-post-title__input');
              if (testervar.val().length < 1) {
                  jQuery('.editor-post-title').css('border', '1px solid red');
                  $( '.editor-post-title' ).after('<label>Post title is required</label>'); // Make it red according your requirement
                  return false;
              }
          });
        });
    </script>
    <?php
}

add_action('edit_form_advanced', 'force_post_title');
add_action('edit_page_form', 'force_post_title');
?>

Do you have any idea please ?

Answer 1

You could use PluginPrePublishPanel to check for the title and lock publishing if it's empty. Have a look at the accepted answer here for an example of locking the post - Add pre-publish conditions to the block editor

For your example you could modify the checking portion as follows:

const { registerPlugin } = wp.plugins;
const { PluginPrePublishPanel } = wp.editPost;
const { select, dispatch } = wp.data;
const { count } = wp.wordcount;
const { serialize } = wp.blocks;
const { PanelBody } = wp.components;

const PrePublishCheckList = () => {
    let lockPost = false;
    let message = '';

    // Get title 
    const postTitle = select( 'core/editor' ).getEditedPostAttribute( 'title' );
    if ( postTitle === '' ) {
        lockPost = true;
        message = 'Post Title is required!';
    }


    // Do we need to lock the post?
    if ( lockPost === true ) {
         dispatch( 'core/editor' ).lockPostSaving();
    } else {
         dispatch( 'core/editor' ).unlockPostSaving();
    }
    return (
        <PluginPrePublishPanel title={ 'Publish Checklist' }>
            <p>{message}</p>
        </PluginPrePublishPanel>
    )
};

registerPlugin( 'pre-publish-checklist', { render: PrePublishCheckList } 

Hope this helps!