Add JS entry-point for WordPress editor

[nfmohit]

Feature Description

As part of RRM Phase 2, the WordPress post editor will allow users to override the snippet configuration at the post level. To facilitate this, a new JavaScript entry point should be added to Site Kit and enqueued to the WordPress editor.

The new JavaScript entry point, say googlesitekit-reader-revenue-manager-block-editor.js should be enqueued in Modules\Reader_Revenue_Manager::setup_assets, but with a load_contexts value of an array containing Asset::CONTEXT_ADMIN_POST_EDITOR so that the JavaScript file is only enqueued in the WordPress editor.

A PoC has already implemented this largely which can be used as a starting point.

• See relevant section in the design doc.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• A new JavaScript entry point should be added that will allow Site Kit to extend the WordPress block editor.
• The entry point should have access to WordPress core packages without the packages being actually installed.
• The JavaScript file should only be enqueued in the WordPress block editor, only when the rrmModuleV2 feature flag is enabled.

Implementation Brief

Note: Please refer to this POC branch as a starting point to this PR.

• In webpack/common.js, export gutenbergExternals after the following forEach loop is done mutating the object.

• Create a new file blockEditor.config.js in webpack directory. Define a new entry point googlesitekit-reader-revenue-manager-block-editor which points to './assets/js/googlesitekit-reader-revenue-manager-block-editor.js' as shown in the PR. It should also use the webpack plugins as shown in POC.

  • Note that it uses gutenbergExternals as externals of the entry point.
  • Also, it should add a new bar to webpack build process as can be seen in POC.

• In webpack.config.js, require and yield the blockEditorConfig.

• Create a new file assets/js/googlesitekit-reader-revenue-manager-block-editor.js

  • Only add the file header comment for the file. The implementation will be taken care in subsequent issues in Add post-level RRM settings #9962 and Add post meta setting to store post-level RRM settings #9955

• In includes/Modules/Reader_Revenue_Manager.php

  • Check if rrmModuleV2 is enabled using Feature_Flags::enabled( 'rrmModuleV2' ).
  • If the feature flag is enabled, in setup_assets method, enquque a new script googlesitekit-reader-revenue-manager-block-editor.js with the dependencies as shown in POC and also load_contexts set to Asset::CONTEXT_ADMIN_POST_EDITOR so that the JavaScript file is only enqueued in the WordPress editor.

Test Coverage

Test that the script is getting enqueued when the rrmModuleV2 feature flag is enabled.

QA Brief

Go to edit post screen in WordPress admin. Check in browser's network tab that there should be a request for assets/js/googlesitekit-reader-revenue-manager-block-editor.js file.

Changelog entry

• Add an empty RRM V2 JavaScript entry point for the WordPress block editor, with functionality to be added in subsequent issues.

[nfmohit]

@ankitrox Thank you for drafting the IB. Please take a look at my comments below:

• Install following packages using npm.

  • @wordpress/components
  • @wordpress/editor
  • @wordpress/plugins

I don't think installing the packages is required at this point, as we'll not be using them yet. They can be installed as needed as part of the respective issues. As part of this issue, we should only ensure that the entry point is built, enqueued, and is able to execute scripts in the WordPress block editor.

• In webpack/common.js, add these packages in corePackages array as shown in POC. Also, add 'googlesitekit-data' to gutenbergExternals and export gutenbergExternals.

The packages don't need to be added to corePackages or gutenbergExternals as we'll not be using them just yet. Also, it should be noted that gutenbergExternals is already exported, its export should just be moved lower after the following for-each loop is done mutating the object.

• Create a new file blockEditor.config.js in webpack directory. Define a new entry point googlesitekit-reader-revenue-manager-block-editor which points to './assets/js/googlesitekit-reader-revenue-manager-block-editor.js' as shown in the PR. It should also use the webpack plugins as shown in POC.

I think it is crucial to mention that it should use gutenbergExternals as the externals of the entry point. It should also add a new bar to the Webpack build process, as done in the PoC.

• Create a new file assets/js/googlesitekit-reader-revenue-manager-block-editor.js

• It should use registerPlugin method to register the google-site-kit-rrm-v2 plugin in post sidebar.
• It should do nothing if rrmModuleV2 feature flag is not enabled.
• If the feature flag is enabled, temporarily display the placeholder text within PluginDocumentSettingPanel component. The actual implementation of the fields will be done in Add post-level RRM settings #9962 and Add post meta setting to store post-level RRM settings #9955

The entry point should have nothing at this point except the header comments, to be fair. No plugin should be registered at this point.

• In includes/Modules/Reader_Revenue_Manager.php

• In setup_assets method, enquque a new script googlesitekit-reader-revenue-manager-block-editor.js with the dependencies as shown in POC and also load_contexts set to Asset::CONTEXT_ADMIN_POST_EDITOR so that the JavaScript file is only enqueued in the WordPress editor.

This should only be done when the rrmModuleV2 feature flag is enabled.

Test Coverage

Test the the plugin is getting registered successfully. Also, test that it returns null when feature is disabled.

Instead, it should be tested within the test suite for the PHP class that the script is enqueued when the feature flag is enabled.

Please let me know if you have any questions, thank you!

[ankitrox]

Thank you for reviewing the IB @nfmohit. I understood that the main concern is to just build the script without any actual implementation in it, so I updated the IB accordingly as per your suggestions.

[nfmohit]

IB ✅

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Tested when rrmModuleV2 is enabled and when it is not enabled.
• Verified that a new JavaScript entry point added that will allow Site Kit to extend the WordPress block editor.
• Verified that in browser's network tab that there is a request for assets/js/googlesitekit-reader-revenue-manager-block-editor.js file.
• Verified that the JavaScript file only be enqueued in the WordPress block editor, only when the rrmModuleV2 feature flag is enabled.

Recording.1701.mp4