Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from Sep 6, 2019
Merged
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -36,7 +36,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;
@@ -56,17 +56,23 @@ ul.wp-block-gallery {

.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;
}

@@ -98,7 +104,7 @@ ul.wp-block-gallery {

.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");

@@ -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' ) }

This file was deleted.

@@ -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>
);
@@ -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';
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.