Fix contentOnly insertion, removal, and moving

packages/block-editor/src/components/block-list/index.js

@@ -184,7 +184,7 @@ function Items( {
 				getTemplateLock,
 				getBlockEditingMode,
 				isSectionBlock,
-				isContainerInsertableToInWriteMode,
+				isContainerInsertableToInContentOnlyMode,
 				getBlockName,
 				isZoomOut: _isZoomOut,
 				canInsertBlockType,
@@ -223,7 +223,7 @@ function Items( {
 				isZoomOut: _isZoomOut(),
 				shouldRenderAppender:
 					( ! isSectionBlock( rootClientId ) ||
-						isContainerInsertableToInWriteMode(
+						isContainerInsertableToInContentOnlyMode(
 							getBlockName( selectedBlockClientId ),
 							rootClientId
 						) ) &&

packages/block-editor/src/store/private-selectors.js

@@ -95,7 +95,7 @@ export const isBlockSubtreeDisabled = ( state, clientId ) => {
  * @param {string} rootClientId The client ID of the root container block.
  * @return {boolean} Whether the container allows insertion.
  */
-export function isContainerInsertableToInWriteMode(
+export function isContainerInsertableToInContentOnlyMode(
 	state,
 	blockName,
 	rootClientId
@@ -105,7 +105,7 @@ export function isContainerInsertableToInWriteMode(
 	const isContainerContentBlock = isContentBlock( rootBlockName );
 	const isRootBlockMain = getSectionRootClientId( state ) === rootClientId;
 
-	// In write mode, containers shouldn't be inserted into unless:
+	// In contentOnly 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 (

packages/block-editor/src/store/selectors.js

@@ -43,7 +43,7 @@ import {
 	isSectionBlock,
 	getParentSectionBlock,
 	isZoomOut,
-	isContainerInsertableToInWriteMode,
+	isContainerInsertableToInContentOnlyMode,
 } from './private-selectors';
 
 const { isContentBlock } = unlock( blocksPrivateApis );
@@ -1682,15 +1682,7 @@ const canInsertBlockTypeUnmemoized = (
 		blockType = getBlockType( blockName );
 	}
 
-	const isLocked = !! getTemplateLock( state, rootClientId );
-	if ( isLocked ) {
-		return false;
-	}
-	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 ) {
+	if ( getTemplateLock( state, rootClientId ) ) {
 		return false;
 	}
 
@@ -1707,10 +1699,29 @@ const canInsertBlockTypeUnmemoized = (
 		return false;
 	}
 
-	// In write mode, check if this container allows insertion.
+	// It shouldn't be possible to insert inside a section block unless in
+	// some cases when the block is a content block.
+	const isContentRoleBlock = isContentBlock( blockName );
+	const isParentSectionBlock = !! isSectionBlock( state, rootClientId );
+	const isBlockWithinSection = !! getParentSectionBlock(
+		state,
+		rootClientId
+	);
+	if (
+		( isParentSectionBlock || isBlockWithinSection ) &&
+		! isContentRoleBlock
+	) {
+		return false;
+	}
+
+	// In content only mode, check if this container allows insertion.
 	if (
-		blockEditingMode === 'contentOnly' &&
-		! isContainerInsertableToInWriteMode( state, blockName, rootClientId )
+		( isParentSectionBlock || blockEditingMode === 'contentOnly' ) &&
+		! isContainerInsertableToInContentOnlyMode(
+			state,
+			blockName,
+			rootClientId
+		)
 	) {
 		return false;
 	}
@@ -1858,6 +1869,8 @@ export function canRemoveBlock( state, clientId ) {
 		return false;
 	}
 
+	// It shouldn't be possible to move in a section block unless in
+	// some cases when the block is a content block.
 	const isBlockWithinSection = !! getParentSectionBlock( state, clientId );
 	const isContentRoleBlock = isContentBlock(
 		getBlockName( state, clientId )
@@ -1866,21 +1879,21 @@ export function canRemoveBlock( state, clientId ) {
 		return false;
 	}
 
-	const blockEditingMode = getBlockEditingMode( state, rootClientId );
-
-	// Check if the parent container allows insertion/removal in write mode
+	const isParentSectionBlock = !! isSectionBlock( state, rootClientId );
+	const rootBlockEditingMode = getBlockEditingMode( state, rootClientId );
+	// Check if the parent container allows insertion/removal in contentOnly mode
 	if (
-		blockEditingMode === 'contentOnly' &&
-		! isContainerInsertableToInWriteMode(
+		( isParentSectionBlock || rootBlockEditingMode === 'contentOnly' ) &&
+		! isContainerInsertableToInContentOnlyMode(
 			state,
-			getBlockName( state, rootClientId ),
+			getBlockName( state, clientId ),
 			rootClientId
 		)
 	) {
 		return false;
 	}
 
-	return blockEditingMode !== 'disabled';
+	return rootBlockEditingMode !== 'disabled';
 }
 
 /**
@@ -1913,9 +1926,34 @@ export function canMoveBlock( state, clientId ) {
 	}
 
 	const rootClientId = getBlockRootClientId( state, clientId );
-	if ( getTemplateLock( state, rootClientId ) === 'all' ) {
+	const templateLock = getTemplateLock( state, rootClientId );
+	if ( templateLock === 'all' || templateLock === 'contentOnly' ) {
+		return false;
+	}
+
+	const isBlockWithinSection = !! getParentSectionBlock( state, clientId );
+	const isContentRoleBlock = isContentBlock(
+		getBlockName( state, clientId )
+	);
+	if ( isBlockWithinSection && ! isContentRoleBlock ) {
 		return false;
 	}
+
+	// If the parent is a section or is `contentOnly`, then check is the inner block
+	// should be allowed to move.
+	const isParentSectionBlock = !! isSectionBlock( state, rootClientId );
+	const rootBlockEditingMode = getBlockEditingMode( state, rootClientId );
+	if (
+		( isParentSectionBlock || rootBlockEditingMode === 'contentOnly' ) &&
+		! isContainerInsertableToInContentOnlyMode(
+			state,
+			getBlockName( state, clientId ),
+			rootClientId
+		)
+	) {
+		return false;
+	}
+
 	return getBlockEditingMode( state, rootClientId ) !== 'disabled';
 }
 

packages/block-editor/src/store/test/selectors.js

@@ -3081,7 +3081,7 @@ describe( 'selectors', () => {
 					byClientId: new Map(
 						Object.entries( {
 							block1: { name: 'core/test-block-ancestor' },
-							block2: { name: 'core/block' },
+							block2: { name: 'core/group' },
 							block3: { name: 'core/test-block-parent' },
 						} )
 					),

packages/block-editor/src/store/utils.js

@@ -10,7 +10,7 @@ import { parse as grammarParse } from '@wordpress/block-serialization-default-pa
 import { selectBlockPatternsKey } from './private-keys';
 import { unlock } from '../lock-unlock';
 import { STORE_NAME } from './constants';
-import { getSectionRootClientId } from './private-selectors';
+import { getSectionRootClientId, isSectionBlock } from './private-selectors';
 import { getBlockEditingMode } from './selectors';
 import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
 
@@ -140,5 +140,6 @@ export const getInsertBlockTypeDependants = () => ( state, rootClientId ) => {
 		state.settings.templateLock,
 		getBlockEditingMode( state, rootClientId ),
 		getSectionRootClientId( state ),
+		isSectionBlock( state, rootClientId ),
 	];
 };

packages/block-library/src/home-link/block.json

@@ -9,7 +9,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"label": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		}
 	},
 	"usesContext": [

test/e2e/specs/editor/various/content-only-lock.spec.js

@@ -90,12 +90,12 @@ test.describe( 'Content-only lock', () => {
 			<div class="wp-block-group"><!-- wp:paragraph -->
 			<p>Locked block a</p>
 			<!-- /wp:paragraph -->
-			
+
 			<!-- wp:paragraph -->
 			<p>Locked block b</p>
 			<!-- /wp:paragraph --></div>
 			<!-- /wp:group -->
-			
+
 			<!-- wp:heading -->
 			<h2 class="wp-block-heading"><strong>outside block</strong></h2>
 			<!-- /wp:heading -->` );
@@ -128,4 +128,138 @@ test.describe( 'Content-only lock', () => {
 			page.locator( '.color-block-support-panel' )
 		).not.toBeAttached();
 	} );
+
+	test( 'blocks within content-only locked container cannot be duplicated, inserted before/after, or moved', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Add content only locked block with paragraph and list
+		await pageUtils.pressKeys( 'secondary+M' );
+
+		await page.getByPlaceholder( 'Start writing with text or HTML' )
+			.fill( `<!-- wp:group {"templateLock":"contentOnly","layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>First paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul class="wp-block-list"><!-- wp:list-item -->
+<li>List item one</li>
+<!-- /wp:list-item -->
+
+<!-- wp:list-item -->
+<li>List item two</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list --></div>
+<!-- /wp:group -->` );
+
+		await pageUtils.pressKeys( 'secondary+M' );
+
+		const groupBlock = editor.canvas.getByRole( 'document', {
+			name: 'Block: Group',
+		} );
+		const paragraph = editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Paragraph',
+				includeHidden: true,
+			} )
+			.filter( { hasText: 'First paragraph' } );
+		const firstListItem = editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: List item',
+				includeHidden: true,
+			} )
+			.filter( { hasText: 'List item one' } );
+		const secondListItem = editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: List item',
+				includeHidden: true,
+			} )
+			.filter( { hasText: 'List item two' } );
+
+		// Select the content-locked group block.
+		await editor.selectBlocks( groupBlock );
+		await test.step( 'Blocks cannot be inserted before/after or duplicated', async () => {
+			// Test paragraph.
+			await editor.selectBlocks( paragraph );
+			await editor.showBlockToolbar();
+
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Options' } )
+			).toBeHidden();
+
+			// Test first list item.
+			await editor.selectBlocks( firstListItem );
+			await editor.showBlockToolbar();
+
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Options' } )
+			).toBeHidden();
+
+			// Test second list item.
+			await editor.selectBlocks( secondListItem );
+			await editor.showBlockToolbar();
+
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Options' } )
+			).toBeHidden();
+		} );
+
+		await test.step( 'Blocks cannot be moved', async () => {
+			// Test paragraph.
+			await editor.selectBlocks( paragraph );
+			await editor.showBlockToolbar();
+
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Move up' } )
+			).toBeHidden();
+
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Move down' } )
+			).toBeHidden();
+
+			// Test first list item.
+			await editor.selectBlocks( firstListItem );
+			await editor.showBlockToolbar();
+
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Move up' } )
+			).toBeHidden();
+
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Move down' } )
+			).toBeHidden();
+
+			// Test second list item.
+			await editor.selectBlocks( secondListItem );
+			await editor.showBlockToolbar();
+
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Move up' } )
+			).toBeHidden();
+
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block tools' } )
+					.getByRole( 'button', { name: 'Move down' } )
+			).toBeHidden();
+		} );
+	} );
 } );