Automattic / Automattic/jetpack

Plugins can't use block filters in the editor when Jetpack is enabled

Open
#11,464 4 comments 0 reactions 0 assignees View on GitHub
[Focus] Blocks [Pri] Normal Bug
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

#### Description

Jetpack enqueues scripts that depend on `wp-blocks`. When we have plugins that need to register filters used by `wp-blocks`, they end up loading and running after Jetpack, which has loaded `wp-blocks` and so the filters aren't registered in time to run.

#### Steps to reproduce the issue

This uses my WIP PR for extending the embed blocks to highlight the issue, but it should be reproducable with a simpler plugin, look at the `extend-embeds` plugin in the PR.

1. Check out the PR at https://github.com/WordPress/gutenberg/pull/14050 which enables embed block extensions, and enable the `extend-embeds` plugin
2. Start a new post and embed the following URL by pasting it: `https://www.reddit.com/r/stevenuniverse/comments/ax0u5i/innocence/` This will trigger the test plugin's behaviour, and you'll see a very boring "custom preview" message, and the block will be "Reddit with extra stuff"
3. Abandon the post, go enable Jetpack
4. Start a new post, embed the same URL, and you'll see the custom preview no longer works.

#### Analysis so far

This doesn't seem specific to this code or plugin. Scrips that need to load before `wp-blocks` end up loading after the code in `wp-blocks` has been run, once Jetpack is enabled, because Jetpack has already required it.

The test plugin in the PR enqueues its scripts like this:

```
function extend_embeds_init() {
wp_enqueue_script(
'gutenberg-test-extend-embeds',
plugins_url( 'extend-embeds/index.js', __FILE__ ),
array(
'wp-element',
'wp-editor',
'wp-i18n',
),
filemtime( plugin_dir_path( __FILE__ ) . 'extend-embeds/index.js' ),
true
);
add_action( 'rest_api_init', 'extend_embeds_rest_api_init' );
}
add_action( 'init', 'extend_embeds_init' );
```

That works when Jetpack isn't present, the script is loaded before `wp-blocks` and registers the filter before the core blocks are registered, allowing the plugin to use the hooks that `wp-blocks` uses.

There isn't a way (that I can see) to say "make sure this loads _BEFORE_ wp-blocks" and so when Jetpack does this in `class.jetpack-gutenberg.php`

```
wp_enqueue_script(
'jetpack-blocks-editor',
$editor_script,
array(
'lodash',
'wp-api-fetch',
'wp-blob',
'wp-blocks',
'wp-components',
'wp-compose',
'wp-data',
'wp-date',
'wp-edit-post',
'wp-editor',
'wp-element',
'wp-hooks',
'wp-i18n',
'wp-keycodes',
'wp-plugins',
'wp-rich-text',
'wp-token-list',
'wp-url',
),
$version,
false
);
```

then `wp-blocks` before Jetpack's `blocks/editor.js`, and it's too late for other plugins to do what they need to do.

Contributor guide

Open the contributing guide

Research direction

Start with class.jetpack-gutenberg.php and its jetpack-blocks-editor enqueue, then compare the extend-embeds/index.js test plugin from Gutenberg PR 14050. Reproduce the Reddit embed with Jetpack disabled and enabled, and determine how the filter registration can occur before wp-blocks runs; done means the custom preview works in both cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, php, wordpress
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.