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

Align single half width column to left #27142

Merged
merged 2 commits into from
Nov 23, 2020

Conversation

draganescu
Copy link
Contributor

@draganescu draganescu commented Nov 20, 2020

Fixes #26538

Adds more specific margin rules to .wp-block-columns .wp-block . Should not break anything else.
To test:

  • In a new post
  • Add a columns block with one column
  • Set the width of the column to 50%
  • The column should be aligned to the left

@draganescu draganescu changed the title remove the auto margin for individual column blocks Align single half width column to left Nov 20, 2020
@github-actions
Copy link

github-actions bot commented Nov 20, 2020

Size Change: +1.35 kB (0%)

Total Size: 1.2 MB

Filename Size Change
build/autop/index.js 2.83 kB -1 B
build/block-directory/index.js 8.72 kB -3 B (0%)
build/block-editor/index.js 133 kB +16 B (0%)
build/block-library/editor-rtl.css 8.96 kB +13 B (0%)
build/block-library/editor.css 8.96 kB +13 B (0%)
build/block-library/index.js 148 kB +502 B (0%)
build/block-library/style-rtl.css 8.23 kB +123 B (1%)
build/block-library/style.css 8.23 kB +123 B (1%)
build/blocks/index.js 48.1 kB +73 B (0%)
build/components/index.js 172 kB -10 B (0%)
build/compose/index.js 9.93 kB -1 B
build/core-data/index.js 14.8 kB +2 B (0%)
build/data/index.js 9.71 kB +137 B (1%)
build/date/index.js 11.2 kB +4 B (0%)
build/edit-navigation/index.js 11.2 kB -6 B (0%)
build/edit-post/index.js 306 kB -7 B (0%)
build/edit-site/index.js 23.5 kB +360 B (1%)
build/edit-widgets/index.js 26.4 kB -2 B (0%)
build/editor/index.js 43.3 kB -9 B (0%)
build/element/index.js 4.62 kB -2 B (0%)
build/format-library/index.js 6.86 kB -2 B (0%)
build/keyboard-shortcuts/index.js 2.85 kB +24 B (0%)
build/list-reusable-blocks/index.js 3.1 kB +1 B
build/media-utils/index.js 5.31 kB -2 B (0%)
build/nux/index.js 3.42 kB +1 B
build/plugins/index.js 2.56 kB -1 B
build/redux-routine/index.js 2.84 kB +2 B (0%)
build/server-side-render/index.js 2.77 kB -1 B
build/viewport/index.js 1.86 kB -2 B (0%)
build/warning/index.js 1.14 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.8 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 11.3 kB 0 B
build/block-editor/style.css 11.3 kB 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 B 0 B
build/block-serialization-default-parser/index.js 1.87 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/data-controls/index.js 827 B 0 B
build/deprecated/index.js 769 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.92 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/style-rtl.css 6.45 kB 0 B
build/edit-post/style.css 6.44 kB 0 B
build/edit-site/style-rtl.css 3.86 kB 0 B
build/edit-site/style.css 3.86 kB 0 B
build/edit-widgets/style-rtl.css 3.13 kB 0 B
build/edit-widgets/style.css 3.13 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/escape-html/index.js 735 B 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.16 kB 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/notices/index.js 1.82 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/reusable-blocks/index.js 3.07 kB 0 B
build/rich-text/index.js 13.4 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.05 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@talldan talldan added [Block] Columns Affects the Columns Block [Type] Bug An existing feature does not function as intended CSS Styling Related to editor and front end styles, CSS-specific issues. labels Nov 23, 2020
@talldan
Copy link
Contributor

talldan commented Nov 23, 2020

This didn't seem to fix things when I tested in Twenty Twenty:
Screenshot 2020-11-23 at 1 08 36 pm

I inspected the styles and the column is inheriting margin-left: auto; margin-right: auto; causing it to still be centered. It'd probably be better to explicitly set margin-left: 0; when there's only one block.

@talldan talldan added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 23, 2020
Copy link
Contributor

@talldan talldan left a comment

Choose a reason for hiding this comment

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

Looks good to me! Nice fix @draganescu.

Just to be thorough, I checked the breakpoints later on in the file:

@include break-small() {
.editor-styles-wrapper
.block-editor-block-list__block.wp-block-column:nth-child(even) {
margin-left: $grid-unit-20 * 2;
}
}
@include break-medium() {
.editor-styles-wrapper
.block-editor-block-list__block.wp-block-column:not(:first-child) {
margin-left: $grid-unit-20 * 2;
}
}

And they have more specificity, so aren't affected by this resetting of margin.

@talldan talldan merged commit 3aa7734 into master Nov 23, 2020
@talldan talldan deleted the fix/align-50-percent-single-column branch November 23, 2020 09:31
@github-actions github-actions bot added this to the Gutenberg 9.5 milestone Nov 23, 2020
tellthemachines pushed a commit that referenced this pull request Nov 30, 2020
* remove the auto margin for individual column blocks

* update margin values for blocks in blocks to zero insted of auto
@tellthemachines tellthemachines mentioned this pull request Nov 30, 2020
6 tasks
tellthemachines added a commit that referenced this pull request Dec 1, 2020
* Provide a minimum of code wrapping for the code block. (#26623)

* Block Support: Fix font size style when applying block support (#26762)

* Fix Separator editor styles (#27071)

* Fix the Post author selector for contributors (#26554)

Co-authored-by: Riad Benguella <benguella@gmail.com>

* Align single half width column to left (#27142)

* remove the auto margin for individual column blocks

* update margin values for blocks in blocks to zero insted of auto

* Add backward compatibility support for lightBlockWrapper in getSaveElement (#27189)

* Code block: paste plain text (#27236)

* paste plain text option

* Add e2e test

* Fix crash when null date passed to TimePicker (#27316)

* Fix crash when null date passed.

* Update test

* Fix GH actions "cancel" step (#27025)

* use new syntax for setting env var

* Update package-lock

* Update package-lock again

* Remove the button only option from the UI until it can be wired up to something that works in the front end. (#27379)

* Fix combobox csuggestion list closure when clicking scrollbar (#27367)

Co-authored-by: Joen A <1204802+jasmussen@users.noreply.github.com>
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
Co-authored-by: Adam Silverstein <adamsilverstein@earthboundhosting.com>
Co-authored-by: Riad Benguella <benguella@gmail.com>
Co-authored-by: andrei draganescu <me@andreidraganescu.info>
Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Co-authored-by: Ella van Durpe <wp@iseulde.com>
Co-authored-by: Noah Allen <noahtallen@gmail.com>
Co-authored-by: Andy Peatling <apeatling@users.noreply.github.com>
@tellthemachines tellthemachines removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Dec 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Columns Affects the Columns Block CSS Styling Related to editor and front end styles, CSS-specific issues. [Type] Bug An existing feature does not function as intended
Projects
None yet
3 participants