From 240b7e29a09bfd0e736df7fcfd01736a0bab4640 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Sun, 3 Apr 2022 15:33:34 +0400
Subject: [PATCH 1/2] Block Locking: Styling changes for modal

---
 .../src/components/block-lock/modal.js         | 18 +++++++++++++++---
 .../src/components/block-lock/style.scss       |  9 ++++++---
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-lock/modal.js b/packages/block-editor/src/components/block-lock/modal.js
index e2ed4fc91303d..2fd68cf8e87d8 100644
--- 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';
 
@@ -112,7 +112,13 @@ export default function BlockLockModal( { clientId, onClose } ) {
 								label={
 									<>
 										{ __( 'Disable movement' ) }
-										<Icon icon={ dragHandle } />
+										<Icon
+											icon={
+												lock.move
+													? lockIcon
+													: unlockIcon
+											}
+										/>
 									</>
 								}
 								checked={ lock.move }
@@ -129,7 +135,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
index 42da30f0634f1..f4285103b6aa7 100644
--- 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 {

From ecb30f1811d3395af8be6e5852f4226073c29efa Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Sun, 3 Apr 2022 15:44:40 +0400
Subject: [PATCH 2/2] Use new method for indeterminate state

---
 .../block-editor/src/components/block-lock/modal.js | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/block-lock/modal.js b/packages/block-editor/src/components/block-lock/modal.js
index 2fd68cf8e87d8..77c9d7388d584 100644
--- a/packages/block-editor/src/components/block-lock/modal.js
+++ b/packages/block-editor/src/components/block-lock/modal.js
@@ -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,