[TEST] Gutenberg - Slash inserter

[geriux]

To generate testing builds

Gutenberg Mobile PR -> wordpress-mobile/gutenberg-mobile#3250
Gutenberg PR -> WordPress/gutenberg#29772
WordsPress Android PR -> wordpress-mobile/WordPress-Android#14245

Fixes #

To test:

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 trigger an installable build for these changes by visiting CircleCI here.

[peril-wordpress-mobile]

	Warnings
⚠️	This PR is tagged with 'DO NOT MERGE'.

Generated by 🚫 dangerJS

[peril-wordpress-mobile]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[iamthomasbishop]

EDIT: I just realized I accidentally posted this to the WPiOS PR, not the main Gutenberg one — too many open tabs! 🤦 😆 . I can re-post over there if you'd like.

@geriux @mkevins I gave the new build a spin on both platforms and it's looking and feeling great! The color refinements look solid. thanks for taking care of that 👍 I noticed one blocker on Android that I'd like to fix (if possible) before we ship this, and then I have two separate proposals which we discussed in Slack on Wed/Thu, but aren't considered blockers if we are anxious to ship this.

Issue: Blocking toolbar on Android

I just noticed on Android that the toolbar can sometimes cover the selected block if the selected block is roughly vertically centered in the viewport (video). Is there any way we can adjust the Y-position of the block/canvas a bit more to ensure that the input remains visible? Note: this is on Android — iOS seems to add an additional bit of margin so I'm not seeing the same issue, as you can see in this video)

---

Proposals

Again, these are not considered blockers preventing us from shipping what we have here, but I wanted to propose a couple of small refinements that we could make moving forward. We can split into separate issues if necessary.

Proposal: new italics icon

I have often felt the "italics" icon that we are using (from the WP icon set aka "G2") was a little confusing, but it hasn't caused any real conflicts until now, because the icon tends to look like a "slash", which is obviously a potential issue considering the "/" character of the placeholder/writing prompt is close enough in proximity to the "italic" icon in the block toolbar.

I found at least one issue upon a quick GitHub search, and think it'd be worth proposing some updates to the icon in core, but in the meantime I propose that we use a custom icon on mobile. A simple extension of the current italics icon would probably be clearer — something along the lines of this. If that's a route we want to go down, I can provide an SVG to add to our small set of custom icons and then get some additional design eyeballs on it for review.

Proposal: refined writing prompt

Now that I'm seeing the prompt in context, I realized we have an opportunity here (and space) to also hint at the standard (+) inserter button. This should assist in discovery (which is relevant to one of our findings from recent usability tests, wherein users needed a little nudge towards the button to discover it).

Here are 2 options — the first very straight forward and the second a little less straight forward but arguably more impactful:

1. Change text string to: Tap (+) or type / to add blocks
2. Change text string to the previous option, but also swap (+) for an inline icon that looks like the inserter button except desaturated and a little bit smaller

---

Let me know if you have any questions or concerns. I think once we're able to sort out the Android scroll position issue, let's go ahead and ship this unless you feel the proposals are worth rolling into the initial release. Thanks again for all of y'all's great work on this!