Edit block style variations from global styles #46343
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tellthemachines
force-pushed
the
add/block-style-editing
branch
from
8e3645d
to
b13eb78
Compare
|
Size Change: +4.16 kB (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
tellthemachines
force-pushed
the
add/block-style-editing
branch
3 times, most recently
from
d4d987c
to
08c98a2
Compare
tellthemachines
force-pushed
the
add/block-style-editing
branch
2 times, most recently
from
0a5c337
to
f86176c
Compare
tellthemachines
requested review from
spacedmonkey and
ajlende
as code owners
tellthemachines
force-pushed
the
add/block-style-editing
branch
from
6727a59
to
3002e42
Compare
|
Would it be possible to include the block preview (with the style variation applied) here?
I guess the variation title should be capitalised as well. Not something to fix here, but it's very easy to get lost in all the Styles panels, and style variations are going to add another layer of complexity. For example the screenshot above – you have nothing to really orient where you are. It would be good to explore options. |
|
Nice, this is really close already. Here's a GIF showing the global styles interface of changing the button block "fill" variation:
Will it be possible to get closer to the ItemGroup based visuals of the original design? |
|
Testing this. Looking great so far.
I had some observations while testing. Some may not be related to the changes in this PR:
|
|
Thanks for all the feedback folks!
Sure!
Absolutely, this first pass is more aiming to get the functionality right, and I'll look into putting the actual UI in place as per the designs next 😄
Actual bug 😅 I've been messing around with the navigation paths to integrate the variations screens and must have broken something, thanks for spotting it!
Hmm, I can't reproduce this unless with the default state as you report in your 4th point. Could it be the same issue? |
Ah yeah, sorry for the red herring. I retested and you're right: is when the default variation class isn't applied (on a freshly-added block) |
|
Update: I just pushed the beginnings of adding new style variations. Please ignore what it looks like for now 😅 as I just dumped a button in there to be able to test the functionality. So far it only works for blocks that already have variations, though it should be easy to expand it to all blocks if we want. What doesn't work at all is getting the newly added variations to show in the post editor. Unless I'm mistaken, we're going to need something like #34178 in place before we can do that. My feeling is that the ability to add new variations is the key piece here, as opposed to editing existing ones. Would you say that @jasmussen , @jameskoster ? If so, it might make sense to put this on hold until we get #34178 done. In any case, I'll shortly be off for the holidays so don't worry if this PR isn't updated for the next week or so, I haven't forgotten it! |
I think that is a key part of it, absolutely. Though depending on what's technically feasible, I would suggest it equally important to edit and customize the existing ones, especially if such changes can reflect on existing content without needing an update. I.e. if I change the default button "outline" style to have a dashed border, would that automatically translate to every existing piece on the site using outline buttons? Enjoy your AFK, thanks for all the work here! |
Yeah, that already works in this PR, except in the case @ramonjd pointed out above: if the block hasn't been changed from its initial default style, it won't have the style classname attached. We'll have to look into how best to approach this. Adding the default style classname to every block would land us in deprecation hell 😅 We could try to add the class only if the default style has been changed. I don't think inline styles are a great option here because these are global, so we want to keep their specificity fairly low. If editing existing styles is useful by itself, then I'll leave out adding new ones for now, get existing ones working well, and then tackle the new ones separately after #34178 is done. |
Is it possible to treat the default style in a special manner, both with regards to the block (class or not), and with regards to the variations interface? By simply knowing what the default is, we might be able to make these aspects controllable, maybe? Apologies if I'm oversimplifying! 🙏 |
|
Thanks for reviewing @andrewserong ! Those are great suggestions and I'll follow up with another PR shortly. Yeah, I thought about just changing the name of the button style to Default, but went with this to make sure it always displays as "Default" so people know it's the default style for that block. |
85 tasks
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Feb 1, 2023
To allow editing of block style variations in global styles, this changeset adds the following for server side support: * building of block style schema into `WP_Theme_JSON::sanitize()`. * appending of style variation selectors to block metadata in `WP_Theme_JSON::get_blocks_metadata()`. * building of selectors and variations for nodes in `WP_Theme_JSON::get_block_nodes()`. Tests for happy and unhappy paths are included. Reference: * [WordPress/gutenberg#46343 Gutenberg PR 46343] Follow-up to [54118], [50973], [50959]. Props isabel_brison, Fixes #57583. Built from https://develop.svn.wordpress.org/trunk@55172 git-svn-id: http://core.svn.wordpress.org/trunk@54705 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to platformsh/wordpress-performance
that referenced
this pull request
Feb 1, 2023
To allow editing of block style variations in global styles, this changeset adds the following for server side support: * building of block style schema into `WP_Theme_JSON::sanitize()`. * appending of style variation selectors to block metadata in `WP_Theme_JSON::get_blocks_metadata()`. * building of selectors and variations for nodes in `WP_Theme_JSON::get_block_nodes()`. Tests for happy and unhappy paths are included. Reference: * [WordPress/gutenberg#46343 Gutenberg PR 46343] Follow-up to [54118], [50973], [50959]. Props isabel_brison, Fixes #57583. Built from https://develop.svn.wordpress.org/trunk@55172 git-svn-id: https://core.svn.wordpress.org/trunk@54705 1a063a9b-81f0-0310-95a4-ce76da25c4cd
34 tasks
fabiankaegy
added
the
Needs Dev Note
|
@bph I realize it is probably already a bit late but I think this here should really get a dev note / some documentation for the 6.2 release |
|
@fabiankaegy thank you so much for flagging this. It's not too late :-) |
|
Here goes the dev note: Edit block style variations from theme.jsonThis new theme.json API allows existing core block style variations to be styled directly from the Each variation should be targeted by its name, which can be found in the block's There is also a corresponding UI in the block section of global styles:
|
VenusPR
added a commit
to VenusPR/Wordpress_Richard
that referenced
this pull request
Mar 9, 2023
To allow editing of block style variations in global styles, this changeset adds the following for server side support: * building of block style schema into `WP_Theme_JSON::sanitize()`. * appending of style variation selectors to block metadata in `WP_Theme_JSON::get_blocks_metadata()`. * building of selectors and variations for nodes in `WP_Theme_JSON::get_block_nodes()`. Tests for happy and unhappy paths are included. Reference: * [WordPress/gutenberg#46343 Gutenberg PR 46343] Follow-up to [54118], [50973], [50959]. Props isabel_brison, Fixes #57583. Built from https://develop.svn.wordpress.org/trunk@55172 git-svn-id: http://core.svn.wordpress.org/trunk@54705 1a063a9b-81f0-0310-95a4-ce76da25c4cd
|
👋 Prepared a follow-up at #49807 I've also noticed that there are no docs for this at https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/ It'd be great to have some. |
This was referenced Apr 14, 2023
|
PR to add docs for |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Why?
Closes #44417.
This is an initial approach to editing block style variations in global styles. It's still a work in progress and not the complete implementation for #44417.
How?
Currently this PR only allows to edit existing variations, which works to a limited extent, given some of the classic core block variations style elements not yet available as block supports, or aren't added to every block. It also leverages the existing global styles interface for now, so the "variations" section appears as if it were another block support.
Limitations
Todoes
Testing Instructions
Testing Instructions for Keyboard
Global Styles can be accessed from the Site Editor header by clicking the "Styles" button. Unfortunately keyboard navigation to the sidebar is broken, so it is necessary to tab 5-6 times after clicking "Styles" to actually arrive in the sidebar. (The first button in the sidebar is called "Open Style Book"; from then on tabbing a few more times should take us to the "Blocks" section)
Screenshots or screencast