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