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 Author: George Mamadashvili <[email protected]> Date: Thu Mar 24 12:47:37 2022 +0400
WordPress · Mar 30, 2022 · 8f8c101 · 8f8c101
1 parent 7417b7b
commit 8f8c101
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 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/toolbar.js b/packages/block-editor/src/components/block-lock/toolbar.js
@@ -16,13 +16,13 @@ import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockToolbar( { clientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const { canMove, canRemove, canLockBlock } = useSelect(
+	const { canMove, canRemove, canLockBlocks, canLockBlock } = useSelect(
 		( select ) => {
 			const {
-				canMoveBlock,
-				canRemoveBlock,
 				canLockBlockType,
 				getBlockName,
+				canMoveBlock,
+				canRemoveBlock,
 			} = select( blockEditorStore );
 
 			return {
@@ -39,7 +39,7 @@ export default function BlockLockToolbar( { clientId } ) {
 		false
 	);
 
-	if ( ! canLockBlock ) {
+	if ( ! canLockBlocks ) {
 		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',