Release 1.43.0

[guarani]

Release for Gutenberg Mobile 1.43.0

Related PRs

• Gutenberg: Mobile Release v1.43.0 WordPress/gutenberg#27566
• WPAndroid: Integrate gutenberg-mobile release 1.43.0 WordPress-Android#13560
• WPiOS: Integrate gutenberg-mobile release 1.43.0 WordPress-iOS#15450

Extra PRs that Landed After the Release Was Cut

• Treat a string that only contains the formatting marker as empty for block formatting [Mobile] Treat a string that only contains the formatting marker as empty for block formatting WordPress/gutenberg#27583
• Fix crash when deleting a block - [Mobile] - Fix crash when deleting a block WordPress/gutenberg#27683

Changes

• New block released: File block: Implementing UI test for File block #2835, Adding WPMediaLibrary source to File block #2805
• Fix bug where splitting block loses word: Splitting block loses word #2777

Test plan

• Use the main WP apps to test the changes above.
• Smoke test the main WP apps for general writing flow.

Release Submission Checklist

• Approve and run optional Android and iOS UI tests
• Check if RELEASE-NOTES.txt and gutenberg/packages/react-native-editor/CHANGELOG.md are updated with all the changes that made it to the release.
• Bundle package of the release is updated.

[chipsnyder]

Hey @jd-alexander @guarani 👋 If it's ok I'd like to include this bug fix in the release #2877? I pointed the PRs are the release branches to make adding the changes a bit easier as long as we're good to go with them.

[enejb]

DarkMode-1

• Gallery block - Dark mode - steps
  The initial block state to add media display in the light mode, as well as the settings background after I switched to dark mode settings. It was fixed when I restarted the app.

To fix:

• I wasn't able to change the gallery image size. It always defaults to "Large".

• Gallery columns maxes out at 2 columns. Is that expected.

• 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
  Note: When you have more then 2 blocks nested it is in't possbile to tell how many blocks there are. You end up tabbing into the group but there is no feedback. Since the UI Stays exactly the same.

• 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
  Note: The spacing looks fine to be. but it doesn't look like as described. At least not on my device.

• Group - Breadcrumbs on FloatingToolbar is properly displayed - steps
  Note: The last breadcrumb icon (the one on the right) is not bigger than the first one. They are all the same size now.

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
• Buttons block - Add another Button inside Buttons using inserter - steps
• Buttons block - Button's wrapper grows properly - steps

Buttons-2

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

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

Note: I wish the toggling of the Open in new tab didn't remove the rel link field unless it was the same as the default. Currently it removes the rel link into if I made any changes to it and I toggle off the "Open in new tab" toggle.

• Buttons block - Settings: Link URL - steps
• Buttons block - Settings: Remove link - steps
• Buttons block - Settings: Synchronize with button options - steps

Color Settings - 1

• Colors Segmented Controls - steps

Note: When you have a gradiant selected the switching is not as smooth as it could be since the "Customize Gradiant" field show up and moved everything about a it.

• Scroll color palette to start - steps

• Scroll color palette to the end - steps

Note: that if we have a blue or purple color selected. (one of the last colours) it doesn't scroll to that colour at all. I would expect it to scroll to the end if the blue or purple colour is selected.

[peril-wordpress-mobile]

Wanna run full suite of Android and iOS UI tests? Click here and 'Approve' CI job!

[chipsnyder]

Copying this over because I ran into a GitHub bug that deleted the original comment

These cases were tested yesterday (12/8) against a local build pointed at wordpress-mobile/WordPress-iOS@65c7c45

Running on an iPhone 11, iOS 13.5.1

Gallery - 1

• Gallery block - Close/Re-open post with an ongoing image upload - steps
• ❌ Gallery block - Close post with an ongoing image upload - steps
  • @geriux has a fix he's working on for this: iOS, Android

Gallery - 2

• Gallery block - Insert image from device (failing) - steps
• ❌ Gallery block - Insert image from device (cancel) - steps
  • I think @geriux's fix might cover this as well: iOS, Android

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

Columns - 1

• Columns - Columns percentage mechanism - column's preview - steps
• Columns - Columns percentage mechanism - column's slider input - steps
• Columns - Columns percentage mechanism - predefined percentage values are rendered correctly on frontend- steps
• ❓ Columns percentage mechanism - custom percentage values are rendered correctly on frontend- steps
  • Ran into some weird issues on this one with negative percentages. @lukewalczak is working on it but don't think it's a blocker.
  • Steps:
    • Create a new Blog Post
    • Add A Columns block
    • Select 70/30
    • Change column 1 to 90%
    • Set Column 2 to 10% (or around there)
    • Add a third column
    • With those numbers I got: 73.34%, -6.66% and 33.33%
• Columns - Multiple slider in columns parent - steps
• 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 Column - steps
• Columns - Alignment attribute is properly passed when adding Column - steps
• Columns - Deep nesting is possible (iOS only)- steps

[chipsnyder]

Finishing up my test cases today on iOS. Using a local build from: wordpress-mobile/WordPress-iOS@cdbcb78

Running on an iPhone 11, iOS 13.5.1

Columns - 3

• Columns - Check if Column placeholders is visible for the unselected state - steps
• Columns - Appearance in vertical device position (vertical layout) - steps
• 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 stretched to content in nested structure- steps

Cover - 1

