Support » Fixing WordPress » Fixing paragraph block spacing in the Gutenberg editor

  • joneiseman

    (@joneiseman)


    I’m trying to update my theme so that the appearance of posts/pages in the Gutenberg editor matches the styling on the front-end.
    When I edit a post in the Gutenberg editor it shows too much space between paragraph blocks (the spacing between paragraphs is fine when viewing the page/post on the front end). I can adjust the spacing between paragraphs in the back end by overriding the CSS by providing my own CSS for the block editor styles. The problem is that when I fix it for paragraph blocks it breaks the display of custom HTML blocks.
    Here’s what I put in my custom CSS:

    body .editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    After this I can no longer edit the first custom html block because the second block is overlapping the first one.
    The same class is used for paragraph blocks and for custom HTML blocks. In both cases it uses the class “editor-block-list__block-edit”

    By default, it uses 32px margins for both the top and the bottom of blocks.

    Here’s the CSS rule that results in the 32px top and bottom margins:

    .editor-block-list__layout .editor-default-block-appender>.editor-default-block-appender__content, .editor-block-list__layout>.editor-block-list__block>.editor-block-list__block-edit, .editor-block-list__layout>.editor-block-list__layout>.editor-block-list__block>.editor-block-list__block-edit {
        margin-top: 32px;
        margin-bottom: 32px;
    }

    Is there any way to fix the spacing between paragraphs without breaking custom HTML blocks? It may be that this is only a problem for custom HTML blocks.

Viewing 1 replies (of 1 total)
  • Joy

    (@joyously)

    The trick is don’t style any of the editor UI. Only style the blocks themselves, or better yet, only style HTML elements and not blocks. It shouldn’t matter if the spacing is a little off. It’s only an editor. It doesn’t have to be exact, especially since the front end will be very different on the different devices visitors use.

Viewing 1 replies (of 1 total)
  • The topic ‘Fixing paragraph block spacing in the Gutenberg editor’ is closed to new replies.