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

fluiddot · 2021-05-11T17:36:09Z

gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#3490
guteberg PR: WordPress/gutenberg#31744
WordPress-iOS PR: wordpress-mobile/WordPress-iOS#16475

Depends on: #14529

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

Potential unintended areas of impact

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

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:

Edit a post/page
Add some blocks
Select multiple blocks
Click on options (three dots button)
Click on "Add to Reusable blocks" button
Input a name for the block
Save the post/page

Option 2:

Navigate to "Reusable blocks page" (referenced above)
Click on "Add new reusable block"/"Add new" button
Add a title
Add some blocks
Publish it

Preview content

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

Deleted reusable block

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

Recursive block rendering

Create a reusable block
Edit the reusable block, add the same reusable block as part of the content and save it
Add the reusable block to a post/page
Edit the post/page in the mobile app
Observe that the reusable block is shown and that no errors are displayed
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

Create a reusable block in the web version
Add the reusable block to a post/page
Edit the post/page in the mobile app
Tap on the reusable block
Tap on the three dots button to display the block actions menu
Tap on "Convert to regular blocks"
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.

[Follow the same steps described above for converting to regular blocks]
Tap the undo button from the toolbar
Observe that the reusable block is displayed again
Tap the redo button from the toolbar
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

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 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 · 2021-05-11T17:36:13Z

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

fluiddot · 2021-05-12T12:04:37Z

The installable build is failing because it requires this PR to be merged first.

# Conflicts: # build.gradle

peril-wordpress-mobile · 2021-05-13T18:42:42Z

You can test the changes on this Pull Request by downloading the APK here.

# Conflicts: # build.gradle

jd-alexander

Hi @fluiddot thanks for these changes. I tested on WP.com sites ( including atomic) and the reusable block behavior worked as expected. 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 APK here for testing.

fluiddot · 2021-05-17T19:57:52Z

Hi @fluiddot thanks for these changes. I tested on WP.com sites ( including atomic) and the reusable block behavior worked as expected. 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 APK here for testing.

Thank you very much @jd-alexander for reviewing it ❤️ !

Regarding the unsupported block issue, there’s already an opened issue related to this. In fact, I have a PR with the fix but it’s blocked due to other translation problems.

jd-alexander · 2021-05-17T20:21:49Z

Regarding the unsupported block issue, there’s already an opened issue related to this. In fact, I have a PR with the fix but it’s blocked due to other translation problems.

Ah, I didn't notice it. Thanks for the sharing @fluiddot . So it a case where we will wait until that PR is ready before merging this?

fluiddot · 2021-05-17T20:37:49Z

Regarding the unsupported block issue, there’s already an opened issue related to this. In fact, I have a PR with the fix but it’s blocked due to other translation problems.

Ah, I didn't notice it. Thanks for the sharing @fluiddot . So it a case where we will wait until that PR is ready before merging this?

The issue is happening for all unsupported blocks so it’s not necessarily blocking this PR. Anyways, as the fix has to land in the current release 1.53.0 (it will be included as a beta fix) because it’s a major issue, it will most likely be merged before this one 😄 .

jd-alexander · 2021-05-17T20:40:12Z

The issue is happening for all unsupported blocks so it’s not necessarily blocking this PR. Anyways, as the fix has to land in the current release 1.53.0 (it will be included as a beta fix) because it’s a major issue, it will most likely be merged before this one 😄 .

Understood! In that case, I will give approval to these PRs.

jd-alexander

Approved via WordPress/gutenberg#31744 (review)

# Conflicts: # build.gradle

fluiddot · 2021-05-21T13:07:57Z

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 🎊 .

fluiddot · 2021-05-21T14:38:35Z

I did a quick test with the last installable build and the editor crashes upon opening 😨 , I'm going to hold the merge of this PR until I find the cause.

fluiddot · 2021-05-21T14:45:53Z

I did a quick test with the last installable build and the editor crashes upon opening 😨 , I'm going to hold the merge of this PR until I find the cause.

I made a build locally (using local GB-mobile, not the binary) and it's not happening so I'm wondering if it has to do with the RN binaries 🤔 .

