[Gutenberg] Enable reusable block only in WP.com sites

[fluiddot]

gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#3490
guteberg PR: WordPress/gutenberg#31744
WordPress-Android PR: wordpress-mobile/WordPress-Android#14623

This PR enables the reusable block and adds a capability into the editor to limit the availability of this type of block to only WP.com sites.

Why reusable block is disabled in self-hosted sites

Related issue: wordpress-mobile/gutenberg-mobile#3457

The main reason for disabling this block in self-hosted sites is related to the case of having a reusable block that contains a self-reference (a reference to the same reusable block). While in WP.com sites this is working properly, in self-hosted sites, fetching data from the endpoint that holds the data for reusable blocks (/wp-json/wp/v2/blocks) in this case, the site returns a bad response so we don't have data for displaying them.

NOTE: This is reproducible on self-hosted sites with and without Jetpack, although the error response is different.

Regression Notes

1. Potential unintended areas of impact
   The Reusable block has been enabled so it could affect those posts/pages that contain this type of block.

2. What I did to test those areas of impact (or what existing automated tests I relied on)

General testing

The following tests have been performed to assure that the editor works as expected:

Present block content (preview mode)

PR: WordPress/gutenberg#25265

This was tested in the following 3 different scenarios:

WordPress.com site

Create a WordPress.com site or use an already created one.

• Create a post in the web version
• Add some blocks and create a Reusable block
• Open the app with metro running (Gutenberg-mobile)
• Add the WordPress.com site
• Edit the previous created post
• Check that the Reusable block is shown
• Tap on it and check that the title of the Reusable blocks is shown

Self-hosted site with Jetpack

Create a self-hosted site with Jetpack (I used https://jurassic.ninja/create/) or use an already created one.

• Create a post in the web version
• Add some blocks and create a Reusable block
• Open the app with metro running (Gutenberg-mobile)
• Add the self-hosted site
• Edit the previous created post
• Check that the Reusable block is shown
• Tap on it and check that the title of the Reusable blocks is shown

Self-hosted site without Jetpack

Create a self-hosted site without Jetpack (I created a local one using this instructions) or use your own.

• Create a post in the web version
• Add some blocks and create a Reusable block
• Open the app with metro running (Gutenberg-mobile)
• Add the self-hosted site
• Edit the previous created post
• Check that the Reusable block is shown
• Tap on it and check that the title of the Reusable blocks is shown

Additional improvements for rendering Reusable block

PR: WordPress/gutenberg#30966

NOTE: Reusable blocks can be managed by navigating to the "Reusable blocks page":

• WP.com: https://wordpress.com/types/wp_block/<YOUR_WPCOM_SITE_DOMAIN>
• Self-hosted: https://<YOUR_SELF_HOSTED_SITE_DOMAIN>/wp-admin/edit.php?post_type=wp_block

Here are the steps for creating reusable blocks in the web version:

Option 1:

1. Edit a post/page
2. Add some blocks
3. Select multiple blocks
4. Click on options (three dots button)
5. Click on "Add to Reusable blocks" button
6. Input a name for the block
7. Save the post/page

Option 2:

1. Navigate to "Reusable blocks page" (referenced above)
2. Click on "Add new reusable block"/"Add new" button
3. Add a title
4. Add some blocks
5. Publish it

Preview content

1. Create a reusable block and add it to a post/page
2. Edit the post/page in the mobile app
3. Observe that the reusable block is shown
4. Tap on it and observe that the title of the reusable blocks is shown

Deleted reusable block

1. Create two reusable blocks
2. Add the second reusable block as part of the content of the first one and save it
3. Delete the second reusable block from the "Reusable blocks page" (referenced above)
4. The second reusable block will go to the trashed tab, delete it permanently
5. Add the first reusable block to a post/page
6. Edit the post/page in the mobile app
7. Observe that the reusable block is shown and that no errors are displayed
8. Observe that the second reusable block is not rendered but displays a warning

Recursive block rendering

1. Create a reusable block
2. Edit the reusable block, add the same reusable block as part of the content and save it
3. Add the reusable block to a post/page
4. Edit the post/page in the mobile app
5. Observe that the reusable block is shown and that no errors are displayed
6. Observe that it displays a warning instead of rendering multiple times the same block

Add convert to regular blocks action to Reusable block

PR: WordPress/gutenberg#31012

1. Create a reusable block in the web version
2. Add the reusable block to a post/page
3. Edit the post/page in the mobile app
4. Tap on the reusable block
5. Tap on the three dots button to display the block actions menu
6. Tap on "Convert to regular blocks"
7. Observe that the reusable block is converted to regular blocks

Undo/redo

It's important that we verify that the undo/redo actions work as expected when converting to regular blocks.

1. [Follow the same steps described above for converting to regular blocks]
2. Tap the undo button from the toolbar
3. Observe that the reusable block is displayed again
4. Tap the redo button from the toolbar
5. Observe that the regular blocks are displayed again

Verify that the reusable block is only available in WP.com sites

WordPress.com site - Reusable block is enabled

Create a WordPress.com site or use an already created one.

• Create a post in the web version
• Add some blocks and create a Reusable block
• Open the app with metro running (Gutenberg-mobile)
• Add the WordPress.com site
• Edit the previous created post
• Check that the Reusable block is shown
• Tap on it and check that the title of the Reusable blocks is shown

WordPress.com site (Atomic) - Reusable block is enabled

Create an Atomic site via WordPress.com site or use an already created one.

• Create a post in the web version
• Add some blocks and create a Reusable block
• Open the app with metro running (Gutenberg-mobile)
• Add the WordPress.com site
• Edit the previous created post
• Check that the Reusable block is shown
• Tap on it and check that the title of the Reusable blocks is shown

Self-hosted site with Jetpack - Reusable block is disabled

Create a self-hosted site with Jetpack (I used https://jurassic.ninja/create/) or use an already created one.

• Create a post in the web version
• Add some blocks and create a Reusable block
• Open the app with metro running (Gutenberg-mobile)
• Add the self-hosted site
• Edit the previous created post
• Check that the Reusable block is displayed as unsupported

Self-hosted site without Jetpack - Reusable block is disabled

Create a self-hosted site without Jetpack (I created a local one using this instructions) or use your own.

• Create a post in the web version
• Add some blocks and create a Reusable block
• Open the app with metro running (Gutenberg-mobile)
• Add the self-hosted site
• Edit the previous created post
• Check that the Reusable block is displayed as unsupported

3. What automated tests I added (or what prevented me from doing so)
   No automated tests have been added but I plan to add them in the future.

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding unit tests for my changes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[peril-wordpress-mobile]

You can test the changes on this Pull Request by downloading it from AppCenter here with build number: 48705. IPA is available here. If you need access to this, you can ask a maintainer to add you.

[peril-wordpress-mobile]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[jd-alexander]

Hi @fluiddot thanks for these changes. I tested on WP.com sites ( including atomic) and the reusable block behavior worked as expected. Similarly to Android, While testing on self hosted sites, I can see that the block is unsupported. However, I got undefined for the block's name. Let me know if you are able to reproduce. I utilized the IPA here for testing.

[jd-alexander]

Approved via WordPress/gutenberg#31744 (review)

[fluiddot]

I created the Gutenberg Mobile tag v1.54.0-alpha1 that points to the merge commit of wordpress-mobile/gutenberg-mobile#3490 and the reference has been updated, once the PR checks pass the PR will be merged 🎊 .