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

by

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()

1 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!' );
});

Leave a Comment