WordPress check Gutenberg editor is ready

gutenberg-helpers.js

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

@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.

@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

@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````

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!

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