List: add spacing block supports

[ramonjd]

Related:

• Tracking: Addressing Design Tooling Consistency #43241
• Tracking: Dimensions Design Tools Consistency #43243

What?

Enabling spacing support for the list block.

Why?

To create consistency across blocks.

How?

Adding the relevant block supports in block.json

Testing Instructions

1. Load the block editor and add a list block. Add some list items or use the example block code below.
2. Confirm that the dimensions control panel is there.
3. Add padding and margin values to the list block.
4. Save and confirm the styles appear on the frontend.
5. Test the new support works for the block via theme.json and global styles. See example JSON below.

Example blockcode

<!-- wp:list {"style":{"spacing":{"padding":{"top":"var:preset|spacing|80","right":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|80"},"margin":{"top":"8.94rem","right":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|80"}}},"backgroundColor":"vivid-green-cyan"} -->
<ul class="has-vivid-green-cyan-background-color has-background" style="margin-top:8.94rem;margin-right:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80);margin-left:var(--wp--preset--spacing--80);padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><li>Account</li><li>Agenda</li><li>Archive</li><li>Ballot</li><li>Bill</li><li>Calendar</li><li>Catalog</li><li>Checklist</li><li>Dictionary</li><li>Directory</li></ul>
<!-- /wp:list -->

	"styles": {
		"blocks": {
			"core/list": {
				"spacing": {
					"margin": "66px",
					"padding": "122px",
				}
			}
		}
	}

[glendaviesnz]

Not sure if it is an issue or not, but in TT2 the left and right margins applied in the editor get overridden in the frontend:

[glendaviesnz]

Also, padding applied in global styles doesn't show in the editor, but does in frontend ... just going to check if that is an issue in general or just with this block

[glendaviesnz]

Also, padding applied in global styles doesn't show in the editor, but does in frontend

ignore that, couldn't replicate after a page refresh.

[ramonjd]

Not sure if it is an issue or not, but in TT2 the left and right margins applied in the editor get overridden in the frontend:

Thanks, I saw that too.

It's being overwritten by !important layout styles where there is a layout content size:

gutenberg/lib/block-supports/layout.php

Line 60 in 7f0a211

'selector' => "$selector > :where(:not(.alignleft):not(.alignright):not(.alignfull))",

I figured that it's still possible to do this:

2022-08-19.15.22.40.mp4

[aaronrobertshaw]

Thanks for putting this together @ramonjd 👍

✅ Works as advertised in the editor
✅ Padding and margin are applied on the frontend
✅ Spacing can be set via theme.json and Global Styles

As you pointed out, there is a use case still for left/right margins. This is also consistent with other blocks that have recently added spacing support. So I think this should be ok to proceed with.