Merge pull request #35115 from Automattic/fix/remove-template-block-c…

…ontrols

FSE: Remove template block settings and UI

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

@@ -15,12 +15,13 @@ import save from './save';
 import './style.scss';
 
 registerBlockType( 'a8c/post-content', {
-	title: __( 'Content Slot' ),
-	description: __( 'Placeholder for a post or a page.' ),
+	title: __( 'Content' ),
+	description: __( 'The page content.' ),
 	icon: 'layout',
 	category: 'layout',
 	supports: {
-		anchor: true,
+		anchor: false,
+		customClassName: false,
 		html: false,
 		multiple: false,
 		reusable: false,

apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/style.scss

@@ -37,31 +37,29 @@
 /* Hide the content slot block UI */
 .block-editor-block-list__layout {
 	.post-content__block {
-		> .block-editor-block-list__block-edit {
-			&::before {
-				transition: none;
-			}
-
-			> .block-editor-block-list__breadcrumb {
-				display: none;
-			}
-		}
-
 		&.is-selected {
-			> .block-editor-block-list__block-edit::before {
-				border: none;
-				box-shadow: none;
-			}
-
 			.block-editor-block-contextual-toolbar {
 				display: none;
 			}
 		}
 
-		&.is-hovered {
-			> .block-editor-block-list__block-edit::before {
-				border: none;
-				box-shadow: none;
+		&.block-editor-block-list__block {
+			// Need to get super specific to override the core css selectors:
+			&,
+			&.has-child-selected,
+			&.is-navigate-mode,
+			&.is-hovered {
+				> .block-editor-block-list__block-edit {
+					&::before {
+						transition: none;
+						border: none;
+						outline: none;
+						box-shadow: none;
+					}
+					> .block-editor-block-list__breadcrumb {
+						display: none;
+					}
+				}
 			}
 		}
 	}

apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/index.js

@@ -4,6 +4,8 @@
  */
 import { registerBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -19,7 +21,8 @@ if ( 'wp_template' !== fullSiteEditing.editorPostType ) {
 		category: 'layout',
 		attributes: { templateId: { type: 'number' } },
 		supports: {
-			anchor: true,
+			anchor: false,
+			customClassName: true, // Needed to support the classname we inject
 			html: false,
 			reusable: false,
 		},
@@ -30,3 +33,15 @@ if ( 'wp_template' !== fullSiteEditing.editorPostType ) {
 		},
 	} );
 }
+
+const addFSETemplateClassname = createHigherOrderComponent( BlockListBlock => {
+	return props => {
+		if ( props.name !== 'a8c/template' ) {
+			return <BlockListBlock { ...props } />;
+		}
+
+		return <BlockListBlock { ...props } className="template__block-container" />;
+	};
+}, 'addFSETemplateClassname' );
+
+addFilter( 'editor.BlockListBlock', 'full-site-editing/blocks/template', addFSETemplateClassname );

apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/style.scss

@@ -44,3 +44,34 @@
 		color: white;
 	}
 }
+
+/* Hide the content slot block UI */
+.block-editor-block-list__layout {
+	.template__block-container {
+		&.is-selected {
+			.block-editor-block-contextual-toolbar {
+				display: none;
+			}
+		}
+
+		&.block-editor-block-list__block {
+			// Need to get super specific to override the core css selectors:
+			&,
+			&.has-child-selected,
+			&.is-navigate-mode,
+			&.is-hovered {
+				> .block-editor-block-list__block-edit {
+					&::before {
+						transition: none;
+						border: none;
+						outline: none;
+						box-shadow: none;
+					}
+					> .block-editor-block-list__breadcrumb {
+						display: none;
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,33 @@
+/* global fullSiteEditing */
+
+/**
+ * External dependencies
+ */
+import { select, dispatch, subscribe } from '@wordpress/data';
+import { get } from 'lodash';
+
+/**
+ * Removes the block settings panel if the template or post content blocks are selected.
+ * Since it is not possible to disable the block settings entirely through Gutenberg state,
+ * we use a hack to deselect the block, which removes the option to change its settings.
+ * This is also done officially in the core PostTitle block, so there is prior art.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/post-title/index.js
+ */
+const unsubscribe = subscribe( () => {
+	// We don't care about this on the template or post editor
+	if ( 'page' !== fullSiteEditing.editorPostType ) {
+		return unsubscribe();
+	}
+
+	// Determine which block we have selected:
+	const selectedBlock = select( 'core/editor' ).getSelectedBlock();
+	const blockName = get( selectedBlock, 'name', null );
+
+	// If we have selected a template block, deselect it.
+	// Note: this does not work for post content because you can't
+	// edit inner blocks if the outer block is deselected.
+	if ( 'a8c/template' === blockName ) {
+		dispatch( 'core/block-editor' ).clearSelectedBlock( blockName );
+	}
+} );

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

@@ -4,4 +4,5 @@
 import './block-inserter';
 import './template-validity-override';
 import './image-block-keywords';
+import './disable-block-settings';
 import './style.scss';