Add: Twilight style variation

[beafialho]

Description

Adds twilight style variation

Screenshots

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: beafialho <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: richtabor <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[carolinan]

Similar to the dusk variation, the outline button, when placed in the section style with the light background, has no visible border 🤔

[beafialho]

Similar to the dusk variation, the outline button, when placed in the section style with the light background, has no visible border

Is there a solution for this?

[carolinan]

I think the border needs to be set to the same color as the button text.

[beafialho]

I think the border needs to be set to the same color as the button text.

I believe I don't know how to do that in each section style. If someone can, I appreciate the help.

[carolinan]

I did not know about it either before Rich suggested it here: #142 (comment)

[carolinan]

Oh typically, variations inside variations inside variations 🤯 do not work:

Are there any plans to add this in 6.7 @aaronrobertshaw ?

---

I think the best alternative, is for all outline buttons in the twilight variation to have the border set to "currentColor".

But that would mean that on top of style 2, the outline button would have an orange border:

"core/button": {
				"spacing": {
					"padding": {
						"bottom": "4px",
						"left": "14px",
						"right": "14px",
						"top": "4px"
					}
				},
				"typography": {
					"fontSize": "var(--wp--preset--font-size--large)",
					"letterSpacing": "0px",
					"textTransform": "uppercase"
				},
				"variations": {
					"outline": {
						"spacing": {
							"padding": {
								"bottom": "4px",
								"left": "14px",
								"right": "14px",
								"top": "4px"
							}
						},
						"border": {
							"color": "currentColor"
						}
					}
				}
			},

[aaronrobertshaw]

Thanks for the ping 👍

Oh typically, variations inside variations inside variations 🤯 do not work:

That was a conscious decision made early on in the section styling explorations. Essentially there are a lot of inception-like issues that can occur. It also greatly complicates sanitization and any future Global Styles UI for users to customize block style variations or create their own.

Are there any plans to add this in 6.7 @aaronrobertshaw ?

None for 6.7.

I'd have also thought there were no plans to support it for any future release at this stage. Of course, with enough valid use cases and some creative design ideas for the Global Styles IA and UI, any of this can be revisited.

The case of outline buttons is a tricky one. On one hand they are a block style variation like the one you are trying to create. Variations are supposed to be able to be applied in a nested fashion rather than "styled in a nested fashion" if that makes sense. I can definitely see the argument for how you are trying to accomplish this but unfortunately, I don't have any better ideas than the one Carolina shared off the top of my head.

[carolinan]

Thank you for the quick response.

[carolinan]

Without very careful styling, these combinations can quickly become an accessibility problem. It is not unique to this style but also the default.

One thing I have thought about is that if the theme has 5 section styles, there is no way to turn them off.
Just as an example, maybe in the twilight variation, I only wanted to have 3 section styles.
Or maybe I need 7.

[aaronrobertshaw]

One thing I have thought about is that if the theme has 5 section styles, there is no way to turn them off.

The ability to deregister a style variation was touched on a few times during the initial iterations on this feature. There are some complications to this around potential merging and filtering of theme.json data as well as block style registration via register_block_style with style_data supplied.

I think this is something that we want to be able to support but it needs more time and exploration. It won't be something that makes it for 6.7 but hopefully progress can be made in the somewhat near future though.

[richtabor]

Without very careful styling, these combinations can quickly become an accessibility problem.

Each theme style variation should account for each section style individually, and support the same number as the parent.

[carolinan]

They do, if the border on the outline variation is set to the current color, a style that @beafialho approved yesterday.
So this PR can now be merged.

The remaining exception is the hover style for the outline variation. And as you know, this is a limitation in the editor/ global styles.
I spent about 4 hours on looking into how to solve WordPress/gutenberg#55359 but was not able to.

[richtabor]

They do, if the border on the outline variation is set to the current color, a style that @beafialho approved yesterday.
So this PR can now be merged.

I question if we should include full style variations. That's double to maintain (the color set, typography set along with the combined style). If anything perhaps it's the very last thing we do; to try to reduce the burden.

[carolinan]

Without the combined variations, there is no way to preview and highlight the combinations that Bea has created.

I would like to see atleast some of the combined / full variations to be included before WCUS contributor day on Tuesday since there are two table leads who have notified that they are planning to test the theme.

[github-actions]

Preview changes

You can preview these changes by following the link below:

• Preview changes for twentytwentyfive

I will update this comment with the latest preview links as you push more changes to this PR.
⚠️ Note: The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

[carolinan]

In style 1, The white text color on top of the orange background has a too low contrast ratio:
FFFFFF and FF6442 has contrast ratio 2.93:1, it needs to be 4.5:1 (3:1 for large text).

[carolinan]

If the color was changed to base, it would pass the contrast requirements. It does not in my opinion look as nice but Other options would mean changing the palette colors.