Site Editor: Global Style Button block Shadow presets is empty

[franz00]

Shadow presets window is empty when trying to apply the presets for Button block in the Global Style.

Testing environment:
WP 6.2 beta 1, Firefox Dev Ed. 110.0b9, Chrome 110.0.5481.78, Windows 11, TT3 & Powder themes.

GIF image ​https://imgur.com/a/gDh828C

Steps to reproduce:

1. Activate a block theme (TT3 or other)
2. Click Global Styles
3. Select Button block to customize
4. Choose Shadow property
5. Observe the Shadow presets window is empty

[franz00]

Reported upstream ​https://github.com/WordPress/gutenberg/issues/48061

[costdev]

Thanks @franz00! Moving to the 6.2 milestone for visibility and decision about whether to use this ticket as a tracking ticket for a possible backport from GB.

[dhrupo]

@costdev I have checked gutendev and found no issues there. But the issue still remains on wordpress-develop side. Thanks

[costdev]

Thanks @dhrupo! Yes it appears something was not merged to wordpress-develop as noted in ​this comment.

@ndiego Do you want to use this ticket to for tracking the merge, or handle this separately?

[Mamaduka]

It looks like I missed some recent changes when syncing the theme.json file to the core.

I will create a new patch to include everything for shadow presets.

PR sync core shadow presets from the Gutenberg plugin. This should also fix shadow presets being empty in 6.2 beta3.

Trac ticket: https://core.trac.wordpress.org/ticket/57708

The failing E2E tests seem unrelated to the changes in this PR.

These changes were made in Gutenberg PR ​https://github.com/WordPress/gutenberg/pull/46502 and ​this commit.

[hellofromTonya]

Test Report: can reproduce the issue (before the patch is applied)

[hellofromTonya]

Test Report: PR 4114 resolves the issue

[hellofromTonya]

Testing Instructions

These steps define how to reproduce the issue, and indicate the expected behavior.

Steps to Reproduce

1. Activate the Twenty Twenty-Three (TT3) theme.
2. Open the Site Editor.
3. Click anywhere in the content area to edit.
4. Open the Global Styles UI.
5. Select Blocks menu.
6. Select Button.
7. Select Shadow.
8. 🐞 Select Shadow > which will open the Shadow modal popup.

Expected Results

When testing a patch to validate it works as expected:

• ✅ The Shadow modal popup should include tools.

Supplemental Artifacts

When reproducing a bug:

• ❌ The Shadow modal popup is empty, i.e. no tools.

Test Report Icons:
🐞 <= Indicates where issue ("bug") occurs.
✅ <= Behavior is expected.
❌ <= Behavior is NOT expected.

[hellofromTonya]

Test Report

Patch: ​https://github.com/WordPress/wordpress-develop/pull/4114

Environment

• OS: macOS
• WordPress: trunk
• Localhost: wp-env (with Docker)
• Browser: Firefox, Edge, and Chrome
• Theme: TT3
• Plugins: none

Actual Results

Before Applying the Patch

trac57708-before.gif​ shows it in action.

Yes, can reproduce the reported issue ✅

After Applying the Patch

trac57708-after.gif​ shows it in action.

Yes, the patch resolves the issue ✅

[hellofromTonya]

Patch: ​https://github.com/WordPress/wordpress-develop/pull/4114

• Confirmed the theme.json changes from ​https://github.com/WordPress/gutenberg/pull/46502 are all included in this PR ✅
• Test Report confirms the patch resolves the issue ✅

Ready for commit 👍 Prepping now.

[hellofromTonya]

In 55405:

Themes: Add 3 and update 2 shadow presets in theme.json.

Adds Deep, Outlined, and Crisp default shadow presets to Core's theme.json file.

Updates the Natural and Sharp 'shadow' styles.

These shadow presets are used to populate the Shadow tools in the Site Editor's Global Styles UI.

References:

• ​Gutenberg PR 46502

Follow-up to [55176].

Props franz00, madhudollu, ajlende, beafialho, costdev, dhrupo, fabiankaegy, hellofromTonya, jameskoster, joen, kellychoffman, mamaduka, mtias, oandregal, priethor, richtabor, scruffian.
Fixes #57708.
See #57559.

Committed via https://core.trac.wordpress.org/changeset/55405.

Thank you, @hellofromtonya!