Edit Page View is Squished with Gutenberg Blocks installed

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 4 years, 1 month ago by trowtheplow.

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