[Resolved] Paragraph spacing problem in Gutenberg Editor

[Markus]

Hi,

I have the problem that there is no spacing between paragraph block in the Gutenberg editor, but it works well in the frontend.

I’ve found also some cause for it. There is some inline CSS in the editor which sets the

.editor-styles-wrapper p {
    font-size: inherit;
    line-height: inherit;
    margin-top: 28px;
    margin-bottom: 28px;
}

back to

body .editor-styles-wrapper p {
    margin-top: 0px;
    margin-bottom: 0em;
}

I’ve also found some inline CSS in the editor page with the style settings which overrides the paragraph spacing:

<style id="generate-block-editor-styles-inline-css">
body .wp-block, html body.gutenberg-editor-page .editor-post-title__block, html body.gutenberg-editor-page .editor-default-block-appender, html body.gutenberg-editor-page .editor-block-list__block{max-width:calc(1200px - 10px - 10px);}html body.gutenberg-editor-page .block-editor-block-list__block[data-align="full"]{max-width:none;}.wp-block[data-align="wide"]{max-width:1200px;}.wp-block-group__inner-container{max-width:1200px;margin-left:auto;margin-right:auto;padding:0px 10px 0px 10px;}.editor-styles-wrapper a.button, .wp-block-button__link:not(.has-background){color:#ffffff;background-color:#ef4f12;}.editor-styles-wrapper a.button:hover, .editor-styles-wrapper a.button:focus, .wp-block-button__link:not(.has-background):active, .wp-block-button__link:not(.has-background):focus, .wp-block-button__link:not(.has-background):hover{color:#ffffff;background-color:#bc212a;}body.gutenberg-editor-page .block-editor-block-list__block, body .editor-styles-wrapper{font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:20px;color:#332b2d;}.content-title-visibility{color:#332b2d;}body .editor-styles-wrapper, body .editor-styles-wrapper p, body .editor-styles-wrapper .mce-content-body{line-height:1.5;}body .editor-styles-wrapper p{margin-top:0px;margin-bottom:0em;} body .editor-styles-wrapper h1, .wp-block-heading h1.editor-rich-text__tinymce, .editor-post-title__block .editor-post-title__input{font-family:-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight:600;text-transform:none;font-size:52px;line-height:1.4em;margin-bottom:20px;margin-top:0;color:#4f4f4f;}body .editor-styles-wrapper h2, .wp-block-heading h2.editor-rich-text__tinymce{font-family:inherit;font-weight:600;text-transform:none;font-size:36px;line-height:1.3em;margin-bottom:28px;margin-top:0;color:#494949;}body .editor-styles-wrapper h3, .wp-block-heading h3.editor-rich-text__tinymce{font-family:inherit;font-weight:400;text-transform:none;font-size:20px;line-height:1.2em;margin-bottom:20px;margin-top:0;color:#332b2d;}body .editor-styles-wrapper h4, .wp-block-heading h4.editor-rich-text__tinymce{font-family:inherit;font-weight:normal;text-transform:none;margin-bottom:20px;margin-top:0;font-size:inherit;color:#332b2d;}body .editor-styles-wrapper h5, .wp-block-heading h5.editor-rich-text__tinymce{font-family:inherit;font-weight:normal;text-transform:none;margin-bottom:20px;margin-top:0;font-size:inherit;color:#332b2d;}body .editor-styles-wrapper h6, .wp-block-heading h6.editor-rich-text__tinymce{font-family:inherit;font-weight:normal;text-transform:none;margin-bottom:20px;margin-top:0;font-size:inherit;color:#332b2d;}.editor-styles-wrapper a.button, .block-editor-block-list__layout .wp-block-button .wp-block-button__link{font-family:inherit;font-weight:normal;text-transform:none;}body .editor-styles-wrapper{background-color:#ffffff;background:linear-gradient(#ffffff,#ffffff), linear-gradient(#ffffff,#ffffff);}.block-editor-block-list__block a, .block-editor-block-list__block a:visited{color:#1a0dab;}.block-editor-block-list__block a:hover, .block-editor-block-list__block a:focus, .block-editor-block-list__block a:active{color:#ff6e00;}
</style>

Because the style id is “generate-block-editor-styles-inline-css”, I think that problem is caused by Generate Press.

Any suggestions?

[Markus]

Found it … it was the typography/body/space after paragraph setting in the customizer which was set to 0. I had a custom CSS for it which had the effect, that the paragraph spacing was okay in the frontend, but the Gutenberg Editor relied on the customizer setting.

Take care!
Markus

[David]

Glad to hear you found the issue!

[Author]

Posts