Skip to content

v8.0.0-RC1: Image block sits outside of perceived conatiner in editor (Twenty Twenty theme) #21961

Closed

Description

Describe the bug
In v8.0.0-RC1 and the Twenty Twenty theme enabled, within the editor the image block sits outside of the central 'container' of the page.

This issue is related to #21885 and #21911 (but this issue is about when no alignment is set).

It looks like this is to do with the change in #21822 where the wrapper div was removed from the Image block in the editor. This change means that the following styling in the Twenty Twenty theme now overrides the margins that should centre the block:

.editor-styles-wrapper figure {
  margin: 0;
}

Whereas if you disable the plugin, then the wrapper div element is targeted by

.edit-post-visual-editor .block-editor-block-list__block {

This particular selector was removed in #20951 at this line. A solution to this issue could be either to fix this in Twenty Twenty, or add back in the div wrapper to the Image block to mitigate the specificity issue.

To reproduce
Steps to reproduce the behavior:

  1. Activate the Twenty Twenty theme on your site
  2. Add an Image block and select any image and set it to left aligned
  3. Instead of the image block being centered within the perceived container of the page, the image is left aligned outside of that 'container'.

Expected behavior
The image block to sit within the perceived 'container' of the page in Twenty Twenty as it does on the front end.

Screenshots

Before (WordPress 5.4, plugin disabled)

image

After (WordPress 5.4, plugin v8.0.0-RC1 enabled)

image

Editor version (please complete the following information):

  • WordPress version: 5.4, Gutenberg v8.0.0-RC1

Desktop (please complete the following information):

  • OS: MacOS
  • Browser: Chrome 81
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Needs TestingNeeds further testing to be confirmed.[Block] ImageAffects the Image Block

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions