diff --git a/packages/block-editor/src/components/block-lock/modal.js b/packages/block-editor/src/components/block-lock/modal.js index e2ed4fc91303d3..77c9d7388d584a 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'; @@ -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 ( { __( 'Lock all' ) } } 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' ) } - + } checked={ lock.move } @@ -129,7 +128,13 @@ export default function BlockLockModal( { clientId, onClose } ) { label={ <> { __( 'Prevent removal' ) } - + } 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 42da30f0634f12..f4285103b6aa7e 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 {