Issue/fix gb paragraph scroll issue

[khaykov]

Fixes this scrolling issue in Block Editor.

Looks like AppBarLayout, when placed in RelativeLayout was preventing web-based content of editor from scrolling. Recreating the layout using ConstraintLayout instead of RelativeLayout fixed the issue. Thanks to @marecar3 for finding the solution.

To test:

• Open a long post in the block editor.
• Select an existing paragraph or add a new one, try scrolling the editor.
• Confirm that editor scrolls as expected.

In Aztec:

• Open a post, tap on + icon to open the media picker.
• Notice that it works as expected, and the content of the editor is dimmed and not actionable when media picker is open.

PR submission checklist:

• I have considered adding unit tests where possible.
• 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]

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

[marecar3]

Hey @khaykov,

This is the list of Gutenberg manual tests that we should follow during testing.

Gutenberg tests

Writing flow: @marecar3

• Block insertion - steps
• Copy paste - steps
• Multilane components - steps
• Rich text formatting - steps
• Splitting and merging - steps
• Undo redo - steps

Other:

Button @marecar3

• Button block - Render custom text color - steps
• Button block - Render custom background color - steps
• Button block - Render gradient background color - steps
• Button block - Check if selection / caret color matches font color - steps
• Button block - Edit text styles - steps
• Button block - Fallback to default colors in case theme colors are used - steps
• Button block - New Button is created with the gray color - steps
• Button block - Settings: Change Button border radius - steps
• Button block - The newly created button has set background color to the theme-default color in preview - steps
• Button block - Tapping delete key removes block when Button is empty - steps
• Button block - Settings: Open in new tab - steps
• Button block - Settings: Link rel - steps
• Button block - Settings: Link URL - steps
• Button block - Settings: Remove link - steps
• Button block - Settings: Synchronize with button options - steps
• Button block - Link from the clipboard is automatically added into the empty URL field in link settings and button options - steps
• Button block - Toolbar link button is active when Button has link - steps
• Button block - Button max width is calculated OK inside inner blocks(iOS only) - steps

Cover @marecar3

• Cover - Add Video Background from WordPress Media library - steps
• Cover - Replace media - steps
• Cover - Gradient background is rendered properly - steps
• Cover - Gradient overlay is rendered properly - steps

DarkMode @marecar3

• Gallery block - Dark mode - steps
• Shortcode block - Dark mode - steps
• Media Text block - Dark mode - steps
• Spacer block - Dark mode - steps
• Button block - Dark mode - steps
• Group - Dark mode - steps

Gallery

• Gallery block - Close/Re-open post with an ongoing image upload - steps (Note: @hypest reported success on this test. See here.)
• Gallery block - Close post with an ongoing image upload - steps
• Gallery block - Insert image from device (failing) - steps
• Gallery block - Insert image from device (cancel) - steps
• 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
• Gallery block - Settings: Link to - steps
• Gallery block - Settings: Column number - steps
• Gallery block - Settings: Crop images - steps

Group

• 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 - Nested selection cause applying dimmed style on the rest of blocks - steps - This feature is removed
• Group - Breadcrumbs on FloatingToolbar is properly displayed - steps - With one exception - we turned off the floating toolbar for root level blocks that are not inner blocks.
• Group - Navigation up button works as expected - steps
• Group - Navigation down works according to parent-first approach - steps
• Group - Cross navigation between blocks works as expected - steps (Note: @hypest had success in this test, see here)
• Group - Ungroup button works as expected - steps
• Group - Check if in DarkMode all components gets proper colors (iOS) - steps
• Group - Check if nested Placeholder block can be replaced - steps

Image @marecar3

• Image TC001
• Image TC002
• Image TC003
• Image TC004 (unable to return fast enough to see loading bar in the post, but otherwise this works fine)
• Image TC005

Media interaction

• Media interaction - steps

Media text

• Media interaction - steps

Spacer @marecar3

• 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
• Spacer block - Settings: Available height range is correct - steps
• Spacer block - Settings: Height range extends if Spacer comes from the web is higher than 500px - steps
• Spacer block - Spacer in horizontal layout works as expected - steps

Video @marecar3

• Video TC001
• Video TC002
• Video TC003 (Caption alignment seems a little funky in the published post, seems the same as from Web gutenberg though)
• Video TC004
• Video TC005
• Video TC006

[hypest]

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

@khaykov reported trouble having that test case succeed, but I tried 945c7c9 and works OK for me. Both on wasabiDebug and vanillaRelease.

[hypest]

• Group - Cross navigation between blocks works as expected - steps

Klym also reported (in Slack) having trouble completing this test. I tried it out and works for me. The block setup I tried was:

• Add a group block (nested group No0)
• Add a Spacer block inside the group
• Add nested Group block (nested No1) inside the original one
• Add a Spacer inside the nested group No1
• Add a Group inside nested group No1, making this one nested group No2
• Add a Spacer inside nested group No2
• Add a Group inside nested group No2, making this one nested group No3
• Add a Spacer inside nested group No3
• Add a Group inside nested group No3, making this one nested group No4
• Add a Spacer inside nested group No4

Now, have that deepest Space selected and try to tap directly to any of the "upper" Spacers. The upper Spacer should get selected immediately, and that's what I do see in my test. Note, trying to tap in a "lower" Spacer would first select its parent block, and you'd have to continue tapping to get deeper in the nesting.

[hypest]

In the effort to try to merge this work to the block editor release (1.25.0, ongoing at the time of writing), we'll stop working on this PR and instead focus on the PR that is targeting the release: #11580

[marecar3]

Closing in favor: #11580