From 6b4528bc69743787008fabf0bbb52899d0c8698a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 29 Mar 2019 18:40:08 +0100 Subject: [PATCH 01/14] Add move forward/backward mechanics --- packages/block-library/src/gallery/edit.js | 30 +++++++++++++++++++ .../src/gallery/gallery-image.js | 12 +++++++- 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index e6b109da9ad0e..c7d7d1c25a47d 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -50,6 +50,9 @@ class GalleryEdit extends Component { this.setLinkTo = this.setLinkTo.bind( this ); this.setColumnsNumber = this.setColumnsNumber.bind( this ); this.toggleImageCrop = this.toggleImageCrop.bind( this ); + this.onMove = this.onMove.bind( this ); + this.onMoveForward = this.onMoveForward.bind( this ); + this.onMoveBackward = this.onMoveBackward.bind( this ); this.onRemoveImage = this.onRemoveImage.bind( this ); this.setImageAttributes = this.setImageAttributes.bind( this ); this.setAttributes = this.setAttributes.bind( this ); @@ -84,6 +87,31 @@ class GalleryEdit extends Component { }; } + onMove( oldIndex, newIndex ) { + const images = [ ...this.props.attributes.images ]; + images.splice( newIndex, 1, this.props.attributes.images[ oldIndex ] ); + images.splice( oldIndex, 1, this.props.attributes.images[ newIndex ] ); + this.setAttributes( { images } ); + } + + onMoveForward( oldIndex ) { + return () => { + if ( oldIndex === this.props.attributes.images.length - 1 ) { + return; + } + this.onMove( oldIndex, oldIndex + 1 ); + }; + } + + onMoveBackward( oldIndex ) { + return () => { + if ( oldIndex === 0 ) { + return; + } + this.onMove( oldIndex, oldIndex - 1 ); + }; + } + onRemoveImage( index ) { return () => { const images = filter( this.props.attributes.images, ( img, i ) => index !== i ); @@ -257,6 +285,8 @@ class GalleryEdit extends Component { alt={ img.alt } id={ img.id } isSelected={ isSelected && this.state.selectedImage === index } + onMoveBackward={ this.onMoveBackward( index ) } + onMoveForward={ this.onMoveForward( index ) } onRemove={ this.onRemoveImage( index ) } onSelect={ this.onSelectImage( index ) } setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) } diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index 2c91f13df2c6a..68ff34a4b7495 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -86,7 +86,7 @@ class GalleryImage extends Component { } render() { - const { url, alt, id, linkTo, link, isSelected, caption, onRemove, setAttributes, 'aria-label': ariaLabel } = this.props; + const { url, alt, id, linkTo, link, isSelected, caption, onRemove, onMoveForward, onMoveBackward, setAttributes, 'aria-label': ariaLabel } = this.props; let href; @@ -129,6 +129,11 @@ class GalleryImage extends Component {
{ href ? { img } : img }
+ +
Date: Fri, 29 Mar 2019 19:08:21 +0100 Subject: [PATCH 02/14] Update selected image on move so the visual hook stays the same. --- packages/block-library/src/gallery/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index c7d7d1c25a47d..32e20b2bb0996 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -91,6 +91,7 @@ class GalleryEdit extends Component { const images = [ ...this.props.attributes.images ]; images.splice( newIndex, 1, this.props.attributes.images[ oldIndex ] ); images.splice( oldIndex, 1, this.props.attributes.images[ newIndex ] ); + this.setState( { selectedImage: newIndex } ); this.setAttributes( { images } ); } From d853d62f7c6100eec6491f87a74ec83f0cbfd5f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 29 Mar 2019 19:11:38 +0100 Subject: [PATCH 03/14] Set color when Forward/Bacward icons has focus --- packages/block-library/src/gallery/editor.scss | 7 +++++++ packages/block-library/src/gallery/gallery-image.js | 2 ++ 2 files changed, 9 insertions(+) diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index ffd0f7847a09c..4947d989a4fb6 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -92,6 +92,13 @@ ul.wp-block-gallery { } } +.blocks-gallery-item__move-backward, +.blocks-gallery-item__move-forward { + &.components-button:focus { + color: inherit; + } +} + .blocks-gallery-item__remove { padding: 0; } diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index 68ff34a4b7495..f60315bd2a945 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -132,6 +132,7 @@ class GalleryImage extends Component { From c3c3996f06b221d88d3545fc7c80e8f1cb00d04c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 2 Apr 2019 12:08:42 +0200 Subject: [PATCH 04/14] Hide arrows behind phase_2 flag --- .../src/gallery/gallery-image.js | 46 ++++++++++--------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index f60315bd2a945..f4f9d9e459523 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -129,27 +129,31 @@ class GalleryImage extends Component {
{ href ? { img } : img }
- - - -
+ { process.env.GUTENBERG_PHASE === 2 ? + : + null + } + + { process.env.GUTENBERG_PHASE === 2 ? + : + null + } + Date: Tue, 2 Apr 2019 14:32:37 +0200 Subject: [PATCH 05/14] Better UI --- .../block-library/src/gallery/editor.scss | 18 +++++-- .../src/gallery/gallery-image.js | 49 +++++++++---------- 2 files changed, 37 insertions(+), 30 deletions(-) diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 4947d989a4fb6..97bb5114d86e1 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -79,6 +79,7 @@ ul.wp-block-gallery { } } +.block-library-gallery-item__move-menu, .block-library-gallery-item__inline-menu { padding: 2px; position: absolute; @@ -92,13 +93,20 @@ ul.wp-block-gallery { } } -.blocks-gallery-item__move-backward, -.blocks-gallery-item__move-forward { - &.components-button:focus { - color: inherit; - } +.block-library-gallery-item__inline-menu { + position: absolute; + top: -2px; + right: -2px; } +.block-library-gallery-item__move-menu { + position: absolute; + top: -2px; + left: -2px; +} + +.blocks-gallery-item__move-backward, +.blocks-gallery-item__move-forward, .blocks-gallery-item__remove { padding: 0; } diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index f4f9d9e459523..bb80c211f1b2b 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -127,33 +127,32 @@ class GalleryImage extends Component { return (
- { href ? { img } : img } -
- { process.env.GUTENBERG_PHASE === 2 ? - : - null - } + { process.env.GUTENBERG_PHASE === 2 ? +
+ - { process.env.GUTENBERG_PHASE === 2 ? - : - null - } -
+
: + null + } + +
+ +
Date: Tue, 2 Apr 2019 17:59:41 +0200 Subject: [PATCH 06/14] Add disability conditions for forward/backward buttons --- packages/block-library/src/gallery/edit.js | 2 ++ packages/block-library/src/gallery/gallery-image.js | 4 +++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 32e20b2bb0996..cb1188c010ba1 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -285,6 +285,8 @@ class GalleryEdit extends Component { url={ img.url } alt={ img.alt } id={ img.id } + isFirstItem={ index === 0 } + isLastItem={ ( index + 1 ) === images.length } isSelected={ isSelected && this.state.selectedImage === index } onMoveBackward={ this.onMoveBackward( index ) } onMoveForward={ this.onMoveForward( index ) } diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index bb80c211f1b2b..fb449f901c19c 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -86,7 +86,7 @@ class GalleryImage extends Component { } render() { - const { url, alt, id, linkTo, link, isSelected, caption, onRemove, onMoveForward, onMoveBackward, setAttributes, 'aria-label': ariaLabel } = this.props; + const { url, alt, id, linkTo, link, isFirstItem, isLastItem, isSelected, caption, onRemove, onMoveForward, onMoveBackward, setAttributes, 'aria-label': ariaLabel } = this.props; let href; @@ -134,12 +134,14 @@ class GalleryImage extends Component { onClick={ onMoveBackward } className="blocks-gallery-item__move-backward" label={ __( 'Move Image Backward' ) } + disabled={ isFirstItem } /> : null From 5f3619770b3ce8ab82dc9a3498d0fe54580e087e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 4 Apr 2019 10:45:31 +0200 Subject: [PATCH 07/14] Use aria-disable instead of disabled as to avoid focus loss when the control becomes disabled. --- packages/block-library/src/gallery/gallery-image.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index fb449f901c19c..36f3563579ca0 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -134,14 +134,14 @@ class GalleryImage extends Component { onClick={ onMoveBackward } className="blocks-gallery-item__move-backward" label={ __( 'Move Image Backward' ) } - disabled={ isFirstItem } + aria-disabled={ isFirstItem } /> : null From 6e7fe4c12c58e533b60e5259535c3ebde3ad111e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 11 Apr 2019 10:48:38 +0200 Subject: [PATCH 08/14] Remove PHASE_TWO check --- .../src/gallery/gallery-image.js | 35 +++++++++---------- 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index 36f3563579ca0..be35a9cb19d3a 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -127,25 +127,22 @@ class GalleryImage extends Component { return (
- { process.env.GUTENBERG_PHASE === 2 ? -
- - -
: - null - } +
+ + +
Date: Thu, 11 Apr 2019 11:00:41 +0200 Subject: [PATCH 09/14] Dont bind event handler if images is first/last in sequence --- packages/block-library/src/gallery/gallery-image.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index be35a9cb19d3a..f546f4a01359e 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -127,23 +127,23 @@ class GalleryImage extends Component { return (
+ { href ? { img } : img }
-
Date: Fri, 10 May 2019 11:35:51 +0200 Subject: [PATCH 10/14] Fix CSS after rebase --- packages/block-library/src/gallery/editor.scss | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 97bb5114d86e1..a851a70828fc6 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -59,6 +59,7 @@ ul.wp-block-gallery { } } + .is-selected .block-library-gallery-item__move-menu, .is-selected .block-library-gallery-item__inline-menu { background-color: theme(primary); @@ -93,15 +94,7 @@ ul.wp-block-gallery { } } -.block-library-gallery-item__inline-menu { - position: absolute; - top: -2px; - right: -2px; -} - .block-library-gallery-item__move-menu { - position: absolute; - top: -2px; left: -2px; } From ed0e9007619fab39675d9a5cb358b1a4aa102bbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 10 May 2019 11:37:38 +0200 Subject: [PATCH 11/14] Fix JS from rebase --- packages/block-library/src/gallery/gallery-image.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index f546f4a01359e..0e64bbf43f420 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -148,8 +148,10 @@ class GalleryImage extends Component {
Date: Fri, 10 May 2019 11:39:11 +0200 Subject: [PATCH 12/14] Disable buttons when the GalleryImage is not selected --- packages/block-library/src/gallery/gallery-image.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index 0e64bbf43f420..7138d10658eda 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -135,6 +135,7 @@ class GalleryImage extends Component { className="blocks-gallery-item__move-backward" label={ __( 'Move Image Backward' ) } aria-disabled={ isFirstItem } + disabled={ ! isSelected } />
From 6d1fdbc9d58ecb8c18ad5f09a956e84a5bfa7d95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 10 May 2019 11:40:24 +0200 Subject: [PATCH 13/14] When remove button gets the focus the image is always selected --- packages/block-library/src/gallery/gallery-image.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index 7138d10658eda..2db0b6d822ae1 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -150,7 +150,6 @@ class GalleryImage extends Component { Date: Fri, 10 May 2019 14:16:41 +0200 Subject: [PATCH 14/14] Fix bleaking styles --- packages/block-library/src/gallery/editor.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index a851a70828fc6..21623fad95abc 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -83,9 +83,6 @@ ul.wp-block-gallery { .block-library-gallery-item__move-menu, .block-library-gallery-item__inline-menu { padding: 2px; - position: absolute; - top: -2px; - right: -2px; display: inline-flex; z-index: z-index(".block-library-gallery-item__inline-menu"); @@ -94,7 +91,15 @@ ul.wp-block-gallery { } } +.block-library-gallery-item__inline-menu { + position: absolute; + top: -2px; + right: -2px; +} + .block-library-gallery-item__move-menu { + position: absolute; + top: -2px; left: -2px; }