Support for POST requests

[fluiddot]

Motivation

POST requests are not currently supported in the React native Gutenberg bridge and they're required by the Reusable block for updating its content.

Solution

As we do for GET requests, we could follow a similar approach by having specific logic for managing this type of request.

Changes in the bridge

For helping understanding the changes that would involve handle POST requests I described for each platform how a request is currently made.

iOS

Here I detailed the flow when a request is made from the RN to iOS side:

• Fetch handler invokes fetchRequest on the bridge.
• Gutenberg bridge (JS side) invokes the method on the native side.
• Gutenberg bridge (native side) invokes gutenbergDidRequestFetch on the delegate.
• Gutenberg view controller creates a request in a network service specific to Gutenberg (GutenbergNetworking).
• Gutenberg networking service handles the request and depending on if the site is WP.com or WP.org it forwards the request to the specific API.

For supporting POST requests the idea here is first to identify the type of the request and depending on that invoke the bridge method, fetchGetRequest for GET and fetchPostRequest for POST. This change is already implemented in this draft PR.

Android

For Android we could follow the same approach, here is the flow when a request is made from RN to Android side:

• Fetch handler invokes fetchRequest on the bridge.
• Gutenberg bridge (JS side) invokes the method on the native side.
• Gutenberg bridge (native side) invokes performRequest in the glue code connected to the native side.
• Glue code invokes performRequest in the request handler.
• Request handler is set up when the glue code is attached to the editor fragment.
• Editor fragment passes onPerformFetch listener implemented in EditPostActivity as the request handler when the editor is created.
• Edit post activity handles the onPerformFetch and when is triggered it invokes performGetRequest on the React native request handler.
• React native request handler invokes executeRequest in the FluxC React native store.
• FluxC React native store handles the request and depending on if the site is WP.com or WP.org it forwards the request to the specific API.

This part is not implemented yet.

Extra implementations for iOS

I spotted while I was testing that POST requests were not available for self hosted sites. Looks like most of the requests on those sites go through the XMLRPC API instead the Rest API. For this purpose I created a PR in WordPressKit-iOS for supporting POST requests via Rest API.

Extra implementations for Android

On Android most of the network request logic is managed by FluxC, I checked that there’s a specific store for React native but doesn’t provide functionality for POST requests so this part should be implemented.

Alternatives

As far as I know there're no alternatives related to this problem, Reusable blocks are hidden post types (wp_block) that require a POST request to update its content.

Additional context

We have to add support for all the different site scenarios:

• WP.com regular site
• Atomic site
• Self-hosted without Jetpack
• Self-hosted with Jetpack

[fluiddot]

How to test POST requests

Since the only part that requires this type for requests for now is the Reusable block, I added a basic flow for editing them through an edit/save button embedded in the block.

The changes can be found in a branch in Gutenberg repository named rnmobile/try/reusable-block-post-requests.

How to apply it

The easiest way to apply the changes for testing is by cherry-picking the changes from commit 5b905d8b6aeff1a44ed6743165f30077aa3acc0c to the working branch without committing the changes. Once the work is done those changes should be discarded and not pushed.

Testing steps

It's highly recommended to connect the device/simulator to Charles proxy to inspect the network requests.

In the web version

1. Open a post.
2. Select some blocks and create a reusable block.
3. Save the post.

In the mobile version

1. Open the previous post.
2. Select the reusable block.
3. Tap on the "Edit" button.
4. Modify the content of the reusable block.
5. Tap on the "Save" button.
6. Observe that a POST request is made to the endpoint wp/v2/blocks/<REUSABLE_BLOCK_ID> with the modified content.
7. Observe that the reusable block gets updated with the new content.
8. Close the post and open it again.
9. Observe that the reusable block renders the new content.