Media & Text: Add spacing block supports

[ndiego]

Related:

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

What?

Add padding and margin support to the Media & Text block.

Why?

To create consistency across blocks.

How?

Added the relevant block supports in block.json

Testing Instructions

1. Insert a new Media & Text block.
2. Confirm that the dimensions control panel is there and there are no defaults.
3. Add padding and margin.

Screenshots or screencast

[andrewserong]

Apologies for leaving basically the same feedback on each of these PRs @ndiego, but thanks so much again for digging into all these opt-ins!

It looks like this block will also need the box-sizing: border-box rule in order for the padding to line up with adjacent blocks like Group.

Here's the comparable rule from the Cover block that we can use:

gutenberg/packages/block-library/src/cover/style.scss

Lines 10 to 11 in f764be4

	// This block has customizable padding, border-box makes that more predictable.
	box-sizing: border-box;

[aaronrobertshaw]

Thanks for putting this PR together @ndiego 👍

I'd like to echo Andrew's suggestions around box-sizing. Also, to help with tracking our progress towards improving consistency in our design tool availability I've added this to the current tracking table.

[ndiego]

Thanks! I'll get box-sizing taken care of today.

[ndiego]

@aaronrobertshaw box-sizing has been added and tested. All looks good on my end.

[andrewserong]

Thanks for updating this one, too, @ndiego!

✅ Padding is working as expected in the post editor
✅ Padding is working as expected in the site editor and set in global styles

LGTM! ✨

[ndiego]

Thanks for reviewing @andrewserong. These Admin e2e tests keep timing out, any ideas?

[andrewserong]

@ndiego I think it's just an unrelated flaky e2e test. Looks like it's passing now, so I'll merge this in!