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;