Detect when gutenberg editor title is available in Dom after editor load

Question

I have some code I run inside the PrePublishCheckList block

const title =
        typeof coreEditorPostEditsTitle !== "undefined"
            ? coreEditorPostEditsTitle
            : select("core/editor").getCurrentPost().title;

    const [event, setEvent] = useState(2019);
    // todo:: Find a better way to hook after gutenberg loaded and .editor-post-title__input" is available in dom
    setTimeout(() => {
        const editorTitleElement = document.querySelector(
            ".editor-post-title__input"
        );

        if(
            typeof select("core/editor").loadedInit === "undefined" &&
            !title.length
        ) {
            pickDropdownNotice(title);
            // Open right sidebar
            dispatch("core/edit-post").openPublishSidebar();
            // Set default event loadFromApi(event, setEvent);

            select("core/editor").loadedInit = true;
        }

        if(title.length) {
            showEditorTitle(editorTitleElement);
        } else {
            hideEditorTitle(editorTitleElement);
        }
    }, 100);

const showEditorTitle = editorTitleElement => {
    editorTitleElement.style.display = "block";
    editorTitleElement.readOnly = true;
    editorTitleElement.style.background = "#eee";
    editorTitleElement.style.color = "#32373c";
};

const hideEditorTitle = editorTitleElement => {
    editorTitleElement.style.display = "none";
};

The code goal is to hide the title until event is selected from a dropdown in the PrePublishCheckList that updates the title of the post and saves a draft.

The code works fine, the only issue is I can find a build in hook to find out when the ".editor-post-title__input" element is available in dom. I know I can set a timeout that will check again and again until the element is visible in dom, but setTimeout feels like a hack.

Which other way can replace the setTimeout so the code inside the setTimeout will run only after the .editor-post-title__input" is in ready in Dom?

The error I get when I remove the setTimeout is in hideEditorTitle TypeError: Cannot read property 'style' of null on editorTitleElement.style.display = "none"; inside hideEditorTitle()

Answer 1

Adding inline CSS on an element with style=".." is bad practice, people say to use a CSS rule in a stylesheet instead, via a HTML class. So it doesn't make much sense to start styling things manually via javascript like that.

Instead, wouldn't it make more sense to add a stylesheet that hides the title, then shows it when a CSS class is added to the main editor tag? Then add the class when your event is selected from the dropdown?

Additionally, you shouldn't be doing this:

select("core/editor").loadedInit = true;

If you want to store data, there's the WP Data API for that, and other alternatives.

Also, don't use setTimeout, use the window._wpLoadBlockEditor promise to queue stuff up to run after the editor has been initialised instead, e.g.

window._wpLoadBlockEditor.then( function() {
    console.log( 'hooray!' );
});

If you do this though, make sure you correctly declare your scripts dependencies! If you don't declare them WordPress won't print out the script tags in the correct order and it might load before the _wpLoadBlockEditor variable has been set up.