Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Buttons block: remove margin from last button #23319

Merged
merged 2 commits into from
Jun 21, 2020

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Jun 19, 2020

Fixes #23318.

Description

The Buttons block adds right margin to each block so they are spaced. However, when buttons are centered, last button's margin pushes all buttons to the left. This PR removes the right margin of the last button in the Buttons block when they are centered.

How has this been tested?

It's a pretty small change, the easiest way to test is creating a buttons block, center the buttons and verify the last one doesn't have right margin that pushes everything to the left.

Screenshots

Before:
Before screenshot

After:
After screenshot

@Aljullu Aljullu added [Block] Buttons Affects the Buttons Block CSS Styling Related to editor and front end styles, CSS-specific issues. labels Jun 19, 2020
@Aljullu Aljullu self-assigned this Jun 19, 2020
@github-actions
Copy link

github-actions bot commented Jun 19, 2020

Size Change: +295 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/annotations/index.js 3.62 kB -2 B (0%)
build/api-fetch/index.js 3.4 kB -1 B
build/block-editor/index.js 107 kB +418 B (0%)
build/block-editor/style-rtl.css 10.7 kB -40 B (0%)
build/block-editor/style.css 10.7 kB -37 B (0%)
build/block-library/index.js 129 kB +25 B (0%)
build/block-library/style-rtl.css 8.02 kB +16 B (0%)
build/block-library/style.css 8.02 kB +15 B (0%)
build/blocks/index.js 48.1 kB +1 B
build/components/index.js 196 kB +7 B (0%)
build/data/index.js 8.44 kB -1 B
build/edit-navigation/index.js 8.26 kB +4 B (0%)
build/edit-post/index.js 303 kB -2 B (0%)
build/edit-site/index.js 16.6 kB -3 B (0%)
build/editor/index.js 44.7 kB -108 B (0%)
build/keyboard-shortcuts/index.js 2.51 kB +2 B (0%)
build/nux/index.js 3.4 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.26 kB 0 B
build/block-directory/style-rtl.css 937 B 0 B
build/block-directory/style.css 937 B 0 B
build/block-library/editor-rtl.css 7.87 kB 0 B
build/block-library/editor.css 7.87 kB 0 B
build/block-library/theme-rtl.css 730 B 0 B
build/block-library/theme.css 732 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/components/style-rtl.css 15.9 kB 0 B
build/components/style.css 15.8 kB 0 B
build/compose/index.js 9.6 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 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.17 kB 0 B
build/edit-navigation/style-rtl.css 1.02 kB 0 B
build/edit-navigation/style.css 1.02 kB 0 B
build/edit-post/style-rtl.css 5.5 kB 0 B
build/edit-post/style.css 5.5 kB 0 B
build/edit-site/style-rtl.css 3.03 kB 0 B
build/edit-site/style.css 3.03 kB 0 B
build/edit-widgets/index.js 9.33 kB 0 B
build/edit-widgets/style-rtl.css 2.43 kB 0 B
build/edit-widgets/style.css 2.43 kB 0 B
build/editor/editor-styles-rtl.css 468 B 0 B
build/editor/editor-styles.css 469 B 0 B
build/editor/style-rtl.css 3.81 kB 0 B
build/editor/style.css 3.81 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.72 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 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 711 B 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 450 B 0 B
build/list-reusable-blocks/style.css 451 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/style-rtl.css 663 B 0 B
build/nux/style.css 660 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 788 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14 kB 0 B
build/server-side-render/index.js 2.68 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.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action


.wp-block-button:last-child {
margin-right: 0;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good catch. Do you think we should remove this margin in all cases, not just the aligned centered buttons? (And the left margin in case of the aligned right ones?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense. Done in the last commit: aed2ea7.

Before After
imatge imatge

@ZebulanStanphill ZebulanStanphill merged commit 01fab7e into master Jun 21, 2020
@ZebulanStanphill ZebulanStanphill deleted the fix/23318-fix-centered-buttons-misalignment branch June 21, 2020 22:03
@github-actions github-actions bot added this to the Gutenberg 8.4 milestone Jun 21, 2020
@Aljullu Aljullu changed the title Remove margin from last button if buttons are centered Buttons block: remove margin from last button Jun 22, 2020
This was referenced Jun 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block CSS Styling Related to editor and front end styles, CSS-specific issues.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Buttons block: centered buttons are pushed to the left
3 participants