Jetpack: show as beta-extension via block filters

[retrofox]

This PR improves the way to label beta blocks (extensions) in the editor canvas context.
It removes the current implementation that renames the block title when it's registered by using filters, allowing support not only Jetpack blocks but other blocks that could be treated as beta, for instance, the new VideoPress block.
Also, it adds the (beta) text suffix that's shown in the sidebar, and also adds the Beta Extensions label to the block in the canvas that disappears when hovering.

Disclaimer: there are some changes that we need to do with the new VideoPress Video block. Something to handle in a follow-up task.

Fixes #

Changes proposed in this Pull Request:

• Jetpack: improve beta-extension exhibition in the block editor context

Other information:

• 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?

Jetpack product discussion

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

Testing instructions:

• Test the current beta blocks in different environments: local dev-env, Simple, and JN sites

• Get all beta extensions by typing beta in the block inserter

Beta label:

[test-case-reminder]

Here are some suggested test cases for this PR.

Gutenberg extensions

• Use Core's block editor
• Use latest stable Gutenberg plugin

Blocks

• Tiled Gallery
• Business Hours
• Calendly
• Form
• Contact Info
• Eventbrite
• Google calendar
• Mailchimp
• Map
• OpenTable
• Pinterest
• Podcast player
• Star rating
• Recurring Payments
• Repeat Visitor
• Revue
• Simple Payments
• Slideshow

Extensions

• Publicize
• Likes

If you think that suggestions should be improved please edit the configuration file here. You can also modify/add test-suites to be used in the configuration file.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello retrofox! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D86628-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[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: September 6, 2022.
• Scheduled code freeze: August 30, 2022.

[retrofox]

new changes:

• Add the BETA label only in the parent block
• Do not remove the label when hovering
• Add a shadow to main block container element

The idea is to be less intrusive as possible. It doesn't change the Block layout but the styles.

[coder-karen]

Tested the beta label on Simple and JN - they look good there. I couldn't get the label (on the block itself) to show up in my local development environment though, with the beta constant added.
In all of those environments the beta label suffix is showing in the sidebar.

I also tried testing on a WoA site but even after adding the constant the blocks don't show up at all - perhaps something else is needed to test on WoA (if that's relevant here?). I did stumble across this in Slack though I'm not sure what the conclusion was: p1645006985128649-slack-CJS75TX3R

[jeherve]

This looks good to me. 🚢

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D86628-code, and deploy it.
Once you've done so, come back to this PR and add a comment with your SVN changeset ID (e.g. r12345-wpcom).

Thank you!

[retrofox]

r251609-wpcom

[simison]

I know this is older PR but wanted to note somewhere since there was an issue originating from the PR:

• What styles exactly from the Jetpack base styles import this feature needs? It's unclear how exactly the fix the problem caused by the import without knowing this.
• The editor.js feels like its becoming a bit catch-all file; worth considering moving the feature in its own files and importing into editor.js. Same goes for other mixed bag of functions there.
  • Perhaps by moving to its own file, you can avoid bundling or running the filters if beta extensions weren't even included in first place?
• is-beta-extension selector is kinda generic and would be good to prefix. Instead use some variation of .jetpack-extension.is-beta-extension, .jetpack-is-beta-extension, .is-jetpack-beta-extension depending on CSS styleguide you're going for.