Block Editor: Fix 'isBlockSubtreeDisabled' private selector (#54618)

* Fix selector dependencies * Improve child subtree check * Add e2e tests
WordPress · Sep 22, 2023 · 9b9931f · 9b9931f
1 parent d80d932
commit 9b9931f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 3 deletions.
diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
@@ -45,9 +45,8 @@ export function getLastInsertedBlocksClientIds( state ) {
 export const isBlockSubtreeDisabled = createSelector(
 	( state, clientId ) => {
 		const isChildSubtreeDisabled = ( childClientId ) => {
-			const mode = state.blockEditingModes.get( childClientId );
 			return (
-				( mode === undefined || mode === 'disabled' ) &&
+				getBlockEditingMode( state, childClientId ) === 'disabled' &&
 				getBlockOrder( state, childClientId ).every(
 					isChildSubtreeDisabled
 				)
@@ -58,7 +57,12 @@ export const isBlockSubtreeDisabled = createSelector(
 			getBlockOrder( state, clientId ).every( isChildSubtreeDisabled )
 		);
 	},
-	( state ) => [ state.blockEditingModes, state.blocks.parents ]
+	( state ) => [
+		state.blocks.parents,
+		state.blocks.order,
+		state.blockEditingModes,
+		state.blockListSettings,
+	]
 );
 
 /**

diff --git a/test/e2e/specs/editor/various/content-only-lock.spec.js b/test/e2e/specs/editor/various/content-only-lock.spec.js
@@ -29,4 +29,49 @@ test.describe( 'Content-only lock', () => {
 		await page.keyboard.type( ' World' );
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	// See: https://github.com/WordPress/gutenberg/pull/54618
+	test( 'should be able to edit the content of deeply nested blocks', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		// Add content only locked block in the code editor
+		await pageUtils.pressKeys( 'secondary+M' ); // Emulates CTRL+Shift+Alt + M => toggle code editor
+
+		await page.getByPlaceholder( 'Start writing with text or HTML' )
+			.fill( `<!-- wp:group {"templateLock":"contentOnly","layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>Hello</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->` );
+
+		await pageUtils.pressKeys( 'secondary+M' );
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
+		await editor.canvas.click( 'role=document[name="Paragraph block"i]' );
+		await page.keyboard.type( ' WP' );
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/group',
+				attributes: {
+					layout: { type: 'constrained' },
+					templateLock: 'contentOnly',
+				},
+				innerBlocks: [
+					{
+						name: 'core/group',
+						attributes: { layout: { type: 'constrained' } },
+						innerBlocks: [
+							{
+								name: 'core/paragraph',
+								attributes: { content: 'Hello WP' },
+							},
+						],
+					},
+				],
+			},
+		] );
+	} );
 } );