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

2

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!' );
});
| improve this answer | |
  • 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 Mar 9 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 Mar 9 at 20:02
  • Seems like there is no build in way to set the title to be readonly. wordpress.stackexchange.com/questions/329457/… – BenB Mar 9 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 Mar 9 at 22:47
  • Ah you never mentioned that you were wanting a read only title, you should have asked about that. It appears your question was an X Y question – Tom J Nowell Mar 9 at 23:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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