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

[Fredrik]

Well, the first article your tried was created ONLY in WP block editor. I didn’t copy anything from Google drive.
So it’s not exclusively when copying from another source.

I’d like to add that I don’t want GP to mess with the block editor in backend, because it really messes up the boxing of content. You can too easily mark outside the editors area when selecting text to edit. I’ve had major issues with it.

So if that’s how it’s supposed to act, can we at least get an option to NOT affect the block editor? It’s weird writing large articles in full width when it isn’t displayed in full width.

In my case I can add the rule to exclude posts, but not in all cases. It depends on the layout i’m building.

[Tom]

Hi there,

I logged in and tried clicking around that post in Firefox, but I’m not seeing any errors. Have something changed?

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?

GP doesn’t change the output of the editor. We add some CSS so the editor has some of the same styles as the frontend, but we don’t make any drastic changes to the editor. What specifically are you having trouble with?

[Fredrik]

Hi Tom!

Yes, I changed my elements to exclude posts, because I don’t want that error when working on content. You’ll have to go into my Global Layout element and remove the exclusion.

https://drive.google.com/file/d/1E7LLrkqIVarCkNDQbDkNp7kkTfctvQ2F/view

The issue is having a 2560px wide monitor and writing articles. But Gutenberg as a standard is never that wide because you’re not supposed to write articles across an entire screen.

I think it’s not correct for the blog/normal posts, but I can see why you´d make that choice using Gutenberg for when creating layouts/page designs. So maybe give a choice to not include the Gutenberg editor for global elements?

[Tom]

Can you go into wp-config.php and set define( 'SCRIPT_DEBUG', true );?

This should make the console error more useful for us to pinpoint where it’s coming from.

As for the Element width – it does start at 100% width, but you can adjust this in the Element settings.

Let me know 🙂

[Fredrik]

I’ve changed the wp-config now.

Yes, but I want frontend 100% width sometimes because I use builders that perhaps will use 100% in some sections or pre-made design sets.
I don’t want my editor to use 100% width when writing content. Simple as that 🙂

[Fredrik]

React will try to recreate this component tree from scratch using the error boundary you provided, BlockCrashBoundary.

The above error occurred in the <ParagraphBlock> component:

ParagraphBlock@https://webbmastare.se/wp-includes/js/dist/block-library.js?ver=d9e06804132bedc510cd:36647:7
Edit@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:16236:7
withToolbarControls</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:15657:7
withInspectorControl</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:15870:26
custom_class_name_withInspectorControl</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:16038:35
withInspectorControls</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:32242:7
withBlockControls</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:38843:33
withDuotoneControls</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:39189:32
layout_withInspectorControls</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:39541:7
content_lock_ui_withBlockControls</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:39729:53
withMultipleValidation</<@https://webbmastare.se/wp-includes/js/dist/edit-post.js?ver=8d52dae6937ea57c9af0:366:9
withDispatch/</<@https://webbmastare.se/wp-includes/js/dist/data.js?ver=325ebd654e2aa93715a1:4201:46
withSelect/</<@https://webbmastare.se/wp-includes/js/dist/data.js?ver=325ebd654e2aa93715a1:4043:31
@https://webbmastare.se/wp-includes/js/dist/compose.js?ver=931b797529818d5ec638:3003:10
queryTopInspectorControls</<@https://webbmastare.se/wp-includes/js/dist/block-library.js?ver=d9e06804132bedc510cd:44216:7
FilteredComponentRenderer@https://webbmastare.se/wp-includes/js/dist/components.js?ver=95717780194d508e3f3c:67352:9
BlockEdit@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:16303:7
BlockCrashBoundary@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:16658:5
BlockListBlock@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:17841:7
withDataAlign</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:15715:7
withPositionStyles</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:32265:7
withBorderColorPaletteStyles</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:35096:7
withColorPaletteStyles</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:36200:7
withFontSizeInlineStyles</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:37675:31
withElementsStyles</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:38856:112
withDuotoneStyles</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:39236:29
withLayoutStyles</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:39562:7
withChildLayoutStyles</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:39632:7
FilteredComponentRenderer@https://webbmastare.se/wp-includes/js/dist/components.js?ver=95717780194d508e3f3c:67352:9
ifCondition/</<@https://webbmastare.se/wp-includes/js/dist/compose.js?ver=931b797529818d5ec638:2958:10
withDispatch/</<@https://webbmastare.se/wp-includes/js/dist/data.js?ver=325ebd654e2aa93715a1:4201:46
withSelect/</<@https://webbmastare.se/wp-includes/js/dist/data.js?ver=325ebd654e2aa93715a1:4043:31
@https://webbmastare.se/wp-includes/js/dist/compose.js?ver=931b797529818d5ec638:2995:12
Items@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:33925:7
BlockListItems
div
Root@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:33837:7
BlockToolsBackCompat@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:32714:7
BlockList@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:33911:3
RecursionProvider@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:53342:7
div
WritingFlow@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:19998:7
MaybeIframe@https://webbmastare.se/wp-includes/js/dist/edit-post.js?ver=8d52dae6937ea57c9af0:3725:7
div
VisualElementHandler@https://webbmastare.se/wp-includes/js/dist/components.js?ver=95717780194d508e3f3c:5745:1
MotionComponent@https://webbmastare.se/wp-includes/js/dist/components.js?ver=95717780194d508e3f3c:5809:46
div
VisualElementHandler@https://webbmastare.se/wp-includes/js/dist/components.js?ver=95717780194d508e3f3c:5745:1
MotionComponent@https://webbmastare.se/wp-includes/js/dist/components.js?ver=95717780194d508e3f3c:5809:46
div
BlockTools@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:52502:7
VisualEditor@https://webbmastare.se/wp-includes/js/dist/edit-post.js?ver=8d52dae6937ea57c9af0:3787:7
div
NavigableRegion@https://webbmastare.se/wp-includes/js/dist/edit-post.js?ver=8d52dae6937ea57c9af0:1678:7
div
div
div
InterfaceSkeleton@https://webbmastare.se/wp-includes/js/dist/edit-post.js?ver=8d52dae6937ea57c9af0:1741:7
Layout@https://webbmastare.se/wp-includes/js/dist/edit-post.js?ver=8d52dae6937ea57c9af0:9287:7
ErrorBoundary@https://webbmastare.se/wp-includes/js/dist/editor.js?ver=8f76ff9b62db4d9f4a08:6303:5
BlockRefsProvider@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:11075:7
ExperimentalBlockEditorProvider<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:18764:7
withRegistryProvider</<@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:18460:9
WithRegistryProvider(Component)
BlockContextProvider@https://webbmastare.se/wp-includes/js/dist/block-editor.js?ver=db6c86bb83c79eb2c95a:16190:7
EntityProvider@https://webbmastare.se/wp-includes/js/dist/core-data.js?ver=60feb4306fe9534bc937:6140:7
EntityProvider@https://webbmastare.se/wp-includes/js/dist/core-data.js?ver=60feb4306fe9534bc937:6140:7
ExperimentalEditorProvider<@https://webbmastare.se/wp-includes/js/dist/editor.js?ver=8f76ff9b62db4d9f4a08:13367:7
withRegistryProvider</<@https://webbmastare.se/wp-includes/js/dist/editor.js?ver=8f76ff9b62db4d9f4a08:12879:7
WithRegistryProvider(Component)
SlotFillProvider@https://webbmastare.se/wp-includes/js/dist/components.js?ver=95717780194d508e3f3c:19965:7
provider_SlotFillProvider@https://webbmastare.se/wp-includes/js/dist/components.js?ver=95717780194d508e3f3c:19987:5
Provider@https://webbmastare.se/wp-includes/js/dist/components.js?ver=95717780194d508e3f3c:20141:7
div
ShortcutProvider@https://webbmastare.se/wp-includes/js/dist/keyboard-shortcuts.js?ver=d9997e5c243ce7427d4e:778:75
Editor@https://webbmastare.se/wp-includes/js/dist/edit-post.js?ver=8d52dae6937ea57c9af0:9585:7

React will try to recreate this component tree from scratch using the error boundary you provided, BlockCrashBoundary.

[Tom]

From what I can see, that’s a core block error. I assume that the data you’re pasting into the editor is somehow broken. Can you share exactly what you’re pasting? Unfortunately, the error isn’t helpful enough for me to know 100%.

As for the width, the Element width option only applies in the editor – not on the frontend.

[Fredrik]

I’m not pasting anything. This error occurs for me all-the-time for newly written content too.
But fact remains it only happens when Elements make the editor go full width.

Yes, I KNOW it’s not frontend. It’s ruining my BACKEND experience by making my text editor go 2560px wide.
I don’t know how I can explain this simpler. I want Frontend 100%, but I don’t want my backend 100% when editing.

[Tom]

Can you show me a quick video of the issue as it happens for you? It will help me better understand and hopefully I’ll be able to provide a solution.

I don’t know how I can explain this simpler. I want Frontend 100%, but I don’t want my backend 100% when editing.

A video might help here as well. Are we still talking about Elements or the standard page/post editor?

[Fredrik]

Yeah I made a quick video rambling about this issue with crashing blocks.
https://drive.google.com/file/d/1kPhGEWjkKMzncudnUhCc2YMnsiBn-RzT/view

I want regular/standard width when editing content, while still having 100% width on frontend? It’s all I ask about the width.
I don’t want GP elements to manipulate the editor, only the frontend.

[Tom]

Super strange, I’m not able to replicate on my end: https://www.screencast.com/t/esVGURQd

The fact the error is talking about boundaries kind of makes sense though, maybe your editor isn’t happy with the blocks being so close to the edges on your computer/monitor.

So let’s go ahead and overwrite the width that GP adds to the editor.

This snippet should do the trick:

add_action( 'enqueue_block_editor_assets', function() {
	wp_add_inline_style( 'wp-edit-blocks', '.editor-styles-wrapper .is-root-container, .edit-post-visual-editor__post-title-wrapper {--content-width: 800px !important;}');
} );

Let me know if that helps or not 🙂

[Fredrik]

Thanks!

Now I can adjust the editor width myself.

The error is weird indeed. And I always thought Gutenberg had issues since this error have haunted me for ages. But I always use the same setup + firefox. So it makes sense. Many others might have had the same issue, since support also replicated it. Maybe worth mentioning in an update?
PS: I haven’t always used 2560px wide screens. They are new, so that’s why I noticed It’s hard to write long articles at that width.

Did you create a post, save it, then copy n paste the same content in the editor? that seemed to trigger it for me in firefox.

Anyhow, now I can use the block editor without getting more gray hairs, thanks! 🙂

[Tom]

No problem, glad I could help.

We’ll definitely keep trying to replicate it. GeneratePress isn’t actually doing anything here but adjusting the width of the error, and the error containing the word “boundary” leads me to believe it’s actually a core bug when the block reaches outside of some set boundary.

[Author]

Posts