Prevent nested containers with content role from showing inserter in write mode (#71232)

tellthemachines · Mamaduka · jeryj · web-flow · commit a040815100d6 · 2025-09-01T10:58:55.000+10:00
Co-authored-by: tellthemachines &lt;isabel_brison@git.wordpress.org&gt;
Co-authored-by: Mamaduka &lt;mamaduka@git.wordpress.org&gt;
Co-authored-by: jeryj &lt;jeryj@git.wordpress.org&gt;
Co-authored-by: andrewserong &lt;andrewserong@git.wordpress.org&gt;
Co-authored-by: talldan &lt;talldanwp@git.wordpress.org&gt;
diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js
@@ -43,7 +43,12 @@ export default function BlockActions( {
 
 			return {
 				canRemove: canRemoveBlocks( clientIds ),
-				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
+				canInsertBlock: blocks.every( ( block ) => {
+					return (
+						( canInsertDefaultBlock || !! directInsertBlock ) &&
+						canInsertBlockType( block.name, rootClientId )
+					);
+				} ),
 				canCopyStyles: blocks.every( ( block ) => {
 					return (
 						!! block &&
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { createSelector, createRegistrySelector } from '@wordpress/data';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -33,6 +34,8 @@ import {
 	sectionRootClientIdKey,
 } from './private-keys';
 
+const { isContentBlock } = unlock( blocksPrivateApis );
+
 export { getBlockSettings } from './get-block-settings';
 
 /**
@@ -81,6 +84,32 @@ export const isBlockSubtreeDisabled = ( state, clientId ) => {
 	return getBlockOrder( state, clientId ).every( isChildSubtreeDisabled );
 };
 
+/**
+ * Determines if a container (clientId) allows insertion of blocks, considering contentOnly mode restrictions.
+ *
+ * @param {Object} state        Editor state.
+ * @param {string} blockName    The block name to insert.
+ * @param {string} rootClientId The client ID of the root container block.
+ * @return {boolean} Whether the container allows insertion.
+ */
+export function isContainerInsertableToInWriteMode(
+	state,
+	blockName,
+	rootClientId
+) {
+	const isBlockContentBlock = isContentBlock( blockName );
+	const rootBlockName = getBlockName( state, rootClientId );
+	const isContainerContentBlock = isContentBlock( rootBlockName );
+	const isRootBlockMain = getSectionRootClientId( state ) === rootClientId;
+
+	// In write mode, containers shouldn't be inserted into unless:
+	// 1. they are a section root;
+	// 2. they are a content block and the block to be inserted is also content.
+	return (
+		isRootBlockMain || ( isContainerContentBlock && isBlockContentBlock )
+	);
+}
+
 function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
 	const blockOrder = getBlockOrder( state, rootClientId );
 	const result = [];
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -9,6 +9,7 @@ import {
 	getPossibleBlockTransformations,
 	switchToBlockType,
 	store as blocksStore,
+	privateApis as blocksPrivateApis,
 } from '@wordpress/blocks';
 import { Platform } from '@wordpress/element';
 import { applyFilters } from '@wordpress/hooks';
@@ -42,8 +43,11 @@ import {
 	isSectionBlock,
 	getParentSectionBlock,
 	isZoomOut,
+	isContainerInsertableToInWriteMode,
 } from './private-selectors';
 
+const { isContentBlock } = unlock( blocksPrivateApis );
+
 /**
  * A block selection object.
  *
@@ -1682,13 +1686,16 @@ const canInsertBlockTypeUnmemoized = (
 	if ( isLocked ) {
 		return false;
 	}
-
-	const _isSectionBlock = !! isSectionBlock( state, rootClientId );
-	if ( _isSectionBlock ) {
+	const isContentRoleBlock = isContentBlock( blockName );
+	const isParentSectionBlock = !! isSectionBlock( state, rootClientId );
+	// It shouldn't be possible to insert inside a section block unless in
+	// some cases when the block is a content block.
+	if ( isParentSectionBlock && ! isContentRoleBlock ) {
 		return false;
 	}
 
-	if ( getBlockEditingMode( state, rootClientId ?? '' ) === 'disabled' ) {
+	const blockEditingMode = getBlockEditingMode( state, rootClientId ?? '' );
+	if ( blockEditingMode === 'disabled' ) {
 		return false;
 	}
 
@@ -1700,11 +1707,22 @@ const canInsertBlockTypeUnmemoized = (
 		return false;
 	}
 
+	// In write mode, check if this container allows insertion.
+	if (
+		blockEditingMode === 'contentOnly' &&
+		isNavigationMode( state ) &&
+		! isContainerInsertableToInWriteMode( state, blockName, rootClientId )
+	) {
+		return false;
+	}
+
 	const parentName = getBlockName( state, rootClientId );
+
 	const parentBlockType = getBlockType( parentName );
 
 	// Look at the `blockType.allowedBlocks` field to determine whether this is an allowed child block.
 	const parentAllowedChildBlocks = parentBlockType?.allowedBlocks;
+
 	let hasParentAllowedBlock = checkAllowList(
 		parentAllowedChildBlocks,
 		blockName
@@ -1842,11 +1860,29 @@ export function canRemoveBlock( state, clientId ) {
 	}
 
 	const isBlockWithinSection = !! getParentSectionBlock( state, clientId );
-	if ( isBlockWithinSection ) {
+	const isContentRoleBlock = isContentBlock(
+		getBlockName( state, clientId )
+	);
+	if ( isBlockWithinSection && ! isContentRoleBlock ) {
 		return false;
 	}
 
-	return getBlockEditingMode( state, rootClientId ) !== 'disabled';
+	const blockEditingMode = getBlockEditingMode( state, rootClientId );
+
+	// Check if the parent container allows insertion/removal in write mode
+	if (
+		blockEditingMode === 'contentOnly' &&
+		isNavigationMode( state ) &&
+		! isContainerInsertableToInWriteMode(
+			state,
+			getBlockName( state, rootClientId ),
+			rootClientId
+		)
+	) {
+		return false;
+	}
+
+	return blockEditingMode !== 'disabled';
 }
 
 /**
diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json
@@ -75,7 +75,8 @@
 		"caption": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": ".blocks-gallery-caption"
+			"selector": ".blocks-gallery-caption",
+			"role": "content"
 		},
 		"imageCrop": {
 			"type": "boolean",
diff --git a/test/e2e/specs/editor/various/write-design-mode.spec.js b/test/e2e/specs/editor/various/write-design-mode.spec.js
@@ -100,17 +100,6 @@ test.describe( 'Write/Design mode', () => {
 
 		expect( await getSelectedBlock() ).toEqual( sectionClientId );
 
-		// open the block toolbar more settings menu
-		await page.getByLabel( 'Block tools' ).getByLabel( 'Options' ).click();
-
-		// get the length of the options menu
-		const optionsMenu = page
-			.getByRole( 'menu', { name: 'Options' } )
-			.getByRole( 'menuitem' );
-
-		// we expect 4 items in the options menu (Cut and Copy are hidden in Write Mode)
-		await expect( optionsMenu ).toHaveCount( 4 );
-
 		// We should be able to select the paragraph block and write in it.
 		await paragraph.click();
 		await page.keyboard.type( ' something' );
@@ -187,4 +176,97 @@ test.describe( 'Write/Design mode', () => {
 
 		await expect( nonContentBlock ).toBeHidden();
 	} );
+	test( 'prevents adding non-content blocks to content role containers', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.setContent( '' );
+
+		// Insert a section with a nested block and an editable block.
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: {},
+			innerBlocks: [
+				{
+					name: 'core/quote',
+					attributes: {
+						metadata: {
+							name: 'Content block',
+						},
+					},
+					innerBlocks: [
+						{
+							name: 'core/paragraph',
+							attributes: {
+								content: 'Something',
+							},
+						},
+					],
+				},
+			],
+		} );
+
+		// Switch to write mode.
+		await editor.switchEditorTool( 'Write' );
+
+		// Select the inner paragraph block.
+		const paragraph = editor.canvas.getByRole( 'document', {
+			name: 'Block: Paragraph',
+		} );
+
+		// Select paragraph
+		await paragraph.click();
+
+		// Try inserting a Group block with the slash inserter.
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '/group' );
+
+		// Group option should not be available.
+		await expect(
+			page.getByRole( 'option', { name: 'Group' } )
+		).toBeHidden();
+	} );
+	test( 'allows adding blocks to content role containers', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.setContent( '' );
+
+		// Insert a section with a nested block and an editable block.
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: {},
+			innerBlocks: [
+				{
+					name: 'core/list',
+					innerBlocks: [
+						{
+							name: 'core/list-item',
+							attributes: {
+								content: 'item 1',
+							},
+						},
+					],
+				},
+			],
+		} );
+
+		// Switch to write mode.
+		await editor.switchEditorTool( 'Write' );
+
+		// Select the inner list item block.
+		const listItem = editor.canvas.getByText( 'item 1' );
+
+		// Select list item
+		await listItem.click();
+
+		// Press enter to check whether it adds a new block.
+		await page.keyboard.press( 'Enter' );
+
+		// Write something in the new list item
+		await page.keyboard.type( 'item 2' );
+
+		await expect( listItem ).not.toBeFocused();
+		await expect( listItem ).not.toHaveText( 'item 2' );
+	} );
 } );