• Cover - Add image background from WordPress Media library - steps
• ❓ Cover - Change Minimum height in pixels - steps
  • ❓ The steps have a slider but this is now a stepper and a text box. I haven't paid attention to this area so not sure if this was expected or not.
  • Going to web though the minimum size wasn't honored in the display.
• Cover - Change Background Opacity - steps
• ❌ Cover - Image focal point is rendered properly - steps
  • Using a Cover block added on Mobile I couldn't change the focal point on web.
• Cover - Custom color is rendered properly - steps

Editor Theme - 1

• Default Colors - Check that default colors still load - steps
• Default Gradients - Check that default gradients still load - steps
• Custom Colors - Check that custom colors load in the editor - steps

Social Icons - 1

• The newly created Social Icons block is added with 4 icons - steps
• Active icon gets product color - steps
• Only active icons are visible when not selected - steps

[chipsnyder]

Ran this set using a local build from: wordpress-mobile/WordPress-iOS@cdbcb78 and merged in the changes from iOS

Running on an iPhone 11, iOS 13.5.1

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

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

[guarani]

Hey @chipsnyder thanks for the tests!

❓ Columns percentage mechanism - custom percentage values are rendered correctly on frontend- steps

Based on discussions I'm seeing in Slack, this is an issue on Android and Gutenberg web (WordPress/gutenberg#27616), too. It doesn't look like a blocker to me either.

❓ Cover - Change Minimum height in pixels - steps

Looks like the test needs updating.

Going to web though the minimum size wasn't honored in the display.

I couldn't reproduce (testing on iOS), adjusting the min height and publishing the changes, I saw the updated height in the web page.

❌ Cover - Image focal point is rendered properly - steps

Using a Cover block added on Mobile I couldn't change the focal point on web.

I couldn't reproduce this either (creating a Cover block on the web resulted in the focal point being shown correctly on th mobile editor, and I could also set the focal point on the web using a post created on mobile).

[chipsnyder]

Hey @guarani

Going to web though the minimum size wasn't honored in the display.

I couldn't reproduce (testing on iOS), adjusting the min height and publishing the changes, I saw the updated height in the web page.

I went back to test this one again and I wasn't able to reproduce it again. I reopened the post where I have the issue though and realized I created it in a nested columns block so this seems like a weird case that probably isn't realistic.

❌ Cover - Image focal point is rendered properly - steps

Using a Cover block added on Mobile I couldn't change the focal point on web.
I couldn't reproduce this either (creating a Cover block on the web resulted in the focal point being shown correctly on th mobile editor, and I could also set the focal point on the web using a post created on mobile).

I skimmed over the steps on this one Add a Cover block from the Web editor I was adding it from mobile. I think this must be expected then

[guarani]

Thanks for checking @chipsnyder! Looks all good then 👍

[guarani]

Performed writing flow tests using build 39071 on iPhone 11, iOS 14.2.

Writing Flow checklist

General

• 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

---

Issues

TC001 - Paste formatted text copied from website

On a long post, if a block has keyboard focus while off-screen, and I tap text in an on-screen block, instead of just showing the keyboard and allowing me to type into the on-screen block, the editor scrolls all the way down to the off-screen block that previously had keyboard focus.

See screen recording

Note: Not a new regression (reproduced as far back as WPiOS 16.2, Gutenberg Mobile 1.41).

TC001 - Multiline components

When pasting code into a Preformatted block, new lines are removed (e.g. copying code from Stack Overflow).

See screen recording

When pressing Enter/Return to create a new line, the text after the new line is outside the blocks closing </code> tag (as seen in ellipsis menu → Switch to HTML mode). Although hard to see visually, it's rendered in an ever-so-slightly different color.

Note: Not a new regression (reproduced as far back as WPiOS 16.2, Gutenberg Mobile 1.41).

TC001 - Undo/redo block actions

I lose the ability to redo after deleting blocks, undoing their removal, and trying to redo (to delete them again).

See screen recording

Note: Not a new regression (reproduced as far back as WPiOS 16.2, Gutenberg Mobile 1.41).

[jd-alexander]

Performed writing flow tests using alpha-261(16.4) on Google Pixel 4 XL, Android 11.

Writing Flow checklist

General

• TC001 - Block insertion flow
• TC001 - Paste formatted text copied from website
• TC001 - Multiline components
  • Verse block
  • Preformatted block
    ❌ Quote block
    ❌ Pullquote block

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

---

Issues

TC001 - Multiline components - Pullquote & Quote

When you create a Pullquote or Quote and you press enter multiple times in the middle of the block's content it starts moving the cursor a character forward and then it puts that character on a new line.

See screen recording

[jd-alexander]

Android takeaway In response to the writing flow tests done on iOS

TC001 - Paste formatted text copied from website

I did not notice this behavior on Android. I can do another test tomorrow to see if I can reproduce this behavior but so far I haven't. I also think the scrolling component for the keyboard is implemented differently so the issue is more likely specific to iOS. Nonetheless, after an investigation, we can conclude its origins.

TC001 - Multiline components

When pasting code into a Preformatted block, new lines are removed (e.g. copying code from Stack Overflow).

On Android, I did not notice this bug as the lines are were formatted exactly like the source.

TC001 - Undo/redo block actions

I did not notice this on Android. I am going to replay my device screen tomorrow if necessary to further assist with comparing the behavior on both platforms.

[cameronvoell]

Verified there are no remaining blockers and tested File block, heading fix, and crash fix on WPAndroid and WPiOS builds and everything is looking good!