Ensure the header toolbar is rendered and move appender to separate file

Automattic · Jul 6, 2019 · d9ca5b8 · d9ca5b8
1 parent 270e521
commit d9ca5b8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 26 deletions.
diff --git a/...ll-site-editing/full-site-editing-plugin/full-site-editing/editor/block-inserter/index.js b/...ll-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 (
-		<Inserter rootClientId={ rootClientId } disabled={ ! showInserter } position="bottom right" />
-	);
-} );
+
+/**
+ * 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( <PostContentBlockAppender />, blockInserterContainer );
+		render( <PostContentBlockAppender />, blockInserterContainer );
+	} );
 }
 
 domReady( () => renderPostContentBlockInserter() );
diff --git a/...ite-editing-plugin/full-site-editing/editor/block-inserter/post-content-block-appender.js b/...ite-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 (
+		<Inserter rootClientId={ rootClientId } disabled={ ! showInserter } position="bottom right" />
+	);
+} );
+
+export default PostContentBlockAppender;