use className

WordPress · Sep 30, 2019 · af23aee · af23aee
1 parent 52791f6
commit af23aee
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
@@ -54,7 +54,8 @@ ul.wp-block-gallery {
 		}
 	}
 
-	.is-selected {
+	.is-selected .block-library-gallery-item__move-menu,
+	.is-selected .block-library-gallery-item__inline-menu {
 		background-color: theme(primary);
 
 		.components-button {

diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
@@ -137,6 +137,7 @@ class GalleryImage extends Component {
 				<MenuBox
 					isSelected={ isSelected }
 					isCompact={ isCompact }
+					className="block-library-gallery-item__move-menu"
 				>
 					<IconButton
 						icon="arrow-left"
@@ -160,6 +161,7 @@ class GalleryImage extends Component {
 					isSelected={ isSelected }
 					isCompact={ isCompact }
 					right
+					className="block-library-gallery-item__inline-menu"
 				>
 					<IconButton
 						icon="no-alt"

diff --git a/packages/block-library/src/gallery/menu-box.js b/packages/block-library/src/gallery/menu-box.js
@@ -3,15 +3,16 @@
  */
 import { Box } from '@wordpress/components';
 
-const MenuBox = ( { right, isSelected, isCompact, children } ) => {
+const MenuBox = ( { right, isSelected, isCompact, children, className } ) => {
 	const side = right ? { right: '-2px' } : { left: '-2px' };
 	return (
 		<Box
+			className={ className }
 			display={ 'inline-flex' }
 			padding={ isCompact ? 0 : 'small' }
 			position="absolute"
 			zIndex={ 'block-library-gallery-item__inline-menu' }
-			bg={ isSelected ? 'primary' : 'inherit' }
+			bg={ isSelected ? '#ffffff' : 'inherit' }
 			top="-2px"
 			{ ...side }
 		>