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

Reusable Blocks don't respect alignment settings of Blocks within them #14764

Closed
getdave opened this issue Apr 2, 2019 · 2 comments
Closed
Assignees
Labels
[Block] Block The "Reusable Block" Block

Comments

@getdave
Copy link
Contributor

getdave commented Apr 2, 2019

Describe the bug
Several Blocks have alignment controls which afford wide and full widths (eg: section, cover...etc). These Blocks display correctly in the Editor as a wide or full width as required.

When creating a Reusable Block however, a core/block Block <div> is created to contain the Blocks within the Reusable Block.

<div data-type="core/block" aria-label="Block: Reusable Block" class="wp-block editor-block-list__block block-editor-block-list__block"  />

By default this core/block behaves like other Block wrapper <div> and is the standard width as defined by the following CSS rule which applies to all Blocks:

.wp-block {
    max-width: 610px;
}

This causes the Blocks within the Reusable Block to be constrained to the standard width even if they themselves are set to wide or full:

Screen Shot 2019-04-02 at 11 26 03

Expected behavior

The resuable Block should not constrain the width of the Blocks within it. This can be achieved by removing the max-width, horiztonal padding and margins. The result is then as expected (ie: the Blocks within are as wide as they need to be based on their align settings).

Screen Shot 2019-04-02 at 11 27 52

Note the Reusable Block shown in the above screenshot contains a section Block with a blue background which is set to full align setting. See how it occupies the full width of the editor (almost! - a few tweaks still needed).

To Reproduce
Steps to reproduce the behavior:

  1. Add a few Blocks which support wide and full align settings (eg: cover, section)
  2. Set the Blocks to be full alignment - notice the width fills the editor canvas.
  3. Create a Reusable Block from the Blocks created above
  4. See how the Blocks are now constrained in width.

Screenshots
See above

Desktop (please complete the following information):
All

Smartphone (please complete the following information):
All

@getdave getdave added the [Block] Block The "Reusable Block" Block label Apr 2, 2019
@getdave getdave self-assigned this Apr 2, 2019
@youknowriad
Copy link
Contributor

I think this is a duplicate of #8288 Feel free to add context there.

@getdave
Copy link
Contributor Author

getdave commented Apr 2, 2019

@youknowriad Quite right. I even did an Issue search but must have missed it. Closing in favour of #8288

@getdave getdave closed this as completed Apr 2, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Block The "Reusable Block" Block
Projects
None yet
Development

No branches or pull requests

2 participants