Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RNMobile] Fix toolbar above the keyboard #24573

Merged
merged 7 commits into from
Sep 8, 2020

Conversation

lukewalczak
Copy link
Member

@lukewalczak lukewalczak commented Aug 14, 2020

Description

Fixes: wordpress-mobile/gutenberg-mobile#2592

After merging #24414, I've noticed that toolbar is hanging in case when user is adding a new block from previously focused Paragraph

Correct usage of SafeArea in KeyboardAvoidingView

How has this been tested?

  • Open mobile app
  • Press FAB button
  • Choose Site page
  • Expect toolbar should be located above the keyboard
  • Rotate the device to landscape
  • Expect toolbar should be located above the keyboard
  • Rotate the device to horizontal
  • Focus Paragraph block
  • Press inserter and choose block e.g. Image
  • Expect toolbar should be located at the bottom of the screen and mustn't hang
  • Rotate the device to landscape
  • Expect toolbar should be located at the bottom of the screen and mustn't hang
  • Focus the Paragraph
  • Expect toolbar should be located above the keyboard
  • Rotate the device to horizontal
  • Expect toolbar should be located above the keyboard

Screenshots

iPhone 11 iPhone 8
ip11 ip8

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@lukewalczak lukewalczak self-assigned this Aug 14, 2020
@lukewalczak lukewalczak added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Aug 14, 2020
@github-actions
Copy link

github-actions bot commented Aug 14, 2020

Size Change: +8.3 kB (0%)

Total Size: 1.2 MB

Filename Size Change
build/annotations/index.js 3.67 kB -1 B
build/api-fetch/index.js 3.41 kB -34 B (0%)
build/block-directory/index.js 8.5 kB +505 B (5%) 🔍
build/block-editor/index.js 128 kB +2.08 kB (1%)
build/block-editor/style-rtl.css 11.1 kB +349 B (3%)
build/block-editor/style.css 11.1 kB +350 B (3%)
build/block-library/editor-rtl.css 8.64 kB +114 B (1%)
build/block-library/editor.css 8.64 kB +113 B (1%)
build/block-library/index.js 138 kB +1.81 kB (1%)
build/block-library/style-rtl.css 7.59 kB +116 B (1%)
build/block-library/style.css 7.58 kB +113 B (1%)
build/block-library/theme-rtl.css 754 B +13 B (1%)
build/block-library/theme.css 754 B +12 B (1%)
build/blocks/index.js 47.7 kB -1 B
build/components/index.js 200 kB +781 B (0%)
build/components/style-rtl.css 15.5 kB -217 B (1%)
build/components/style.css 15.5 kB -220 B (1%)
build/core-data/index.js 12.3 kB -3 B (0%)
build/data/index.js 8.55 kB -6 B (0%)
build/edit-navigation/index.js 11.7 kB +13 B (0%)
build/edit-post/index.js 305 kB +614 B (0%)
build/edit-post/style-rtl.css 6.26 kB +646 B (10%) ⚠️
build/edit-post/style.css 6.25 kB +639 B (10%) ⚠️
build/edit-site/index.js 17.1 kB +126 B (0%)
build/edit-widgets/index.js 12 kB +61 B (0%)
build/edit-widgets/style-rtl.css 2.46 kB +5 B (0%)
build/edit-widgets/style.css 2.45 kB +5 B (0%)
build/editor/index.js 45.6 kB +318 B (0%)
build/element/index.js 4.64 kB +1 B
build/rich-text/index.js 13.9 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/compose/index.js 9.67 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.48 kB 0 B
build/edit-navigation/style-rtl.css 1.16 kB 0 B
build/edit-navigation/style.css 1.16 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/style-rtl.css 3.81 kB 0 B
build/editor/style.css 3.81 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@lukewalczak lukewalczak force-pushed the rnmobile/fix-toolbar-above-keyboard branch from ca0b1e1 to cf5a007 Compare August 31, 2020 13:34
@lukewalczak lukewalczak marked this pull request as ready for review September 1, 2020 12:29
Copy link
Contributor

@dratwas dratwas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on WP-iOS app and it looks really good :) Thanks Luke!

@lukewalczak lukewalczak merged commit f899b3e into master Sep 8, 2020
@lukewalczak lukewalczak deleted the rnmobile/fix-toolbar-above-keyboard branch September 8, 2020 07:42
@github-actions github-actions bot added this to the Gutenberg 9.0 milestone Sep 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Toolbar "jumps" away from keyboard when hitting enter on Paragraph Block
2 participants