diff --git a/packages/block-editor/src/components/block-content-overlay/index.js b/packages/block-editor/src/components/block-content-overlay/index.js index 56f3da5b28c21..727d2445883ce 100644 --- a/packages/block-editor/src/components/block-content-overlay/index.js +++ b/packages/block-editor/src/components/block-content-overlay/index.js @@ -64,6 +64,7 @@ export default function BlockContentOverlay( { useEffect( () => { // The overlay is always active when editing is locked. if ( ! canEdit ) { + setIsOverlayActive( true ); return; } 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 fb860c2f48239..0e74574610595 100644 --- a/packages/block-editor/src/components/block-lock/menu-item.js +++ b/packages/block-editor/src/components/block-lock/menu-item.js @@ -17,6 +17,7 @@ export default function BlockLockMenuItem( { clientId } ) { const { canLockBlock, isLocked } = useSelect( ( select ) => { const { + canEditBlock, canMoveBlock, canRemoveBlock, canLockBlockType, @@ -29,7 +30,8 @@ export default function BlockLockMenuItem( { clientId } ) { canLockBlock: canLockBlockType( getBlockName( clientId ) ), isLocked: ! canMoveBlock( clientId, rootClientId ) || - ! canRemoveBlock( clientId, rootClientId ), + ! canRemoveBlock( clientId, rootClientId ) || + ! canEditBlock( clientId ), }; }, [ clientId ] diff --git a/packages/block-editor/src/components/block-lock/modal.js b/packages/block-editor/src/components/block-lock/modal.js index e2ed4fc91303d..c48e5a328429d 100644 --- a/packages/block-editor/src/components/block-lock/modal.js +++ b/packages/block-editor/src/components/block-lock/modal.js @@ -11,9 +11,10 @@ import { Icon, Modal, } from '@wordpress/components'; -import { dragHandle, trash } from '@wordpress/icons'; +import { edit as editIcon, dragHandle, trash } from '@wordpress/icons'; import { useInstanceId } from '@wordpress/compose'; import { useDispatch, useSelect } from '@wordpress/data'; +import { isReusableBlock, getBlockType } from '@wordpress/blocks'; /** * Internal dependencies @@ -22,19 +23,28 @@ import useBlockDisplayInformation from '../use-block-display-information'; import { store as blockEditorStore } from '../../store'; export default function BlockLockModal( { clientId, onClose } ) { - const [ lock, setLock ] = useState( { move: false, remove: false } ); - const { canMove, canRemove } = useSelect( + const [ lock, setLock ] = useState( { + edit: false, + move: false, + remove: false, + } ); + const { canEdit, canMove, canRemove, isReusable } = useSelect( ( select ) => { const { + canEditBlock, canMoveBlock, canRemoveBlock, + getBlockName, getBlockRootClientId, } = select( blockEditorStore ); const rootClientId = getBlockRootClientId( clientId ); + const blockName = getBlockName( clientId ); return { + canEdit: canEditBlock( clientId ), canMove: canMoveBlock( clientId, rootClientId ), canRemove: canRemoveBlock( clientId, rootClientId ), + isReusable: isReusableBlock( getBlockType( blockName ) ), }; }, [ clientId ] @@ -48,10 +58,11 @@ export default function BlockLockModal( { clientId, onClose } ) { useEffect( () => { setLock( { + edit: ! canEdit, move: ! canMove, remove: ! canRemove, } ); - }, [ canMove, canRemove ] ); + }, [ canEdit, canMove, canRemove ] ); const isAllChecked = Object.values( lock ).every( Boolean ); @@ -101,12 +112,32 @@ export default function BlockLockModal( { clientId, onClose } ) { aria-checked={ ariaChecked } onChange={ ( newValue ) => setLock( { + edit: isReusable ? newValue : undefined, move: newValue, remove: newValue, } ) } />