Editor: solve conflict between Jetpack blocks' @wordpress/editor dependencies and Block-based Widgets Editor #20357

jeherve · 2021-07-14T14:27:34Z

WordPress 5.8 introduces a new Block-based Widgets Editor, and both our block bundle and the WordPress.com Block Editor conflicts with it at the moment.

Steps to reproduce the issue

Start with a site using WordPress 5.8 RC
Ensure that your site is connected to WordPress.com.
Now go to Appearance > Widgets; it generates the following notice:

Notice: wp_enqueue_script() was called incorrectly. "wp-editor" script should not be enqueued together with the new widgets editor (wp-edit-widgets or wp-customize-widgets). Please see Debugging in WordPress for more information. (This message was added in version 5.8.0.) in wp-includes/functions.php on line 5535

Related Core ticket: https://core.trac.wordpress.org/ticket/53437
Dev Note: https://make.wordpress.org/core/2021/06/29/block-based-widgets-editor-in-wordpress-5-8/
Primary issue: WordPress 5.8 Compatibility: Primary issue #19654
Discussion: p1626276936278000/1626276764.276600-slack-C01U2KGS2PQ , p1626278473009100-slack-CBTN58FTJ

We have different things to address here:

Do not load the WordPress.com Block Editor in the widgets editor, where wp-editor, one of the dependencies of the WordPress.com Block Editor, is not accepted. WordPress.com Block Editor: do not use in the upcoming Block-based Widgets Editor #20358

Address @wordpress/editor dependencies in our own blocks.

Jetpack's block bundle (also loaded on WordPress.com Simple) has some blocks and extensions that rely on @wordpress/editor:

We want to check if a post's type supports Publicize, Likes, or shares before to display the Publicize / Likes / Sharing panel in the sidebar.
The toolbar button added to the Twitter block that allows you to import Twitter Threads into a post relies on the package to look for post meta, to see if the thread you're importing is from your own Twitter account.
- jetpack/projects/plugins/jetpack/extensions/blocks/gathering-tweetstorms/editor.js
  
  Line 5 in 41fe374
  
  import { BlockControls } from '@wordpress/editor';
- jetpack/projects/plugins/jetpack/extensions/blocks/gathering-tweetstorms/use-gather-tweetstorm.js
  
  Line 30 in e13487d
  
  return select( 'core/editor' ).getEditedPostAttribute( 'jetpack_publicize_connections' );
We use mediaUpload from the package to upload media in the Slideshow, Video, and Tiled Gallery blocks.

However, that @wordpress/editor package cannot be used in the new block-based widget editor, since we're not in a post editor.
For this reason, Core started outputting a _doing_it_wrong() notice for folks using that package in the block-based widget editor.

I'm not quite sure how to approach that problem at this point.

Since all our blocks and extensions are part of one big bundle, it also includes blocks and extensions that really do not make sense (and in this case output a warning) in the widget editor, such as sharing.
At the same point, some of our blocks really would make sense in that context.

How should we approach this?

The text was updated successfully, but these errors were encountered:

Fixes #20357 Since the WordPress.com Block editor relies on wp-editor, and since that dependency cannot be used in the widget editor (see https://core.trac.wordpress.org/changeset/51393 ), let's not load the WordPress.com editor scripts in the widget editor.

jeherve · 2021-07-14T16:07:05Z

I'm not quite sure how to approach that problem at this point.

One potential approach I can think of would be to split our bundle in two: one that is meant to be used in the widget editor, and the other that is meant to be used in the post editor.

That doesn't seem like the perfect solution for performance though. I'm also not sure how we could automatically define whether a block is meant to be used in one context or the other.

See #20357

jeherve · 2021-07-14T16:36:48Z

One potential approach I can think of would be to split our bundle in two: one that is meant to be used in the widget editor, and the other that is meant to be used in the post editor.

Based on this idea, I opened #20362, which leverages an existing block bundle of ours, currently in use on P2.

