WordPress.org

Make WordPress Core

Opened 8 weeks ago

Last modified 7 weeks ago

#54250 new defect (bug)

Twenty Twenty One: Editor Buttons margins incompatible with gap

Reported by: stacimc Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: trunk
Component: Bundled Theme Keywords: has-testing-info
Focuses: Cc:

Description

Twenty Twenty One has a few style rules in the editor that will causes issues when the Buttons block is refactored to use gap to control vertical spacing in between buttons, rather than using margins. (https://github.com/WordPress/gutenberg/pull/34546)

It enforces a 0px margin on the Buttons container, and applies additional margin to the first and last children of the Buttons block. With margins removed from individual buttons, this causes:

  • Insufficient space between Buttons container and adjacent blocks
  • The first button in a Buttons group is vertically offset from its siblings
[data-block].wp-block-buttons {
	margin-top: 0;
	margin-bottom: 0;
}

[data-block].wp-block-buttons .wp-block-button:first-child {
	margin-top: var(--global--spacing-vertical);
}

[data-block].wp-block-buttons .wp-block-button:last-child {
	margin-bottom: var(--global--spacing-vertical);
}

Proposed Solution:

  • Remove the rule setting 0px margin on the container, allowing it to fall back to default spacing
  • Remove the rules setting extra margin-top/bottom on first/last buttons as it is no longer necessary

Attachments (1)

Screen Shot 2021-10-12 at 12.14.18 PM.png (64.7 KB) - added by stacimc 8 weeks ago.
Bug: There is no margin in between Buttons containers, and the first button in each group is vertically offset

Download all attachments as: .zip

Change History (6)

@stacimc
8 weeks ago

Bug: There is no margin in between Buttons containers, and the first button in each group is vertically offset

#1 @Boniu91
7 weeks ago

  • Keywords needs-testing-info added

Hello @stacimc thank you for creating the ticket.

Could you provide us with the exact step by step instructions that are used to reproduce the issue?

It'll be easier for the Test team to follow exactly the same steps as you do.

This ticket was mentioned in Slack in #core-test by boniu91. View the logs.


7 weeks ago

#3 @aristath
7 weeks ago

Steps to reproduce and test

  1. Use the twentytwentyone theme.
  2. In style.css, add this:
    div {
            background-image: url("./assets/images/Daffodils.jpg") !important;
    }
    
    Check and verify that the image is everywhere.
  3. In functions.php add the following:
    add_filter( 'should_load_separate_core_block_assets', '__return_true' );
    add_filter( 'styles_inline_size_limit', function( $size ) {
            return 1000000; // Extreme, but this is just for the purpose of a test.
    });
    add_action( 'wp_enqueue_scripts', function() {
            wp_style_add_data( 'twenty-twenty-one-style', 'path', get_theme_file_path( 'style.css' ) );
    }, 20 );
    

Without the patch: the image no longer shows as the background.
With the patch: the image should show.

#4 @Boniu91
7 weeks ago

  • Keywords has-testing-info added; needs-testing-info removed

#5 @stacimc
7 weeks ago

Since writing this ticket, the Buttons gap support was merged (https://github.com/WordPress/gutenberg/pull/34546). It refactors Buttons to use gap for vertical spacing rather than margins, and forces all margins on Button blocks to 0. This causes the described regressions to vertical spacing.

To test:

  1. Use the Twenty Twenty One theme
  2. Insert a Buttons block into a new post, and add several buttons to it, enough that they take up multiple rows.
  3. Insert a second Buttons block immediately afterward, and add several buttons to it.
  4. Observe that there is no margin in between the two Buttons containers.
  5. Inspect the first Button in either group and observe this CSS rule:
    [data-block].wp-block-buttons .wp-block-button:first-child {
    	margin-top: var(--global--spacing-vertical);
    }
    

The first-child (and corresponding last-child) rule do not cause a visual bug because they are overridden by the block, but these styles could be deleted. The lack of margin between Buttons containers does cause a visual issue.

Note: See TracTickets for help on using tickets.