Align Gallery block movers with the standard block mover style (#17316)

* Update gallery item mover style. * Use same icons as the block movers. * Fix icon size/position * Add subtle dropshadow on hover. * Fix build error by calling the new icons file.
WordPress · Sep 6, 2019 · b9dc48c · b9dc48c
1 parent f4406ed
commit b9dc48c
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 17 deletions.
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -37,7 +37,7 @@ import { withSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import GalleryImage from './gallery-image';
-import icon from './icon';
+import icon from './icons';
 import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared';
 
 const MAX_COLUMNS = 8;

diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
@@ -61,17 +61,23 @@
 
 	.is-selected .block-library-gallery-item__move-menu,
 	.is-selected .block-library-gallery-item__inline-menu {
-		background-color: theme(primary);
+		background: $white;
+		border: 1px solid $dark-opacity-light-800;
+		border-radius: $radius-round-rectangle;
+		transition: box-shadow 0.2s ease-out;
+		@include reduce-motion("transition");
+
+		&:hover {
+			box-shadow: $shadow-toolbar;
+		}
 
 		.components-button {
-			color: $white;
+			color: $dark-opacity-300;
 			padding: 2px;
-			width: $icon-button-size-small;
 			height: $icon-button-size-small;
 
-			// Remove hover/focus box shadows, since they clash with the blue background.
-			&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover,
-			&:focus:not(:disabled) {
+			// Remove hover box shadows, since they clash with the container.
+			&:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover {
 				box-shadow: none;
 			}
 
@@ -103,7 +109,7 @@
 
 .block-library-gallery-item__move-menu,
 .block-library-gallery-item__inline-menu {
-	padding: $grid-size-small;
+	margin: $grid-size;
 	display: inline-flex;
 	z-index: z-index(".block-library-gallery-item__inline-menu");
 

diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
@@ -14,6 +14,11 @@ import { withSelect } from '@wordpress/data';
 import { RichText } from '@wordpress/block-editor';
 import { isBlobURL } from '@wordpress/blob';
 
+/**
+ * Internal dependencies
+ */
+import { leftArrow, rightArrow } from './icons';
+
 class GalleryImage extends Component {
 	constructor() {
 		super( ...arguments );
@@ -130,15 +135,15 @@ class GalleryImage extends Component {
 				{ href ? <a href={ href }>{ img }</a> : img }
 				<div className="block-library-gallery-item__move-menu">
 					<IconButton
-						icon="arrow-left"
+						icon={ leftArrow }
 						onClick={ isFirstItem ? undefined : onMoveBackward }
 						className="blocks-gallery-item__move-backward"
 						label={ __( 'Move Image Backward' ) }
 						aria-disabled={ isFirstItem }
 						disabled={ ! isSelected }
 					/>
 					<IconButton
-						icon="arrow-right"
+						icon={ rightArrow }
 						onClick={ isLastItem ? undefined : onMoveForward }
 						className="blocks-gallery-item__move-forward"
 						label={ __( 'Move Image Forward' ) }

diff --git a/packages/block-library/src/gallery/icon.js b/packages/block-library/src/gallery/icon.js
diff --git a/packages/block-library/src/gallery/icons.js b/packages/block-library/src/gallery/icons.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { G, Path, SVG } from '@wordpress/components';
+
+export const icon = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path fill="none" d="M0 0h24v24H0V0z" />
+		<G><Path d="M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67l1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z" /></G>
+	</SVG>
+);
+
+export const leftArrow = (
+	<SVG width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M5 8.70002L10.6 14.4L12 12.9L7.8 8.70002L12 4.50002L10.6 3.00002L5 8.70002Z" />
+	</SVG>
+);
+
+export const rightArrow = (
+	<SVG width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+		<Path d="M13 8.7L7.4 3L6 4.5L10.2 8.7L6 12.9L7.4 14.4L13 8.7Z" />
+	</SVG>
+);
diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js
@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
  */
 import deprecated from './deprecated';
 import edit from './edit';
-import icon from './icon';
+import { icon } from './icons';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';