Map Block: Mapbox Key Input Improvements

[jeffersonrabb]

Changes proposed in this Pull Request

This PR improves the initial screen of the Map block, before user has input their Mapbox key, in the following ways:

1. New copy courtesy @mapk
2. There is a SET TOKEN button that must be pressed after inputting the key. This replaces the rather awkward earlier approach that responded to the text field's input event. @melchoyce among others found this to be confusing UI.
3. SET TOKEN button and input text field are disabled while a API calls are in flight.
4. If you attempt to change the Access Token in the sidebar to an invalid key, you will get a notification that it is invalid but previously you would also be returned to the initial screen as if you had never input the token. Now, you get the notification but the key returns to its last good value and the block continues to function. @jeherve pointed this one out.
5. All references to the key are now reamed Access Token which is Mapbox's language vs. Google's API Key. This comes courtesy of @oskosk.

Testing instructions

Create Map block, add key, verify flow. After key has been accepted, in sidebar set to an invalid key and UPDATE TOKEN. You should see error message but the token reverts to last good value and block functions. Verify copy changes and spelling, too.

JN link: https://jurassic.ninja/create/?gutenberg&gutenpack&shortlived&jetpack-beta&calypsobranch=update/map-key-management&branch=master

[matticbot]

Test live: https://calypso.live/?branch=update/map-key-management

[sirreal]

This works well. The biggest issue I have are the non-localized strings, everything else is minor.

[simison]

I had a map block in a post from the previous PR and after refreshing the page I get:

HTML in each column is identical. After inserting a fresh block all is fine again. Just documenting for the record, it's quite normal that things like this happen between PRs.

[jeffersonrabb]

HTML in each column is identical. After inserting a fresh block all is fine again. Just documenting for the record, it's quite normal that things like this happen between PRs.

Definitely true. This is largely because of the recent change to camelCase attributes. The newly renamed attributes don't match the saved block, hence the error. This was the main reason I wanted to get the camelCase PR merged first - to avoid lots of broken blocks with each new branch.

[simison]

I'm getting this on Gutenberg master branch, Firefox, latest stable WordPress:

[jeffersonrabb]

I'm getting this on Gutenberg master branch, Firefox, latest stable WordPress:

Nice spot. Fixed in e2acff7

[MichaelArestad]

The copy is good to go after your most recent change. Nice work!

[lezama]

is it normal that we always call this.onError?

[jeffersonrabb]

this.onError should only be called if the API call fails. Is that what you're asking about?

[enejb]

What if we linked users directly to https://www.mapbox.com/account/ instead.
They would see a login page asking them to create an account.
But the access token would be easier to find.

[jeffersonrabb]

@MichaelArestad what do you think?

[enejb]

The code looks great and it tested well.

I wonder if we could update the styles so that the contact form and the maps bock have similar styles when it comes to the place holder. cc: @MichaelArestad , @mapk

[MichaelArestad]

@enejb I think there's a definite need for a common pattern for these. We will be exploring that in Phase 2,