Blocks: Add supports lock flag (#39568)

* Add documentation * Make flag experimental
WordPress · Mar 28, 2022 · 3cec236 · 3cec236
1 parent dc2592e
commit 3cec236
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 10 deletions.
diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md
@@ -519,6 +519,20 @@ supports: {
 }
 ```
 
+## __experimentalLock
+
+-   Type: `boolean`
+-   Default value: `true`
+
+A block may want to disable the ability to toggle the lock state. It can be locked/unlocked by a user from the block "Options" dropdown by default. To disable this behavior, set `__experimentalLock` to `false`.
+
+```js
+supports: {
+	// Remove support for locking UI.
+	__experimentalLock: false
+}
+```
+
 ## spacing
 
 -   Type: `Object`

diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
@@ -48,6 +48,19 @@ _Returns_
 
 -   `boolean`: Whether the given block type is allowed to be inserted.
 
+### canLockBlockType
+
+Determines if the given block type can be locked/unlocked by a user.
+
+_Parameters_
+
+-   _state_ `Object`: Editor state.
+-   _nameOrType_ `(string|Object)`: Block name or type object.
+
+_Returns_
+
+-   `boolean`: Whether a given block type can be locked/unlocked.
+
 ### canMoveBlock
 
 Determines if the given block is allowed to be moved.

diff --git a/packages/block-editor/src/components/block-lock/menu-item.js b/packages/block-editor/src/components/block-lock/menu-item.js
@@ -14,18 +14,19 @@ import BlockLockModal from './modal';
 import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockMenuItem( { clientId } ) {
-	const { canLockBlocks, isLocked } = useSelect(
+	const { canLockBlock, isLocked } = useSelect(
 		( select ) => {
 			const {
 				canMoveBlock,
 				canRemoveBlock,
+				canLockBlockType,
+				getBlockName,
 				getBlockRootClientId,
-				getSettings,
 			} = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
 
 			return {
-				canLockBlocks: getSettings().__experimentalCanLockBlocks,
+				canLockBlock: canLockBlockType( getBlockName( clientId ) ),
 				isLocked:
 					! canMoveBlock( clientId, rootClientId ) ||
 					! canRemoveBlock( clientId, rootClientId ),
@@ -39,7 +40,7 @@ export default function BlockLockMenuItem( { clientId } ) {
 		false
 	);
 
-	if ( ! canLockBlocks ) {
+	if ( ! canLockBlock ) {
 		return null;
 	}
 

diff --git a/packages/block-editor/src/components/block-lock/toolbar.js b/packages/block-editor/src/components/block-lock/toolbar.js
@@ -16,16 +16,19 @@ import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockToolbar( { clientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const { canMove, canRemove, canLockBlocks } = useSelect(
+	const { canMove, canRemove, canLockBlock } = useSelect(
 		( select ) => {
-			const { canMoveBlock, canRemoveBlock, getSettings } = select(
-				blockEditorStore
-			);
+			const {
+				canMoveBlock,
+				canRemoveBlock,
+				canLockBlockType,
+				getBlockName,
+			} = select( blockEditorStore );
 
 			return {
 				canMove: canMoveBlock( clientId ),
 				canRemove: canRemoveBlock( clientId ),
-				canLockBlocks: getSettings().__experimentalCanLockBlocks,
+				canLockBlock: canLockBlockType( getBlockName( clientId ) ),
 			};
 		},
 		[ clientId ]
@@ -36,7 +39,7 @@ export default function BlockLockToolbar( { clientId } ) {
 		false
 	);
 
-	if ( ! canLockBlocks ) {
+	if ( ! canLockBlock ) {
 		return null;
 	}
 
@@ -55,6 +58,7 @@ export default function BlockLockToolbar( { clientId } ) {
 						blockInformation.title
 					) }
 					onClick={ toggleModal }
+					aria-disabled={ ! canLockBlock }
 				/>
 			</ToolbarGroup>
 			{ isModalOpen && (

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -1539,6 +1539,23 @@ export function canMoveBlocks( state, clientIds, rootClientId = null ) {
 	);
 }
 
+/**
+ * Determines if the given block type can be locked/unlocked by a user.
+ *
+ * @param {Object}          state      Editor state.
+ * @param {(string|Object)} nameOrType Block name or type object.
+ *
+ * @return {boolean} Whether a given block type can be locked/unlocked.
+ */
+export function canLockBlockType( state, nameOrType ) {
+	if ( ! hasBlockSupport( nameOrType, '__experimentalLock', true ) ) {
+		return false;
+	}
+
+	// Use block editor settings as the default value.
+	return !! state.settings?.__experimentalCanLockBlocks;
+}
+
 /**
  * Returns information about how recently and frequently a block has been inserted.
  *