• Welcome to the all-new Kolakube support, the official place to get help for Marketers Delight, XFtoWP, CryptoWP, and other WordPress products! Please login with your account details to access private support forums.

Making MD 100% Block Editor First (Useful Gutenberg Mods)

Hi everyone,
Marketers Delight is a treat of a theme. Fast, modular and progressive. But there is still some room for improvement. I have been customizing my child theme to work perfectly around the block editor, and I have created some code snippets that work for me.

I think these snippets will work for you as well and can help boost user experience and compatibility to a great extent: https://gist.github.com/wpgaurav/6df461566b91d087a36348ea17d592b5
 

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,639
Reaction score
1,874
Thank you for this guide @gauravtiwari! I have re-visted the 3 max-width lines you overwrote in your child theme and was able to adjust them to be a little less intrusive. More info will be available in the upcoming changelog.
 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,639
Reaction score
1,874
@gauravtiwari After further testing, the current min-width: 900px that you had to overwrite:

CSS:
@media all and (min-width: 900px) {
    #editor .alignfull,
    #editor .aligncenter.wrap, #editor .alignleft.wrap,
    div.editor-styles-wrapper .alignfull,
    div.editor-styles-wrapper .aligncenter.wrap, div.editor-styles-wrapper .alignleft.wrap {
        max-width: <?php echo $post_width + $quad; ?>px;
    }
    #editor .alignwide,
    #editor .aligncenter.wrap-small, #editor .alignleft.wrap-small,
    div.editor-styles-wrapper .wp-block[data-align="wide"],
    div.editor-styles-wrapper .alignwide,
    div.editor-styles-wrapper .aligncenter.wrap-small, div.editor-styles-wrapper .alignleft.wrap-small {
        max-width: <?php echo $post_width + $double; ?>px;
    }
    .md-editor-full div.editor-styles-wrapper .alignwide,
    div.editor-styles-wrapper .wp-block[data-align="wide"],
    .md-editor-full div.editor-styles-wrapper .aligncenter.wrap-small, .md-editor-full div.editor-styles-wrapper .alignleft.wrap-small {
        max-width: <?php echo $post_width + $quad + $quad; ?>px;
    }
}

...is now turning into:

CSS:
@media all and (min-width: 900px) {
    .editor-styles-wrapper .alignwide,
    .editor-styles-wrapper .wp-block[data-align="wide"] { max-width: <?php echo $post_width + $double; ?>px; }
}

Hopefully this is enough to get rid of your overwrites. This only keeps the max-width to the alignwide class in the editor which seems to be the best way to get that specific width to display accurately.
 
Comment

gauravtiwari

Blogger
Md
Messages
284
Reaction score
119
Website
gauravtiwari.org
There is one more line to add:
.editor-styles-wrapper .alignfull, .editor-styles-wrapper .wp-block[data-align="full"] { max-width:none }
 
Last edited:
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,639
Reaction score
1,874
There is one more line to add:
Does this overwrite a default Block Editor style, or from another FSE plugin?

MD's block-editor.css file does not target this attribute.
 
Comment

gauravtiwari

Blogger
Md
Messages
284
Reaction score
119
Website
gauravtiwari.org
Plugins like GenerateBlocks, Kadence etc. are using [data-align=full] to control the width of their containers. But their backend CSS is getting overridden by the block editor.

In theme.json file (if we add that in the future, or not) there are contentSize and wideSize attributes.

Gutenberg adds these using inline CSS. Unless we specify a max-width, the assigned max-width will be contentSize.
 
Comment
Top