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

Columns Block: when the total column width is less than 100%, the columns appear centered inside the editor, left-aligned on the front #26538

Closed
dianeco opened this issue Oct 28, 2020 · 3 comments · Fixed by #27142
Assignees
Labels
[Block] Columns Affects the Columns Block [Type] Bug An existing feature does not function as intended

Comments

@dianeco
Copy link

dianeco commented Oct 28, 2020

Describe the bug
Inside the editor, when a single column is added and its width is set to a custom value (e.g. 50%), the column is centered inside its parent (columns) container. While on the front, the column is left-aligned inside its parent container. (Note that it also happens with multiple columns when their total width isn’t 100%).

To reproduce
Paste the following code inside the editor:

<!-- wp:columns {"align":"wide","style":{"color":{"background":"#e5e3e3"}}} -->
<div class="wp-block-columns alignwide has-background" style="background-color:#e5e3e3"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:paragraph -->
<p>Single column set to 50%.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, commodo erat adipiscing elit. Sed do eiusmod ut tempor incididunt ut labore et dolore.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Inside the editor On the front-end
single-columns-editor single-columns-front

Expected behavior
Inside the editor, the single column should be left-aligned.

Editor version:
WordPress 5.6 beta 2. Tested with the three latest default WordPress themes, including Twenty Twenty One.

@talldan talldan added [Block] Columns Affects the Columns Block [Type] Bug An existing feature does not function as intended labels Oct 29, 2020
@tellthemachines
Copy link
Contributor

I can reproduce this in WP 5.5.3, so it's not a 5.6-specific regression. Editing the title to clarify.

@tellthemachines tellthemachines changed the title Columns Block (WP 5.6 Beta 2): when the total column width is less than 100%, the columns appear centered inside the editor, left-aligned on the front Columns Block: when the total column width is less than 100%, the columns appear centered inside the editor, left-aligned on the front Nov 5, 2020
@JustinyAhin JustinyAhin self-assigned this Nov 5, 2020
@JustinyAhin
Copy link
Member

Seems like the normal/correct behavior is the one on frontend.
If there's no alignment set, the columns should have default alignment.

@JustinyAhin
Copy link
Member

I have been trying unsuccessfully for the last few days to build Gutenberg on my machine.

So I am unassigning myself from this issue for now.

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 [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants