0

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

5

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.

9
  • Great suggestion, the hook worked! Can you please refer me to docs/examples about "WP Data API for that, and other alternatives"? I was looking into this but wasn't sure was is the correct approach. Basically I want to show a notice only once to choose item from the dropdown to create post this is why is used select("core/editor").loadedInit = true
    – BenB
    Commented Mar 9, 2020 at 19:57
  • The gutenberg gh repo has documentation in the data package, and there's the official docs/official handbook at developer.wordpress.org. You shouldn't take random APIs and just attach variables to them, I'd also be wary of making these kinds of changes to the editor UI if it can't be done using React components and a dedicated API, chances are it will break either with the html class changing or because of future changes to the editor
    – Tom J Nowell
    Commented Mar 9, 2020 at 20:02
  • Seems like there is no build in way to set the title to be readonly. wordpress.stackexchange.com/questions/329457/…
    – BenB
    Commented Mar 9, 2020 at 22:45
  • If you know about a approach to do this in a build way I would like to hear. I looked at the components files, there do seem to accept any args for attr
    – BenB
    Commented Mar 9, 2020 at 22:47
  • 1
    if you aren't declaring any dependencies for your script then WP might load it before those variables are ready to be used. Likewise the code will trigger that error if used on a page that isn't a block editor
    – Tom J Nowell
    Commented Nov 21, 2023 at 13:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.