Block Locking: Styling changes for modal (#39998)

* Block Locking: Styling changes for modal * Use a new method for indeterminate state
WordPress · Apr 4, 2022 · 355e756 · 355e756
1 parent a1ae01c
commit 355e756
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/packages/block-editor/src/components/block-lock/modal.js b/packages/block-editor/src/components/block-lock/modal.js
@@ -11,7 +11,7 @@ import {
 	Icon,
 	Modal,
 } from '@wordpress/components';
-import { dragHandle, trash } from '@wordpress/icons';
+import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 
@@ -54,15 +54,8 @@ export default function BlockLockModal( { clientId, onClose } ) {
 	}, [ canMove, canRemove ] );
 
 	const isAllChecked = Object.values( lock ).every( Boolean );
-
-	let ariaChecked;
-	if ( isAllChecked ) {
-		ariaChecked = 'true';
-	} else if ( Object.values( lock ).some( Boolean ) ) {
-		ariaChecked = 'mixed';
-	} else {
-		ariaChecked = 'false';
-	}
+	const isIndeterminate =
+		Object.values( lock ).some( Boolean ) && ! isAllChecked;
 
 	return (
 		<Modal
@@ -98,7 +91,7 @@ export default function BlockLockModal( { clientId, onClose } ) {
 							<span id={ instanceId }>{ __( 'Lock all' ) }</span>
 						}
 						checked={ isAllChecked }
-						aria-checked={ ariaChecked }
+						indeterminate={ isIndeterminate }
 						onChange={ ( newValue ) =>
 							setLock( {
 								move: newValue,
@@ -112,7 +105,13 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								label={
 									<>
 										{ __( 'Disable movement' ) }
-										<Icon icon={ dragHandle } />
+										<Icon
+											icon={
+												lock.move
+													? lockIcon
+													: unlockIcon
+											}
+										/>
 									</>
 								}
 								checked={ lock.move }
@@ -129,7 +128,13 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								label={
 									<>
 										{ __( 'Prevent removal' ) }
-										<Icon icon={ trash } />
+										<Icon
+											icon={
+												lock.remove
+													? lockIcon
+													: unlockIcon
+											}
+										/>
 									</>
 								}
 								checked={ lock.remove }

diff --git a/packages/block-editor/src/components/block-lock/style.scss b/packages/block-editor/src/components/block-lock/style.scss
@@ -13,7 +13,6 @@
 }
 
 .block-editor-block-lock-modal__options-title {
-	border-bottom: 1px solid $gray-300;
 	padding: $grid-unit-15 0;
 
 	.components-checkbox-control__label {
@@ -27,9 +26,8 @@
 	}
 }
 .block-editor-block-lock-modal__checklist-item {
-	border-bottom: 1px solid $gray-300;
 	margin-bottom: 0;
-	padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-15;
+	padding: $grid-unit-15 0 $grid-unit-15 $grid-unit-40;
 
 	.components-base-control__field {
 		align-items: center;
@@ -48,6 +46,11 @@
 			fill: $gray-900;
 		}
 	}
+
+	&:hover {
+		background-color: $gray-100;
+		border-radius: $radius-block-ui;
+	}
 }
 
 .block-editor-block-lock-modal__actions {