From 37753da08d32dd257641501329ec04679b6ee95f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 9 May 2019 13:30:13 +0200 Subject: [PATCH 1/8] Structural changes - Reorder: img goes first than the inline menu items - Always render the inline menu items. We want to keep a consistent tabbable experience. We'll style them down when not in focus. --- .../block-library/src/gallery/gallery-image.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index e69b8385fe7e52..9066c24d635e79 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -127,17 +127,15 @@ class GalleryImage extends Component { return (
- { isSelected && -
- -
- } { href ? { img } : img } +
+ +
{ ( ! RichText.isEmpty( caption ) || isSelected ) ? ( Date: Thu, 9 May 2019 13:59:41 +0200 Subject: [PATCH 2/8] Make button visible --- packages/block-library/src/gallery/editor.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 419fc365f468af..3ebe51e5488e35 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -59,6 +59,13 @@ ul.wp-block-gallery { } } + .is-selected .block-library-gallery-item__inline-menu { + background-color: theme(primary); + .components-button { + color: $white; + } + } + .block-editor-rich-text figcaption { a { color: $white; @@ -71,12 +78,11 @@ ul.wp-block-gallery { position: absolute; top: -2px; right: -2px; - background-color: theme(primary); display: inline-flex; z-index: z-index(".block-library-gallery-item__inline-menu"); .components-button { - color: $white; + color: transparent; &:hover, &:focus { color: $white; From b4a26c0f262e8f41f00f69cba7722376f694c30c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 9 May 2019 17:12:41 +0200 Subject: [PATCH 3/8] Mark GalleryImage as selected on button focused --- packages/block-library/src/gallery/gallery-image.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index 9066c24d635e79..4dfd3104eaf868 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 1810b60635b074c52b4b6669cb8a0f9a7e038ac7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 9 May 2019 17:31:14 +0200 Subject: [PATCH 4/8] Fix color button on focus --- packages/block-library/src/gallery/editor.scss | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 3ebe51e5488e35..ffd0f7847a09cd 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -61,9 +61,15 @@ ul.wp-block-gallery { .is-selected .block-library-gallery-item__inline-menu { background-color: theme(primary); + .components-button { color: $white; } + + .components-button:focus { + color: inherit; + } + } .block-editor-rich-text figcaption { @@ -83,19 +89,11 @@ ul.wp-block-gallery { .components-button { color: transparent; - &:hover, - &:focus { - color: $white; - } } } .blocks-gallery-item__remove { padding: 0; - - &.components-button:focus { - color: inherit; - } } .blocks-gallery-item .components-spinner { From f2eb7f472bdff9f8ee6f7a231197be0bd5d9d9e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 9 May 2019 17:38:11 +0200 Subject: [PATCH 5/8] Prevent the button from showing up if the GalleryImage is not selected --- packages/block-library/src/gallery/gallery-image.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index 4dfd3104eaf868..3f173f8c55acb0 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 { onFocus={ this.onSelectImage } className="blocks-gallery-item__remove" label={ __( 'Remove Image' ) } + disabled={ ! isSelected } /> { ( ! RichText.isEmpty( caption ) || isSelected ) ? ( From 3257ac5334626f90cfe75232aaafad737201e844 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 9 May 2019 17:46:42 +0200 Subject: [PATCH 6/8] Make button and caption part of the tab path We can't use the isSelected property to conditionally render them, otherwise they won't be tabbed through when tabbing backwards. --- .../src/gallery/gallery-image.js | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index 3f173f8c55acb0..5a7b2d297a0e3d 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -135,20 +135,17 @@ class GalleryImage extends Component { onFocus={ this.onSelectImage } className="blocks-gallery-item__remove" label={ __( 'Remove Image' ) } - disabled={ ! isSelected } /> - { ( ! RichText.isEmpty( caption ) || isSelected ) ? ( - setAttributes( { caption: newCaption } ) } - unstableOnFocus={ this.onSelectCaption } - inlineToolbar - /> - ) : null } + setAttributes( { caption: newCaption } ) } + unstableOnFocus={ this.onSelectCaption } + inlineToolbar + />
); } From 615549e90e1f3f8d6936cf71a87c4177c7592acc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 9 May 2019 17:53:28 +0200 Subject: [PATCH 7/8] We can actually disable the button depending on isSelected status The GalleryImage gets selected by focusing on the caption (tabbing backwards) and the element (tabbing forwards). At that time, the button is enabled, and will get the focus. --- packages/block-library/src/gallery/gallery-image.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index 5a7b2d297a0e3d..d1826d6efbc409 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 { onFocus={ this.onSelectImage } className="blocks-gallery-item__remove" label={ __( 'Remove Image' ) } + disabled={ ! isSelected } /> Date: Thu, 9 May 2019 18:00:01 +0200 Subject: [PATCH 8/8] Do not show caption when GalleryImage is not selected --- packages/block-library/src/gallery/gallery-image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js index d1826d6efbc409..2c91f13df2c6ab 100644 --- a/packages/block-library/src/gallery/gallery-image.js +++ b/packages/block-library/src/gallery/gallery-image.js @@ -140,7 +140,7 @@ class GalleryImage extends Component { setAttributes( { caption: newCaption } ) }