… Block-based Widgets Editor (#20358) Fixes #20357 Since the WordPress.com Block editor relies on wp-editor, and since that dependency cannot be used in the widget editor (see https://core.trac.wordpress.org/changeset/51393 ), let's not load the WordPress.com editor scripts in the widget editor.

…dgets Editor (#20358) Fixes #20357 Since the WordPress.com Block editor relies on wp-editor, and since that dependency cannot be used in the widget editor (see https://core.trac.wordpress.org/changeset/51393 ), let's not load the WordPress.com editor scripts in the widget editor.

…"" (#21763) The new `Assets::register_script` wrapper worked great. In fact, a bit too good: it picked up a style dependency that was missing from the editor JS, which broke the Widget Editor and the Site Editor because that dependency is specifically not supposed to be loaded there (see #20357). This reverts #21760 and adds a hack around the way that #20357 made things break with the new wrapper.

There's a bug #20357 that means if code is loaded that relies on the `@wordpress/editor` or `@wordpress/edit-post` packages, then it crashes the Site Editor. This change checks the post type being editted and whether it supports Publicize. If it doesn't, we skip loading the JS code.

…es (#24545) There's a bug #20357 that means if code is loaded that relies on the `@wordpress/editor` or `@wordpress/edit-post` packages, then it crashes the Site Editor. This change checks the post type being editted and whether it supports Publicize. If it doesn't, we skip loading the JS code.

Fixes #28184 1. We do not need Blaze in the site editor, since we cannot promote specific posts from there. 2. The Blaze panel relies on @wordpress/editor, which we cannot use in the site editor or the widget editor. 3. When we enqueue the Blaze panel in the site editor or the widget editor, we run into this issue: #20357. This causes Fatal errors just like the one we experienced and worked around in #21763. To solve this issue, we switch to using the admin_enqueue_scripts hook to decide whether when to enqueue our script. It allows us to conditionally enqueue the file based on the page we're on, which is something the enqueue_block_editor_assets hook does not allow yet.

jeherve · 2023-01-05T10:34:56Z

I've opened this issue on the Gutenberg side to see if there is something that could help there:
WordPress/gutenberg#46900

It's worth noting that it wouldn't necessarily help us with the big Jetpack bundle since our bundle currently includes multiple blocks, some good for the site editor, others not. But it may help with standalone blocks / plugins, like the one introduced in #28062.

danielbachhuber · 2023-02-15T23:43:59Z

Here's another side effect of this problem: Automattic/wp-calypso#66474

jeherve added [Type] Bug When a feature is broken and / or not performing as intended [Pri] Normal [Feature] WordPress.com Block Editor labels Jul 14, 2021

jeherve added this to the jetpack/9.9.1 milestone Jul 14, 2021

jeherve mentioned this issue Jul 14, 2021

WordPress 5.8 Compatibility: Primary issue #19654

Closed

20 tasks

jeherve mentioned this issue Jul 14, 2021

WordPress.com Block Editor: do not use in the upcoming Block-based Widgets Editor #20358

Merged

github-actions bot assigned jeherve Jul 14, 2021

github-actions bot added the [Status] In Progress label Jul 14, 2021

jeherve changed the title ~~WordPress.com Block Editor: solve conflict with Block-based Widgets Editor~~ Editor: solve conflict between Jetpack blocks' @wordpress/editor` dependencies and Block-based Widgets Editor Jul 14, 2021

jeherve added [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack [Block] Gathering Tweetstorms [Extension] Likes [Block] Publicize [Feature] Sharing Post sharing, sharing buttons [Block] Slideshow [Block] VideoPress labels Jul 14, 2021

jeherve removed their assignment Jul 14, 2021

jeherve changed the title ~~Editor: solve conflict between Jetpack blocks' @wordpress/editor` dependencies and Block-based Widgets Editor~~ Editor: solve conflict between Jetpack blocks' @wordpress/editor dependencies and Block-based Widgets Editor Jul 14, 2021

jeherve added a commit that referenced this issue Jul 14, 2021

Blocks: remove blocks that rely on post from no-post-editor bundle

770e954

See #20357

jeherve mentioned this issue Jul 14, 2021

Blocks: load different bundle in the block-based widget editor #20362

Closed

sdixon194 closed this as completed in b40a137 Jul 14, 2021

jeherve reopened this Jul 15, 2021

sdixon194 modified the milestones: jetpack/9.9.1, jetpack/10.0 Jul 20, 2021

samiff linked a pull request Jul 23, 2021 that will close this issue

Blocks: load different bundle in the block-based widget editor #20362

Closed

jeherve added [Extension] Publicize Block editor plugin and removed [Block] Publicize labels Sep 15, 2021

samiff modified the milestones: jetpack/10.1.1, jetpack/10.2, jetpack/10.3 Sep 22, 2021

jeherve removed this from the jetpack/10.3 milestone Oct 21, 2021

anomiex added a commit that referenced this issue Nov 16, 2021

Hack around #20357

d92fe0b

anomiex mentioned this issue Nov 16, 2021

Revert and fix "Revert "Assets: do not use the new method yet (#21760)"" #21763

Merged

jeherve mentioned this issue Jan 3, 2022

[Ads]: Add action for manual placing of top header ad. Allow leaderboard size for Ads Widget #22016

Merged

shadyvb mentioned this issue Feb 21, 2022

Enqueued script warning for wp-editor on widgets screen humanmade/altis-cms#531

Merged

miguelpeixe mentioned this issue Mar 8, 2022

fix: disable block if not using sidebars Automattic/super-cool-ad-inserter-plugin#99

Merged

pablinos mentioned this issue May 27, 2022

Social: Prevent the editor extension loading for unsupported post types #24545

Merged

jeherve mentioned this issue Jul 18, 2022

Notice: "wp-editor" script should not be enqueued together with the new widgets editor #25120

Closed

jeherve removed the [Status] In Progress label Aug 30, 2022

jeherve mentioned this issue Dec 9, 2022

Jetpack: Search widget - "wp-editor script should not be enqueued together with the new widgets editor" #26091

Closed

jeherve mentioned this issue Jan 5, 2023

Blaze: only enqueue script in post editor #28187

Merged

3 tasks

danielbachhuber mentioned this issue Feb 15, 2023

AT Sites: Justify option for Paragraph blocks not available in Widget sections Automattic/wp-calypso#66474

Open

jeherve added this to Jetpack Blocks [Archived] Aug 7, 2023

github-project-automation bot moved this to To triage in Jetpack Blocks [Archived] Aug 7, 2023

jeherve moved this from To triage to To do in Jetpack Blocks [Archived] Aug 7, 2023

jeherve moved this from To do to Blocked/On Hold in Jetpack Blocks [Archived] Sep 4, 2023

XjSv mentioned this issue Feb 7, 2024

Blocks do not work in 5.8 Wordpress widgets screen htmlburger/carbon-fields#1023

Open

kraftbj mentioned this issue Oct 1, 2024

Blocks: provide nice error message for workaround in dev env #39602

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Editor: solve conflict between Jetpack blocks' @wordpress/editor dependencies and Block-based Widgets Editor #20357

Editor: solve conflict between Jetpack blocks' @wordpress/editor dependencies and Block-based Widgets Editor #20357

jeherve commented Jul 14, 2021 •

edited

Loading

jeherve commented Jul 14, 2021

jeherve commented Jul 14, 2021

jeherve commented Jan 5, 2023

danielbachhuber commented Feb 15, 2023

Editor: solve conflict between Jetpack blocks' @wordpress/editor dependencies and Block-based Widgets Editor #20357

Editor: solve conflict between Jetpack blocks' @wordpress/editor dependencies and Block-based Widgets Editor #20357

Comments

jeherve commented Jul 14, 2021 • edited Loading

Steps to reproduce the issue

jeherve commented Jul 14, 2021

jeherve commented Jul 14, 2021

jeherve commented Jan 5, 2023

danielbachhuber commented Feb 15, 2023

jeherve commented Jul 14, 2021 •

edited

Loading