Story block: remove wp-components frontend dependency

[sgomes]

The story block frontend currently enqueues wp-components, which is an absolutely massive 200KB (compressed) dependency, and which comes with other large dependencies of its own.

It does this for two different reasons:

• To reuse some SVG-related components. While this is ripe for a deeper refactor, an immediate improvement we can apply is to use wp-primitives instead; it has the exact same components (wp-components reexports them), and wp-primitives has a massively smaller footprint.
• To reuse the <Button> component. None of the usage seems to justify it, so I simply replaced it with <button>.

Note: I can't find a particular team that is currently responsible for this block, so I'm assigning to @Automattic/jetpack-crew. Please feel free to reassign!

This PR should save ~250KB compressed (!!) on pages with story blocks.

Proposed changes:

• Story block: remove dependency on wp-components SVG-related components by replacing it with a dependency on the wp-primitives equivalents
• Story block: remove dependency on wp-components <Button> and replace with plain <button>

Other information:

• N/A Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

None, this is a simple performance improvement with no functionality changes.

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

• Create a page with a story block
• Load the page and ensure that wp-components is not loaded
• Smoke-test the story block and ensure it works correctly

[github-actions]

Are you an Automattician? You can now test your Pull Request on WordPress.com. On your sandbox, run

bin/jetpack-downloader test jetpack update/remove-wp-components-dep-from-story-frontend

to get started. More details: p9dueE-5Nn-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: March 7, 2023.
• Scheduled code freeze: February 28, 2023.

[sgomes]

The Boost E2E test failure seems unrelated (it's unrelated code, and the failures are timeouts), but I'm not sure how to validate that.

[anomiex]

Yeah, it's unrelated. p1675373367797419-slack-CBG1CP4EN

[sgomes]

Rebased after the @wordpress package updates.

[sgomes]

Looks like the build keeps failing (5 attempts so far) because of "the weird bug" 🤷

Finally succeeded after a new rebase.

[jeherve]

@twstokes Is that something someone on your team may be able to test? The Story block is an integral part of the app experience, we'd want to make sure it still works as expected from your end as well.

Thank you!

[twstokes]

@twstokes Is that something someone on your team may be able to test? The Story block is an integral part of the app experience, we'd want to make sure it still works as expected from your end as well.

Thank you!

Thank you @jeherve for putting this on our radar! 🙇 @dcalhoun will give it a look. 👀

[dcalhoun]

I tested the proposed changes by creating Story blocks in the WordPress app on both iOS and Android. I encountered several issues within the mobile editor, but the issues also occur in trunk and the published app release. So, I do not believe the issues to be directly related to these changes. I captured the issues in wordpress-mobile/gutenberg-mobile#5472. I do not believe these issues should block this PR.

Additionally, I noticed that videos within the Story block generally never load within the web editor. Instead, a loading indicator is displayed indefinitely. This occurs in trunk and the current WordPress.com version too. So, this also appears unrelated to these changes. Do others experience this in the web editor too?

• Safari 16.3
• macOS 13.2.1
• Gutenberg 15.0.1
• Jetpack 11.8.3

Web Editor: Storyblock Video Loading

[jeherve]

This tests well for me! 🚢

[sgomes]

Thank you for the reviews, @dcalhoun and @jeherve! 👍