From 18e0409c61c6bd0e391cac398d10b2c77bf21df2 Mon Sep 17 00:00:00 2001 From: Miguel Torres Date: Tue, 9 Jul 2019 18:48:41 +0900 Subject: [PATCH] FSE: Append new blocks inside post content block (#34425) This PR replaces the block inserter in the header toolbar with a custom one that ensures that new blocks are appended inside the post content block. Since the default inserter in the header toolbar rendered by Gutenberg doesn't set any rootClientId, we cannot define which block should contain any new inserted block. This PR aims to solve that by rendering a replica of the same header inserter but using the client id of the post content block as rootClientId. The same client id is also used now when inserting a starter page template to avoid that content being appended after the footer (#34330). In order to don't display the default header inserter, we lock the template making impossible to insert new blocks in the root (thus the header doesn't show the default block inserter). But this also prevents the user from removing existing blocks, which solves the issue of having the post content block removable (#34331). --- .../blocks/post-content/edit.js | 2 +- .../class-full-site-editing.php | 1 + .../editor/block-inserter/index.js | 39 +++++++++++++++++++ .../post-content-block-appender.js | 26 +++++++++++++ .../full-site-editing/editor/index.js | 5 +++ .../template-validity-override/index.js | 25 ++++++++++++ .../full-site-editing/index.js | 1 + .../page-template-modal/index.js | 10 ++++- 8 files changed, 107 insertions(+), 2 deletions(-) create mode 100644 apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/block-inserter/index.js create mode 100644 apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/block-inserter/post-content-block-appender.js create mode 100644 apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/index.js create mode 100644 apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/template-validity-override/index.js diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/edit.js b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/edit.js index 2573e27277f1f..64e8f742b1aa8 100644 --- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/edit.js +++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/edit.js @@ -68,7 +68,7 @@ class PostContentEdit extends Component { } ) } > - { showInnerBlocks && } + { showInnerBlocks && } { showPlaceholder && ( { + 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 ); + + 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 0000000000000..08feb1984129c --- /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; diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/index.js b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/index.js new file mode 100644 index 0000000000000..1be1deee235ca --- /dev/null +++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/index.js @@ -0,0 +1,5 @@ +/** + * Internal dependencies + */ +import './block-inserter'; +import './template-validity-override'; diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/template-validity-override/index.js b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/template-validity-override/index.js new file mode 100644 index 0000000000000..f66c1d3bbe29d --- /dev/null +++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/template-validity-override/index.js @@ -0,0 +1,25 @@ +/* global fullSiteEditing */ + +/** + * External dependencies + */ +import domReady from '@wordpress/dom-ready'; +import { dispatch } from '@wordpress/data'; + +/** + * Forces the template validity. + * + * This is a work-around for the existing core issue that is showing a template mismatch warning when there is a parent + * block with a locked template containing a nested InnerBlocks with an unlocked template. + * + * @see https://github.com/WordPress/gutenberg/issues/11681 + */ +function resetTemplateValidity() { + if ( 'page' !== fullSiteEditing.editorPostType ) { + return; + } + + dispatch( 'core/editor' ).setTemplateValidity( true ); +} + +domReady( () => resetTemplateValidity() ); diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/index.js b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/index.js index 7377294fe3e2a..f423cad59014c 100644 --- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/index.js +++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/index.js @@ -10,3 +10,4 @@ import './blocks/site-logo'; import './plugins/template-selector-sidebar'; import './plugins/close-button-override'; import './plugins/template-update-confirmation'; +import './editor'; diff --git a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/index.js b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/index.js index 11a9fd68874f7..09b4e21a374fc 100644 --- a/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/index.js +++ b/apps/full-site-editing/full-site-editing-plugin/starter-page-templates/page-template-modal/index.js @@ -111,6 +111,9 @@ class PageTemplateModal extends Component { const PageTemplatesPlugin = compose( withSelect( select => ( { getMeta: () => select( 'core/editor' ).getEditedPostAttribute( 'meta' ), + postContentBlock: select( 'core/editor' ) + .getBlocks() + .find( block => block.name === 'a8c/post-content' ), } ) ), withDispatch( ( dispatch, ownProps ) => { // Disable tips right away as the collide with the modal window. @@ -135,8 +138,13 @@ const PageTemplatesPlugin = compose( } ); // Insert blocks. + const postContentBlock = ownProps.postContentBlock; const blocks = parseBlocks( template.content ); - editorDispatcher.insertBlocks( blocks ); + editorDispatcher.insertBlocks( + blocks, + 0, + postContentBlock ? postContentBlock.clientId : '' + ); }, }; } )