Update UI

WordPress · Apr 3, 2022 · 6057b86 · 6057b86
1 parent 99e0bde
commit 6057b86
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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,
 							} )
 						}
 					/>
 					<ul className="block-editor-block-lock-modal__checklist">
+						{ isReusable && (
+							<li className="block-editor-block-lock-modal__checklist-item">
+								<CheckboxControl
+									label={
+										<>
+											{ __( 'Restrict editing' ) }
+											<Icon icon={ editIcon } />
+										</>
+									}
+									checked={ lock.edit }
+									onChange={ ( edit ) =>
+										setLock( ( prevLock ) => ( {
+											...prevLock,
+											edit,
+										} ) )
+									}
+								/>
+							</li>
+						) }
 						<li className="block-editor-block-lock-modal__checklist-item">
 							<CheckboxControl
 								label={

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,18 @@ import { store as blockEditorStore } from '../../store';
 
 export default function BlockLockToolbar( { clientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const { canMove, canRemove, canLockBlock } = useSelect(
+	const { canEdit, canMove, canRemove, canLockBlock } = useSelect(
 		( select ) => {
 			const {
+				canEditBlock,
 				canMoveBlock,
 				canRemoveBlock,
 				canLockBlockType,
 				getBlockName,
 			} = select( blockEditorStore );
 
 			return {
+				canEdit: canEditBlock( clientId ),
 				canMove: canMoveBlock( clientId ),
 				canRemove: canRemoveBlock( clientId ),
 				canLockBlock: canLockBlockType( getBlockName( clientId ) ),
@@ -43,7 +45,7 @@ export default function BlockLockToolbar( { clientId } ) {
 		return null;
 	}
 
-	if ( canMove && canRemove ) {
+	if ( canEdit && canMove && canRemove ) {
 		return null;
 	}