Title Length Meter in the Block Editor

// Ideal and maximum title lengths in characters.
$wpide_title_ideal = 55;
$wpide_title_max   = 65;

add_action( 'enqueue_block_editor_assets', function () use ( $wpide_title_ideal, $wpide_title_max ) {
    $screen = get_current_screen();
    if ( ! $screen || 'post' !== $screen->base ) {
        return;
    }

    wp_register_script( 'wpide-title-meter', false, array( 'wp-plugins', 'wp-element', 'wp-data', 'wp-editor' ), '1.0', true );
    wp_enqueue_script( 'wpide-title-meter' );
    wp_add_inline_script( 'wpide-title-meter', sprintf( 'var wpideTitleLimits = { ideal: %d, max: %d };', $wpide_title_ideal, $wpide_title_max ) . <<<'JS'
( function ( wp ) {
    var el = wp.element.createElement;
    var Panel = ( wp.editor && wp.editor.PluginPostStatusInfo ) || ( wp.editPost && wp.editPost.PluginPostStatusInfo );
    if ( ! Panel ) { return; }

    function TitleMeter() {
        var title = wp.data.useSelect( function ( select ) { return select( 'core/editor' ).getEditedPostAttribute( 'title' ) || ''; }, [] );
        var length = title.length;
        var color = length === 0 ? '#757575' : ( length <= wpideTitleLimits.ideal ? '#00a32a' : ( length <= wpideTitleLimits.max ? '#dba617' : '#d63638' ) );
        var width = Math.min( 100, Math.round( length / wpideTitleLimits.max * 100 ) );

        return el( Panel, { className: 'wpide-title-meter' },
            el( 'div', { style: { width: '100%' } },
                el( 'div', { style: { display: 'flex', justifyContent: 'space-between' } }, el( 'span', null, 'Title length' ), el( 'strong', { style: { color: color } }, length + ' / ' + wpideTitleLimits.max ) ),
                el( 'div', { style: { height: '4px', background: '#ddd', borderRadius: '2px', marginTop: '4px' }, 'aria-hidden': 'true' },
                    el( 'div', { style: { height: '100%', width: width + '%', background: color, borderRadius: '2px' } } )
                )
            )
        );
    }

    wp.plugins.registerPlugin( 'wpide-title-meter', { render: TitleMeter } );
} )( window.wp );
JS
    );
} );