Twenty Twenty-One: Remove spacer block styles

[poena]

Twenty Twenty-One includes styles for the spacer block for the front.
I suggest that the styles should be removed:

It adds display:block even though display:block is the default.

It removes top and bottom margin, even though this is not needed in the post content because of collapsing margins between blocks.
I could not find any scenario where disabling this made a difference to the spacing on the front, which makes me believe it is not needed.
Tested on 5.3, 5.6, 6.0 Chrome and Firefox on Mac.

It uses a custom CSS property to force a specific height on mobile. This affects the patterns in the theme negatively.
It also causes styling problems:
-When the spacer block has a height set to 0 in the navigation block, as the theme forces this to be larger on smaller screens.
-When the block is horizontal. Horizontal was not an option when this style was added.

Consequences of removal:
-Removing the use of the custom CSS property will cause a style change for websites that has adjusted the spacing property.

Testing instructions

Activate Twenty Twenty-One.

In the block editor, create a new post and place a 200px spacer block between any two blocks.
Add a navigation block. Add a spacer block inside it.

Save, and view the post on the front.

Reduce the browser window width to below 482px.
Select the spacer block and confirm that its height is no longer 200px.

Open the navigation block. Confirm that the spacer block has a 20px height and not the expected 0px.

Optionally to test removal of the margin styles, open the browser developer console, locate the block and remove the assigned CSS:

wp-block-spacer {
    /* display: block; */
    /* margin-bottom: 0 !important; */
    /* margin-top: 0 !important; */
}

Confirm wether the spacing stays the same.

Removes the spacer block styles from Twenty Twenty-One as they cause styling conflicts. Please see ticket for details.

I have built the CSS files, but the important part is the removal of assets/sass/05-blocks/spacer/_style.scss and therefernce to the file in assets/sass/05-blocks/blocks.scss.

Trac ticket: https://core.trac.wordpress.org/ticket/56222

[mukesh27]

@poena PR looks good to me and approved.

[SergeyBiryukov]

In 54103:

Twenty Twenty-One: Remove spacer block styles.

The theme includes styles for the spacer block for the front which appears to be unnecessary:

• It adds display: block even though that is the default.
• It removes top and bottom margin, even though this is not needed in the post content because of collapsing margins between blocks.
• It uses a custom CSS property to force a specific height on mobile. This affects the patterns in the theme negatively.

It also causes styling problems:

• When the spacer block has a height set to 0 in the navigation block, as the theme forces this to be larger on smaller screens.
• When the block is horizontal. Horizontal was not an option when this style was added.

Consequences of removal:

• Removing the use of the custom CSS property will cause a style change for websites that have adjusted the spacing property.

Follow-up to [49216], [49574].

Props poena, mukesh27.
Fixes #56222.

Thanks for the PR! Merged in r54103.