Skip to content

Dashicons - Custom Icons for Custom Blocks #409

@ZaredRogers

Description

@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:

EDIT: Icons list for custom blocks

Accommodation:

  • Units = dashicons-admin-home
  • Rooms = dashicons-admin-home
  • Rating = dashicons-star-empty
  • Number of Rooms = dashicons-admin-multisite
  • Check in Time = dashicons-clock (
  • Check out Time = dashicons-clock
  • Minimum Child Age = dashicons-id
  • Spoken Languages = dashicons-translation
  • Accommodation Type = dashicons-admin-multisite
  • Suggested Visitor Types = dashicons-yes-alt
  • Special Interests = dashicons-camera
  • Facilities = dashicons-food

Destinations

  • Additional Information = dashicons-info-outline (Dashicon)
  • Electricity = dashicons-admin-plugins
  • Banking = dashicons-bank
  • Cuisine = dashicons-food
  • Climate = dashicons-cloud
  • Transport = dashicons-car
  • Dress = dashicons-admin-users
  • Health = dashicons-insert
  • Safety = dashicons-shield
  • Visa = dashicons-id-alt
  • Regions List = dashicons-clipboard
  • Country = dashicons-admin-site-alt

Tours

  • Itinerary = dashicons-clipboard
  • Day by Day = dashicons-clipboard
  • Wetu Map = dashicons-admin-site-alt
  • Single Supplement = dashicons-money-alt
  • Destination to Tour = dashicons-location-alt
  • Duration = dashicons-clock
  • Group Size = dashicons-groups
  • Booking Validity = dashicons-calendar
  • Departs From = dashicons-airplane
  • Ends in = dashicons-airplane
  • Price Include & Exclude = dashicons-money-alt
  • General
  • Gallery = dashicons-format-gallery
  • Price dashicons-money-alt
  • Travel Styles = dashicons-airplane
  • Best time to Visit = dashicons-calendar-alt
  • Included Items = dashicons-plus-alt
  • Excluded Items = dashicons-dismiss
  • Read More Button = dashicons-insert-after

Query Loops

  • Regions = dashicons-admin-site-alt3
  • Related Regions = dashicons-admin-site-alt3
  • Featured Accommodation = dashicons-admin-home
  • Featured Tours = dashicons-palmtree
  • Featured Destinations = dashicons-admin-site
  • Related Accommodation - Tour = dashicons-palmtree
  • Related Tours - Tour = dashicons-palmtree
  • Related Tours = Accommodation = dashicons-admin-home
  • Related Accommodation - Accommodation = dashicons-admin-home
  • Related Accommodation - Destination = dashicons-admin-site
  • Related Tours - Destinations = dashicons-admin-site
  • Related Reviews = Destinations = dashicons-admin-site
  • Related Reviews - Tour = dashicons-palmtree
  • Related Reviews - Accommodation = dashicons-admin-home

Metadata

Metadata

Labels

status:needs-designEarly execution signal (triage queue for design)

Type

Projects

Status

✅ Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions