-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Section Styling, Colorways, and Typesets for WP 6.6 #57537
Comments
Thank you for this! Updating the Roadmap to 6.5 post to link to this issue. |
A potential blocker has been encountered for the extended block style variations. A detailed breakdown of the issue can be found on the PR. |
Update 11 Jan 2024After much testing, discussion, and exploration, a consensus has been reached regarding the potential blocker noted above. Element styles on individual block instances will have their specificity increased to ensure the user's selection is honoured and these choices override the values from block style variations. Additionally, it appears as though the v2 If time permits, a button and popover combination to achieve a similar UI to earlier mockups of colorways, could be explored. |
I've pulled an alternative approach to updating the UI using a simple |
Summary of Explorations and the Current ApproachBlock Style Variation Registration:A new global function has been added: The The Alternatively, a block style variation can be registered without any style data. It can then have its styles defined within theme.json e.g. Theme.json / Style Objects:Block style variations will support styles for inner elements and block types. For example:
Elements specific to a variation's inner block types will not be supported due to this excessively increasing specificity of styles. To avoid having to define a variation's styles within theme.json repeatedly, there is a secondary PR proposing to allow referencing a shared block style variation definition. References in theme.json so far only support referencing a single property value, not an object. To avoid having to merge the referenced values with anything customized by the user throughout the code, the secondary PR above is in the process of being updated so the theme.json resolver will resolve the referenced block style variations into the theme.json data. The initial proposal for a home for referenced block style variations is: Global Styles:The aim of #56540 is for block style variation styles to be generated as per normal but with the addition of styles for their inner element and block type styles. This approach currently has two main issues;
CSS SpecificityThe more nested styles we generate, i.e. element and block type styles for variations, the greater those styles' specificity. Currently, this results in a CSS specificity for elements of This is a problem because styles for elements configured explicitly by the user on a block instance only have a specificity of A lot of exploration went into trying to reduce the block style variation specificity however reducing them too far would mean they wouldn't override global block styles. The current trade-off in #56540 is to bump the specificity of the block instance element styles while further exploration into reducing all global block styles to zero specificity is carried out. Nested Block Style VariationsThis one is more of a problem in terms of user experience. It is a valid use case that a user would like to apply a variation to a block already within another block with a variation applied. It might be the user wants a dark section across the page but to assign light styles to cards within that section. With the simple generation of styles for block style variations in #56540, they are defined once for each block type. This means all such styles will have the same specificity. When it then comes to block style variations on a block inside another, its inner blocks and elements would match both selectors and so the last to be defined in the stylesheet would take precedence, perhaps incorrectly. The generated styles cannot be reordered reliably so this issue might be unavoidable for the approach in #56540. While arguments can be made as to how likely the use case of nested variations is to occur, it would be a broken experience for a user attempting to assign a block style variation and not seeing the desired changes. If we were to omit the block styles control in the UI, when the currently selected block has an ancestor with a variation, it could be confusing to see the control on some blocks and not others despite them being of the same type. This also wouldn't stop a user from dragging a block with a variation into a container block that already has one. An AlternativeThere are some early explorations into an alternative approach (#57908). This alternative proposes to:
While this approach may not be perfect either. It does look promising towards solving the issue with the nested application of block style variations. For it to work though, it would depend on the across-the-board reduction of block style specificity in #57841 . Note: The early exploration is just that, early, and not fully functional or tested. So there is potential for more unexpected edge cases. UIAs this feature will hopefully increase the value and use of block style variations, their number is expected to also increase. The current UI of a button per style isn't very scalable and might need some tweaking. Early mockups here included using a custom select control. At the current time, As an interim measure, there's a further PR implementing a similar UI using a The Path ForwardWith the current issues facing #56540 and limited time before the 6.5 beta & release, it is worth considering if it is possible to get this feature to a suitable state to land. Reducing the scope of these extended block style variations would likely mean not supporting inner element and block type styles for them. This severely limits the value of the feature, if that were to land as an MVP. This leads to three primary questions:
cc/ @youknowriad, @SaxonF, @richtabor, @tellthemachines, @andrewserong, @talldan Apologies for the mass ping but I'd love to get your thoughts and feedback so we can settle on a decision and plan to move forward sooner rather than later 🙏 |
I think that's probably a breaking change on its own, did we try how this impact existing plugins and themes trying to override these styles? Not saying it's a not go but wondering about impact.
IMO, if we think we need more time to work on this properly, it's definitely on the table to pull this out of 6.5. It's IMO important to not ship something here that we're not satisfied about and that has the potential to harm us in the future. Can we have a summary of the existing style generation use-cases we have in some kind of table to help us think about these specificity issues. (Maybe add this to the architecture docs). Something like:
I guess there's also "global style variations" we may want to introduce in this table. We could compute the specificity and order them properly. I'm hoping this could give us better hints about what we want and just align us better. |
Agreed. Initially, I was under the impression this would be a blocker to extending block style variations to cover inner elements as well. My position softened on it after lengthy conversations with @tellthemachines, @andrewserong, and @SaxonF. The general thinking resulting from those discussions was that these are styles generated by a user decision to explicitly override styles within a block instance. To that end, increasing the specificity, while a change, wouldn't really change the intended functionality.
The majority of the focus has been trying to find an approach to avoid the need to bump it at all, via #57841 & #57908. Some initial searches of plugins and themes didn't return too many hits for explicit strings like I did trawl through the themes on the first page of results. Mostly, the top themes in that last search fell into the following scenarios:
In that initial page of results, the majority of styles also did not set colors which is all the per block instance element styles support at the moment. None of these findings are very robust of course and we really need broad testing. Hopefully, they do provide something more to go on in terms of estimating the severity and impact of increased specificity here.
💯 This would definitely be beneficial as we continue to evolve these sorts of features.
I'd see this table as scoped by a global style variation, if we're talking about theme style variations.
I like the idea. I think doing so reliably is the catch. In general, the table looks good for most cases. There are some things that may throw it out of whack though.
The block style variation class,
👍 This is my sentiment also. At this stage, I'd be more confident in giving the feature additional time to bake but want to make sure I'm not being too conservative. We do have a little time left, if we can achieve clarity on exactly what needs to be changed and what we're happy with delivering as an MVP. I'm personally finding this a little murky at the moment, especially given the viability of some solutions being dependent on ongoing explorations (#57841). Perhaps for 6.5 we could:
That being said, I'm not 100% ready to give up on the feature for this release yet 🤞 P.S. Apologies for the essay length reply 😅 |
You're the lead here. I think that plan makes sense to me. It's all about confidence. For the first item in the list, if the plan is to switch to "increase specificity of user generated element styles", is #57841 still needed? |
Just a minor thing I want to add: |
If we went with the original approach (#56540), then #57841 wouldn't be a requirement. With the original approach, a user can't reliably apply a variation to a block within another variation. This is appearing to be a very desired use case and a blocker to that approach. It's looking like we'll need to pursue the alternate approach instead (#57908). |
Thank you very much for the feedback @gaambo, it's greatly appreciated 👍
Agreed. I've had to be very explicit to try and avoid some confusion here but in doing so the discussion becomes verbose and harder to read in my opinion.
Correct. These should still be supported but the intent here is to open up theme.json as a means for defining some of these and giving users a bit more control over tweaking them.
100% agree!
As a lot of these terms are already out in the wild as you noted, I think it needs a concerted effort to rename/rebrand them all. Along with some clear communication to the community around that. Something similar to how reusable blocks were renamed to patterns. Unfortunately, that might need to be something we look at for beyond WP 6.5. |
I've updated the plan in the issue description as follows:
The PRs related to this issue are in the process of being updated or closed as appropriate. Once that is complete, I'll provide another update with all the relevant links. |
Through reviews around the reduction of selector specificity for block style variations a couple of issues have come up that need to be resolved before the section styling (aka block style variations) feature can land.
Also, the addition of global styles data to the block editor settings still needs to be merged too. These issues have been noted in the Tasks section of this tracking issue. |
I'm wondering if a fix for this issue #9357 could be considered. Thanks |
Thanks for flagging that @jeflopodev 👍 #9357 would definitely be nice to have fixed however it doesn't fall within the scope of this issue. That doesn't mean it can't be worked on separately of course. Personally, I won't have the bandwidth to investigate that issue before WP6.6. |
Status Update:The process of splitting up the primary PR (#57908) is continuing, with most of the smaller PRs having been merged. Although the feature is nearing completion, there were some further edge cases and issues encountered when evaluating the reduction of block style variation specificity to zero in #61032. This includes some bugs where block library styles didn't have their specificity also reduced to zero. This resulted in global styles being broken for those blocks. If those bugs are fixed by reducing the specificity of the block library styles to zero, then reset styles incorrectly take precedence and continue to break global styles. The primary example of this is the social links block. Potential ImpactIt is not yet known what the exact impact here will be. There has been limited feedback or issues raised after the initial reduction of global styles specificity to zero in #60106. A directory search for a common reset style that could cause issues, like The current plan is to create a suite of tests that can be run against all the themes in the directory to quantify the potential impact and inform any decision around the feature. Option 1Proceed with a push towards zero specificity, requiring some themes to update their reset stylesheets. Advantage:
Disadvantage:
Some of the risks here can be mitigated through collecting data on the true impact of the change and substantial communication and documentation. Option 2Concurrently, a compromise approach is being explored where a broad reduction in specificity is being maintained however it will not be to zero specificity. The idea behind the approach is that all styles still have "level" specificity which is achieved by wrapping generated selectors in A PR exploring this option can be found over in #61638. Advantages of the compromise approach:
Disadvantages:
|
I've published a GitHub discussion around CSS Specificity for WP6.6 to hope gain some clarity on the path forward here and document the decision a little more. |
After some discussion, and taking into account the limited time before the 6.6 beta, the option to use a I'd like to stress this doesn't mean we will not end up with zero-specificity styles in the future, just that the time isn't right for WP6.6. In future releases, we can move in that direction while also leveraging CSS layers. |
The section styles feature landed in Gutenberg 18.5 and is on track for WP6.6 🎉 Given this, I'll close this issue and follow up on the feature documentation during the 6.6 beta period. Thank you everyone involved for making this happen! 🙇 |
Goal
To bring together the related and overlapping explorations around section styling, colorways, and typesets.
While each separate concept might not be fully realised by currently open PRs, the hope is that this issue can help define what should be delivered for 6.6.
History & Context
Section Styles
Related Issues
Explorations:
sections
property to theme.json and attempted to allow some level of fallback between section styles when swapping themes or theme style variations.guteneberg_register_block_style
with a style objectTheme.json: Extend block style variations support #56540Colorways and Typesets
Related Issues
Original Proposed Plan
For WordPress 6.5, this proposal suggests pushing forward on two fronts.
Through extended block style variations, theme authors will be able to more effectively style sections of pages and templates that differ from that block's global styles without having to repeat the same configurations over and over e.g. styling darker sections on a page. This will include the ability to style elements and inner block types within the block style variation.
That feature's functionality then essentially solves the main user need for colorways and typesets on individual block instances or "sections".
The composability of colorways and typesets holds the most value at the theme or "root" level of Global Styles, as in addition to unlocking a wide array of possibilities, it will assist users in more quickly achieving an overall look and feel for their site that they are pleased with.
The benefit in composable colorways and typesets on individual blocks or sections may not warrant the increased complexity and additional work required from a UI perspective. Especially given move powerful block style variations meet the same need.
This isn't 100% set in stone, so please feel free to highlight issues or ask questions on this issue.
Prior Plan for WP6.5
Note: This plan has been revised to the outline below. For posterity the original plan can be read under the History and Context section above.
For WordPress 6.5 the plan is to:
The thinking behind delaying the extended block style variations until post-6.5 includes:
Why block style variations and section styling?
Through extended block style variations, theme authors will be able to more effectively style sections of pages and templates that differ from that block's global styles without having to repeat the same configurations over and over e.g. styling darker sections on a page. This will include the ability to style elements and inner block types within the block style variation.
That feature's functionality then essentially solves the main user need for colorways and typesets on individual block instances or "sections".
The composability of colorways and typesets holds the most value at the theme or "root" level of Global Styles, as in addition to unlocking a wide array of possibilities, it will assist users in more quickly achieving an overall look and feel for their site that they are pleased with.
The benefit in composable colorways and typesets on individual blocks or sections may not warrant the increased complexity and additional work required from a UI perspective. Especially given move powerful block style variations meet the same need.
This isn't 100% set in stone, so please feel free to highlight issues or ask questions on this issue.
Tasks
Block Style Variations
Block Styles: Make block style variations control scale for increased number of variations #57780Block Styles: Reducing specificity of default block style variation styles #61268Global Styles: Colorways & Typesets
cc/ @SaxonF, @mtias, @annezazu, @talldan
The text was updated successfully, but these errors were encountered: