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.

Sign up for GitHub

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

Site Editor: block list width looks off #43640

Closed
vindl opened this issue Jun 24, 2020 · 5 comments · Fixed by WordPress/gutenberg#23488
Closed

Site Editor: block list width looks off #43640

vindl opened this issue Jun 24, 2020 · 5 comments · Fixed by WordPress/gutenberg#23488
Assignees
@ockham
Labels
[Goal] Full Site Editing [Pri] High Address as soon as possible after BLOCKER issues [Type] Bug

Comments

@vindl
Copy link
Member

vindl commented Jun 24, 2020

When testing the site editor on Dotcom, I noticed that the block list container is not using full width.

This makes the page layouts that contain full width blocks look off compared to what's shown in Gutenboarding preview and on front end.

Screenshot 2020-06-24 at 18 56 32
@vindl vindl added [Type] Bug [Pri] High Address as soon as possible after BLOCKER issues [Goal] Full Site Editing labels Jun 24, 2020
@vindl
Copy link
Member Author

vindl commented Jun 24, 2020

This actually looks like a core issue so we might transfer the discussion there.

@ockham
Copy link
Contributor

ockham commented Jun 24, 2020

This actually looks like a core issue so we might transfer the discussion there.

Yeah, I think I can repro the same in Core when testing with the twentytwenty-blocks themo.

I think this probably is a default that comes from the post editor, and needs some tweaking for the site editor, where we want the full width by default.

@ockham
Copy link
Contributor

ockham commented Jun 24, 2020

I think that this is coming from the theme. In the case of seedlets, I think it's

max-width: var(--responsive--aligndefault-width);

in seedlet/assets/sass/blocks/utilities/_editor.scss.

That rule can be overridden with data-align="full". I'll play a bit more with this; we might need to think about some more general changes to how the Site Editor overrides theme rules (similar to how the Post Editor does).

@ockham
Copy link
Contributor

ockham commented Jun 24, 2020

In a post content editor context, the Cover Block has data="full" set, which makes it displayed at full width there. That same attribute seems to be missing in the site editor context 🤔

@ockham
Copy link
Contributor

ockham commented Jun 25, 2020 •
edited
Loading

In a post content editor context, the Cover Block has data="full" set, which makes it displayed at full width there. That same attribute seems to be missing in the site editor context

To be precise, it's not the Cover Block itself, but a wrapping <div class="wp-block" data-align="full" />, which is coming from BlockListBlock: https://github.com/WordPress/gutenberg/blob/42ddcc69a23736d1f48b891c1a0d839892aae31a/packages/block-editor/src/components/block-list/block.js#L158-L169

@ockham ockham mentioned this issue Jun 25, 2020
Merged
6 tasks
ockham added a commit to WordPress/gutenberg that referenced this issue Jun 30, 2020
@ockham
Edit Site: Allow wide alignment (#23488)
266ca8f 
For the Site Editor, we want to allow post content to be inserted at full width (e.g. Cover Blocks). This is currently impossible (see Automattic/wp-calypso#43640) due to two independent problems. This PR fixes them.

1. [Unlike the Post Editor](https://github.com/WordPress/WordPress/blob/f18870ae4e1cb3cd81136424e43c99d705aa2912/wp-admin/edit-form-blocks.php#L286), we're currently not setting `alignWide` in the Site Editor's settings, which becomes a problem here: https://github.com/WordPress/gutenberg/blob/9cd07a92d463377767f56c2b3985badbd363d98f/packages/block-editor/src/hooks/align.js#L173-L196.
2. In order to specifically make the Post Content block full-width, we need to add `align` to its `supports` attribute. (It's still conceivable to use this block at other widths, e.g. in a setting with a sidebar.)

Finally, there remained a 10px padding even after applying these changes. This was fixed by removing block list padding from the Site Editor (a change that had previously been applied to the Post Editor in #22213).
@vindl vindl mentioned this issue Jul 1, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ockham ockham

Labels
[Goal] Full Site Editing [Pri] High Address as soon as possible after BLOCKER issues [Type] Bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Edit Site: Allow wide alignment WordPress/gutenberg
2 participants
@ockham @vindl