Release 1.41.0

[ceyhun]

Release for Gutenberg Mobile 1.41.0

Related PRs

• Gutenberg: Mobile Release v1.41.0 WordPress/gutenberg#26817
• WPAndroid: Integrate gutenberg-mobile release 1.41.0 WordPress-Android#13322
• WPiOS: Integrate gutenberg-mobile release 1.41.0 WordPress-iOS#15257

Extra PRs that Landed After the Release Was Cut

• Remove flex from range cell container ([RNMobile] Remove flex from range cell container WordPress/gutenberg#26777)
• Correct ios back icon ([RNMobile] Correct ios back icon WordPress/gutenberg#26690)
• Fix Dark mode style for preformatted/shortcode blocks ([RNMobile] Fix Shortcode, Code, and Preformatted background colors WordPress/gutenberg#26898)

Changes

• [***] Faster editor start and overall operation on Android. [Use Hermes bytecode on Android #2780]
• [*] [Android] Enable multiple upload support for Image block. [[Android] Image block - upload multiple #2530]

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
• Aztec dependencies are pointing to a stable release.
  • iOS: Aztec dependencies match in RNTAztecView.podspec and gutenberg/packages/react-native-aztec/RNTAztecView.podspec.
• 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.

[peril-wordpress-mobile]

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

[lukewalczak]

SANITY TESTING IOS

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

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
• 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 Columnn - steps
• Columns - Alignment attribute is properly passed when adding Column - steps
• Columns - Deep nesting is possible (iOS only)- steps

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 streched to content in nested structure- 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

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

Editor Theme - 1

Note: It's a known issue.

• 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

When you switch theme in the app the theme color palette does not change. If you close the editor and reopen it, the theme changes are applied.

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

[ceyhun]

Tested with iPhone 11 Pro, iOS 14.2, build 37501:

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

[mkevins]

Sanity testing Android

Tested via generated apk on Pixel 3a (physical device)

DarkMode-1

• Gallery block - Dark mode - steps
• ❌ Shortcode block - Dark mode - steps

For shortcode block, there is a white input box instead of black:

• Media Text block - Dark mode - 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
• 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

Note: The steps should be updated for these tests, because the trash button is no longer present. Instead, we tap the "dots" and select "Remove block" from the bottomsheet.

Buttons-3

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

Button-6

• Buttons block - Settings: Open in new tab - steps

Update Test: Open post in preview mode, click browser button (globe), then click button

• Buttons block - Settings: Link rel - steps
• Buttons block - Settings: Link URL - steps
• ❓ Buttons block - Settings: Remove link - steps

I did not see a remove link button, but I believe the sanity test needs to be updated here.

• Buttons block - Settings: Synchronize with button options - steps

Group-1

• Group - AppenderButton is rendered - steps
• Group - Check if Group placeholder is visible for the unselected state - steps
• ❓ Group - Check if Group placeholder is render in nested structure - steps

I did not see nested outlines for the inner groups on nested groups (the outline was only 1 layer deep). If this is expected, the sanity test needs to be updated. Here is a screen recording:

• Group - Nested block have proper border styling - steps

• Group - Nested block have proper margins values - steps

• Group - Breadcrumbs on FloatingToolbar is properly displayed - steps

Color Settings - 1

• Colors Segmented Controls - steps
• Scroll color palette to start - steps
• Scroll color palette to the end - steps

[ceyhun]

Thanks for testing @mkevins!

I did not see a remove link button, but I believe the sanity test needs to be updated here.

There are 2 ways to change button link settings:

1. From button settings gear icon
2. From link settings in the toolbar: https://github.com/wordpress-mobile/test-cases/blob/master/test-cases/resources/button-link-settings.png
   Remove link option was available in the 2. option for me. Did you maybe try with the 1st one?

I did not see nested outlines for the inner groups on nested groups (the outline was only 1 layer deep).

The nested outlines only appeared for me if there were no other blocks inside groups other than group blocks. @iamthomasbishop can you please confirm if this look is correct?

[cameronvoell]

Samsung S10+ , Android 10, WordPress-pr-13322-build-81371.apk

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 - Matches web behavior but this changed since last release
• Undo / Redo - Test Cases
  • TC001 - Undo/redo block actions
  • TC002 - Undo/redo text
  • TC003 - Undo/redo text format

All Green except Splitting/merge list block. The new behavior matches what I see on web, so I'm not sure if this was an intentional update on the web side or not. Basically hit enter twice in a list block does not create a paragraph block in between, it just keeps making additional list items. I misread one of the steps here. The behavior matches iOS, and I was able to complete the test successfully: "Put the caret by the half of them (at the end of the item) and press Enter to create a new item."

[iamthomasbishop]

@ceyhun thanks for the ping!

I did not see nested outlines for the inner groups on nested groups (the outline was only 1 layer deep). If this is expected, the sanity test needs to be updated. Here is a screen recording:

The nested outlines only appeared for me if there were no other blocks inside groups other than group blocks. @iamthomasbishop can you please confirm if this look is correct?

I know the bordering logic can get quite complex, so I'm not 100% sure if I'm missing something, but that looks correct to me and I don't think it has changed recently (@lukewalczak, can you confirm/deny?). I don't think we typically want/need to show more than 1 level deep — which is basically what I'm seeing in the examples above. The one exception seems to be if there is an empty group (also the case on nested Columns), in which case we are showing the additional level — I can't remember if there was a special reason for this, and it's not causing that much harm, but we can probably de-clutter things a little bit by hiding that second level nesting border (to be clear, this work can be tackled in a future release if it's not a new change or regression).

I also noticed something when trying out Columns (specifically the new UnitControl): We shouldn't be using this Menu component for the unit selector (screenshot). Instead we should be using the BottomSheet on Android. This made me wonder if we're not including @lukewalczak's latest work on the new UnitControl component. If it's not a pain, I'd like to address this before including this in a release.

(Context: We were exploring this third-party component with the intention of using for the unit selector but decided to stick with BottomSheet (again, only on Android) because it was going to require a bunch of design tweaks.)

[mkevins]

Re nested innerblocks outlines

but that looks correct to me and I don't think it has changed recently

This is quite possibly the case. Since each round of sanity tests only covers a subset of the test cases, updated designs and behavior can leave the test cases out of date by the time they are encountered again, so thanks for confirming. I'll update the test case to reflect that the outline only shows 1 layer of depth for the nested groups.

[mkevins]

Hi @ceyhun 👋 😄

There are 2 ways to change button link settings:

1. From button settings gear icon
2. From link settings in the toolbar: https://github.com/wordpress-mobile/test-cases/blob/master/test-cases/resources/button-link-settings.png
   Remove link option was available in the 2. option for me. Did you maybe try with the 1st one?

You are right! 🤦‍♂️ , I used the gear icon. I tried via the link settings button, and it works as expected. 👍

[cameronvoell]

Looks like all status checks are green!