Add block class name to the list block #56469
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
carolinan
added
[Type] Enhancement
|
This pull request changed or added PHP files in previous commits, but none have been detected in the latest commit. Thank you! ❤️ |
|
Flaky tests detected in a9325d3. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/8004083055
|
|
Size Change: -391 B (-0.02%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
|
Do you think the |
I think it is needed to be able to style the block using theme.json instead of unintentionally styling all |
|
It does get noisy, especially with nested lists. |
|
Yeah, it's quite noisy. We can probably figure out a way to make sure |
|
I like the idea: I don't think I can code it. |
carolinan
changed the title
carolinan
changed the title
|
I think we can run into styling issues when the css class is added both to the first ul/ol, as well as the ol/ul used to create nested lists, especially with spacing and border. |
For this we could update the selector generated for the (edited to make it a descendant selector) |
|
Might need a descendant selector |
|
Question? Seeing the amount of work it takes to add a class name to a block, wouldn't it make sense to use this oportunity when we are already chaging the selector that is used for the list item block so also just add the class |
There was a problem hiding this comment.
Thanks for this PR @carolinan ! This is testing well for me as regards global styles defined on the List and List Item blocks not bleeding over to other blocks that use list markup.
Tested by adding a gradient background to List, and custom font size, letter spacing and letter case to List Item.
On trunk, the styles also apply to the Navigation block:
On this branch, they are confined to List/List Item:
The only thing that still needs addressing is support for existing lists, as currently the classname only gets added to new blocks in the front end. That can be fixed by explicitly adding the classname in the front end, similarly to what was done for the Heading block.
|
I have re-added the index.php file. Does no-one share this concern?
|
It's a valid concern, but it's not specific to this branch; my testing showed the same happening on trunk. Arguably it's not a problem specific to this block either - any block nested in itself will have both instances styled - though nested lists are kind of a special case because it's unlikely anyone would want the same styles on parent and child list. I think it's worth discussing and exploring solutions to that in a dedicated issue or PR; it shouldn't block this PR. |
|
I am concerned that a solution would involve removing the class name from the nested block, which would then be a breaking change for anyone who has relied on it. |
I don't believe that would be a viable solution, especially if at any point we want to extend the List block to allow nesting all types of children, as discussed in #57272. It would then become closer to a Group in behaviour. |
tellthemachines
approved these changes
May 9, 2024
carolinan
added
the
Needs Dev Note
This was referenced May 10, 2024
49 tasks
|
This change does not need a standalone dev note. It can be in the misc. dev note or wherever is appropriate. Styling a list block using the Site Editor or theme.json also applied the style to other lists, partially or in full. |
carolinan
added
has dev note
| @@ -21,8 +21,8 @@ | |||
| }, | |||
| "supports": { | |||
| "className": false, | |||
| "__experimentalSelector": ".wp-block-list > li", | |||
There was a problem hiding this comment.
Just noting this should have used the selectors API which landed at the end of 2022, rather than the deprecated __experimentalSelector.
For example:
{
...
"selectors": {
"root": ".wp-block-list > li"
}
}There was a problem hiding this comment.
I'm in the process of dusting off an old PR to add color support to the List Item block. I can switch this over to use selectors as part of that.
This was referenced Jul 15, 2024
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.
What?
Adds the
wp-block-listclass to the list blockFor #12420
Why?
The missing class makes it difficult to style the block separately from other lists.
How?
List:
"className": false,from block.json.__experimentalSelector": "ol,ul",from block.json so that the styles are applied to.wp-block-listinstead of plain ul and ol.List item:
.wp-block-list > liTesting Instructions
Activate a block theme.
Open theme.json in your code editor and add a visible style to the list and list-item blocks, for example a background color.
If you are using Twenty Twenty-Four, the theme already has a styles for the list block, find them on line 515 in theme.json to avoid validation errors.
Example:
Create a new post or page.
Add an HTML block with a list inside.
Example:
Select preview from the HTML block toolbar and confirm that the list does not have a background color.
Add a list block with some inner list items.
wp-list-blockis present on the block.wp-list-blockis present on the block.Save, and view the front of the website.
Return to the editor and style the blocks via the settings in the sidebar; adjust color, typography and spacing. Confirm that the custom styles are applied correctly in the editor and on the front.
Bonus:
If you are using Twenty Twenty-Four, you can also confirm that the navigation block (which uses a list element) in the theme's header and footer does not have a pink background.
Screenshots or screencast