Fixed Gutenberg inconsistent styles

Alex

MD developer
Messages
5,052
Reaction score
1,203
In WordPress 5.4 much of the underlying markup in Gutenberg has been changed and some of the styles in lib/admin/css/block-editor.css need to be updated to match the frontend again.
 

Some French Dude

SomeFrenchDude
Messages
837
Reaction score
106
styles in lib/admin/css/block-editor.css need to be updated to match the frontend again

Do you mean they need to be updated by you through an MD update (option A)? Or by each user (option B)?
My understanding goes for option A.
 

gauravtiwari

Blogger at https://gauravtiwari.org
Messages
91
Reaction score
31
Website
gauravtiwari.org
CSS:
@media screen and (min-width: 900px) {

  .content-sidebar .wp-block-image img {

    max-width: 100%;

  }

  .content-sidebar .alignfull {

    margin-left: -30px;

    margin-right: -30px;

  }

  .content-sidebar .content-inner {

    margin-left: 30px;

    margin-right: 30px;

  }

  .widget .menu > .menu-item {

    float: none;

  }

  .content-full figure.wp-block-image.alignfull.size-large {

    margin: 10px -33.4% 37px;

  }

  .content-sidebar .content {

    width: 70%;

  }

}

I am using this CSS to fix the layout issues at my site.
 

Alex

MD developer
Messages
5,052
Reaction score
1,203
CSS:
@media screen and (min-width: 900px) {

  .content-sidebar .wp-block-image img {

    max-width: 100%;

  }

  .content-sidebar .alignfull {

    margin-left: -30px;

    margin-right: -30px;

  }

  .content-sidebar .content-inner {

    margin-left: 30px;

    margin-right: 30px;

  }

  .widget .menu > .menu-item {

    float: none;

  }

  .content-full figure.wp-block-image.alignfull.size-large {

    margin: 10px -33.4% 37px;

  }

  .content-sidebar .content {

    width: 70%;

  }

}

I am using this CSS to fix the layout issues at my site.

Nice fix! These styles and more improvements coming to MD5.1.1.
 

Alex

MD developer
Messages
5,052
Reaction score
1,203
Fixed in MD5.1.1.
Block editor CSS has been rewritten and optimized to support the latest version of Gutenberg, and access to dozens of helper classes you also have access to on the frontend (.mb-double, .block-double, .text-center, and others). Also integrates new Tertiary and Action brand colors in MD > Site Design:

Screen Shot 2020-05-31 at 8.47.55 PM.png

Brand colors, text colors, and button colors synced across your whole site and into the Blocks editor for design consistency:

Screen Shot 2020-05-31 at 9.02.30 PM.png
 
Last edited:
Top