jquery - Gutenberg - Title field required

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 ?

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 ?

• jquery
• block-editor
• title

Share Improve this question asked May 27, 2020 at 10:02 JandonJandon 14711 silver badge99 bronze badges 4

• I don't have a solution for you, but I guarantee it's not using jQuery. The new editor is a React application, so you shouldn't be modifying it using jQuery like this. You're likely to just break the whole thing because the HTML of the editor needs to match the internal state of the application, and adding markup with jQuery could mess with that. – Jacob Peattie Commented May 27, 2020 at 10:32
• Thank you. I thought to use ACF field required too. Do you think I can change the permalink title with this ACF field ? – Jandon Commented May 27, 2020 at 10:37
• Nothing in your question mentions permalinks. What are you actually trying to do here? – Jacob Peattie Commented May 27, 2020 at 11:39
• If I wanted the title field to be mandatory it was to be sure to have a correct permalink. This is for a project with students. Avoid "untitled" page title in post list and avoid WordPress to use a number in permalink. I did not want to complicate the question. From the moment when the title field was required the other problems were solved – Jandon Commented May 27, 2020 at 12:07

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

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 } = wpponents;

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!