1.29.0 Release

[mchowning]

Release for Gutenberg Mobile v1.29.0

Related PRs

• Gutenberg: No changes on rnmobile/release-1.29.0 for a PR yet
• WPAndroid: Integrate Gutenberg Release 1.29.0 WordPress-Android#12033
• WPiOS: Integrate Gutenbrg 1.29.0 Release WordPress-iOS#14192
• Aztec-iOS: N/A
• Aztec-Android: N/A

Additional Changes that Landed After the Release Was Cut

• Fix for editing links, that moves the cursor/caret to after the link: Move selection to end of link after insertion. WordPress/gutenberg#22652
• Fix for crash on delete of the Media-Text and Contact Info blocks: [RNMobile] Remove Keyboard.dismiss when deleting block WordPress/gutenberg#22677
• Add freeform support to the react native editor: Add freeform support to the react native editor WordPress/gutenberg#22609
• 1.28.2 hotfix, Only release Pullquote block on iOS: WordPress/gutenberg@b96445f
• Correct button block merge: [RNMobile] Correct concatenation in Button block merge function WordPress/gutenberg#22708 (review)
• Fix footer visibility on buttons blocks when deselecting: [RNMobile] Fix footer appender in buttons block WordPress/gutenberg#22711
• Fix removal of buttons when removing all buttons: Add onDeleteBlock to the extra data to re-render when it has changes WordPress/gutenberg#22716
• Fix Color updates when changing between solid and gradient colors: [RNMobile] Correct color selection in color settings WordPress/gutenberg#22736
• Fix: Add default value to format when start and end are undefined: [RNMobile] Fix: Add default value to format when start and end are undefined WordPress/gutenberg#22741

Incoming

• Button Block Fixes
  • Correct concatenation in Button block merge function: [RNMobile] Correct concatenation in Button block merge function WordPress/gutenberg#22708
  • Fix footer appender in buttons block: [RNMobile] Fix footer appender in buttons block WordPress/gutenberg#22711
  • Add onDeleteBlock to the extra data to re-render when it has changes: Add onDeleteBlock to the extra data to re-render when it has changes WordPress/gutenberg#22716

Changes

• Add support for changing overlay color settings in Cover block: [Mobile] Add Cover block overlay color settings WordPress/gutenberg#22207
• Entry/exit animation in FloatingToolbar: [RNMobile] add animation to FloatingToolbar WordPress/gutenberg#22146
• Verse Block: Enable the verse block for mobile WordPress/gutenberg#21883
• Fix merged of text blocks when a style is active: Fix merged of text blocks when a style is active. #2271
• Block toolbar can now collapse when the block width is smaller than the toolbar content: Allow shrink mobile toolbar #2220
• Trash icon that is used to remove blocks is moved to the new menu reachable via ellipsis button in the block toolbar: Allow shrink mobile toolbar #2220
• Creating undo levels less frequently: [RNMobile] add selectionStart and selectionEnd to transientEdits WordPress/gutenberg#22492
• Tooltip for page template selection buttons: [RNMobile] - Tooltip for template selection buttons WordPress/gutenberg#21974
• Fix button alignment in page templates and make strings consistent: Fix page templates button alignment and strings #2314
• Add support for displaying radial gradients in Buttons and Cover blocks: Display radial gradient in block which supporting gradients #2266

Test plan

1. Use the main WP apps to test the changes above.
2. Check WPAndroid and WPiOS PRs if there are specific tests to run.
3. Smoke test the main WP apps for general writing flow.
4. Verify that the release notes on the WP app PRs have been correctly updated.

Release Submission Checklist

• Release number was bumped
• Aztec dependencies are pointing to a stable release
  • iOS: 'grep WordPressAztec-iOS RNTAztecView.podspec'
  • Android: 'grep aztecVersion react-native-aztec/android/build.gradle'
• Gutenberg 'Podfile' and 'Podfile.lock' inside './ios/' are updated to the release number
• Bundle package of the release is updated
• Check if RELEASE-NOTES.txt is updated with all the changes that made it to the release

[mkevins]

Sanity tests Android (tested on a Pixel 3a):

Gallery-1

• Gallery block - Close/Re-open post with an ongoing image upload - steps
• Gallery block - Close post with an ongoing image upload - steps

Gallery-2

• Gallery block - Insert image from device (failing) - steps
• Gallery block - Insert image from device (cancel) - steps

Gallery-3

• Gallery block - Add Gallery Caption - steps
• Gallery block - Add Gallery Image Caption - steps
• Gallery block - Try adding same images from WP Media library and moving the images around - steps

MediaText-1

• Media Text block - Insert image from device (failing) - steps
• Media Text block - Close/Re-open post with an ongoing image upload - steps

MediaText-2

• Media Text block - Insert video from device (cancel) - steps
• Media Text block - Insert image from device (cancel) - steps

MultipleUpload-1

• Simultaneous uploads - steps

❓ I'm not seeing the image load from some reason (image block). The url looks correct in html mode, (it begins with https://), but it seems the ?w=889 does not work (the image fails to load, even on web). I will reattempt this tomorrow when I finish the other tests, so see if I can reproduce it consistently.

Update:

I've reproduced this with just the image block (and confirmed that it is not related with multiple uploads in particular). Interestingly, the full-size image still works after the upload has completed.

Large image only loads with full-size

I was able to reproduce the issue on web as well. I'm not sure why, but I wonder if this may be related with the size of the uploaded image.

Steps to reproduce (on web and mobile):

1. Download this image ‎(2,041 × 2,350 pixels, file size: 5.72 MB, MIME type: image/png)
2. Start a new post
3. Add an image block
4. Web: upload image, mobile: tap "Choose from device"
5. Choose image downloaded from step 1

Expected: Image is displayed after upload is complete
Actual: Broken image icon is displayed (along with alt text, or empty alt-text message).

Broken image after upload on web

Cover-1

• Cover - Add image background from WordPress Media library - steps
• Cover - Change Minimum height in pixels - steps
• Cover - Change Background Opacity - steps
• Cover - Image focal point is rendered properly - steps
• Cover - Custom color is rendered properly - steps

Columns - 1

• Columns - Columns block is added with default number of Column - steps
• Columns - Adding Column with AppenderButton - steps
• Columns - Adding and removing Column with BottomSheet Stepper control - steps

Columns - 2

• Columns - Max limit of Column number - steps
• Columns - Min limit of Column number - steps
• Columns - Removing Column with remove button - steps
• Columns - Removing the only one left Column with remove button - steps
• Columns - Changing alignment on Columns - steps
• Columns - Changing alignment on individual Columnn - steps
• Columns - Alignment attribute is properly passed when adding Column - steps
• Columns - Deep nesting is possible (iOS only)- steps

Deep nesting seems to be working ok for Android in my tests, is there something specific that still is not working?

Edit: I spoke too soon, it seems the crash happens when I remove the block. Maybe this can be added as a testing step (even for iOS)?

Android columns too deep crash:

Deep nesting of columns on Android

Columns - 3

• Columns - Check if Column placeholders is visible for the unselected state - steps
• ❓ Columns - Appearance in vertical device position (vertical layout) - steps

I noticed that the placeholder dotted rectangles do not show the nested structure when the none of the blocks in the hierarchy are selected. Is this expected?

Column placeholders are flattened when hierarchy deselected

• Columns - Appearance in horizontal device position (horizontal layout) - steps
• Columns - Mover direction - steps
• Columns - Check if Column placeholder is render in nested structure - steps
• Columns - Unselected Column placeholder is streched to content in nested structure- steps

[mkevins]

While testing Media & Text, I encountered an issue with the following steps:

1. Add a Media & Text block
2. Delete the block
   💥 crash

It seems the crash does not happen if you first focus on the inner paragraph block. Also, if you leave the post, and re-open it before deleting the Media & Text block, the crash does not occur. The crash results in the same exception as this open issue: wordpress-mobile/WordPress-Android#10491. It's possible it's related to a focus / blur issue with the RichText in the inner blocks, but we haven't yet narrowed down the root cause.

[pinarol]

I noticed that the placeholder dotted rectangles do not show the nested structure when the none of the blocks in the hierarchy are selected. Is this expected?

That is normal, they are only shown when the parent is selected. 👍

[lukewalczak]

Sanity tests iOS (tested on a iPhone XS):

Dark Mode - 1

• Gallery block - Dark mode - steps
• Shortcode block - Dark mode - steps
• Media Text block - Dark mode - steps

Group - 1

• Group - AppenderButton is rendered - steps
• Group - Deep nesting is possible (iOS only) - steps
• Group - Check if Group placeholder is visible for the unselected state - steps
• Group - Check if Group placeholder is render in nested structure - steps
• Group - Nested block have proper border styling - steps
• Group - Nested block have proper margins values - steps
• Group - Breadcrumbs on FloatingToolbar is properly displayed - steps

Spacer-1

• Spacer block - Spacer is rendered without crash - steps
• Spacer block - Settings: Control spacer height using the slider - steps
• Spacer block - Settings: Control spacer height using the text input - steps

Buttons-1

• Buttons block - Buttons block is added with focused Button with gray background color and white text color - steps
• Buttons block - Buttons inline appender - steps

🔴 : Inline appender is still visible when the different block is selected

• Buttons block - Add another Button inside Buttons using inserter - steps

Buttons-2

• Buttons block - Removing Button along with Buttons block - steps

🔴 : Removing container doesn't work if you add more than one Button and then you are removing one after the other

• Buttons block - Removing exactly one Button (when Buttons contain more of them) - steps

🔴 : Once removing the text from second Button on build app getting undefined in the previous button / on develop there is crash

⌛ : WordPress/gutenberg#22708 -> PR fixing that

Buttons-3

• Buttons block - Wrapping Buttons - steps
• Buttons block - Buttons alignment options - steps

Button-6

• Buttons block - Settings: Open in new tab - steps
• Buttons block - Settings: Link rel - steps
• Buttons block - Settings: Link URL - steps
• Buttons block - Settings: Remove link - steps
• Buttons block - Settings: Synchronize with button options - steps

[etoledom]

I'm not seeing the image load from some reason (image block). The url looks correct in html mode, (it begins with https://), but it seems the ?w=889 does not work (the image fails to load, even on web). I will reattempt this tomorrow when I finish the other tests, so see if I can reproduce it consistently.

This seems to be a problem with Photon with that specific image.

I was able to reproduce the issue using the provided image, uploading it directly to the WP Media Library (not related to gutenberg).
The image is uploaded successfully but trying to fetch it with the Photon query elements it fails. This seems to be a bug since the image is less than 10MB.

https://mysitefortestingetoledom.files.wordpress.com/2020/05/trupial_on_a_cactus-2.png

https://mysitefortestingetoledom.files.wordpress.com/2020/05/trupial_on_a_cactus-2.png?w=400

Then, using the same image, I exported it to PNG using the MacOS Preview app, and uploaded it again. This one is working just fine:

https://mysitefortestingetoledom.files.wordpress.com/2020/05/trupial_on_a_cactus_png2.png?w=400

So:

• I don’t think it’s a blocker
• The issue seems to be external to gutenberg (Jetpack/Photon)
• It might not be happening too often, just special scenarios with these kind of breaking images. (Doesn’t happen with all heavy images nor all png images).

[SergioEstevao]

Testing in iOS the

Writing Flow checklist:

• TC001 - Block insertion flow
• TC001 - Paste formatted text copied from website
• TC001 - Multiline components
• Rich Text Format
  • TC001 - Bold, Italic, strikethrough buttons
  • TC002 - Alignment buttons
  • TC003 - Alignment Split
  • TC004 - Link button works without selection
  • TC005 - Link button works with a selected word
  • TC006 - Adding a link from a copied URL
  • TC007 - Test format detection under the cursor
  • TC008 - Test formatting doesn't remove leading or trailing whitespace
• Splitting and merging
  • TC001 - Merge after writing
  • TC002 - Merge after selection
  • TC003 - Merge after deleting text
  • TC004 - Merge after deleting all
  • TC005 - Merge multiple blocks
  • TC006 - Splitting/merge list block
• Undo / Redo - Test Cases
  • TC001 - Undo/redo block actions
  • TC002 - Undo/redo text
  • TC003 - Undo/redo text format

[mchowning]

Testing Writing Flow on Android:

• TC001 - Block insertion flow
• TC001 - Paste formatted text copied from website
• TC001 - Multiline components
• Rich Text Format
  • TC001 - Bold, Italic, strikethrough buttons
    ⚠️ Regression with formatting image captions (see comment below)
  • TC002 - Alignment buttons
  • TC003 - Alignment Split
  • TC004 - Link button works without selection
  • TC005 - Link button works with a selected word
  • TC006 - Adding a link from a copied URL
  • TC007 - Test format detection under the cursor
  • TC008 - Test formatting doesn't remove leading or trailing whitespace
• Splitting and merging
  • TC001 - Merge after writing
  • TC002 - Merge after selection
  • TC003 - Merge after deleting text
  • TC004 - Merge after deleting all
  • TC005 - Merge multiple blocks
  • TC006 - Splitting/merge list block
• Undo / Redo - Test Cases
  • TC001 - Undo/redo block actions
  • TC002 - Undo/redo text
  • TC003 - Undo/redo text format

[mchowning]

I'm seeing a regression with image and video block captions where the formatting buttons do not update and the first character is not formatted when the caption is initially selected. It seems that this only happens the very first time text is added to a caption—once text has been added to the caption I do not see the issue anymore, even if I delete all the text and apply formatting to the now-empty caption.

I have reproduced this on both iOS and Android. I do not see this issue with other rich text blocks. I cannot reproduce this with the current 14.9 alpha-224 release, so I believe this is a regression.

I have filed an issue to track this: #2334

Steps to Reproduce

1. Create a new image/video block with an image/video so the caption can be selected
2. Select the caption
3. Activate the bold, italic, or strikethrough formatting buttons
4. Observe that the format button's state does not update
5. Begin typing text
6. Observe that after the first character, the formatting buttons update their state, and all the text after the first character has the formatting applied

[guarani]

Testing the Writing Flow checklist (Android):

• TC001 - Block insertion flow
• TC001 - Paste formatted text copied from website
• TC001 - Multiline components
• Rich Text Format
  • TC001 - Bold, Italic, strikethrough buttons
  • TC002 - Alignment buttons
  • TC003 - Alignment Split
  • TC004 - Link button works without selection
  • TC005 - Link button works with a selected word
  • TC006 - Adding a link from a copied URL
  • TC007 - Test format detection under the cursor
  • TC008 - Test formatting doesn't remove leading or trailing whitespace
• Splitting and merging
  • TC001 - Merge after writing
  • TC002 - Merge after selection
  • TC003 - Merge after deleting text
  • TC004 - Merge after deleting all
  • TC005 - Merge multiple blocks
  • TC006 - Splitting/merge list block
• Undo / Redo - Test Cases
  • TC001 - Undo/redo block actions
  • TC002 - Undo/redo text
  • TC003 - Undo/redo text format

Comments

• The new remove block bottom sheet is doesn't respond well to changes to light/dark mode unless you exit the editor and open it again
• If text is deleted and then then undo is pressed, the cursor goes to the second last position instead of the last

[mchowning]

Retested the Writing Flow on iOS.

Only found one small non-blocking issue where the placeholder would sometimes be hidden on fields with right alignment: #2338. I do not consider this a blocker because the block still functions fine, it does not occur on the latest version of iOS, and it is not a regression (I can recreate the issue with a build of the WPiOS release/14.9 branch).

Writing Flow checklist:

• TC001 - Block insertion flow
• TC001 - Paste formatted text copied from website
• TC001 - Multiline components
• Rich Text Format
  • TC001 - Bold, Italic, strikethrough buttons
  • TC002 - Alignment buttons
  • TC003 - Alignment Split
  • TC004 - Link button works without selection
  • TC005 - Link button works with a selected word
  • TC006 - Adding a link from a copied URL
  • TC007 - Test format detection under the cursor
  • TC008 - Test formatting doesn't remove leading or trailing whitespace
• Splitting and merging
  • TC001 - Merge after writing
  • TC002 - Merge after selection
  • TC003 - Merge after deleting text
  • TC004 - Merge after deleting all
  • TC005 - Merge multiple blocks
  • TC006 - Splitting/merge list block
• Undo / Redo - Test Cases
  • TC001 - Undo/redo block actions
  • TC002 - Undo/redo text
  • TC003 - Undo/redo text format