Fix crash occurring when we try to display block picker

[pinarol]

This crash occurs when we we try to show block picker. It is not yet on the develop branch but it will come in when we update the gutenberg ref to the latest master. This looks like a side effect of: https://github.com/WordPress/gutenberg/pull/15462/files

To test:

• Tap on (+) and display the block picker
• Verify it doesn't crash
• Verify Heading block has a new icon

Update release notes:

• If there are user facing changes, I have added an item to RELEASE-NOTES.txt.

[Tug]

I think it might be a good opportunity to switch to using the BlockIcon component.
It has pretty much the same requirements. It accepts an icon props which can be both a string or an svg component.
And it's actually the component used to render the icon attribute of a block.
We should be able to override the foreground color for all blocks by passing a third argument className which will have the color we want.

[koke]

I think it might be a good opportunity to switch to using the BlockIcon component.

I agree, but if this solution works, we should merge it first to unblock master, then move to BlockIcon

[pinarol]

hey @Tug 👋 BlockIcon doesn't seem cross platform yet. I also tried with Icon but className won't work on mobile too, also style just isn't passed to the inner Dashicon or SVG.

<Icon icon={ icon.src } size={ styles.modalIcon.width } style={ { fill: color } } className={ "components-picker_icon" }/>

So it looks like these components need a bit modification to be able to achieve the results we want. Please let me know if I am missing sth.

I agree with @koke about not blocking the master, we can make other enhancements on a separate PR, wdyt?

[etoledom]

I agree, but if this solution works, we should merge it first to unblock master, then move to BlockIcon

This solution works. Let's merge to unblock master. 👍

I agree that it will take some extra work to use the same component used in web, and we should work on that on a different PR.