Fix: Remove unrequired margins from the columns block

[jorgefilipecosta]

Description

PR #19910 cc: @ellatrix, set margins on columns block to 0. This is causing some visual issues when multiple columns are added and on the widgets screen. It seems the columns block margin should be the same as the other blocks.

Before:

After:

[github-actions]

Size Change: -16 B (0%)

Total Size: 839 kB

Filename	Size	Change
build/block-library/editor-rtl.css	7.09 kB	-8 B (0%)
build/block-library/editor.css	7.09 kB	-8 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.02 kB	0 B
build/annotations/index.js	3.62 kB	0 B
build/api-fetch/index.js	4.01 kB	0 B
build/autop/index.js	2.82 kB	0 B
build/blob/index.js	620 B	0 B
build/block-directory/index.js	6.24 kB	0 B
build/block-directory/style-rtl.css	760 B	0 B
build/block-directory/style.css	760 B	0 B
build/block-editor/index.js	105 kB	0 B
build/block-editor/style-rtl.css	10.2 kB	0 B
build/block-editor/style.css	10.2 kB	0 B
build/block-library/index.js	112 kB	0 B
build/block-library/style-rtl.css	7.14 kB	0 B
build/block-library/style.css	7.15 kB	0 B
build/block-library/theme-rtl.css	683 B	0 B
build/block-library/theme.css	685 B	0 B
build/block-serialization-default-parser/index.js	1.88 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	57.7 kB	0 B
build/components/index.js	198 kB	0 B
build/components/style-rtl.css	16.6 kB	0 B
build/components/style.css	16.6 kB	0 B
build/compose/index.js	6.66 kB	0 B
build/core-data/index.js	11.1 kB	0 B
build/data-controls/index.js	1.25 kB	0 B
build/data/index.js	8.43 kB	0 B
build/date/index.js	5.47 kB	0 B
build/deprecated/index.js	772 B	0 B
build/dom-ready/index.js	569 B	0 B
build/dom/index.js	3.1 kB	0 B
build/edit-navigation/index.js	3.1 kB	0 B
build/edit-navigation/style-rtl.css	279 B	0 B
build/edit-navigation/style.css	280 B	0 B
build/edit-post/index.js	27.8 kB	0 B
build/edit-post/style-rtl.css	12.3 kB	0 B
build/edit-post/style.css	12.3 kB	0 B
build/edit-site/index.js	10.4 kB	0 B
build/edit-site/style-rtl.css	5.02 kB	0 B
build/edit-site/style.css	5.02 kB	0 B
build/edit-widgets/index.js	7.53 kB	0 B
build/edit-widgets/style-rtl.css	4.65 kB	0 B
build/edit-widgets/style.css	4.64 kB	0 B
build/editor/editor-styles-rtl.css	428 B	0 B
build/editor/editor-styles.css	431 B	0 B
build/editor/index.js	43.3 kB	0 B
build/editor/style-rtl.css	3.48 kB	0 B
build/editor/style.css	3.47 kB	0 B
build/element/index.js	4.65 kB	0 B
build/escape-html/index.js	733 B	0 B
build/format-library/index.js	7.32 kB	0 B
build/format-library/style-rtl.css	502 B	0 B
build/format-library/style.css	502 B	0 B
build/hooks/index.js	2.13 kB	0 B
build/html-entities/index.js	622 B	0 B
build/i18n/index.js	3.56 kB	0 B
build/is-shallow-equal/index.js	710 B	0 B
build/keyboard-shortcuts/index.js	2.51 kB	0 B
build/keycodes/index.js	1.91 kB	0 B
build/list-reusable-blocks/index.js	3.12 kB	0 B
build/list-reusable-blocks/style-rtl.css	226 B	0 B
build/list-reusable-blocks/style.css	226 B	0 B
build/media-utils/index.js	5.28 kB	0 B
build/notices/index.js	1.79 kB	0 B
build/nux/index.js	3.4 kB	0 B
build/nux/style-rtl.css	616 B	0 B
build/nux/style.css	613 B	0 B
build/plugins/index.js	2.67 kB	0 B
build/primitives/index.js	1.49 kB	0 B
build/priority-queue/index.js	788 B	0 B
build/redux-routine/index.js	2.84 kB	0 B
build/rich-text/index.js	14.8 kB	0 B
build/server-side-render/index.js	2.67 kB	0 B
build/shortcode/index.js	1.7 kB	0 B
build/token-list/index.js	1.28 kB	0 B
build/url/index.js	4.01 kB	0 B
build/viewport/index.js	1.84 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.17 kB	0 B

_{compressed-size-action}

[mkaz]

👍 Confirmed with two column blocks in editor, margins work properly after applying.

[ellatrix]

@jorgefilipecosta I set the margin to 0 so the margin is collapsed and inherits the margin of the column's children. I still believe this is the right way to do it. Cc @jasmussen

Currently column with a paragraph will have a margin that is twice as big:

[jasmussen]

Correct Ella, excellent catch.

Picture this:

Paragraph
Image
Paragraph
Columns
	Column
		Paragraph
	Column
		Paragraph
Paragraph

In the above setup, every block has margins. Which means we could be looking at double or triple margins for paragraphs inside columns.

So it makes a lot of sense to set a zero top and bottom margin for the column block so that the paragraph margin is the one that applies instead.

The issue Jorge outlines appears to be specific to the placeholder component, to which the padding could still be applied if we like.

[ellatrix]

Yeah, it seems like the margins should apply specifically to placeholders.