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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 5 commits into from
Sep 6, 2019
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eceecb4
Update gallery item mover style.
kjellr Sep 3, 2019
14e09a5
Use same icons as the block movers.
kjellr Sep 3, 2019
0d458b7
Fix icon size/position
kjellr Sep 3, 2019
c01e0de
Add subtle dropshadow on hover.
kjellr Sep 3, 2019
6bf7f05
Fix build error by calling the new icons file.
kjellr Sep 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions packages/block-library/src/gallery/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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");

Expand Down
9 changes: 7 additions & 2 deletions packages/block-library/src/gallery/gallery-image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -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' ) }
Expand Down
6 changes: 0 additions & 6 deletions packages/block-library/src/gallery/icon.js
View file
Open in desktop

This file was deleted.

23 changes: 23 additions & 0 deletions packages/block-library/src/gallery/icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
2 changes: 1 addition & 1 deletion packages/block-library/src/gallery/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down