Don't render toolbar icon if user can't interact

WordPress · Mar 21, 2022 · dcd311a · dcd311a
1 parent bfef6de
commit dcd311a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 21 deletions.
diff --git a/packages/block-editor/src/components/block-lock/style.scss b/packages/block-editor/src/components/block-lock/style.scss
@@ -64,8 +64,4 @@
 			right: $grid-unit-15 !important;
 		}
 	}
-
-	.components-button[aria-disabled="true"] {
-		opacity: 1;
-	}
 }
diff --git a/packages/block-editor/src/components/block-lock/toolbar.js b/packages/block-editor/src/components/block-lock/toolbar.js
@@ -36,35 +36,30 @@ export default function BlockLockToolbar( { clientId } ) {
 		false
 	);
 
-	if ( canMove && canRemove ) {
+	if ( ! canLockBlocks ) {
 		return null;
 	}
 
-	const label = canLockBlocks
-		? sprintf(
-				/* translators: %s: block name */
-				__( 'Unlock %s' ),
-				blockInformation.title
-		  )
-		: sprintf(
-				/* translators: %s: block name */
-				__( 'Locked %s' ),
-				blockInformation.title
-		  );
+	if ( canMove && canRemove ) {
+		return null;
+	}
 
 	return (
 		<>
 			<ToolbarGroup className="block-editor-block-lock-toolbar">
 				<ToolbarButton
 					icon={ lock }
-					label={ label }
-					onClick={ canLockBlocks ? toggleModal : undefined }
-					aria-disabled={ ! canLockBlocks }
+					label={ sprintf(
+						/* translators: %s: block name */
+						__( 'Unlock %s' ),
+						blockInformation.title
+					) }
+					onClick={ toggleModal }
 				/>
 			</ToolbarGroup>
-			{ isModalOpen && canLockBlocks ? (
+			{ isModalOpen && (
 				<BlockLockModal clientId={ clientId } onClose={ toggleModal } />
-			) : null }
+			) }
 		</>
 	);
 }