Update: Remove locking inheritance. Add template lock attribute to mu…

…ltiple blocks
WordPress · Oct 7, 2020 · 528ea78 · 528ea78
1 parent aae9404
commit 528ea78
Show file tree

Hide file tree

Showing 18 changed files with 150 additions and 21 deletions.
diff --git a/...rs-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md b/...rs-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md
@@ -136,6 +136,7 @@ const MY_TEMPLATE = [
 {% end %}
 
 Use the `templateLock` property to lock down the template. Using `all` locks the template complete, no changes can be made. Using `insert` prevents additional blocks to be inserted, but existing blocks can be reordered. See [templateLock documentation](https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inner-blocks/README.md#templatelock) for additional information.
+If `templateLock` property is not explicitly passed to the InnerBlocks area and a block contains an attribute name `templateLock` the value of the attribute is used as the `templateLock` property.
 
 ### Post Template
 

diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
@@ -119,9 +119,10 @@ Template locking allows locking the `InnerBlocks` area for the current template.
 - `'insert'` — prevents inserting or removing blocks, but allows moving existing ones.
 - `false` — prevents locking from being applied to an `InnerBlocks` area even if a parent block contains locking. ( Boolean )
 
-If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used.
+If locking is not set in an `InnerBlocks` area and an attribute named `templateLock` exists the value of the attribute is used as `templateLock`. If locking is not set either as property of the `InnerBlocks` area or as an attribute, the `templateLock` default value of `false`is used.
+
+The `template` property allows setting the attributes of the child blocks and can set `templateLock` of the descent blocks. This allows an ancestor to control the locking of child block areas part of its template.
 
-If the block is a top level block: the locking of the Custom Post Type is used.
 
 ### `renderAppender`
 * **Type:** `Function|false`

diff --git a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js
@@ -32,18 +32,15 @@ export default function useNestedSettingsUpdate(
 ) {
 	const { updateBlockListSettings } = useDispatch( 'core/block-editor' );
 
-	const { blockListSettings, parentLock } = useSelect(
+	const { blockListSettings, templateLockAttribute } = useSelect(
 		( select ) => {
-			const rootClientId = select(
+			const { getBlockListSettings, getBlockAttributes } = select(
 				'core/block-editor'
-			).getBlockRootClientId( clientId );
+			);
 			return {
-				blockListSettings: select(
-					'core/block-editor'
-				).getBlockListSettings( clientId ),
-				parentLock: select( 'core/block-editor' ).getTemplateLock(
-					rootClientId
-				),
+				blockListSettings: getBlockListSettings( clientId ),
+				templateLockAttribute: getBlockAttributes( clientId )
+					.templateLock,
 			};
 		},
 		[ clientId ]
@@ -53,7 +50,9 @@ export default function useNestedSettingsUpdate(
 		const newSettings = {
 			allowedBlocks,
 			templateLock:
-				templateLock === undefined ? parentLock : templateLock,
+				templateLock === undefined
+					? templateLockAttribute
+					: templateLock,
 		};
 
 		// These values are not defined for RN, so only include them if they
@@ -74,9 +73,9 @@ export default function useNestedSettingsUpdate(
 		blockListSettings,
 		allowedBlocks,
 		templateLock,
-		parentLock,
 		captureToolbars,
 		orientation,
 		updateBlockListSettings,
+		templateLockAttribute,
 	] );
 }
diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json
@@ -2,6 +2,11 @@
 	"apiVersion": 2,
 	"name": "core/buttons",
 	"category": "design",
+	"attributes": {
+		"templateLock": {
+			"type": "string"
+		}
+	},
 	"supports": {
 		"anchor": true,
 		"align": true,

diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json
@@ -11,6 +11,9 @@
 		},
 		"width": {
 			"type": "string"
+		},
+		"templateLock": {
+			"type": "string"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
@@ -90,7 +90,6 @@ function ColumnEdit( {
 				</PanelBody>
 			</InspectorControls>
 			<InnerBlocks
-				templateLock={ false }
 				renderAppender={
 					hasChildBlocks ? undefined : InnerBlocks.ButtonBlockAppender
 				}

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
@@ -44,6 +44,9 @@
 		},
 		"contentPosition": {
 			"type": "string"
+		},
+		"templateLock": {
+			"type": "string"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
@@ -6,6 +6,9 @@
 		"tagName": {
 			"type": "string",
 			"default": "div"
+		},
+		"templateLock": {
+			"type": "string"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json
@@ -79,6 +79,9 @@
 		},
 		"focalPoint": {
 			"type": "object"
+		},
+		"templateLock": {
+			"type": "string"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
@@ -30,6 +30,9 @@
 		"showSubmenuIcon": {
 			"type": "boolean",
 			"default": true
+		},
+		"templateLock": {
+			"type": "string"
 		}
 	},
 	"providesContext": {

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -171,10 +171,6 @@ function Navigation( {
 						className: 'wp-block-navigation__container',
 					} }
 					__experimentalCaptureToolbars={ true }
-					// Template lock set to false here so that the Nav
-					// Block on the experimental menus screen does not
-					// inherit templateLock={ 'all' }.
-					templateLock={ false }
 				/>
 			</nav>
 		</>

diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json
@@ -6,6 +6,9 @@
 		"openInNewTab": {
 			"type": "boolean",
 			"default": false
+		},
+		"templateLock": {
+			"type": "string"
 		}
 	},
 	"providesContext": {

diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
@@ -48,7 +48,6 @@ export function SocialLinksEdit( props ) {
 			</InspectorControls>
 			<InnerBlocks
 				allowedBlocks={ ALLOWED_BLOCKS }
-				templateLock={ false }
 				template={ TEMPLATE }
 				orientation="horizontal"
 				__experimentalTagName="ul"

diff --git a/packages/block-library/src/social-links/edit.native.js b/packages/block-library/src/social-links/edit.native.js
@@ -88,7 +88,6 @@ function SocialLinksEdit( {
 	return (
 		<InnerBlocks
 			allowedBlocks={ ALLOWED_BLOCKS }
-			templateLock={ false }
 			template={ initialCreation && TEMPLATE }
 			renderFooterAppender={
 				shouldRenderFooterAppender && renderFooterAppender.current

diff --git a/packages/e2e-tests/plugins/cpt-locking.php b/packages/e2e-tests/plugins/cpt-locking.php
@@ -52,6 +52,56 @@ function gutenberg_test_cpt_locking() {
 			'template_lock' => false,
 		)
 	);
+	register_post_type(
+		'ul-post-ul-group',
+		array(
+			'public'        => true,
+			'label'         => 'Locked Post Unlocked group',
+			'show_in_rest'  => true,
+			'template'      => array(
+				array(
+					'core/group',
+					array(),
+					array(
+						array( 'core/quote' ),
+						array(
+							'core/paragraph',
+							array(
+								'placeholder' => 'Add a description',
+							),
+						),
+					),
+				),
+			),
+			'template_lock' => 'all',
+		)
+	);
+	register_post_type(
+		'l-post-l-group',
+		array(
+			'public'        => true,
+			'label'         => 'Locked Post Locked group',
+			'show_in_rest'  => true,
+			'template'      => array(
+				array(
+					'core/group',
+					array(
+						'templateLock' => 'all',
+					),
+					array(
+						array( 'core/quote' ),
+						array(
+							'core/paragraph',
+							array(
+								'placeholder' => 'Add a description',
+							),
+						),
+					),
+				),
+			),
+			'template_lock' => 'all',
+		)
+	);
 }
 
 add_action( 'init', 'gutenberg_test_cpt_locking' );
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
@@ -36,6 +36,26 @@ exports[`cpt locking template_lock all should not error when deleting the cotent
 <!-- /wp:columns -->"
 `;
 
+exports[`cpt locking template_lock all unlocked group should allow blocks to be moved 1`] = `
+"<!-- wp:group -->
+<div class=\\"wp-block-group\\"><div class=\\"wp-block-group__inner-container\\"><!-- wp:paragraph {\\"placeholder\\":\\"Add a description\\"} -->
+<p>p1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
+<!-- /wp:quote --></div></div>
+<!-- /wp:group -->"
+`;
+
+exports[`cpt locking template_lock all unlocked group should allow blocks to be removed 1`] = `
+"<!-- wp:group -->
+<div class=\\"wp-block-group\\"><div class=\\"wp-block-group__inner-container\\"><!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p></p></blockquote>
+<!-- /wp:quote --></div></div>
+<!-- /wp:group -->"
+`;
+
 exports[`cpt locking template_lock false should allow blocks to be inserted 1`] = `
 "<!-- wp:image -->
 <figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>

diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js
@@ -180,4 +180,47 @@ describe( 'cpt locking', () => {
 
 		it( 'should allow blocks to be moved', shouldAllowBlocksToBeMoved );
 	} );
+
+	describe( 'template_lock all unlocked group', () => {
+		beforeEach( async () => {
+			await createNewPost( {
+				postType: 'ul-post-ul-group',
+			} );
+		} );
+
+		it( 'should allow blocks to be removed', async () => {
+			await page.type(
+				'.block-editor-rich-text__editable[data-type="core/paragraph"]',
+				'p1'
+			);
+			await clickBlockToolbarButton( 'More options' );
+			const [ removeBlock ] = await page.$x(
+				'//button[contains(text(), "Remove block")]'
+			);
+			await removeBlock.click();
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+		} );
+
+		it( 'should allow blocks to be moved', shouldAllowBlocksToBeMoved );
+	} );
+
+	describe( 'template_lock all locked group', () => {
+		beforeEach( async () => {
+			await createNewPost( {
+				postType: 'l-post-l-group',
+			} );
+		} );
+
+		it(
+			'should not allow blocks to be removed',
+			shouldNotAllowBlocksToBeRemoved
+		);
+
+		it( 'should not allow blocks to be moved', async () => {
+			await page.click(
+				'.block-editor-rich-text__editable[data-type="core/paragraph"]'
+			);
+			expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull();
+		} );
+	} );
 } );
diff --git a/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js b/packages/edit-widgets/src/blocks/widget-area/edit/inner-blocks.js
@@ -14,7 +14,6 @@ export default function WidgetAreaInnerBlocks() {
 			value={ blocks }
 			onInput={ onInput }
 			onChange={ onChange }
-			templateLock={ false }
 		/>
 	);
 }