diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/block-inserter/index.js b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/block-inserter/index.js
index a36f2a5f730048..0aed4d65c72c2f 100644
--- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/block-inserter/index.js
+++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/block-inserter/index.js
@@ -5,27 +5,11 @@
*/
import domReady from '@wordpress/dom-ready';
import { render } from '@wordpress/element';
-import { Inserter } from '@wordpress/editor';
-import { compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
-
-const PostContentBlockAppender = compose(
- withSelect( select => {
- const { getBlocks, getEditorSettings } = select( 'core/editor' );
- const { getEditorMode } = select( 'core/edit-post' );
-
- const postContentBlock = getBlocks().find( block => block.name === 'a8c/post-content' );
-
- return {
- rootClientId: postContentBlock ? postContentBlock.clientId : '',
- showInserter: getEditorMode() === 'visual' && getEditorSettings().richEditingEnabled,
- };
- } )
-)( ( { rootClientId, showInserter } ) => {
- return (
-
- );
-} );
+
+/**
+ * Internal dependencies
+ */
+import PostContentBlockAppender from './post-content-block-appender';
/**
* Renders a custom block inserter that will append new blocks inside the post content block.
@@ -35,13 +19,21 @@ function renderPostContentBlockInserter() {
return;
}
- const headerToolbar = document.querySelector( '.edit-post-header-toolbar' );
- const blockInserterContainer = document.createElement( 'div' );
- blockInserterContainer.classList.add( 'fse-post-content-block-inserter' );
+ const editPostHeaderToolbarInception = setInterval( () => {
+ const headerToolbar = document.querySelector( '.edit-post-header-toolbar' );
+
+ if ( ! headerToolbar ) {
+ return;
+ }
+ clearInterval( editPostHeaderToolbarInception );
+
+ const blockInserterContainer = document.createElement( 'div' );
+ blockInserterContainer.classList.add( 'fse-post-content-block-inserter' );
- headerToolbar.insertBefore( blockInserterContainer, headerToolbar.firstChild );
+ headerToolbar.insertBefore( blockInserterContainer, headerToolbar.firstChild );
- render( , blockInserterContainer );
+ render( , blockInserterContainer );
+ } );
}
domReady( () => renderPostContentBlockInserter() );
diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/block-inserter/post-content-block-appender.js b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/block-inserter/post-content-block-appender.js
new file mode 100644
index 00000000000000..08feb1984129ca
--- /dev/null
+++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/block-inserter/post-content-block-appender.js
@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { Inserter } from '@wordpress/editor';
+import { compose } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
+
+const PostContentBlockAppender = compose(
+ withSelect( select => {
+ const { getBlocks, getEditorSettings } = select( 'core/editor' );
+ const { getEditorMode } = select( 'core/edit-post' );
+
+ const postContentBlock = getBlocks().find( block => block.name === 'a8c/post-content' );
+
+ return {
+ rootClientId: postContentBlock ? postContentBlock.clientId : '',
+ showInserter: getEditorMode() === 'visual' && getEditorSettings().richEditingEnabled,
+ };
+ } )
+)( ( { rootClientId, showInserter } ) => {
+ return (
+
+ );
+} );
+
+export default PostContentBlockAppender;