From 8c1b19c1f01efb71b0b0f4375f9451282c9f4627 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 17 Mar 2022 20:20:37 +0400 Subject: [PATCH 1/8] Use setting --- .../src/components/block-lock/toolbar.js | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-lock/toolbar.js b/packages/block-editor/src/components/block-lock/toolbar.js index 1a01498367b623..38d9cbd5abec32 100644 --- a/packages/block-editor/src/components/block-lock/toolbar.js +++ b/packages/block-editor/src/components/block-lock/toolbar.js @@ -44,22 +44,31 @@ export default function BlockLockToolbar( { clientId } ) { return null; } + const label = canLockBlocks + ? sprintf( + /* translators: %s: block name */ + __( 'Unlock %s' ), + blockInformation.title + ) + : sprintf( + /* translators: %s: block name */ + __( 'Locked %s' ), + blockInformation.title + ); + return ( <> - { isModalOpen && ( + { isModalOpen && canLockBlocks ? ( - ) } + ) : null } ); } From f60ebf9b7326a2052449e4cd607f90cbe53b6df4 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 18 Mar 2022 09:08:58 +0400 Subject: [PATCH 2/8] Use aria-disabled --- packages/block-editor/src/components/block-lock/toolbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-lock/toolbar.js b/packages/block-editor/src/components/block-lock/toolbar.js index 38d9cbd5abec32..01688e4d8e4ab1 100644 --- a/packages/block-editor/src/components/block-lock/toolbar.js +++ b/packages/block-editor/src/components/block-lock/toolbar.js @@ -63,7 +63,7 @@ export default function BlockLockToolbar( { clientId } ) { icon={ lock } label={ label } onClick={ canLockBlocks ? toggleModal : undefined } - disabled={ ! canLockBlocks } + aria-disabled={ ! canLockBlocks } /> { isModalOpen && canLockBlocks ? ( From 2cb8e7ffdb39a4c903e4c6702224a0c3a18af3c1 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 18 Mar 2022 11:23:21 +0400 Subject: [PATCH 3/8] Add canLockBlocks selector --- .../data/data-core-block-editor.md | 13 ++++++++++++ .../src/components/block-lock/menu-item.js | 9 ++++---- .../src/components/block-lock/toolbar.js | 21 +++++++++++-------- packages/block-editor/src/store/selectors.js | 17 +++++++++++++++ 4 files changed, 47 insertions(+), 13 deletions(-) diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 798871d54b1e8d..4055d120fb913c 100644 --- 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. +### canLockBlocks + +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 index 0864851aaf18a3..ed7d9412851db9 100644 --- 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, + canLockBlocks, + getBlockName, getBlockRootClientId, - getSettings, } = select( blockEditorStore ); const rootClientId = getBlockRootClientId( clientId ); return { - canLockBlocks: getSettings().__experimentalCanLockBlocks, + canLockBlock: canLockBlocks( 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 index 01688e4d8e4ab1..6919a85aba8c35 100644 --- 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, + canLockBlocks, + getBlockName, + } = select( blockEditorStore ); return { canMove: canMoveBlock( clientId ), canRemove: canRemoveBlock( clientId ), - canLockBlocks: getSettings().__experimentalCanLockBlocks, + canLockBlock: canLockBlocks( getBlockName( clientId ) ), }; }, [ clientId ] @@ -44,7 +47,7 @@ export default function BlockLockToolbar( { clientId } ) { return null; } - const label = canLockBlocks + const label = canLockBlock ? sprintf( /* translators: %s: block name */ __( 'Unlock %s' ), @@ -62,11 +65,11 @@ export default function BlockLockToolbar( { clientId } ) { - { isModalOpen && canLockBlocks ? ( + { isModalOpen && canLockBlock ? ( ) : null } diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 7ded7911619439..993b6ebd96cfb1 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1442,6 +1442,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 canLockBlocks( state, nameOrType ) { + if ( ! hasBlockSupport( nameOrType, 'lock', 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. * From 3b37545d4533ccb7af3c8e68a56548e652f6e18f Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 18 Mar 2022 11:45:41 +0400 Subject: [PATCH 4/8] Rename selector --- docs/reference-guides/data/data-core-block-editor.md | 2 +- packages/block-editor/src/components/block-lock/menu-item.js | 4 ++-- packages/block-editor/src/components/block-lock/toolbar.js | 4 ++-- packages/block-editor/src/store/selectors.js | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 4055d120fb913c..b78aec9ec8754d 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -48,7 +48,7 @@ _Returns_ - `boolean`: Whether the given block type is allowed to be inserted. -### canLockBlocks +### canLockBlockType Determines if the given block type can be locked/unlocked by a user. diff --git a/packages/block-editor/src/components/block-lock/menu-item.js b/packages/block-editor/src/components/block-lock/menu-item.js index ed7d9412851db9..fb860c2f48239c 100644 --- a/packages/block-editor/src/components/block-lock/menu-item.js +++ b/packages/block-editor/src/components/block-lock/menu-item.js @@ -19,14 +19,14 @@ export default function BlockLockMenuItem( { clientId } ) { const { canMoveBlock, canRemoveBlock, - canLockBlocks, + canLockBlockType, getBlockName, getBlockRootClientId, } = select( blockEditorStore ); const rootClientId = getBlockRootClientId( clientId ); return { - canLockBlock: canLockBlocks( getBlockName( clientId ) ), + canLockBlock: canLockBlockType( getBlockName( clientId ) ), isLocked: ! canMoveBlock( clientId, rootClientId ) || ! canRemoveBlock( clientId, rootClientId ), diff --git a/packages/block-editor/src/components/block-lock/toolbar.js b/packages/block-editor/src/components/block-lock/toolbar.js index 6919a85aba8c35..188cb135ecc10c 100644 --- a/packages/block-editor/src/components/block-lock/toolbar.js +++ b/packages/block-editor/src/components/block-lock/toolbar.js @@ -21,14 +21,14 @@ export default function BlockLockToolbar( { clientId } ) { const { canMoveBlock, canRemoveBlock, - canLockBlocks, + canLockBlockType, getBlockName, } = select( blockEditorStore ); return { canMove: canMoveBlock( clientId ), canRemove: canRemoveBlock( clientId ), - canLockBlock: canLockBlocks( getBlockName( clientId ) ), + canLockBlock: canLockBlockType( getBlockName( clientId ) ), }; }, [ clientId ] diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 993b6ebd96cfb1..a9b21477a8f45a 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1450,7 +1450,7 @@ export function canMoveBlocks( state, clientIds, rootClientId = null ) { * * @return {boolean} Whether a given block type can be locked/unlocked. */ -export function canLockBlocks( state, nameOrType ) { +export function canLockBlockType( state, nameOrType ) { if ( ! hasBlockSupport( nameOrType, 'lock', true ) ) { return false; } From 98abe7db7aa5597ee261a997f7bdd321930c2103 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 24 Mar 2022 13:18:27 +0400 Subject: [PATCH 5/8] Remove rebase leftovers --- .../src/components/block-lock/toolbar.js | 26 +++++++------------ 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/block-lock/toolbar.js b/packages/block-editor/src/components/block-lock/toolbar.js index 188cb135ecc10c..be025f97e88e7e 100644 --- a/packages/block-editor/src/components/block-lock/toolbar.js +++ b/packages/block-editor/src/components/block-lock/toolbar.js @@ -39,7 +39,7 @@ export default function BlockLockToolbar( { clientId } ) { false ); - if ( ! canLockBlocks ) { + if ( ! canLockBlock ) { return null; } @@ -47,31 +47,23 @@ export default function BlockLockToolbar( { clientId } ) { return null; } - const label = canLockBlock - ? sprintf( - /* translators: %s: block name */ - __( 'Unlock %s' ), - blockInformation.title - ) - : sprintf( - /* translators: %s: block name */ - __( 'Locked %s' ), - blockInformation.title - ); - return ( <> - { isModalOpen && canLockBlock ? ( + { isModalOpen && ( - ) : null } + ) } ); } From 5b11012e84993397126b6bd812e32036018f17ac Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 24 Mar 2022 13:29:16 +0400 Subject: [PATCH 6/8] Add documentation --- docs/reference-guides/block-api/block-supports.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 60bcd4e852e698..7eb70b9722805d 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -519,6 +519,20 @@ supports: { } ``` +## lock + +- Type: `boolean` +- Default value: `true` + +A block may want to disable the ability to toggle the lock state. A lock state can be changed from the block "Options" dropdown by default. To disable this behavior, set `lock` to `false`. + +```js +supports: { + // Remove support for locking UI. + lock: false +} +``` + ## spacing - Type: `Object` From 11ca7dae276fa586ce4f3566e8b53d46ebcba6b6 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 24 Mar 2022 14:34:41 +0400 Subject: [PATCH 7/8] Adjust docs --- docs/reference-guides/block-api/block-supports.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 7eb70b9722805d..5ca033cff021f4 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -524,7 +524,7 @@ supports: { - Type: `boolean` - Default value: `true` -A block may want to disable the ability to toggle the lock state. A lock state can be changed from the block "Options" dropdown by default. To disable this behavior, set `lock` to `false`. +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 `lock` to `false`. ```js supports: { From 515c3e7db7823dc94855654650f1f00afe39e96b Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 28 Mar 2022 16:55:21 +0400 Subject: [PATCH 8/8] Make flag experimental --- docs/reference-guides/block-api/block-supports.md | 6 +++--- packages/block-editor/src/store/selectors.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 5ca033cff021f4..f38bec24ffe83e 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -519,17 +519,17 @@ supports: { } ``` -## lock +## __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 `lock` to `false`. +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. - lock: false + __experimentalLock: false } ``` diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index a9b21477a8f45a..b67c300b6fdacc 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1451,7 +1451,7 @@ export function canMoveBlocks( state, clientIds, rootClientId = null ) { * @return {boolean} Whether a given block type can be locked/unlocked. */ export function canLockBlockType( state, nameOrType ) { - if ( ! hasBlockSupport( nameOrType, 'lock', true ) ) { + if ( ! hasBlockSupport( nameOrType, '__experimentalLock', true ) ) { return false; }