Dashicons - Custom Icons for Custom Blocks

[ZaredRogers]

Description:

We need to identify and select appropriate dashicons for use throughout the plugin. If any required icons are missing, alternative icons should be found that maintain the same aesthetic as the standard dashicons to ensure consistency. Each icon should be labelled with its intended usage. If an icon is needed that is not a dashicon, we will need to add them via svg.

Requirements:

• [ ] Identify Dashicons: Find and select appropriate dashicons for each part of the plugin that requires an icon.
• [ ] Missing Icons: If a specific dashicon is missing, find an alternative that matches the style of dashicons to maintain visual consistency.
• [ ] Label Icons: Clearly label where each icon will be used in the plugin (e.g., block categories, menus, etc.).

Icon Implementation:

• Block Category Icons: You can display an icon with your block category by setting an icon attribute. The value can be the slug of a WordPress dashicon. Example:

javascript
   wp.blocks.updateCategory( 'plugin-category', {
       icon: 'dashicon-slug'
   } );

• Custom SVG Icons: To use a custom SVG icon, render the icon in the frontend to ensure it makes use of WordPress SVG. This allows for mobile compatibility and ensures the icon remains accessible. Example:

javascript
Copy code
wp.blocks.updateCategory( 'plugin-category', {
    icon: wp.element.createElement( 'svg', {/* SVG code here */} )
} );

Acceptance Criteria:

• [ ] All necessary dashicons are identified and labelled with their usage.
• [ ] Any missing icons are replaced with appropriate alternatives.
• [ ] Custom SVG icons are set up where required and integrated for mobile compatibility and accessibility.
• [ ] The wp.blocks.updateCategory function is used to assign icons to block categories.

Additional Notes:

• Ensure that all icons, whether dashicons or custom SVGs, maintain a cohesive visual style.
• Test the icons on mobile to ensure compatibility.

Resources:

• Guide on wp.blocks.updateCategory
• WordPress Dashicon Library.