Fixed Gutenberg inconsistent styles

Alex

MD developer
Messages
5,274
Reaction score
1,312
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
908
Reaction score
111
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.
 
Comment

gauravtiwari

Blogger
Messages
129
Reaction score
56
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.
 
Comment

Alex

MD developer
Messages
5,274
Reaction score
1,312
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.
 
Comment

Alex

MD developer
Messages
5,274
Reaction score
1,312
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:
Comment
Top