added classes to avoid using component selectors

WordPress · Jul 4, 2024 · b690f15 · b690f15
1 parent a76e342
commit b690f15
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/shuffle.js b/packages/block-editor/src/components/block-toolbar/shuffle.js
@@ -85,6 +85,7 @@ export default function Shuffle( { clientId, as = Container } ) {
 		<ComponentToUse
 			label={ __( 'Shuffle' ) }
 			icon={ shuffle }
+			className="block-editor-block-toolbar-shuffle"
 			onClick={ () => {
 				const nextPattern = getNextPattern();
 				nextPattern.blocks[ 0 ].attributes = {

diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
@@ -273,12 +273,14 @@
 
 .zoom-out-toolbar {
 
-	.components-button:focus::before {
+	.block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
+	.zoom-out-toolbar-button:focus::before,
+	.block-editor-block-toolbar-shuffle:focus::before,
+	.block-selection-button_drag-handle:focus::before {
 		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 	}
 
-	.components-toolbar,
-	.components-toolbar-group {
+	.block-editor-block-mover {
 		background: none;
 		border: none;
 	}

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
@@ -99,7 +99,7 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 					{ ( draggableProps ) => (
 						<Button
 							icon={ dragHandle }
-							className="block-selection-button_drag-handle"
+							className="block-selection-button_drag-handle zoom-out-toolbar-button"
 							aria-hidden="true"
 							label={ __( 'Drag' ) }
 							iconSize={ 24 }
@@ -127,6 +127,7 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 			) }
 			{ canRemove && ! isBlockTemplatePart && (
 				<ToolbarButton
+					className="zoom-out-toolbar-button"
 					icon={ trash }
 					label="Delete"
 					onClick={ () => {