Automattic / Automattic/jetpack
Plugins can't use block filters in the editor when Jetpack is enabled
- 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
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