Image block: UI updates for the image lightbox

[artemiomorales]

What?

This PR updates the editor UI for the image lightbox in preparation for WP 6.4.

Why?

Address #53851

The lightbox was originally part of a proposed feature set called behaviors; however, we have since decided that the lightbox will instead exist as a just property of the image block for now, and we need to clarify the UI for end users as a result.

This PR is based off of #53851, which removes the behaviors syntax. Both of these PRs should be merged at the same time to ensure that the lightbox continues to function as expected.

How?

• We've created a new Settings panel for the image block, where the lightbox is surfaced as a toggle in both the Global Styles and block settings. This design follows the discussion in Image block: Revise Lightbox UI to remove reference to Behaviors #53403 (comment).
• We need to offer backwards support for folks who already enabled the lightbox using the old behaviors syntax, so we've set up an inheritance scheme across two filter functions — one to be included in WP Core as part of the image block, the other to remain as part of the Gutenberg plugin, where the legacy support will reside.
• The panel is a ToolPanel, which means that the lightbox can be reset to default in the global styles or block settings.

How to enable

Via Global Styles

Open the global styles for the image block, then locate the Settings panel and enable the Expand on Click toggle.

lightbox-via-global-styles.mp4

Via Block Settings in Full Site Editor

Open the full site editor, add an image block, locate the Settings panel under the block's settings, and enable the Expand on Click toggle.

Lightbox.via.Block.Settings.in.Full.Site.Editing.mp4

Via Block Settings in Post Editor

Open the post editor, add an image block, locate the Settings panel under the block's settings, and enable the Expand on Click toggle.

ligthbox-via-block-settings.mp4

Via theme.json file

You can enable the lightbox in the theme.json by using either of the following syntaxes under settings:

Syntax 1:

"settings": {
	"blocks": {
		"core/image": {
			"lightbox": {
				"enabled": true
			}
		}
	}
}

Syntax 2

"settings": {
	"lightbox": {
		"enabled": true
	}
}

Legacy Syntax

To test backwards support for the legacy syntax, please enable the lightbox using both the theme.json and block attributes. Note that the old syntax allows for specifying the animation, either zoom or fade. If neither is specified, the lightbox defaults to zoom.

Via Theme.json

"behaviors": {
	"blocks": {
		"core/image": {
			"lightbox": {
				"enabled": true | false
				"animation": "" | "zoom" | "fade"
			}
		}
	}
}

Via Block Attributes

"behaviors": {
	"lightbox": {
		"enabled": true | false
		"animation": "" | "zoom" | "fade"
	}
}

Resetting Values

You can reset the user-defined Expand on Click setting in the global styles or block settings using the Settings panel menu.

Lightbox.Reset.Settings.mp4

What to Test

• Lightbox is applied, defined by theme.json.
• In global styles, lightbox value inherits from theme.json, but this value can also be overridden so the global styles setting takes priority over the theme.json.
• In the block settings, the lightbox value inherits first from the global styles if the lightbox value is present, if not, from the theme.json. In any case, the lightbox value can also be overridden so the setting at the block level takes priority over the theme.json and global styles config.
• Lightbox user-defined settings can be reset at the global styles and block settings levels.
• Lightbox is applied when using legacy syntax, defined by theme.json.
• Lightbox is applied when using legacy syntax, defined by block attributes.
• Lightbox legacy syntax is applied when the new syntax is not present.
• When present, new syntax overrides legacy syntax.
• Lightbox fade animation can be enabled via legacy syntax.

Testing Instructions for Keyboard

No special instructions here — the UI should be accessible as it was created using standard Gutenberg components.

[github-actions]

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ lib/class-wp-theme-json-schema-gutenberg.php
❔ lib/block-supports/behaviors.php
❔ lib/blocks.php
❔ lib/class-wp-theme-json-gutenberg.php
❔ lib/load.php
❔ lib/theme.json

[artemiomorales]

I think an easier solution than adding a custom helper would be to move the settings in /lib/theme.json to the top-level:

That works. I went ahead and made that change.

Along these lines, I also realized I was complicating this too much — previously I was trying to inherit the top-level settings.lightbox.enabled if the settings.blocks.core/image.lightbox.enabled was undefined, but from what I'm seeing this is not the expected behavior.

As long as the lightbox object exists now at the block level, we'll just use that as written, which I believe is how it's supposed to work.

[github-actions]

Flaky tests detected in 485c197.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6198328954
📝 Reported issues:

• [Flaky Test] should partially select with shift + click (@webkit) #53524 in /test/e2e/specs/editor/various/multi-block-selection.spec.js