Twenty Twenty-One blocks: Migrate styles for Media & text

[carolinan]

From: https://github.com/WordPress/theme-experiments/issues/82

For this block, the block style with the border is already migrated.

Twenty Twenty-One also has additional inner padding compared to the style in the editor.

The original editor style only has horizontal padding: https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/media-text/style.scss#L50

.wp-block-media-text .wp-block-media-text__content {
	direction: ltr;
	/*!rtl:begin:ignore*/
	grid-column: 2;
	grid-row: 1;
	/*!rtl:end:ignore*/
	padding: 0 8% 0 8%;
	word-break: break-word;
}

This means that with the option to adjust the position of the text, the text content may touch the upper and lower edges of the block.

This should be adjusted in Gutenberg. But should we add the experimental spacing / padding settings to the text part of the block only, or adjust the vertical padding in the block CSS?

We should also research if the 8% value is consistent with the spacing for other blocks or if it needs to be updated.

[kjellr]

We should also research if the 8% value is consistent with the spacing for other blocks or if it needs to be updated.

I've always found that to be a weird number. 😄 It looks ok, but I agree it would be good to choose something more standard. From what I can tell, I'm not sure there was a solid reason behind using 8% instead of a different value.

[scruffian]

I think we should add the experimental spacing / padding option to the block, and then set the values in the theme.json. We won't be able to use 8% though, as the control only works with pixel values.

[scruffian]

I think we should add the experimental spacing / padding option to the block, and then set the values in the theme.json. We won't be able to use 8% though, as the control only works with pixel values.

I added the option to have other values here, so we can have percentages now.