How to add a css class to postTitleWrapper in Gutenberg?

Question

while working with react/JS is slowly getting easier, at times I'm still surprised why things don't work as I expect them to. Here, I'm trying to add a class to the '.edit-post-visual-editor__post-title-wrapper'-div and I'm using the below code in a JS file that is apparently correctly enqueued. When I inspect the page I see the element, it contains the post title. Yet somehow the console always tells me postTitleWrapper is null. What am I doing wrong here? Thanks for any help!

wp.domReady(function() {
    const postTitleWrapper = document.querySelector('.edit-post-visual-editor__post-title-wrapper');
    console.log(postTitleWrapper);
    if (postTitleWrapper) {
        postTitleWrapper.classList.add('something');
    }
});

Answer 1

It's probably related to how you're loading that JS file, which causes it to run before the element is available (despite domReady).

You didn't show how you're loading the file etc, but your code works for me in a standard Gutenberg block edit.js:

export default function Edit() {
    domReady( function () {
        const postTitleWrapper = document.querySelector(
            '.edit-post-visual-editor__post-title-wrapper'
        );

        console.log( postTitleWrapper );

        if ( postTitleWrapper ) {
            postTitleWrapper.classList.add( 'something' );
        }
    } );

    return (
        <div>
            hello world
        </div>
    );
}

It also works in a Gutenberg plugin like this:

php

add_action( 'enqueue_block_editor_assets', 'enqueue_my_script' );

function enqueue_my_script() {
    wp_enqueue_script(
        'postTitleWrapperClass',
        trailingslashit( plugin_dir_url( __FILE__ ) ) . 'post-title-wrapper-class.js',
        array( 'wp-dom' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'post-title-wrapper-class.js' ),
        true
    );
}

js

const PostTitleClassWrapper = () => {
    wp.domReady(function() {
        const postTitleWrapper = document.querySelector('.edit-post-visual-editor__post-title-wrapper');

        console.log(postTitleWrapper);

        if (postTitleWrapper) {
            postTitleWrapper.classList.add('something');
        }
    });
};

wp.plugins.registerPlugin( 'post-title-class-wrapper', {
    render: PostTitleClassWrapper,
    icon: null,
} );