[Support request] Elements > full width layout on entire site = breaking block editor

[Fredrik]

I’ve had issues for as long as I can remember with the gutenberg(block editor) editor on all sites i’ve built and ALWAYS thought – Gutenberg sucks, so many issues.. But I started digging.

This is my issue.

This block has encountered an error and cannot be previewed.

This is caused by GP elements, setting content to full width on entire site(with I’ve always had this as a standard).

Now, using the block editor, the editor becomes full width.
Pressing blocks will now randomly crash.

When I set GP elements to exclude posts, the editor isn’t full width and the blocks stops crashing.

So my question is… is GP elements really supposed to overlap into the editor? I always thought Gutenberg was in full width, but it really isn’t supposed to be. In my mind, elements shouldn’t affect how I view the editor, only how the frontend acts.

I disabled every plugin before making this post, and tested on 2 sites to confirm it.

I use Global layout > full width to accommodate for using Beaver Builder and setting the width there.

[Fredrik]

I’ve figured out that the crash seems to happen when the heading block get assigned a class, <h2 class=”wp-block-heading”>.
When I copy this heading to other sites, the crash occurs.

Not sure what or from where this is generated, because I don’t have a plugin for Gutenberg. But a CSS class shouldn’t crash the editor?

[David]

Hi there,

i cannot replicate this issue.
I have:

1. created a Layout Element and set the Entire Site to Full Width
2. I created a new Post and added a core Heading block which now automatically adds the class of wp-block-heading to the H2.
3 I published the changes.

NO error

4. I coped the Heading block
5. I pasted this into a new Post.

I then repeated the above using pages.

Still no error.

What am i missing ?

[Fredrik]

Did you click around on the blocks? The errors are in the block editor, not when publishing.
So I click around, editing headers, text, and when clicking the blocks, they output an error.

So the block crashes.

I added login information you can check. You’ll see the editor becomes full width.

Just click around with the cursor and the block will start to drop out.
I’m using Firefox, also tried disabling all addons. Issues only disapear when disabeling GP elements or adding “post” as excluded to full width rule.

See console error below. It appear each time a block crashes.

TypeError: Range.setStart: Argument 1 is not an object.
c https://………&#8230;..se.se/wp-includes/js/dist/dom.min.js?ver=e03c89e1dd68aee1cb3a:2
H https://………&#8230;..se.se/wp-includes/js/dist/dom.min.js?ver=e03c89e1dd68aee1cb3a:2
z https://………&#8230;..se.se/wp-includes/js/dist/dom.min.js?ver=e03c89e1dd68aee1cb3a:2
q https://………&#8230;..se.se/wp-includes/js/dist/dom.min.js?ver=e03c89e1dd68aee1cb3a:2
k https://………&#8230;..se.se/wp-includes/js/dist/dom.min.js?ver=e03c89e1dd68aee1cb3a:2
Uu https://………&#8230;..se.se/wp-includes/js/dist/block-editor.min.js?ver=ed2b2aa3837336baf00f:26
Ir https://………&#8230;..se.se/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.2.0:10
xl https://………&#8230;..se.se/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.2.0:10
Sl https://………&#8230;..se.se/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.2.0:10
Sl https://………&#8230;..se.se/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.2.0:10
cl https://………&#8230;..se.se/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.2.0:10
zn https://………&#8230;..se.se/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.2.0:10
al https://………&#8230;..se/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.2.0:10
react-dom.min.js:10

[David]

I can get the error to occur if I copy the Blocks from your post into my post but only on Firefox.
If it manually add blocks to the editor i cannot make the error happen.
If i copy the HTML from your site to my site i cannot make the error happen.

Is it only that page you have the issue with ?

[Fredrik]

I can’t seem to replicate this using Google Chrome. I did find others having similar issues with the block editor.
Might be related to Firefox. But in my case, only happens using mentioned settings.

[Fredrik]

I did copy the text to another site and same error appears. But only in Firefox.
So is this a browser conflict?

[David]

Does it happen if you start a new post and write a new heading – then try copying and pasting it ?

[Fredrik]

I confirm I can’t replicate it writing a new post and new blocks.
What on the living earth is happening? Why would one posts content trigger it, but not anothers?

[Fredrik]

I copied another posts content into a new post. No errors.

[Fredrik]

I’ve written some articles on Google drive and tried to copy them to the site, and it crashes there too.

And it’s only firefox. If I create the article using chrome, it’s all good.

[David]

I think there is some hidden formatting in the copied text. Can you try pasting as plain text using Ctrl + Shift + V ?

[Fredrik]

Tried that too, thought the same.
But after publishing, and visiting the editor again, the crash re-appears.

check the post “article”

[Fredrik]

I again disabled “post” under global layout, and it works.

I still think it’s the way GP settings overlaps into the block editor, changing the output of the block editor. Why does it affect how I edit a post?

[David]

The editor is meant to provide a true ref-lection of the front end, so if a post has its Content set to Full Width then editor will show that.

But i do not see how their could be relationship between what a layout element does and copying a block does. Its seems to distant to be related.

I will try some more tests to replicate.

But can you confirm this happens with any text you copy from a google doc ?

[Author]

Posts