Instagram Widget: Remove from legacy-widget block

[arcangelini]

Summary

With the new current widget block editor, the Instagram Widget does not configure properly. The current Instagram Gallery block already exists and offers the same functions. Rather than fixing the broken widget this PR removes it from the core/legacy-widget and adds the widget to the REST API to allow a block transform: to be created.

Fixes Automattic/wp-calypso#55344

Changes proposed in this Pull Request:

• Added filter to hide wpcom_instagram_widget from legacy-widget block
• Added widget_option to allow it to be displayed in the REST API. This will allow it to be "transformed" into the jetpack/instagram-gallery block

Jetpack product discussion

No discussions

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

No data changes

Testing instructions:

• Got to Appearance ⇢ Customize ⇢ Widgets
• Add a new block and select Legacy
• In the dropdown check to make sure the Instagram (Jetpack) option is gone
• Next search in the available blocks for "Instagram". You should no longer see a legacy block for Instagram.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello arcangelini! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D66722-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: October 5, 2021.
• Scheduled code freeze: September 28, 2021.

[yansern]

Tested & working!

Before:

After:

[yansern]

It looks like the E2E test needs to be updated.

[jeherve]

This works well. I have 2 remarks though:

• I find the function name (hide_from_legacy_block) a bit confusing; I would personally find something like hide_widget_in_block_widget_editor maybe a bit clearer?
• Would it be possible to put the function in the class instead of on its own outside of the class in the same file? I feel it would be cleaner, and would avoid any potential conflicts with functions with the same name in a different plugin.

Also, not for this PR, but I think it would be great if we could have a transform from the legacy widget to the block, to help move away from the widget.

[arcangelini]

Moved the filter into the _construct() and renamed the function

[arcangelini]

OK, it took me a little digging to understand how to build the transforms but I got it and added it to the instagram-gallery block and tested it. Do we need to add any other messages?

Also, the original widget had a title as you can see, but the block doesn't have that option. Should I also add a heading block above and either group them or leave them separate? Thoughts?

[jeherve]

OK, it took me a little digging to understand how to build the transforms but I got it and added it to the instagram-gallery block and tested it.

Nicely done, thank you! 👏

Do we need to add any other messages?

Is it possible to port the number of columns and the count to the block, so those settings remain?

Also, the original widget had a title as you can see, but the block doesn't have that option. Should I also add a heading block above and either group them or leave them separate? Thoughts?

Yeah, I think it would make sense to create a new heading block, and then group the heading and the Instagram block.

[simison]

these blocks need to be wrapped in a group to keep them together,

What does "keeping them together" mean?

[arcangelini]

@simison if you look at the screenshot that I took, when the heading and Instagram blocks are not bundled together in one group they have the propensity to end up in different footer columns. The two need to be nested in a group or column block to keep them together.

I am open to other suggestions because this has not been a very fun issue to solve for.

[simison]

@arcangelini a solution is coming in Gutenberg 11.5: WordPress/gutenberg#32723

Meanwhile might make sense to get basic transform merged without heading, or by keeping heading separate block?

[arcangelini]

The source of the issue is coming from this check. If the block transforming TO does not match the block where it is defined it returns null. This check does not take into account the nested innerBlocks. So any attempt to programmatically add any parent block will break.

[arcangelini]

Per @simison suggestion removed the header & group blocks in order to fix current issues. I am working to get the bug in Gutenberg fixed. Not sure on the timeline for that.

[jeherve]

This works well for me. 🚢 !

[arcangelini]

Deployed on WPCOM: r231968-wpcom

The failing test has to do with a core block test that was updated in the diff.

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D66722-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!