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

alignfull/alignwide classes not applied in editor, only on frontend #19331

Closed
strarsis opened this issue Dec 26, 2019 · 3 comments
Closed

alignfull/alignwide classes not applied in editor, only on frontend #19331

strarsis opened this issue Dec 26, 2019 · 3 comments
Labels
[Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed

Comments

@strarsis
Copy link
Contributor

strarsis commented Dec 26, 2019

Describe the bug
alignfull and alignwide alignment options are not reflected by the block classes in editor.
These classes are only applied to their element counterparts in frontend.
Edit: Even worse, manually added classes alignfull and alignwide are automatically removed when saving.

To reproduce
Steps to reproduce the behavior:

  1. Add align-wide theme support.
  2. Add group element in Gutenberg editor.
  3. Select full or wide alignment option for that group element.
  4. Inspect the group element in editor and notice that it gets no class for alignfull or alignwide assigned to it, on frontend however the class is assigned to the element for that block.
    The element is still somehow styled by the editor (inline) to become somehow wide or full aligned, but the theme can't optimize or change this process using the appropriate classes for CSS.

Expected behavior
alignfull and alignwide classes are correctly applied to block elements in editor as they are already in frontend, too. Edit: And that these classes alignfull and alignwide aren't removed automatically during editor save.

@strarsis
Copy link
Contributor Author

strarsis commented Feb 3, 2020

As a workaround, I have to provide separate styles for the editor (but not editor-styles!),
that override some of the frontend styles:

.wp-block[data-align=wide] {
    & > .is-block-content {
      & > .wp-block-group {
        // some specific max-width, etc
      }
    }
  }
}

@strarsis
Copy link
Contributor Author

strarsis commented Feb 3, 2020

For clarifying: Some themes may have a different interpretation of "wide" alignment.
In my case for some group block styles the outmost group element extends to 100% width, no max-width constraints and provide a background, while the inner content got a max-width.

@talldan
Copy link
Contributor

talldan commented Feb 4, 2020

Duplicate of #18644

@talldan talldan marked this as a duplicate of #18644 Feb 4, 2020
@talldan talldan closed this as completed Feb 4, 2020
@talldan talldan added the [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed label Feb 4, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed
Projects
None yet
Development

No branches or pull requests

2 participants