Try: Block Patterns: Add support for icons and display next to the pattern title in the inserter

[andrewserong]

Description

This is an exploration into adding icon support to block patterns, similar to how we can add an icon when registering a block pattern. The idea is that a plugin or theme might want to include an icon when registering a block pattern, to help highlight or distinguish between different kinds of block patterns.

For a user, when plugins or themes use an icon, it might make it easier to see where your patterns are coming from.

How has this been tested?

Manually. This is a draft PR at the moment, so I've hard-coded a test pattern that you can see under the Text category to demonstrate how it might look.

To-dos

Note: if this idea has merit, more work will need to be done to properly filter / update the icon object. For example:

• Run pattern.icon through normalizeIconObject
• Only allow the icon if it's a valid icon by calling isValidIcon

Screenshots

An example of a (very) simple pattern with an icon added:

Types of changes

New feature (non-breaking change — patterns without an icon continue to render as before in the pattern inserter).

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[andrewserong]

This is just a test pattern to make it easier to try out the icon.

[andrewserong]

Closing this one out now as it was an old experiment.