Add/gallery block caption #17101

tellthemachines · 2019-08-20T05:40:58Z

Description

This is an updated version of #17001 which I closed due to rebase gone wrong. I have addressed all feedback from #17001 except for @talldan's request to add an e2e test for the block as I'm not sure how to add an image to a block in an e2e test. There are no image-containing blocks being tested atm so no previous examples. Would love some input on this!

Added a caption for the gallery block. This caption refers to the gallery as a whole, so semantically it works by wrapping the whole gallery block in a <figure> element and adding a <figcaption> with the caption inside.

How has this been tested?

Tested locally, checked if previously created galleries still work, ran unit tests, updated fixtures.

Note: The caption on the editor side will likely have the same accessibility issues as the image caption. These are discussed in detail in @talldan's table caption PR
I don't believe we have agreed on the best way forward for that, so it might be best to address it as a separate PR.

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

ellatrix

Left some minor comments, looks good otherwise.

packages/blocks/src/api/validation.js

ellatrix · 2019-08-20T08:24:44Z

packages/block-library/src/gallery/editor.scss

@@ -12,6 +12,11 @@ ul.wp-block-gallery {
 	}
 }

+// need to override default editor ul styles
+.blocks-gallery-grid.blocks-gallery-grid {


I left the comment above in an attempt to clarify, but perhaps it should be more explicit. I needed to override styles that are set for all ul in the editor, here:

I like this technique of duplicating the selector to increase specificity because it makes it clear that there is no other reason for use of more than one selector. Chaining two different selectors or using a parent selector might be necessary to target a particular element, but chaining the same selector twice can only be used for specificity increase, so if we revisit this later and find that the style being overridden is gone, we'll know it's safe to remove the extra selector 🙂

But when does .blocks-gallery-grid.blocks-gallery-grid occur? This means an element will have the class twice?

No, the element only needs to have the class once. Chaining the same class two or more times together will only increase specificity for that rule. It'll still apply to any element that has that class on it.

ellatrix · 2019-08-20T08:24:44Z

packages/block-library/src/gallery/save.js

-			{ images.map( ( image ) => {
-				let href;
+		<figure>
+			<ul className={ `blocks-gallery-grid columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>


Why add an extra class here? Why not write wp-block-gallery ul to select it?
Any reason the is-cropped class can't be moved to the parent element?

It's always better to target the specific element styles are being applied to with a classname. Using .className element selectors will make things messy if we ever need to add another element with a different purpose to the component. I know there are quite a few existing instances of element selectors in this codebase, but I'd like to propose we move away from that. Ideally, every element that requires CSS should have its own classname; it'll save us a lot of grief in the long run.

No reason is-cropped can't move; I left it there along with the other gallery-related classes like columns and align, but now I see align at least should be applied to the outer wrapper so might as well move the whole lot.

ellatrix · 2019-08-20T08:24:44Z

packages/block-library/src/gallery/style.scss

@@ -1,8 +1,10 @@
-.wp-block-gallery {
+.wp-block-gallery,
+.blocks-gallery-grid {


This seems a bit strange to me as it will duplicate all the nested rules, even the ones targeting child elements. Could it be separated with only the necessary rules added?

If I remove all the styles from wp-block-gallery it breaks the deprecated instances of the block. Not sure if there's any other way around this issue.

packages/block-library/src/gallery/style.scss

packages/block-library/src/gallery/theme.scss

packages/block-library/src/gallery/edit.js

packages/block-library/src/gallery/save.js

ellatrix · 2019-08-20T08:26:15Z

There's an e2e test failure with the demo content.

packages/block-library/src/gallery/block.json

post-content.php

packages/block-library/src/gallery/edit.js

This reverts commit f4f8ba9.

talldan

Looks good, just that question about galleryCaptionFocused that it'd be good to understand more about.

talldan · 2019-09-04T08:05:26Z

packages/block-library/src/gallery/edit.js

@@ -238,6 +249,11 @@ class GalleryEdit extends Component {
 				captionSelected: false,
 			} );
 		}
+		if ( ! this.props.isSelected && prevProps.isSelected && this.state.galleryCaptionFocused ) {
+			this.setState( {
+				galleryCaptionFocused: false,


It looks like some things have been refactored in this pr and I now can't see where galleryCaptionFocused is ever set to true. Maybe it and reference to it can be removed.

Oh, well spotted. Removed the state altogether.

talldan · 2019-09-04T08:05:26Z

packages/block-library/src/gallery/edit.js

+						value={ caption }
+						unstableOnFocus={ this.onFocusGalleryCaption }
+						onChange={ ( value ) => setAttributes( { caption: value } ) }
+						isSelected={ this.state.galleryCaptionFocused }


Related to the previous comment, I wonder how this could ever be true.

talldan

I know this one wasn't straightforward, great work here @tellthemachines!

kwight · 2019-09-25T20:19:49Z

It looks like block alignment might not have been handled by this PR: #17584

* Basic gallery caption. * add block deprecation * Regenerate test fixtures and fix failures * e2e snapshot update * Fix editor styles * Fix block transforms e2e * Workaround for failing tests * Undo package-lock changes * Revert "Undo package-lock changes" This reverts commit f4f8ba9. * Fix messed up styles. * Try to fix package-lock issue _again_ * Addressed design feedback. * Addressed previous PR feedback * Addressed latest PR feedback * Update post content and improve selectors * Change selectors for captions. * Change selectors and focus behaviour. * Update fixture. * Update demo post content again. * Update e2e snapshots * Redo snapshots again. * Change conditional hiding on empty/unselected * Remove unnecessary local state

tellthemachines requested review from ajitbohra, ellatrix, gziolo, jorgefilipecosta, nerrad, ntwb, Soean, talldan and youknowriad as code owners Aug 20, 2019

tellthemachines force-pushed the add/gallery-block-caption branch from 5da8501 to 078af70 Compare Aug 20, 2019

ellatrix reviewed Aug 20, 2019

View changes

talldan reviewed Aug 22, 2019

View changes

packages/block-library/src/gallery/block.json Outdated Show resolved Hide resolved

post-content.php Show resolved Hide resolved

talldan reviewed Aug 22, 2019

View changes

packages/block-library/src/gallery/edit.js Outdated Show resolved Hide resolved

tellthemachines force-pushed the add/gallery-block-caption branch from b2d23eb to 0641431 Compare Aug 23, 2019

gziolo added [Block] Gallery [Type] Enhancement A suggestion for improvement. labels Aug 27, 2019

tellthemachines added 13 commits Sep 3, 2019

Basic gallery caption.

048d12e

add block deprecation

727ea13

Regenerate test fixtures and fix failures

0c754a2

e2e snapshot update

10f4b92

Fix editor styles

22e23e2

Fix block transforms e2e

09c66f6

Workaround for failing tests

fee9a9c

Undo package-lock changes

f185c30

Revert "Undo package-lock changes"

cb1a2ef

This reverts commit f4f8ba9.

Fix messed up styles.

88b009a

Try to fix package-lock issue _again_

50fe342

Addressed design feedback.

e561434

Addressed previous PR feedback

2f29d4f

tellthemachines added 9 commits Sep 3, 2019

Addressed latest PR feedback

fe02a99

Update post content and improve selectors

e51f176

Change selectors for captions.

2e2166a

Change selectors and focus behaviour.

b006df7

Update fixture.

b00ff2b

Update demo post content again.

81b2caa

Update e2e snapshots

d4a69d5

Redo snapshots again.

3f47e51

Change conditional hiding on empty/unselected

2d43726

tellthemachines force-pushed the add/gallery-block-caption branch from 79555cb to 2d43726 Compare Sep 3, 2019

tellthemachines requested review from talldan and ellatrix Sep 4, 2019

talldan reviewed Sep 4, 2019

View changes

Remove unnecessary local state

083d1f3

tellthemachines requested a review from talldan Sep 5, 2019

talldan approved these changes Sep 6, 2019

View changes

tellthemachines merged commit c861f94 into master Sep 6, 2019

tellthemachines deleted the add/gallery-block-caption branch Sep 6, 2019

youknowriad added this to the Gutenberg 6.5 milestone Sep 14, 2019

kwight mentioned this pull request Sep 25, 2019

Ability to add a caption to a Gallery #15854

Closed

This was referenced Sep 27, 2019

Carousel Not Loading on Gallery Blocks Added After Gutenberg 6.5 Update Automattic/wp-calypso#36406

Closed

Carousel: Fix markup changes from Gutenberg 6.5. Automattic/jetpack#13582

Merged

talldan mentioned this pull request Oct 8, 2019

Gallery Block: consider adding the ability to add a caption below a gallery block #9342

Closed

gziolo mentioned this pull request Mar 17, 2020

Fix/screen reader text #20607

Merged

5 tasks

Add/gallery block caption #17101

Add/gallery block caption #17101

tellthemachines commented Aug 20, 2019 •

edited

ellatrix left a comment

ellatrix Aug 20, 2019

tellthemachines Aug 21, 2019

ellatrix Aug 22, 2019

tellthemachines Aug 22, 2019

ellatrix Aug 20, 2019

tellthemachines Aug 21, 2019

ellatrix Aug 20, 2019

tellthemachines Aug 21, 2019 •

edited

ellatrix commented Aug 20, 2019

talldan left a comment

talldan Sep 4, 2019

tellthemachines Sep 5, 2019

talldan Sep 4, 2019

talldan left a comment

kwight commented Sep 25, 2019

Add/gallery block caption #17101

Add/gallery block caption #17101

Conversation

tellthemachines commented Aug 20, 2019 • edited

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

ellatrix left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tellthemachines Aug 21, 2019 • edited

Choose a reason for hiding this comment

ellatrix commented Aug 20, 2019

talldan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan left a comment

kwight commented Sep 25, 2019

tellthemachines commented Aug 20, 2019 •

edited

tellthemachines Aug 21, 2019 •

edited