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

apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/edit.js

@@ -68,7 +68,7 @@ class PostContentEdit extends Component {
 					} ) }
 				>
 					<PostTitle />
-					{ showInnerBlocks && <InnerBlocks /> }
+					{ showInnerBlocks && <InnerBlocks templateLock={ false } /> }
 					{ showPlaceholder && (
 						<Placeholder
 							icon="layout"

apps/full-site-editing/full-site-editing-plugin/full-site-editing/class-full-site-editing.php

@@ -588,6 +588,7 @@ public function set_block_template( $editor_settings ) {
 				$template[] = fse_map_block_to_editor_template_setting( $block );
 			}
 			$editor_settings['template'] = $template;
+			$editor_settings['templateLock'] = 'all';
 		}
 		return $editor_settings;
 	}

apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/block-inserter/index.js

@@ -0,0 +1,39 @@
+/* global fullSiteEditing */
+
+/**
+ * External dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PostContentBlockAppender from './post-content-block-appender';
+
+/**
+ * Renders a custom block inserter that will append new blocks inside the post content block.
+ */
+function renderPostContentBlockInserter() {
+	if ( 'page' !== fullSiteEditing.editorPostType ) {
+		return;
+	}
+
+	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 );
+
+		render( <PostContentBlockAppender />, blockInserterContainer );
+	} );
+}
+
+domReady( () => renderPostContentBlockInserter() );

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 (
+		<Inserter rootClientId={ rootClientId } disabled={ ! showInserter } position="bottom right" />
+	);
+} );
+
+export default PostContentBlockAppender;

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';

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

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';

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 : ''
+				);
 			},
 		};
 	} )