1. Move all WordPress-related code from story-editor to wp-story-editor.
As story-editor package is supposed to be the core editor, it should be free from any WordPress-related code so that it can easily be integrated with any third-party platform. In this step, we would only remove any WordPress-specific code from the story-editor package and this task can be broken down into the following sub-tasks.
[ ] Move all REST API requests logic to wp-story-editor and use more platform-agnostic names for WordPress-specific HTTP headers like X-WP-* used in REST requests
[ ] Move PostLock and StatusCheck components as they are WordPress specific.
[x] Move the “Story Published” dialog to wp-story-editor package.
[ ] Move WordPress media modal logic ( wp.media ) to wp-story-editor.
2. Move all WordPress-related code from dashboard to wp-dashboard.
Since the dashboard package has a similar code pattern to some extent, our learnings from step 1 would be helpful to move WordPress-specific code to the wp-dashboard package. It may need the following work.
[ ] Refactor dashboard ApiProvider similar to story-editor ApiProvider and move all REST API requests logic to wp-dashboard
3. Prepare an Integration layer API to allow the editor to be integrated with any third-party platform.
After completing step-1 and 2, we should naturally have an integration layer of the core editor and core dashboard with WordPress. However, it would still require some additional tasks for the editor to be integrated with any other platform ( Require Discussion ).
[ ] If there is a need to provide additional configuration/callbacks to handle preview in a non-WordPress environment.
[ ] Maybe provide additional props like onSave, onChange, value, onError, onLoad from the main StoryEditor component.
[ ] Add documentation and maybe some logic to ensure that the REST response is in the expected format provided by the callbacks for both story-editor and dashboard.
[ ] Maybe add bare minimum code to use only filters ( addFilter, applyFilters ) to allow overriding some components like MediaUpload and MetaBoxes from their custom integration ( like wp-story-editor in case of WordPress )
[ ] Maybe introduce our own implementation of Slot/Fill to allow third-party platforms to add additional controls/settings/UI in the editor.
4. Prepare to publish the packages.
[ ] Since the packages can be used outside the scope of WordPress now, we should remove wp- from the package names / find a better name.
Summary
In continuation with the epic https://github.com/google/web-stories-wp/issues/2918 "Editor Decoupling", I propose that the decoupling should be done in the following four steps.
1. Move all WordPress-related code from
story-editor
towp-story-editor
.As story-editor package is supposed to be the core editor, it should be free from any WordPress-related code so that it can easily be integrated with any third-party platform. In this step, we would only remove any WordPress-specific code from the
story-editor
package and this task can be broken down into the following sub-tasks.X-WP-*
used in REST requestswp.media
) to wp-story-editor.2. Move all WordPress-related code from
dashboard
towp-dashboard
.Since the dashboard package has a similar code pattern to some extent, our learnings from step 1 would be helpful to move WordPress-specific code to the wp-dashboard package. It may need the following work.
3. Prepare an Integration layer API to allow the editor to be integrated with any third-party platform.
After completing step-1 and 2, we should naturally have an integration layer of the core editor and core dashboard with WordPress. However, it would still require some additional tasks for the editor to be integrated with any other platform ( Require Discussion ).
onSave
,onChange
,value
,onError
,onLoad
from the mainStoryEditor
component.addFilter
,applyFilters
) to allow overriding some components likeMediaUpload
andMetaBoxes
from their custom integration ( likewp-story-editor
in case of WordPress )Slot/Fill
to allow third-party platforms to add additional controls/settings/UI in the editor.4. Prepare to publish the packages.
wp-
from the package names / find a better name.References
Related Issues and PRs https://github.com/google/web-stories-wp/issues/4737 https://github.com/google/web-stories-wp/pull/8573 https://github.com/google/web-stories-wp/pull/8561 https://github.com/google/web-stories-wp/pull/8646