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

Full Width Group & Cover blocks are unusable as they don’t respect Gutenberg nesting rules #965

Closed
yannickiki opened this issue Nov 6, 2019 · 1 comment · Fixed by #701

Comments

@yannickiki
Copy link
Contributor

@yannickiki yannickiki commented Nov 6, 2019

I've created this issue to highlight the current problems with Group & Cover blocks as it's a critical issue that prevents to create "beautiful web pages and advanced layouts". A PR by @allancole is currently in progress (#701).

As stated in the WP 5.3 About page, "the new Group block lets you easily divide your page into colorful sections". Currently, this isn't the case as Twenty Twenty is breaking Gutenberg nesting rules:
Paragraphs, Headings, Lists, Quotes and default aligned blocks lose their widths and are stretched to full width (readability and design issues).

It should be easy for the user to replicate inside a group what it's possible to do outside a group.
The current solution to restore the text width is to insert a group inside the full width group. Users won't discover this solution because it doesn't make any sense, and users who build on a small screen (e.g. mac 13" at 1280px) might no see that the text is actually expanded to full width on a large screen (e.g 2560px and more). Even if the user discovers this solution, it's overcomplicated and adds unnecessary nested groups.

Contrary to Twenty Nineteen which respects Gutenberg nesting rules, Twenty Twenty would create a bad precedent on how users create layouts with Gutenberg blocks.

group

Same issue with the full width Cover block that doesn't work out of the box. A group must be inserted inside the cover to constrain the text.

@allancole

This comment has been minimized.

Copy link
Contributor

@allancole allancole commented Nov 7, 2019

Yup, looks like this will get fixed in #701 :-)

Before:
image

After:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.