Automattic / Automattic/jetpack

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

Open
#20,357 13 comments 0 reactions 0 assignees View on GitHub
[Block] Gathering Tweetstorms [Block] Slideshow [Block] VideoPress [Extension] Likes [Extension] Publicize [Focus] Compatibility [Focus] FSE [Pri] Normal [Status] Auto-allocated Bug
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

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

1. Start with a site using WordPress 5.8 RC
2. Ensure that your site is connected to WordPress.com.
3. 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: #19654
- Discussion: p1626276936278000/1626276764.276600-slack-C01U2KGS2PQ , p1626278473009100-slack-CBTN58FTJ

We have different things to address here:

**********

- [x] 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. #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.
- https://github.com/Automattic/jetpack/blob/41fe374f32d0fa35bb66b4ca492e0b337ee7c6cd/projects/plugins/jetpack/extensions/blocks/gathering-tweetstorms/editor.js#L5
- https://github.com/Automattic/jetpack/blob/e13487d0dbbe4c743739b6f1a3e37c143a8c2614/projects/plugins/jetpack/extensions/blocks/gathering-tweetstorms/use-gather-tweetstorm.js#L30
- 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?

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the warning in the WordPress 5.8 Widgets editor, then read the listed gathering-tweetstorms/editor.js and use-gather-tweetstorm.js files alongside the related Core ticket and primary issue. Done means the Jetpack block bundle no longer triggers the @wordpress/editor warning there, with an agreed approach for blocks that do or do not apply in the widget editor.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, wordpress
Domain
frontend, web-dev
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.