[RNMobile] Add Reusable blocks to the inserter menu

[fluiddot]

Gutenberg-mobile PR -> wordpress-mobile/gutenberg-mobile#2644

Description

This PR includes the changes from #25265

Add support to insert existing Reusable blocks from the editor in the mobile version. For this purpose the inserter menu now could show 2 tabs in case this kind of blocks have been previously created in the site.

The Reusable blocks tab will show all the blocks created of this type in the site.

How has this been tested?

I tested this feature 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
• Create a new post or Edit a post
• Tap on the + icon to pop up the inserter menu
• Check that 2 tabs are shown, one (first one to be presented) with the blocks and another one with Reusable blocks
• Check that there're no Reusable blocks in the blocks tab
• Navigate to Reusable blocks tab
• Check that previously created Reusable blocks are 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
• Create a new post or Edit a post
• Tap on the + icon to pop up the inserter menu
• Check that 2 tabs are shown, one (first one to be presented) with the blocks and another one with Reusable blocks
• Check that there're no Reusable blocks in the blocks tab
• Navigate to Reusable blocks tab
• Check that previously created Reusable blocks are 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
• Create a new post or Edit a post
• Tap on the + icon to pop up the inserter menu
• Check that 2 tabs are shown, one (first one to be presented) with the blocks and another one with Reusable blocks
• Check that there're no Reusable blocks in the blocks tab
• Navigate to Reusable blocks tab
• Check that previously created Reusable blocks are shown

Screenshots

iOS Screenshots

iPhone 8

Blocks tab	Reusable blocks tab	No reusable blocks created

Android Screenshots

Nexus 5

Blocks tab	Reusable blocks tab	No reusable blocks created

Types of changes

New feature

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• 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.

[fluiddot]

As far as I checked if per_page=-1 query parameter is included in the request, one of the api-fetch middleware items (fetch-all-middleware) consider it as an unbounded query. This means that it will try to fetch all the available items of this resource by potentially doing multiple requests with the maximum items per page until it reaches the end.

As stated in the code:

// The REST API enforces an upper limit on the per_page option. To handle large
// collections, apiFetch consumers can pass `per_page=-1`; this middleware will
// then recursively assemble a full response array from all available pages.

The problem is that this middleware requires the full response object to apply its logic, for example it needs to read the link header to know the next page. Unfortunately the mobile version of api-fetch doesn't return the full response, it only returns the response's body so we can't rely on this logic, which means that we can't use that query parameter because it raises an exception.

My first approach was to find a workaround in the Gutenberg project but for the mobile version the request logic is handled in the native side, maybe in the future that part should be reviewed because this could be a limitation if we need to do unbounded queries.

For now, as a workaround, what I've done is fetch the maximum items per page that should be enough for Reusable blocks.

[fluiddot]

I also wrote (internal reference p9ugOq-1in-p2) about this just in case we want to tackle it in the future.

[fluiddot]

This component only allowed for the header a text, this new prop will allows to add anything we might need to render in the header.

[fluiddot]

Surprisingly this component was not exported I saw that it was only used in another component).

[fluiddot]

Here I'm resuming the pending things to do in this PR:

• This PR hasn't been reviewed so that would be the first thing and depending on the feedback apply some changes.

Apart from the feedback this PR was ready.

[fluiddot]

The work on this PR will continue in #28495.