Web Story Embed block for Gutenberg

[swissspidy]

Summary

This PR adds a new web-stories/embed block to be used in Gutenberg. This new block can be used to display stories from the own site and other sites using amp-story-player.

Relevant Technical Choices

• Dynamic block, makes it easier to only load the scripts & styles when needed. Makes future changes easier, too.
• save.js is still used, as a fallback/cache should be plugin ever be disabled.
• Styling is similar to regular embed blocks in Gutenberg, for better look and feel.
• New REST API endpoint that returns the story title and poster for a given URL. That data is needed for the player.
• The REST API controller short-circuits for URLs from the own site in order to not hit the own site with unnecessary HTTP requests.

To-do

Editor

• WYSIWYG preview
• REST API proxy endpoint
• When entering a URL, fetch title and poster image via REST API proxy endpoint
• Ability to resize the player using slider controls
• Ability to override poster via sidebar
• Ability to resize the player using input fields in sidebar
• Make title editable in sidebar
• Fix loading issue with amp-story-player ([AMP-STORY-PLAYER] Feature request : Control the player programmatically ampproject/amphtml#27331?)
  Suggestion: Implement in follow-up PR.
• Dropdown to select posts from the stories editor?
  Suggestion: Implement in follow-up PR.

Frontend

• Implement render_callback
• Display Fullscreen toggle within player to navigate to story
  Got to URL? Or fullscreen iframe with history update?
  Suggestion: Implement in follow-up PR.

Code

• UX: Provide custom block icon
• UX / Product: Define better example story
• Tests
  • Fix WP_Block_Type_Registry::register notices in tests
  • E2E tests once stable
    Suggestion: Implement in follow-up PR.
  • Unit tests for individual components
    There are currently unresolved issues with mocking @wordpress/element that need to be figured out.
    Can perhaps use https://jestjs.io/docs/en/jest-object#jestgenmockfrommodulemodulename to mock @wordpress/element & co. See also https://github.com/ampproject/amp-wp/blob/1.4/tests/shared/test-utils/wp-element-mock.js
    Suggestion: Implement in follow-up PR.

Demo

Click below to expand:

Screenshots

---

See #1118.

[codecov]

Codecov Report

Merging #1249 into master will not change coverage.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master    #1249   +/-   ##
=========================================
  Coverage     63.78%   63.78%           
  Complexity      284      284           
=========================================
  Files           599      599           
  Lines          9888     9888           
=========================================
  Hits           6307     6307           
  Misses         3581     3581           

[swissspidy]

Add an embed story. Make the story bigger than the width of the content. Save post. Try and edit again.

Fixed. Max width has been reduced.

Poster image is not previewed in doc sidebar.

Fixed. Poster is now displayed in sidebar.

The embed in the feed doesn't work at all and output invalid html. For feeds, I think we should have a simple embed, like an image with a hyperlink.

Fixed. An image with link is now shown in feeds, or just a link if there is no poster.

If you align the story right, if doesn't clear fix correctly. Not sure if this is a theme issue.

Seems like a Gutenberg issue? e.g. WordPress/gutenberg#10299

Preview in block list breaks out of preview area. ( This really is a nit pick ).

Cannot reproduce this in current version of Gutenberg:

Not sure we can do anything about this, but if there is not enough space, then our block edit doesn't really work.

Not really. It's a common issue in Gutenberg. Example:

[spacedmonkey]

Cannot reproduce this in current version of Gutenberg:

I am not running the gutenberg plugin, I am just running whatever ships with 5.4.1

[spacedmonkey]

I still have issues with selecting the stories block.

https://youtu.be/E8QJqDfyvS4

[swissspidy]

I am not running the Gutenberg plugin, I am just running whatever ships with 5.4.1

They must have since improved the BlockPreview component then 🤷 In WP 5.4.1 the preview only breaks out of the preview area because Gutenberg applies some margin there. Nothing we can really do something about.

I still have issues with selecting the stories block.

Mind checking out the latest version? I tried adding an invisible overlay like Gutenberg does for its own embed blocks. This makes selection a bit better.

Lots of changes since then

[spacedmonkey]

This is great work @swissspidy . I am very happy to approve it!