fluiddot · 2021-05-21T17:49:29Z

I'll try to generate new RN binaries once the CircleCI outage ends and test again.

This reverts commit e259d51.

Just wanted to mark this PR as needing review since I also saw the crash when opening the editor from the Peril APK build. Didnt want someone to accidentally merge. Thanks!

fluiddot · 2021-05-24T16:56:27Z

After testing further, I noticed that the crash was introduced in a previous commit on GB-mobile develop, not the one related to this PR. Looks like this is the PR that introduced the issue in this merge commit.

fluiddot · 2021-05-25T08:55:19Z

@jd-alexander @cameronvoell Looks like the crash is not caused by this PR so I think we could merge this PR and fix the crash on a new PR, wdyt?

fluiddot · 2021-05-25T15:15:40Z

@jd-alexander @cameronvoell Looks like the crash is not caused by this PR so I think we could merge this PR and fix the crash on a new PR, wdyt?

The crash will be fixed after merging this PR 🎊 .

# Conflicts: # build.gradle

The ref was accidentally changed when resolving conflicts with develop branch.

fluiddot · 2021-05-26T10:36:01Z

build.gradle

@@ -7,7 +7,7 @@ buildscript {
    ext.kotlin_ktx_version = '1.2.0'
    ext.wordPressUtilsVersion = '1.40.0'
    ext.detektVersion = '1.15.0'
-    ext.gutenbergMobileVersion = 'v1.53.1'
+    ext.gutenbergMobileVersion = 'develop-c55652b5fabf0e4edd08b79da4b78418aa886410'


This reference is pointing to the commit that introduced the fix for the Android crash referenced in this comment.

fluiddot · 2021-05-26T11:18:03Z

I've tested the last installable build and the crash is no longer happening 🎊 .

@jd-alexander @cameronvoell the PR is ready to review and merge, let me know if I can help with anything else 🙇 .

antonis

Great work @fluiddot 👍
Thank you for bringing this functionality to the mobile side 🙇
I did a quick sanity using the produced APK and the availability of the block works as expected 🎉
The code changes are consistent and look great too 👍

fluiddot · 2021-05-26T12:07:24Z

I've tested the last installable build and the crash is no longer happening 🎊 .

@jd-alexander @cameronvoell the PR is ready to review and merge, let me know if I can help with anything else 🙇 .

@antonis just reviewed and approved the PR so I'm going to merge it, let me know @jd-alexander and @cameronvoell if you have any concerns regarding this, thank you all for the help provided in this PR 🙇 !

Add enableReusableBlock into Gutenberg props

67401c4

fluiddot added Gutenberg Editing and display of Gutenberg blocks. gutenberg-mobile labels May 11, 2021

fluiddot self-assigned this May 11, 2021

Update Gutenberg Mobile ref

85c7fac

fluiddot requested a review from jd-alexander May 12, 2021 12:05

Update release notes

9d3bec2

fluiddot marked this pull request as ready for review May 12, 2021 12:12

Add atomic sites to reusable block capability

936d802

fluiddot changed the title ~~[Gutenberg] Add enableReusableBlock into Gutenberg props~~ [Gutenberg] Enable reusable block only in WP.com sites May 13, 2021

fluiddot added 2 commits May 13, 2021 19:33

Merge branch 'develop' into gutenberg/add/reusable-block-capability

85b1ae5

# Conflicts: # build.gradle

Update Gutenberg Mobile ref

efa3e20

fluiddot added 3 commits May 14, 2021 11:15

Update Gutenberg Mobile ref

afdabad

Merge branch 'develop' into gutenberg/add/reusable-block-capability

b749555

# Conflicts: # build.gradle

Update Gutenberg Mobile ref

6d0845c

jd-alexander reviewed May 17, 2021

View reviewed changes

jd-alexander previously approved these changes May 17, 2021

View reviewed changes

fluiddot added 3 commits May 21, 2021 13:51

Merge branch 'develop' into gutenberg/add/reusable-block-capability

dfe76fc

# Conflicts: # build.gradle

Update Gutenberg Mobile ref

29b9e86

Update release notes

6bb6265

cameronvoell mentioned this pull request May 24, 2021

Upgrade React Native to 0.64 #14702

Merged

4 tasks

Update Gutenberg Mobile ref

e1848b4

fluiddot added this to the 17.5 milestone May 24, 2021

fluiddot added 2 commits May 24, 2021 16:45

[TEST] Update Gutenberg Mobile ref to old commit

e259d51

Revert "[TEST] Update Gutenberg Mobile ref to old commit"

048a79f

This reverts commit e259d51.

cameronvoell requested review from cameronvoell and jd-alexander May 24, 2021 15:41

Update Gutenberg Mobile ref

db8d13c

fluiddot mentioned this pull request May 25, 2021

[Gutenberg][TEST][DO NOT MERGE] Test react-native-prompt-android package integration #14713

Closed

3 tasks

fluiddot added 3 commits May 26, 2021 12:31

Merge branch 'develop' into gutenberg/add/reusable-block-capability

2276488

# Conflicts: # build.gradle

Update Gutenberg Mobile ref

d247472

Revert Stories lib ref change

2632da0

The ref was accidentally changed when resolving conflicts with develop branch.

fluiddot commented May 26, 2021

View reviewed changes

antonis approved these changes May 26, 2021

View reviewed changes

fluiddot merged commit 4198e06 into develop May 26, 2021

fluiddot deleted the gutenberg/add/reusable-block-capability branch May 26, 2021 12:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

fluiddot commented May 11, 2021 •

edited

Loading

peril-wordpress-mobile bot commented May 11, 2021 •

edited

Loading

fluiddot commented May 12, 2021

peril-wordpress-mobile bot commented May 13, 2021 •

edited

Loading

jd-alexander left a comment

fluiddot commented May 17, 2021

jd-alexander commented May 17, 2021

fluiddot commented May 17, 2021

jd-alexander commented May 17, 2021

jd-alexander left a comment

fluiddot commented May 21, 2021

fluiddot commented May 21, 2021

fluiddot commented May 21, 2021 •

edited

Loading

fluiddot commented May 21, 2021

fluiddot commented May 24, 2021

fluiddot commented May 25, 2021

fluiddot commented May 25, 2021 •

edited

Loading

fluiddot May 26, 2021

fluiddot commented May 26, 2021

antonis left a comment

fluiddot commented May 26, 2021 •

edited

Loading

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

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

Conversation

fluiddot commented May 11, 2021 • edited Loading

Why reusable block is disabled in self-hosted sites

Regression Notes

General testing

Preview content

Deleted reusable block

Recursive block rendering

Undo/redo

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

peril-wordpress-mobile bot commented May 11, 2021 • edited Loading

fluiddot commented May 12, 2021

peril-wordpress-mobile bot commented May 13, 2021 • edited Loading

jd-alexander left a comment

Choose a reason for hiding this comment

fluiddot commented May 17, 2021

jd-alexander commented May 17, 2021

fluiddot commented May 17, 2021

jd-alexander commented May 17, 2021

jd-alexander left a comment

Choose a reason for hiding this comment

fluiddot commented May 21, 2021

fluiddot commented May 21, 2021

fluiddot commented May 21, 2021 • edited Loading

fluiddot commented May 21, 2021

fluiddot commented May 24, 2021

fluiddot commented May 25, 2021

fluiddot commented May 25, 2021 • edited Loading

fluiddot May 26, 2021

Choose a reason for hiding this comment

fluiddot commented May 26, 2021

antonis left a comment

Choose a reason for hiding this comment

fluiddot commented May 26, 2021 • edited Loading

fluiddot commented May 11, 2021 •

edited

Loading

peril-wordpress-mobile bot commented May 11, 2021 •

edited

Loading

peril-wordpress-mobile bot commented May 13, 2021 •

edited

Loading

fluiddot commented May 21, 2021 •

edited

Loading

fluiddot commented May 25, 2021 •

edited

Loading

fluiddot commented May 26, 2021 •

edited

Loading