search

GoogleForCreators / web-stories-wp

Web Stories for WordPress
https://wp.stories.google
Apache License 2.0
766 stars 177 forks source link

Block: Remove dependency on dashboard & design system #8327

Closed swissspidy closed 3 years ago

swissspidy commented 3 years ago

Feature Description

When we originally created the new Web Stories block, we purposely re-used existing components from the dashboard and design system so we could ship this fast and iterate on it later.

That made it easy for us to have the same design as in the dashboard and to display stories properly using the <CardPreview>/<PreviewPage> component without having to re-invent the wheel.

Now that we're switching to displaying posters instead of actual previews in the dashboard (#5147), it is a good time to cut ties with these packages.

Not only that, it is also a good opportunity to simplify the block's code in other ways.

What I have in mind in total:

  1. Remove ConfigProvider
    We can simply access the window.webStoriesBlockSettings global
  2. Merge useUserApi and useStoryApi into useApi
  3. For useApi, use createContext from @wordpress/element instead of from design system.
  4. Use UI components from @wordpress/components in the story picker instead of components from dashboard and design-system.
  5. Use edit.css instead of styled components
  6. Ensure we display store posters instead of using the full-blown preview components.
  7. Simplify API interaction to remove things that we don't need. This includes a lot of things, including totalStoriesByStatus and reshapeStoryObject
  8. Maybe even ditch useApi completely in favor of some simpler callbacks & effects.
  9. Maybe: Use wp.data.select('core').getAuthors() instead of fetchAuthors
  10. (Blocked) Maybe: Use wp.data.select('core').getEntityRecords('postType', 'web-story') instead of fetchStories
    Currently not possible due to https://core.trac.wordpress.org/ticket/53656 / https://github.com/WordPress/gutenberg/issues/33420 - unless we remove our custom namespace.

Once this is all done there should be no more dependencies to the dashboard and the design system package, nor styled-components, and the block bundle size should be significantly smaller.

Alternatives Considered

Additional Context

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

Acceptance Criteria

Implementation Brief

spacedmonkey commented 3 years ago

Wonder if we should do this as the same time https://github.com/google/web-stories-wp/issues/6634

Getting rid of these should do done at the same time

https://github.com/google/web-stories-wp/blob/9edf5fc1f38933a0bd33ec885ba003524d6a[…]ories-block/block/block-types/selected-stories/selectStories.js

As this is a WordPress / gutenberg context, we should reuse dropdowns and search for gutenberg.

swissspidy commented 3 years ago

Yeah I suppose we can, but in a separate PR. Will move it on the board & marked as blocked by this one.

swissspidy commented 3 years ago

Assigning to myself since I've been looking into this a bit locally already and have something shareable soon.

swissspidy commented 3 years ago

Re-sharing from Slack:

After some initial work to remove dependencies, I got the size of web-stories-block.js down from 2.9 MB (!) to less than 70 KB (!!!)

csossi commented 3 years ago

Both Search Stories and Search By Author have transparent backgrounds in their pulldown-type displays: image.png