Support » Plugin: Gutenberg » Edit Page View is Squished with Gutenberg Blocks installed

  • I installed Gutenberg, and am slowly updating my pages to blocks. The problem is the edit page view is painful to work on. All the blocks do not open up to the width of the window and are squished and go really long. The Page Preview is fine. Is this a template issue? Has anyone encountered this problem?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi there!

    Just to make sure I understand, is the edit page appearing squished in the blocks itself (i.e. when you type) or are the list of blocks appearing blocked? If you can share a screenshot of what you see, that might be really helpful for debugging what’s happening.

    From what you’ve shared, it sounds like it’s likely a template issue. If you try switching (temporarily) to a default theme, like Twenty Twenty, do you still see the same issue when editing pages?

    This has been frustrating for me as well – so far as I can tell, this is caused by something applying a ‘wp-block’ class to the content which (unless you have a data-align set to ‘wide’ or ‘full’) will cap the width at 580px

    <p aria-label="Empty block; start writing or type forward slash to choose a block" role="textbox" class="block-editor-block-list__block wp-block rich-text block-editor-rich-text__editable wp-block" aria-multiline="true" contenteditable="true" id="block-d22995b6-8289-4108-81d8-408ee42b43f5" data-block="d22995b6-8289-4108-81d8-408ee42b43f5" data-type="core/paragraph" data-title="Paragraph" tabindex="0" style="white-space: pre-wrap;"><span data-rich-text-placeholder="Start writing or type / to choose a block" contenteditable="false"></span></p>

    .wp-block {
        max-width: 580px
    }
    
    .wp-block[data-align=wide] {
        max-width: 1100px
    }
    
    .wp-block[data-align=full] {
        max-width: none
    }

    I’m not sure which part of WP exactly is piping that part of the stylesheet down, or is responsible for adding the class but not data attribute…

    EDIT: The wrapper does not have the wp-block class on it when rendered for non-edit, hence it looks fine when actually viewing the page or preview.

    • This reply was modified 9 months, 3 weeks ago by trowtheplow.

    @evarlese I did try Twenty Twenty and the editor looks the same.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Edit Page View is Squished with Gutenberg Blocks installed’ is closed to new replies.