Skip to content

Adds 'Web Stories List' Block #150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 209 commits into from

Conversation

divyarajmasani
Copy link

Summary

This PR adds the 'Web Stories List' Block, the block has options to switch between the following types:

  • Latest Stories: Shows recent stories based on applied filters.
  • Select Stories: Shows user picked stories. Users are presented with a story picker modal.
  • Story URL: Embeds story URL provided by the user.

Relevant Technical Choices

  • The existing 'Web Stories' block is still present and this block uses some of its components.
  • To inject blockSwitcher into the 'Web Stories' blocks' edit component we are using the editor.BlockEdit filter.

Difference between view markup choices:

  • Circles / Carousel:
    -- On non-AMP pages 'glider-js' is used to render the carousel.
    -- On AMP pages it uses amp-carousel extension.

Lightbox Effect:

  • On non-AMP pages, a single lightbox div is used with a single amp-story-player, adding stories as needed.
  • On AMP pages, we are using multiple lightbox div with one amp-story-player for each story.

To-do

  • Check if we can remove multiple amp-story-player on AMP pages for the lightbox.
  • Check for any performance bottlenecks.
  • Update/Simplify CSS used for the views.

User-facing changes

Adds a new 'Web Stories List' block that can embed web stories on pages/posts.

Testing Instructions

  • Create/Edit any page/post.
  • Look for the 'Web Stories List' block under block inserter or start typing /web and select the block.
  • Choose block-type and view-type, toggle controls from the right sidebar and preview the changes.

Fixes #78 #132 #79 #129 #131 #42 #133 #93 #38

@spacedmonkey
Copy link

This needs rebase / merge.

- Updates styled components for the story picker module for better alignment.
- Adds  class on Web Stories block wrapper if it's an AMP request.
- Removed 'glider-js' in favour of npm package for the same.
@divyarajmasani divyarajmasani mentioned this pull request Dec 21, 2020
@divyarajmasani
Copy link
Author

closing this in favor of other small PRs
#188 #190

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants