"core/list-item" section style not applied consistently using json-partial

[djcowan]

Description

core/list-item blocks do not style consistantly when using section styles (JSON partial)
style is loaded via theme folder 'styles/block/my-style.json'

1. List-item styles correctly when style is applied to the core/columns block
2. styles are not applied consistently when style is applied to the core/list block

---

example json

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"slug": "imagedirect__wish-list",
	"title": "Wish List",
	"blockTypes": [
		"core/list",
		"core/columns"
	],
	"styles": {
		"color": {
			"text": "red"
		},
		"blocks": {
			"core/list-item": {
				"color": {
					"background": "#eeeeee"
				},
				"border": {
					"bottom": {
						"color": "black",
						"style": "dashed",
						"width": "1px"
					}
				}
			}
		}
	}
}

Step-by-step reproduction instructions

1. add example json to theme directory 'theme/styles/block'
2. add a core/list block with a core/list-item
3. add a core/columns block with a nested core/list block containing a core/list-item
4. apply the 'wish list' style to both blocks
5. Note the following:

• the list-item contained in the columns block is styled appropriately
• the list-item contained in the list block is un-styled

Screenshots, screen recording, code snippet

Environment info

WordPress - Version 6.8.2
Gutenberg - not activated or Version 21.6.0

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[karthikeya-io]

I can reproduce the issue.

list	columns

This happens because the generated selector .is-style-imagedirect__wish-list--2 .wp-block-list > li is a descendant selector. It should be .is-style-imagedirect__wish-list--2.wp-block-list > li for the styles to work for list block.

<style id='block-style-variation-styles-inline-css'>
:root :where(.is-style-imagedirect__wish-list--2 .wp-block-list > li){background-color: #eeeeee;}:root :where(.is-style-imagedirect__wish-list--2 .wp-block-list:not(.wp-block-list .wp-block-list) > li){border-bottom-color: black;border-bottom-width: 1px;border-bottom-style: dashed;}:root :where(.wp-block-list.is-style-imagedirect__wish-list--2){color: red;}
:root :where(.is-style-imagedirect__wish-list--3 .wp-block-list > li){background-color: #eeeeee;}:root :where(.is-style-imagedirect__wish-list--3 .wp-block-list:not(.wp-block-list .wp-block-list) > li){border-bottom-color: black;border-bottom-width: 1px;border-bottom-style: dashed;}:where(.is-style-imagedirect__wish-list--3 .wp-block-columns.is-layout-flex){gap: 2em;}:where(.is-style-imagedirect__wish-list--3 .wp-block-columns.is-layout-grid){gap: 2em;}:root :where(.wp-block-columns.is-style-imagedirect__wish-list--3){color: red;}
</style>

It looks like the style generator appends the style-variation class to the selector in block.json with a space. That’s why it works for Columns but not for the List block.

gutenberg/packages/block-library/src/list-item/block.json

Lines 65 to 68 in b8808b7

	"selectors": {
	"root": ".wp-block-list > li",
	"border": ".wp-block-list:not(.wp-block-list .wp-block-list) > li"
	}

[djcowan]

It looks like the style generator appends the style-variation class to the selector in block.json with a space. That’s why it works for Columns but not for the List block.

Thanks @karthikeya-io, your response is clear and has been understood.
We are simply trying to find a consistant approach to styling blocks, elements, and pseudo-classes/elements.

The same rule does not seem to apply when the direct descendent block is actually a column.
Using the same JSON example; styles.blocks core/column is the direct descendent of the 'section' style and receives the appropriate styling.
Example:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"slug": "imagedirect__wish-list",
	"title": "Wish List",
	"blockTypes": [
		"core/list",
		"core/columns"
	],
	"styles": {
		"color": {
			"text": "blue"
		},
		"blocks": {
			"core/list-item": {
				"color": {
					"background": "#eeeeee"
				},
				"border": {
					"bottom": {
						"color": "black",
						"style": "dashed",
						"width": "1px"
					}
				}
			},
			"core/column": {
				"color": {
					"background": "#fefeee"
				},
				"border": {
					"right": {
						"color": "pink",
						"style": "solid",
						"width": "5px"
					}
				}
			}
		}
	}
}

Resulting in the the direct descendent core/column being styled but not the the direct descendent list-item being styled.

:root :where(.is-style-imagedirect__wish-list--3 .wp-block-column) {…}

---

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.