Improve unsupported blocks

[koke]

Show localized title and icon of unsupported core blocks. It also drops our custom gmobile/unsupported block and moves the functionality to a native variant of core/missing.

Gutenberg PR: WordPress/gutenberg#14577

To test:

• Create a post with some blocks that are unsupported in the app.
• Open it in gutenberg-mobile and verify that the blocks show the right icon and localized block title. For non-core blocks, a generic icon is shown.

Part of #479

[koke]

I haven't figured out how to set the right colors yet, and then I realized that translations weren't working for block titles, so I focused on that first, but cc @iamthomasbishop since you might want to keep track of this one

[iamthomasbishop]

Awesome! I think I might need to update the colors here anyway, as the design changed slightly. IIRC, I just made the icon and text label $gray-dark aka #2e4453, but I'll double check.

Although now that I look at it, unsupported blocks might look okay dimmer like that last block 🤔

[iamthomasbishop]

Just for the sake of consistency and documentation, some specs at the end:

Static:

Focused:

• Icon and text label are indeed $gray-dark aka #2e4453
• Background has a border-radius of 4pt
• Text label uses system sans-serif font (SF Pro, Roboto) at 14pt
• Icon is 24pt
• Margin between icon and text label is 4pt

[Tug]

Did a bit of refactoring, but this LGTM 👍

Btw, this introduces some "Circle dependency" warnings when booting the app in dev mode. We indeed have circle dependencies in our code (often in gutenberg), I think those warnings didn’t show up before because we would load those components before our app component is even loaded but there were still there.

[etoledom]

Hey @koke - This looks and works super good! 🎉

I got curious about the hasUnsupportedBlocks property we are sending back to Native, and for some reason it seems to not be working.

It's easy to see when running the example app from Xcode that it logs: gutenbergDidMount(hasUnsupportedBlocks: false) with the example content.

I noticed that this.blocks is empty on AppContainer's componentDidMount, and that would explain this behavior.

After fixing this detail, I'd say it's good to go.
Great job!

[koke]

Since you're handling the hasUnsupportedBlocks issue in #790, should we go ahead and merge this one? (After resolving conflicts 😩)

[etoledom]

Sure! One last smoke test.

[etoledom]

Works good and looks super nice! 🎉
The previously described issue wasn't from this PR, so let's
✅