Gallery block toolbar displays non-functioning caption button

[dcalhoun]

Description

After selecting a Gallery block, the block toolbar displays a caption button that does not perform an action when toggled. This button was added in #47325.

Step-by-step reproduction instructions

1. Add a Gallery block.
2. Add media to the Gallery.
3. Tap the "Navigate Up" button (upwards arrow icon).

Expected behaviour

An non-functioning button is not displayed in the block toolbar.

Actual behaviour

An non-functioning caption button is displayed in the block toolbar.

Screenshots or screen recording (optional)

WordPress information

• WordPress version: 6.2.2
• Gutenberg version: 16.2.1
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

• Device: iPhone SE
• Operating system: iOS 16.5.1
• WordPress app version: 22.8

[dcalhoun]

We could either disable the button on the native platform or implement the caption button feature. The latter would help block layout shift in the editor when selecting blocks, which was the catalyst for the button's addition in the web editor.

[fluiddot]

We could either disable the button on the native platform or implement the caption button feature. The latter would help block layout shift in the editor when selecting blocks, which was the catalyst for the button's addition in the web editor.

I'd advocate for the latter and implement the caption button feature. This way we'll match the web version behavior.

[derekblank]

Thanks for pointing this out in the mobile editor @dcalhoun, I hadn't noticed this yet.

We could either disable the button on the native platform or implement the caption button feature. The latter would help block layout shift in the editor when selecting blocks, which was the catalyst for the button's addition in the web editor.

Could you describe the editor "block layout shift" a bit further? I'm trying to follow this change on web, and it being the catalyst for adding the caption button from #47325. Does this refer to moving the caption from outside the child Gallery Item to within the Gallery Item (as an overlay on the image itself) so that the vertical space for the caption does not cause other Gallery Items to shift around it?

Web.Gallery.Test.mov

Comparing this web behavior to mobile, the mobile behavior for captions is quite different, so I think I missed observing when this Gallery caption change was added on web. On mobile, gallery captions have dedicated text inputs that are always visible (and actionable), with their own dedicated call to action: "Add caption". This eliminates the need for the Gallery caption button on mobile.

After the changes in #47325 landed for web, this caption was moved to within the Gallery item, which added the Gallery caption button. My understanding based on the two comments above is that this is the caption button feature we'd eventually like to implement on mobile to have better parity with web behavior. Due to space limitations on mobile, however, I think we would want to consider design feedback or additional testing if we were to implement this behavior on mobile. (In other words, I think the UX differences between caption behavior on web and mobile are currently at an acceptable level of divergence due to screen size limitations, and could benefit from further discussion.)

However, I do think the web solution of using overlay captions is more elegant, and agree with the comments above that I would also be in favor of eventually implementing it on mobile. Perhaps we should create a separate issue for updating the Gallery caption behavior (as this issue refers to the currently non-functioning button itself)? At any rate, I created this PR to (temporarily) not display the non-functional Gallery caption button on mobile until we can determine and implement the best UX for mobile gallery captions:

• [RNMobile] Remove non-functioning caption button from mobile block toolbar #53010

[dcalhoun]

On mobile, gallery captions have dedicated text inputs that are always visible (and actionable), with their own dedicated call to action: "Add caption". This eliminates the need for the Gallery caption button on mobile.

@derekblank the constant visibility referenced above (emphasis my own) is the nuanced, relevant difference between the web and mobile editors. The overarching goal of the caption button: selecting a block alone should not result in layout shift. The layout shift is often only observable if there are present blocks after the selected block.

Image

image-caption-layout-shift.mp4

Gallery

gallery-caption-layout-shift.mp4

The web editor once behaved as the mobile editor does now for Image and Gallery blocks prior to #44965 and #47325 respectively. Because the web and mobile editors share a Gallery edit file, the Gallery change was (likely inadvertently) partially applied to the mobile editor. The web and mobile editor image components are very different and not co-located.

After the changes in #47325 landed for web, this caption was moved to within the Gallery item, which added the Gallery caption button.

I do not believe this is accurate. Both the web and mobile editors have caption fields available for both the top-level Gallery and each individual Gallery item (i.e. an Image caption). I do not believe this feature is a recent addition.

However, I do think the web solution of using overlay captions is more elegant, and agree with the comments above that I would also be in favor of eventually implementing it on mobile.

I did not intend to imply we should relocate Gallery item captions to be overlays. Apologies for that confusion. I agree with your prior thoughts that using overlays on mobile would likely not work well due to screen size constrains.

At any rate, I created this PR to (temporarily) not display the non-functional Gallery caption button on mobile until we can determine and implement the best UX for mobile gallery captions:

Thank you for addressing this issue. I'll review the PR soon.

[derekblank]

The web editor once behaved as the mobile editor does now for Image and Gallery blocks prior to #44965 and #47325 respectively. [...]

After the changes in #47325 landed for web, this caption was moved to within the Gallery item, which added the Gallery caption button.

I do not believe this is accurate. Both the web and mobile editors have caption fields available for both the top-level Gallery and each individual Gallery item (i.e. an Image caption). I do not believe this feature is a recent addition.

Gotcha - thank you for clarifying. Admittedly, I hadn't been following recent (or non-recent) changes to the web Gallery block too closely. This was a good reminder that it's very beneficial to consistently try out editor UX flows on web, especially since web and mobile share the edit.js file, as you mentioned. After reviewing this comment and the linked issues (particularly #44359), I understand the caption/layout shift issue now. Thanks for surfacing the issue with the non-functioning button in the toolbar, and reviewing the PR. 👍