gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#3391

Description

This PR introduces the following improvements on the Reusable block:

• Content is now rendered via the InnerBlock component
• Handle the case when a deleted reusable block is referenced in the content
• Handle the case when the same reusable block is referenced in the content

NOTE: Reusable block is only available in development mode.

Minor bugs identified during testing

Block's title is not displayed in the floating toolbar

For some reason I haven't found out yet, the floating toolbar only fetches the block's title from the initial blocks request that only gets 10 items. If the selected reusable block is not included in that list, the block's title is not displayed but shows Reusable block.

I'd like to investigate this issue further, the content of the reusable block is fetched when it is mounted so in theory the title should be updated too in the state and therefore accessible by the floating toolbar. Since it's a minor issue, I think it shouldn't block this PR.

Screenshot

Reusable block's data is cached for 10 minutes on Android

I realised that on Android the network requests from React native are cached by default for 10 minutes. For now this is only affecting the media items because it's the only data that is requested from React native, I haven't found any major issue regarding this although I haven't explored deeply. However for the reusable blocks this behaviour could be a problem because the content is modified often.

Here are the references to the code:

• Cache enabled by default
• Default cache lifetime

My idea is to solve this issue in a separate PR but it shouldn't block this PR.

EDIT: This issue is addressed in this PR.

How has this been tested?

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

Screenshots

Types of changes

New feature

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).