Mobile: Link image setting

[etoledom]

Description

This PR implements the Link setting on the image block, using the BottomSheet component.

Since on Mobile we have just a textfield (as in Aztec), when the user edit a URL in mobile, it will be automatically changed to custom.

This PR also adds some fine tune to the BottomSheet design.

To test:
WPiOS:

• Build and run the WordPress iOS project (from branch `develop)
• Checkout this branch from gutenberg-mobile and yarn start.
• Create a new post using Gutenberg on WPiOS.
• Add an image to the post.
• Add a URL (any) to the image using the settings button (wheel button on the inline toolbar).
• Publish the post.

GB Web

• Go to WP web and open the post to be edited with Gutenberg.
• Check that the Custom URL is there.
• Change the image URL from Custom URL to Media File
• Save (publish changes).

WPiOS again:

• Back to WPiOS, close the post and refresh the post list (to get the last changes from web).
• Open the post again.
• Check that the URL was updated.
• Edit the URL and save (publish).
• Reload the post on the web.
• Check that the URL changed and its marked as Custom URL.

[etoledom]

Thanks for the review @pinarol !

I pushed a commit with one of the fixes. About the colors, I think that we should organize better how do we work with global color declarations in mobile. Since we use many of those in gutenberg it might be worth it to define all of them there. But I don't think that's work for this PR.

Currently "Reset to Original" button does nothing,

It doesn't :)
It's part of the design, and I added it early to check the cell design, but it's not connected to anything yet.

URL types.

In web, the url type is a picker, and the only one editable by the user is the custom option. The media option is not editable on web, and none gives no option for adding a link.

On web, I can set the URL to media and it will automatically fill the field with the image URL, then I can switch to custom and leave the image URL there, change it a bit or delete it completely, and it will continue being custom.

Since we don't have the picker yet in mobile, and since it's always editable, I think it makes sense to automatically change it to custom, if the user customize it in any way. Still, I'll mention this to Thomas to be sure and we can modify this behavior in the future 👍

[pinarol]

Alright, I thought we'd be breaking the result url here because custom url's are appended at the end of the site url. But as far as I see it handles redirection pretty well and our result link won't be broken even if we change the link type as custom while leaving the image url as is. So it looks like we don't have to worry for now.

[pinarol]

thanks @etoledom LGTM! 🎉

one optional thing: it was hard to select the whole url text and change it, there's no "select all" option available here:

Maybe we can tackle and see why "select all" does not appear.

Or maybe we can select the whole text when user focuses on the url. Just an idea.

[etoledom]

Thank you @pinarol !

I did a fast check and there is the Select All option. 🤔

It doesn't appear when there is already text selected, but I think that is normal behavior, right?

[pinarol]

It doesn't appear when there is already text selected, but I think that is normal behavior, right?

actually when I test this in other text fields I see "select all" even if a small amount of text is selected. maybe that's the case where there are multiple words. I feel like we are having different experience maybe because I had a link that is longer than the text field width and didn't have the option to long press to somewhere outside of the text. but knowing that this option is visible to you it looks like it is an ios behavior and we don't have something to fix here 🤷‍♀️