Skip to content

/ gutenberg

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

Jump to bottom

Fix the Buttons block margins #21376

Merged
merged 2 commits into from Apr 6, 2020
Merged

Fix the Buttons block margins #21376

merged 2 commits into from Apr 6, 2020

Conversation

@youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Apr 3, 2020

closes #21293

The buttons block is misaligned because of the margins applied between its inner blocks. This is not a perfect solution but it solves the most important breakage. It alignes the buttons (left or right depending on the block alignment) while still avoiding the trailing margins.

Other ideas welcome. I thought about grid positioning + grid gp but it's very hard with the current editor markup, maybe as a future iteration
@youknowriad
Fix the Buttons block margins
1daf403
@youknowriad youknowriad requested review from ajitbohra, Soean and talldan as code owners Apr 3, 2020
@youknowriad youknowriad self-assigned this Apr 3, 2020
@github-actions
Copy link

@github-actions github-actions bot commented Apr 3, 2020 •
edited

Size Change: +5.07 kB (0%)

Total Size: 889 kB

Filename Size Change
build/annotations/index.js 3.4 kB -45 B (1%)
build/api-fetch/index.js 3.79 kB -2 B (0%)
build/autop/index.js 2.58 kB -2 B (0%)
build/block-editor/index.js 102 kB +300 B (0%)
build/block-editor/style-rtl.css 10.2 kB -488 B (4%)
build/block-editor/style.css 10.2 kB -490 B (4%)
build/block-library/index.js 110 kB +76 B (0%)
build/block-library/style-rtl.css 7.54 kB +18 B (0%)
build/block-library/style.css 7.55 kB +20 B (0%)
build/blocks/index.js 57.5 kB -31 B (0%)
build/components/index.js 195 kB -39 B (0%)
build/compose/index.js 6.21 kB -1 B
build/core-data/index.js 10.7 kB +1 B
build/data-controls/index.js 1.04 kB +4 B (0%)
build/date/index.js 5.36 kB -1 B
build/edit-navigation/index.js 2.71 kB -2 B (0%)
build/edit-post/index.js 92.9 kB +629 B (0%)
build/edit-post/style-rtl.css 12.3 kB +288 B (2%)
build/edit-post/style.css 12.3 kB +286 B (2%)
build/edit-site/index.js 10.1 kB +1 kB (9%) 🔍
build/edit-site/style-rtl.css 5.02 kB +413 B (8%) 🔍
build/edit-site/style.css 5.02 kB +414 B (8%) 🔍
build/edit-widgets/index.js 7.17 kB +2.74 kB (38%) 🚨
build/edit-widgets/style-rtl.css 3.74 kB -1 B
build/edit-widgets/style.css 3.73 kB -1 B
build/editor/editor-styles-rtl.css 399 B -24 B (6%) ✅
build/editor/editor-styles.css 400 B -26 B (6%) ✅
build/editor/index.js 42.8 kB +20 B (0%)
build/element/index.js 4.44 kB -1 B
build/format-library/index.js 6.95 kB -1 B
build/hooks/index.js 1.93 kB +1 B
build/media-utils/index.js 4.84 kB +1 B
build/notices/index.js 1.57 kB -1 B
build/nux/index.js 3.01 kB +2 B (0%)
build/priority-queue/index.js 789 B +9 B (1%)
build/redux-routine/index.js 2.84 kB +2 B (0%)
build/server-side-render/index.js 2.54 kB +1 B
build/token-list/index.js 1.28 kB +1 B
build/url/index.js 4.01 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.03 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-library/editor-rtl.css 7.22 kB 0 B
build/block-library/editor.css 7.22 kB 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/components/style-rtl.css 16.6 kB 0 B
build/components/style.css 16.5 kB 0 B
build/data/index.js 8.23 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.05 kB 0 B
build/edit-navigation/style-rtl.css 239 B 0 B
build/edit-navigation/style.css 241 B 0 B
build/editor/style-rtl.css 3.49 kB 0 B
build/editor/style.css 3.49 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.7 kB 0 B
build/list-reusable-blocks/index.js 2.99 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/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.54 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/rich-text/index.js 14.5 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/viewport/index.js 1.6 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@youknowriad
Fix small issue
f065113
@jorgefilipecosta
jorgefilipecosta approved these changes Apr 6, 2020
View changes
Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

LGTM 👍
@youknowriad youknowriad merged commit db0327d into master Apr 6, 2020
3 checks passed
3 checks passed
@github-actions
build
Details
@github-actions
pull-request-automation
Details
@travis-ci
Travis CI - Pull Request Build Passed
Details
@youknowriad youknowriad deleted the fix/buttons-margins branch Apr 6, 2020
@github-actions github-actions bot added this to the Gutenberg 7.9 milestone Apr 6, 2020
@johnstonphilip
Copy link
Contributor

@johnstonphilip johnstonphilip commented Apr 6, 2020

I am curious to get thoughts as to why this is hardcoded, vs as a block style setting, like border-radius already is. Thoughts @youknowriad @jorgefilipecosta ?

@youknowriad
Copy link
Contributor Author

@youknowriad youknowriad commented Apr 6, 2020

@johnstonphilip Potentially, it could be added later. It's just our way of doing things, we iterate otherwise we don't ship anything for a long time. :P.

Feel free to open an issue about that setting though, it seems valuable for me at first sight.

@johnstonphilip
Copy link
Contributor

@johnstonphilip johnstonphilip commented Apr 6, 2020

@youknowriad Awesome thanks! Will do.

whyisjake added a commit that referenced this pull request Apr 22, 2020
@youknowriad @whyisjake
Fix the Buttons block margins (#21376)
f495926
whyisjake added a commit that referenced this pull request Apr 22, 2020
@youknowriad @whyisjake
Fix the Buttons block margins (#21376)
0fa11e0
@whyisjake whyisjake mentioned this pull request Apr 22, 2020
Merged
whyisjake added a commit that referenced this pull request Apr 23, 2020
@youknowriad @whyisjake
Fix the Buttons block margins (#21376)
fb40f0a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jorgefilipecosta jorgefilipecosta

@jasmussen jasmussen

@ajitbohra ajitbohra

@Soean Soean

@talldan talldan

Assignees

@youknowriad youknowriad

Labels
[Block] Buttons [Type] Bug
Projects
None yet
Milestone
Gutenberg 7.9
Linked issues

Successfully merging this pull request may close these issues.

Left/Right aligned buttons do not align with text due to margin
3 participants
@youknowriad @johnstonphilip @jorgefilipecosta