#55702 - Control dimensions (margin and padding) of the list-item block

[valerogarte]

What?

Fixes #55702.

Introduces the ability to adjust the dimensions (margin and padding) of individual list-item blocks within the Gutenberg editor.

Why?

This enhancement addresses the need identified in issue #55702. Previously, users were unable to control the spacing around list items, leading to limited styling options and potential layout inconsistencies. By allowing for margin and padding adjustments, this change provides greater flexibility and precision in design.

How?

Support for dimension controls has been added to the block.json file of the list-item block. This includes the necessary backend changes to enable these features within the block editor's interface.

Testing Instructions

1. Open a post or page.
2. Insert a "List" block into the content.
3. Add several items to the list to test different spacing scenarios
4. Select the list block and expand the "Dimensions" panel in the block settings sidebar.
5. Adjust the margin and padding values and observe the changes in real-time in the editor.

Testing Instructions for Keyboard

1. Click on a list element to activate it.
2. Press Tab to cycle through the block's controls until you reach the "Dimensions" panel.
3. Use the Enter key to expand the "Dimensions" options if necessary.
4. With the dimensions panel expanded, use the arrow keys to adjust the margin and padding values.
5. Press Enter to apply the changes and Tab to continue navigating to the next control

Screenshots or screencast

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @valerogarte! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[ramonjd]

Thanks for the PR!

This looks like a nice addition. LGTM and works as expected.

Would like a sanity check from @jasmussen before ✅ and 🚢

[jasmussen]

Seems fine to me (and thank you for the PR!). Is there a global styles counterpart? I.e. can I set and forget some dimensions there, and have them apply across all list items? Did not have time to fully test this PR this morning, sorry. CC: @WordPress/gutenberg-design for a broader check.

[jameskoster]

I reckon most blocks should support margin/padding. So yes please!

[richtabor]

Is there a global styles counterpart?

Yes, it works fine in Global Styles as well.

[richtabor]

Thanks for contributing! LGTM.