Skip to content

Instantly share code, notes, and snippets.

@KevinBatdorf
Last active July 17, 2024 14:36
Show Gist options
  • Save KevinBatdorf/fca19e1f3b749b5c57db8158f4850eff to your computer and use it in GitHub Desktop.
Save KevinBatdorf/fca19e1f3b749b5c57db8158f4850eff to your computer and use it in GitHub Desktop.
WordPress check Gutenberg editor is ready
import { select, subscribe } from '@wordpress/data'
export function whenEditorIsReady() {
return new Promise((resolve) => {
const unsubscribe = subscribe(() => {
// This will trigger after the initial render blocking, before the window load event
// This seems currently more reliable than using __unstableIsEditorReady
if (select('core/editor').isCleanNewPost() || select('core/block-editor').getBlockCount() > 0) {
unsubscribe()
resolve()
}
})
})
}
@KevinBatdorf
Copy link
Author

@X-Raym instead of importing it just copy/paste the function at the start of the file.

@strarsis Thanks for that iframe code. I actually need to convert some cypress to use the upcoming iframe wrapper and I think I'll need just that.

@strarsis
Copy link

strarsis commented Feb 13, 2023

@X-Raym: Well, you can put that code just into a javascript file, together with the code that uses the function, and then enqueue it for editor.

const select = wp.data.select,
   subscribe = wp.data.subscribe;

function whenEditorIsReady() {
    return new Promise((resolve) => {
        const unsubscribe = subscribe(() => {
            // This will trigger after the initial render blocking, before the window load event
            // This seems currently more reliable than using __unstableIsEditorReady
            if (select('core/editor').isCleanNewPost() || select('core/block-editor').getBlockCount() > 0) {
                unsubscribe()
                resolve()
            }
        })
    })
}

async function getEditorIframe() {
  await whenEditorIsReady();

  const editorCanvasIframeElement = document.querySelector('[name="editor-canvas"]');

  return new Promise((resolve) => {
    if(!editorCanvasIframeElement.loading) {
      // somehow the iframe has already loaded,
      // skip waiting for onload event (won't be triggered)
      resolve(editorCanvasIframeElement);
    }

    editorCanvasIframeElement.onload = () => {
      resolve(editorCanvasIframeElement);
    };
  });
}


// Wait for editor iframe becoming available (and editor becoming ready)
await getEditorIframe();
// your code here, when editor became available

@X-Raym
Copy link

X-Raym commented Feb 14, 2023

@strarsis thx you very much for this more detailed code snippet!

It do return an error though:

```Uncaught SyntaxError: await is only valid in async functions, async generators and modules````

@X-Raym
Copy link

X-Raym commented Feb 14, 2023

Ok I had to replace the last async call with

(async() => {
    await getEditorIframe();
    MyFunction()
  })();

And also

document.querySelector('[name="editor-canvas"]');

by

document.querySelector('.edit-post-header-toolbar__left');

(cause the first one was undefined. I needed the toolbar anyway), cause I use this to print custom infos on the Gutenberg toolbar.

Seems to works with these fixes, many thx!

img

@strarsis
Copy link

🤔 In latest Gutenberg it appears that no iframe element is used anymore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment