Block Editor: Add block lock setting (#39566)

* Register settings * Use setting * Use aria-disabled * No opacity * Don't render toolbar icon if user can't interact
WordPress · Mar 24, 2022 · fa0d12e · fa0d12e
1 parent 94ba76a
commit fa0d12e
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 3 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -570,6 +570,7 @@ _Properties_
 -   _\_\_experimentalBlockPatterns_ `Array`: Array of objects representing the block patterns
 -   _\_\_experimentalBlockPatternCategories_ `Array`: Array of objects representing the block pattern categories
 -   _\_\_experimentalGenerateAnchors_ `boolean`: Enable/Disable auto anchor generation for Heading blocks
+-   _\_\_experimentalCanLockBlocks_ `boolean`: Whether the user can manage Block Lock state
 -   _\_\_unstableGalleryWithImageBlocks_ `boolean`: Whether the user has enabled the refactored gallery block which uses InnerBlocks
 
 ### SkipToSelectedBlock

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,16 +14,18 @@ import BlockLockModal from './modal';
 import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockMenuItem( { clientId } ) {
-	const { isLocked } = useSelect(
+	const { canLockBlocks, isLocked } = useSelect(
 		( select ) => {
 			const {
 				canMoveBlock,
 				canRemoveBlock,
 				getBlockRootClientId,
+				getSettings,
 			} = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
 
 			return {
+				canLockBlocks: getSettings().__experimentalCanLockBlocks,
 				isLocked:
 					! canMoveBlock( clientId, rootClientId ) ||
 					! canRemoveBlock( clientId, rootClientId ),
@@ -37,6 +39,10 @@ export default function BlockLockMenuItem( { clientId } ) {
 		false
 	);
 
+	if ( ! canLockBlocks ) {
+		return null;
+	}
+
 	const label = isLocked ? __( 'Unlock' ) : __( 'Lock' );
 
 	return (

diff --git a/packages/block-editor/src/components/block-lock/toolbar.js b/packages/block-editor/src/components/block-lock/toolbar.js
@@ -16,13 +16,16 @@ import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockToolbar( { clientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const { canMove, canRemove } = useSelect(
+	const { canMove, canRemove, canLockBlocks } = useSelect(
 		( select ) => {
-			const { canMoveBlock, canRemoveBlock } = select( blockEditorStore );
+			const { canMoveBlock, canRemoveBlock, getSettings } = select(
+				blockEditorStore
+			);
 
 			return {
 				canMove: canMoveBlock( clientId ),
 				canRemove: canRemoveBlock( clientId ),
+				canLockBlocks: getSettings().__experimentalCanLockBlocks,
 			};
 		},
 		[ clientId ]
@@ -33,6 +36,10 @@ export default function BlockLockToolbar( { clientId } ) {
 		false
 	);
 
+	if ( ! canLockBlocks ) {
+		return null;
+	}
+
 	if ( canMove && canRemove ) {
 		return null;
 	}

diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js
@@ -29,6 +29,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {Array}         __experimentalBlockPatterns            Array of objects representing the block patterns
  * @property {Array}         __experimentalBlockPatternCategories   Array of objects representing the block pattern categories
  * @property {boolean}       __experimentalGenerateAnchors          Enable/Disable auto anchor generation for Heading blocks
+ * @property {boolean}       __experimentalCanLockBlocks            Whether the user can manage Block Lock state
  * @property {boolean}       __unstableGalleryWithImageBlocks       Whether the user has enabled the refactored gallery block which uses InnerBlocks
  */
 export const SETTINGS_DEFAULTS = {
@@ -158,6 +159,7 @@ export const SETTINGS_DEFAULTS = {
 	__experimentalBlockPatternCategories: [],
 	__experimentalSpotlightEntityBlocks: [],
 	__experimentalGenerateAnchors: false,
+	__experimentalCanLockBlocks: true,
 	__unstableGalleryWithImageBlocks: false,
 	// gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.
 	// The setting is only kept for backward compatibility purposes.

diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -92,6 +92,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 				'__experimentalPreferredStyleVariations',
 				'__experimentalSetIsInserterOpened',
 				'__experimentalGenerateAnchors',
+				'__experimentalCanLockBlocks',
 				'__unstableGalleryWithImageBlocks',
 				'alignWide',
 				'allowedBlockTypes',