[RNMobile] Add navigation to link settings and add link picker screen to block settings

[dratwas]

GB mobile PR: wordpress-mobile/gutenberg-mobile#2742

In this PR i added a link picker screen to the link settings. It is used in Button and Social Icons.
I also added the navigation inside the BottomSheet for LinkSettings with withBottomSheet set to true.

There is also a prop in LinkSettingsNavigaiton hasPicker to determine if we would like to use link picker or regular text input

How has this been tested?

Case 1:

• select Button block
• open block settings and click on the link URL
• the new screen should be pushed
• test it the same as regular link picker

Case 2:

• select Social Icon block
• open link settings
• the default text input should be used instead of pushing a new screen

Screenshots

Types of changes

New Feature

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.

[github-actions]

Size Change: 0 B

Total Size: 1.19 MB

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.77 kB	0 B
build/api-fetch/index.js	3.42 kB	0 B
build/autop/index.js	2.83 kB	0 B
build/blob/index.js	664 B	0 B
build/block-directory/index.js	8.71 kB	0 B
build/block-directory/style-rtl.css	943 B	0 B
build/block-directory/style.css	942 B	0 B
build/block-editor/index.js	133 kB	0 B
build/block-editor/style-rtl.css	11.2 kB	0 B
build/block-editor/style.css	11.1 kB	0 B
build/block-library/editor-rtl.css	8.91 kB	0 B
build/block-library/editor.css	8.91 kB	0 B
build/block-library/index.js	147 kB	0 B
build/block-library/style-rtl.css	8.1 kB	0 B
build/block-library/style.css	8.1 kB	0 B
build/block-library/theme-rtl.css	792 B	0 B
build/block-library/theme.css	793 B	0 B
build/block-serialization-default-parser/index.js	1.87 kB	0 B
build/block-serialization-spec-parser/index.js	3.06 kB	0 B
build/blocks/index.js	48 kB	0 B
build/components/index.js	171 kB	0 B
build/components/style-rtl.css	15.3 kB	0 B
build/components/style.css	15.3 kB	0 B
build/compose/index.js	9.89 kB	0 B
build/core-data/index.js	14.8 kB	0 B
build/data-controls/index.js	821 B	0 B
build/data/index.js	8.74 kB	0 B
build/date/index.js	11.2 kB	0 B
build/deprecated/index.js	768 B	0 B
build/dom-ready/index.js	571 B	0 B
build/dom/index.js	4.52 kB	0 B
build/edit-navigation/index.js	11.1 kB	0 B
build/edit-navigation/style-rtl.css	881 B	0 B
build/edit-navigation/style.css	885 B	0 B
build/edit-post/index.js	306 kB	0 B
build/edit-post/style-rtl.css	6.43 kB	0 B
build/edit-post/style.css	6.42 kB	0 B
build/edit-site/index.js	22.8 kB	0 B
build/edit-site/style-rtl.css	3.95 kB	0 B
build/edit-site/style.css	3.95 kB	0 B
build/edit-widgets/index.js	26.3 kB	0 B
build/edit-widgets/style-rtl.css	3.16 kB	0 B
build/edit-widgets/style.css	3.16 kB	0 B
build/editor/editor-styles-rtl.css	476 B	0 B
build/editor/editor-styles.css	478 B	0 B
build/editor/index.js	42.5 kB	0 B
build/editor/style-rtl.css	3.85 kB	0 B
build/editor/style.css	3.85 kB	0 B
build/element/index.js	4.62 kB	0 B
build/escape-html/index.js	735 B	0 B
build/format-library/index.js	6.86 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.16 kB	0 B
build/html-entities/index.js	623 B	0 B
build/i18n/index.js	3.57 kB	0 B
build/is-shallow-equal/index.js	713 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.1 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.31 kB	0 B
build/notices/index.js	1.77 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.43 kB	0 B
build/priority-queue/index.js	790 B	0 B
build/redux-routine/index.js	2.83 kB	0 B
build/reusable-blocks/index.js	3.05 kB	0 B
build/rich-text/index.js	13.3 kB	0 B
build/server-side-render/index.js	2.77 kB	0 B
build/shortcode/index.js	1.69 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.83 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.22 kB	0 B

_{compressed-size-action}

[lukewalczak]

Tested on both platforms and looks properly, didn't notice anything odd. It's a nice feature 🎉

[mkevins]

Reviewed and tested, and this is looking good. One thing that came to mind while testing for social icons.. do we want to use the link picker for that? At the moment, the link picker suggestions are for the selected site, and so perhaps may not be appropriate for the various social links. Wdyt?

Also, I tried with the image block link settings, but the link picker does not seem to be wired up to the block settings for that block. Is this expected and/or something we will address in a later PR?

[dratwas]

One thing that came to mind while testing for social icons.. do we want to use the link picker for that? At the moment, the link picker suggestions are for the selected site, and so perhaps may not be appropriate for the various social links. Wdyt?

Hmmm, good question. I agree with you that maybe I should create 2 kinds of link-settings - with link picker and w/o link picker. Then we could determine by one prop if we would like to use settings with picker or settings with text input.

Also, I tried with the image block link settings, but the link picker does not seem to be wired up to the block settings for that block. Is this expected and/or something we will address in a later PR?

The image block has its own picker in edit.native.js file so it doesn't use the same component like a button and social links. I believe it should be changed but in a separate PR.

[mkevins]

Hmmm, good question. I agree with you that maybe I should create 2 kinds of link-settings - with link picker and w/o link picker. Then we could determine by one prop if we would like to use settings with picker or settings with text input.

This sounds like a good solution.

The image block has its own picker in edit.native.js file so it doesn't use the same component like a button and social links. I believe it should be changed but in a separate PR.

Ok, thanks for confirming that. 👍

[dratwas]

Hey @mkevins

This sounds like a good solution.

I already added a prop called hasPicker and set it to true for button block. The social icon link settings should work as before.

I also created an issue to remember that it should be used for the Image block as well and assigned myself.

[mkevins]

Hi @dratwas 👋 😄

I tested again with the changes, and it's working as expected with regard to the button and social blocks. Nice work!

One thing I noticed, not sure if it's related to this PR, is that the block inserter had some overflow:

[dratwas]

Thanks, @mkevins for the review.

One thing I noticed, not sure if it's related to this PR, is that the block inserter had some overflow:

Oh yeah, I created a fix for this here: #26722

Basically, it was the latest change in the previous PR but I didn't notice that the safeAreaBottomInset is set to 0 and the default value doesn't overwrite it. I reverted that change and it should work fine :)

[mkevins]

Tested again with the lastest change and confirmed it's fixed. Nice work! LGTM!