Word Count Goal in the Block Editor

// Default goal shown for posts without one (0 to hide the bar).
$wpide_default_word_goal = 800;

add_action( 'init', function () {
    register_post_meta( 'post', '_wpide_word_goal', array(
        'type'              => 'integer',
        'single'            => true,
        'show_in_rest'      => true,
        'default'           => 0,
        'sanitize_callback' => 'absint',
        'auth_callback'     => function ( $allowed, $key, $post_id ) {
            return current_user_can( 'edit_post', $post_id );
        },
    ) );
} );

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

    wp_register_script( 'wpide-word-goal', false, array( 'wp-plugins', 'wp-element', 'wp-components', 'wp-data', 'wp-editor', 'wp-wordcount' ), '1.0', true );
    wp_enqueue_script( 'wpide-word-goal' );
    wp_add_inline_script( 'wpide-word-goal', 'var wpideDefaultGoal = ' . (int) $wpide_default_word_goal . ';' . <<<'JS'
( function ( wp ) {
    var el = wp.element.createElement;
    var Panel = ( wp.editor && wp.editor.PluginDocumentSettingPanel ) || ( wp.editPost && wp.editPost.PluginDocumentSettingPanel );
    if ( ! Panel ) { return; }

    function WordGoal() {
        var data = wp.data.useSelect( function ( select ) {
            var editor = select( 'core/editor' );
            return {
                goal: ( editor.getEditedPostAttribute( 'meta' ) || {} )._wpide_word_goal || 0,
                content: editor.getEditedPostAttribute( 'content' ) || ''
            };
        }, [] );
        var editPost = wp.data.useDispatch( 'core/editor' ).editPost;
        var goal = data.goal || wpideDefaultGoal;
        var words = wp.wordcount.count( data.content, 'words' );
        var pct = goal ? Math.min( 100, Math.round( words / goal * 100 ) ) : 0;

        return el( Panel, { name: 'wpide-word-goal', title: 'Word count goal' },
            el( wp.components.TextControl, {
                label: 'Target words',
                type: 'number',
                min: 0,
                value: data.goal || '',
                placeholder: String( wpideDefaultGoal ),
                onChange: function ( value ) { editPost( { meta: { _wpide_word_goal: parseInt( value, 10 ) || 0 } } ); }
            } ),
            goal ? el( 'p', null, words + ' of ' + goal + ' words (' + pct + '%)' ) : null,
            goal ? el( 'div', { style: { height: '8px', background: '#ddd', borderRadius: '4px' }, role: 'progressbar', 'aria-valuenow': pct, 'aria-valuemin': 0, 'aria-valuemax': 100 },
                el( 'div', { style: { height: '100%', width: pct + '%', background: pct >= 100 ? '#00a32a' : '#3858e9', borderRadius: '4px' } } )
            ) : null
        );
    }

    wp.plugins.registerPlugin( 'wpide-word-goal', { render: WordGoal } );
} )( window.wp );
JS
    );
} );