Editor Decoupling

[o-fernandez]

Summary

Current proposal by @sayedtaqui for doing the decoupling in the following four steps.

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.

• [x] 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 #8966 , #9029
• [x] Move PostLock and StatusCheck components as they are WordPress specific. (#8990)
• [x] Move the “Story Published” dialog to wp-story-editor. (#8951)
• [x] Move WordPress media modal logic ( wp.media ) to wp-story-editor. (#9066)
• [x] Move meta boxes to wp-story-editor. (#9027)

2. Move all WordPress-related code from dashboard to wp-dashboard. (#9027)

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.

• [x] Refactor components to ease future decoupling (#9202 )
• [x] REST API: Refactor ApiProvider component to allow api callbacks via wp-dashboard configuration (#9237)
• [x] REST API: Make the expected API responses more platform-agnostic and move functions like reshapeStoryObject ( #9345 )
• [x] Move settings page ( analytics, video optimization, etc ) to wp-dashboard ( #9419 )
• [x] Handle RouterProvider component using WordPress menu. ( #9386 )
• [x] Remove WordPress specific css like #wpbody ( theme.js ), support link, “See classic WP list view” etc ( #9380 )

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 ).

• [x] Code clean up from previous 2 phases ( #9626, #9596, #9634 )
• [x] Assemble document sidebar in wp-story-editor ( #9614 )
• [x] Create storybook playground for story-editor to learn areas of improvement and have a working example of a standalone story editor. ( #9569, #9948 )
• [x] Create storybook playground for dashboard ( #9644 )
• [x] Introduce initialEdits prop in StoryEditor component ( #9775 )
• [x] Initialize dashboard from php ( #9881 )
• [x] Make the expected API response consistently use camel case for story editor. ( #9683, #9906 )
• [x] Export the checklist components and assemble the list of checks in wp-story-editor . (#9710)
• [x] Provide a way to add WordPress specific tip in help center. ( #9825 )
• [x] apiCallbacks should be optional for dashboard ( #9752 )
• [x] apiCallbacks should be optional for story-editor ( #9949 )
• [x] Make search field work for story-editor standalone editor. ( #9883 )

4. Prepare to publish the packages.

• [x] Since the packages can be used outside the scope of WordPress now, we should remove wp- from the package names / find a better name.
• [x] Resolve #8577 (due to license)
• [x] Solve any package publishing conundrum.
• [x] Try a basic story-editor integration with some third-party CMS/platform to understand gaps and improvements required.
• [x] Add full documentation for integration API including API callbacks and their expected API response.

References

Related issues:

• #4737

[c0b41]

@swissspidy Any Eta for release?

[swissspidy]

@c0b41 That is a great question! We aim to publish the first set of npm packages on npmjs.com in January. Detailed documentation will come later though.

[saas-developer]

@swissspidy What's your new ETA for the new packages? Is there any other issue/discussion I should follow to get updates without bothering you?

[swissspidy]

We've started publishing early versions of the packages at https://www.npmjs.com/org/googleforcreators but we still have some bugs that we need to fix, for instance #10536 and #10537. We're also still working on splitting up code into more packages, see for example #8125 and #8778. This should be done in the next couple of weeks.

So there is still some work needed here before we can properly announce it.

Besides this ticket I'd recommend staying up-to-date via the various Google for Creators channels. I'd definitely also announce this on my private channels.

[deshetti]

Hi @swissspidy

What is the status of this? We plan to implement Web Stories in a different Open Source CMS and I was wondering if we could repurpose the code from this repo. Is there any ETA on when this would be completed and if there is any documentation that would help us at least start exploring meanwhile?

[swissspidy]

@deshetti This is more or less complete. All our packages are published to npm and there‘s some initial docs at https://github.com/GoogleForCreators/web-stories-wp/tree/main/docs/third-party-integration

[deshetti]

@swissspidy Thanks for the quick response. I will check it out. Cheers!