added conditional class to block-switcher.js to target reusable and c…

[WillPorter]

…ustom block icons in the toolbar

Description

Fixes #32599

How has this been tested?

Using npm run test

Screenshots

Types of changes

conditional class render block-switcher.js and new css for those icons. I'm not sure the reusable block icon is being stretched. I think the file is displaying properly. Perhaps the file is stretched? Not 100% confident on that.

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 (please manually search all *.native.js files for terms that need renaming or removal).

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @WillPorter! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[critterverse]

Nice, it looks like this fixes the spacing.

I'm not sure the reusable block icon is being stretched. I think the file is displaying properly. Perhaps the file is stretched?

It's a very small visual difference but I do believe there is something weird happening with the icon — see the Figma version above and screenshot below. It appears to be off by 2px:

Here's a link to the relevant page in the Figma Design Library for reference: https://www.figma.com/file/e4tLacmlPuZV47l7901FEs/WordPress-Design-Library?node-id=5415%3A22557

Thanks for looking into this @WillPorter! If you don't hear back from me in a timely manner, it's probably because I left on vacation 🏖️ If you have any questions, the Making WordPress Slack is a great place to ask.

[jasmussen]

Hello, @WillPorter, thanks so much for this PR. I think I may have inadvertently fixed this issue myself in #33031 (comment) without having noticed the ticket in the first place:

Can you let me know if it was fixed? And if it was, I regret taking this opportunity from you to contribute. If you have some other PR I can help you land, I'd be happy to help ship it. Ping me any time: @jasmussen.

[jasmussen]

From what I can tell, the icon is correctly sized now as far as the SVG that ships in the block editor:

I'm seeing a bit of a discrepancy with the icon in the Figma library:

It looks off center and, well, squashed compared to what's shipping.

I'm happy to fix that, both in Figma and in the code. Any preference on the wide or squished version of that default block icon?

[critterverse]

Thanks so much for looking into this @jasmussen!

I don't have a strong preference either way (other than not being sure if it was a bug), so I've gone ahead and updated the icon in the Figma file to match the wide version that's currently being shipped 😁

[skorasaurus]

Closing this since the core issue for this #32599 has been resolved; thanks for your contributions @WillPorter