Skip to content

Backport: Outline support for blocks in theme.json with unit test#3790

Closed
hellofromtonya wants to merge 3 commits intoWordPress:trunkfrom
hellofromtonya:backport/block-outline-support
Closed

Backport: Outline support for blocks in theme.json with unit test#3790
hellofromtonya wants to merge 3 commits intoWordPress:trunkfrom
hellofromtonya:backport/block-outline-support

Conversation

@hellofromtonya
Copy link
Copy Markdown
Contributor

@hellofromtonya hellofromtonya commented Dec 19, 2022

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)

How to Test

Open TT3's theme.json and go to "elements" on about line 596 and then "button" on the next line. Then make the following changes:

  • Add this code as the first entry (before "border"):
"outline": {
	"offset": "3px",
	"width": "3px",
	"style": "dashed",
	"color": "red"
},

and in ":hover", add this code as the last entry (after "color"):

"outline": {
	"offset": "3px",
	"width": "3px",
	"style": "solid",
	"color": "blue"
}

Then add a new post and a button block. In the front-end it should render similar to this:

Screen Capture on 2022-08-23 at 16-45-03

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

Copy link
Copy Markdown
Contributor

@audrasjb audrasjb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect! Thanks for putting together this PR Tonya!

Just a small note: the margin-* and padding-* properties are listed in the same order they appear when listed on the padding and margin short notation: top, right, bottom, left.

For the sake of consistency, should we order the outline-* accordingly? width, style, color, then offset.

Copy link
Copy Markdown
Contributor

@audrasjb audrasjb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm nevermind: this is not what we did for the border-* properties.

@hellofromtonya
Copy link
Copy Markdown
Contributor Author

Thanks @audrasjb! Prepping commit right now.

@hellofromtonya
Copy link
Copy Markdown
Contributor Author

@hellofromtonya hellofromtonya deleted the backport/block-outline-support branch December 19, 2022 20:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants