Add outline support for blocks via theme.json

[onemaggie]

Adds the ability to define outline CSS properties for elements and blocks within theme.json to render outline-color, outline-offset, outline-style, and outline-width styles.

Reference:

• ​https://github.com/WordPress/gutenberg/pull/43526

Note: this enhancement was missed during the 6.1 release.

This PR backports the changes in ​#43526 that add support for the outline property on theme.json

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

This changeset looks good to me 👍

Question: the previous changeset also included some PHP Unit tests in ​wpThemeJson.php. Should we update the tests accordingly?

yeah it would be good to include, sadly I don't think I have the bandwidth for that before the end of the year

@audrasjb I can take care of backporting the PHPUnit tests if you haven't yet started on it.

@audrasjb I can take care of backporting the PHPUnit tests if you haven't yet started on it.

Of course, thanks Tonya :)
I tried to find existing tests on Gutenberg repo, but I'm afraid we don't have any phpunit test to backport from Gutenberg, so maybe we'll have to update the tests directly ;)

[hellofromTonya]

Self-assigning to add unit test(s) and commit candidate review.

No, this particular change doesn't have unit tests and I agree that it should. If no one gets to them before I'm back I'm happy to work on them.

I'm working on the tests now.

I'm working on the tests now.

Thanks so much @hellofromtonya

Refresh of PR #3788: adds test commit (that fails before the backport) and then adds the backport commit, while ensuring it's based on trunk.

This PR backports the changes in ​#43526 that add support for the outline property on theme.json

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

Props: @MaggieCabrera and @audrasjb (from the previous PR)

hey @MaggieCabrera, I didn't see trunk branch in your forked repo. That made me nervous. So I opened a new PR ​https://github.com/WordPress/wordpress-develop/pull/3790 which adds the unit test first (which fails) and then adds your fix from the backport (and then test passes).

I'll close this PR in favor of the new one.

[hellofromTonya]

Test Instructions

Steps to Test

1. Add the changes to TT3's theme.json per ​instructions here.
2. Create a new post.
3. Add a button block.
4. Publish the post.
5. View on the frontend.
6. Using Dev Tools in your browser, inspect the button's CSS.

Expected Results

Visually:

• The button should have a red dashed outline around it.
• When hovering over the button, the outline should change to a solid blue line.

The button's CSS should contain the following properties within .wp-element-button, .wp-block-button__link:

outline-color: red;
outline-offset: 3px;
outline-style: dashed;
outline-width: 3px;

and if you force :hover in the browser's Styles UI, the properties for .wp-element-button:hover, .wp-block-button__link:hover should include:

outline-color: blue;
outline-offset: 3px;
outline-style: solid;
outline-width: 3px;

[hellofromTonya]

Test Report results: worked as expected in Chrome

[hellofromTonya]

Test Report

Env

• OS: macOS
• Browser: Chrome, Firefox, Edge
• localhost: WP Local and wp-env
• Theme: TT3
• Plugins: none activated

Results

See it in action​

• Visually works as expected ✅
• CSS style properties are present as expected ✅

[ironprogrammer]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/3790.diff 👍🏻 LGTM!

How great to have a backport so early in the cycle! 🙌🏻

Environment

• Hardware: MacBook Pro Apple M1 Pro
• OS: macOS 12.6.1
• Browser: Safari 16.1
• Server: nginx/1.23.2
• PHP: 7.4.33
• WordPress: 6.2-alpha-54642-src
• Theme: twentytwentythree v1.0
• Active Plugins:
  • gutenberg v14.8.0-rc.1 (tested both on 🟢 and off 🔴)

Actual Results

• ✅ Before patch, outline rules applied to buttons in theme.json have no effect (expected).
• ✅ After patch, outline and hover style appear as expected in both editor and frontend.

Additional Notes

• TT3 updates applied to trunk with attachment:tt3-button-border-test.diff​.

Supplemental Artifacts

Before: Button blocks with "fill" and with "outline" styles -- outline in theme.json has no effect:

After patch: Button outline styles applied in theme.json appear as expected:

[ironprogrammer]

TT3 modification to add outline and hover styles to button element

[hellofromTonya]

Prepping commit now.

Thanks @audrasjb! Prepping commit right now.

[hellofromTonya]

In 55008:

Themes: Adds outline CSS properties support in theme.json.

Adds the ability to define outline CSS properties for elements and blocks within theme.json to render outline-color, outline-offset, outline-style, and outline-width styles.

Originally developed and tested in ​Gutenberg PR 43526.

Props onemaggie, hellofromTonya, audrasjb, ironprogrammer.
Fixes #57354.

Committed in https://core.trac.wordpress.org/changeset/55008.

[hellofromTonya]

Thank you everyone for your contributions!

[audrasjb]

@ironprogrammer I think it would be better to address TT3 changes in a specific ticket :)

[ironprogrammer]

Replying to audrasjb:

@ironprogrammer I think it would be better to address TT3 changes in a specific ticket :)

The attachment was a sample patch to test this ticket on trunk, not a proposed change to TT3 itself 👍🏻I debated putting it into a gist vs attaching the .diff, so I guess I made the wrong choice! 😂

I guess I could have made the attachment comment clearer, not just the filename.

[audrasjb]

hahaha ok, thanks for clarifying :D

hey @MaggieCabrera, I didn't see trunk branch in your forked repo. That made me nervous. So I opened a new PR #3790 which adds the unit test first (which fails) and then adds your fix from the backport (and then test passes).

I'll close this PR in favor of the new one.

oh, that's weird! Thanks for picking this one up Tonya!

[SergeyBiryukov]

In 55009:

Themes: Alphabetize the properties list in WP_Theme_JSON::VALID_STYLES for consistency.

Follow-up to [53129], [54253], [55008].

See #57354.

[hellofromTonya]

Adding the experimental keyword for tracking code copied from Gutenberg into Core.

[milana_cap]

@hellofromTonya, there's a typo in the gutenberg-merg label.

[ironprogrammer]

Corrected typo noted in comment:27 -- thanks, @milana_cap!