Problem/Motivation
Editors building pages in Drupal Canvas pick an icon from a select list of icon names. There is no preview and no way to search. On the Vartheme BS5 themes that list runs to thousands of entries.
Canvas Icon Picker replaces that select with a searchable, visual picker inside the Canvas editor. It builds on core's Icon API through UI Icons, which this recipe already installs. UI Icons on its own has no Drupal Canvas support; canvas_icon_picker is what adds it.
This recipe is the right home for it. It already installs ui_icons, so the picker sits next to the thing it depends on, and Varbase Starter, Educare, Horizon Aid and RightUp all inherit it from one file instead of each repeating the same four lines.
Today it is declared in the wrong place: varbase_starter installs it and requires it, so the three other site templates do not get it at all, and Starter carries a dependency that is not specific to Starter. That is handled in a companion issue.
Steps to reproduce
- Build a Varbase 11 site with any site template other than Varbase Starter, for example Educare or Horizon Aid.
drush pm:list --status=enabled | grep canvas_icon_pickerreturns nothing.- Open any Canvas page in the editor and select a Button, a Badge, an Icon or an Icon Card. The Icon field is a plain select list of names.
Proposed resolution
Install the module here, beside ui_icons, and set the packs every Vartheme BS5 theme ships.
recipe.yml:
install:
# ...
- ui_icons
- canvas_icon_picker
config:
actions:
canvas_icon_picker.settings:
simpleConfigUpdate:
allowed_packs:
- bootstrap_icons
- vartheme_social
composer.json: "drupal/canvas_icon_picker": "~1.0.3".
The setting is allowed_packs, per the module's config/schema/canvas_icon_picker.schema.yml; its default is an empty map. bootstrap_icons and vartheme_social are the pack ids each Vartheme BS5 theme declares in its <theme>.icons.yml, so the same two values are correct for every current template.
1.0.3 is the first release carrying #3619510 and #3619785, which are what let a component prop keep its curated enum and still get the picker. Without those, a prop that curates its icons silently keeps the old select.
Installing the module is on its own not enough for an editor to see the picker. Each theme still has to opt its icon props in with x-canvas-icon, and each site template still has to re-export its Canvas component configs. Those are per-project and tracked separately:
What was verified
Two fresh Varbase 11 builds, each installing a different site template with this change in place and with the per-template declarations removed (Drupal core 11.4.5, PHP 8.4, Drupal Canvas 1.10.1, UI Icons 1.1.2, Canvas Icon Picker 1.0.3, Varbase Admin Base 1.0.0-rc1):
- Educare (theme 1.0.0-alpha4) and Horizon Aid (theme 1.0.0-alpha3) both install green with
drush site:install varbase installer_site_template_form.add_ons=<template>. canvas_icon_pickeris enabled on both, from this recipe alone, with neither site-template recipe declaring it.canvas_icon_picker.settings:allowed_packsreads back asbootstrap_icons,vartheme_socialon both.- Every Canvas page returns 200 anonymously on both (Educare 4 checked, Horizon Aid all 8). Anonymous requests to
/canvas-icon-picker/indexreturn 403 on both. - Zero log entries at Error or worse on either site.
- Installing the module pulled no additional dependencies: Drupal Canvas is already present in Varbase 11.
Drafted with AI assistance (AI-Generated: Yes), per the Drupal AI policy. Every claim above was verified by running it.
Remaining tasks
- ✅ File an issue
- ❌ Addition/Change/Update/Fix
- ❌ Testing to ensure no regression
- ➖ Automated unit/functional testing coverage
- ➖ Developer Documentation support
- ➖ User Guide Documentation support
- ➖ UX/UI designer responsibilities
- ➖ Accessibility and Readability
- ❌ Reviewed by a human
- ❌ Code review by maintainers
- ❌ Full testing and approval
- ❌ Credit contributors
- ❌ Review with the product owner
- ❌ Update Release Notes
- ❌ Release
User interface changes
- None from this recipe on its own. It makes the picker available; the Icon field only changes once a theme opts its props in.
- Adds a settings page at
/admin/config/content/canvas-icon-picker. - No change for site visitors.
API changes
- N/A
Data model changes
- Adds one module dependency,
drupal/canvas_icon_picker~1.0.3, and one config object,canvas_icon_picker.settings.
Release notes snippet
- Varbase Admin Base now installs the Canvas Icon Picker and sets the default icon packs, so every Varbase site template inherits a searchable, visual icon picker in the Drupal Canvas editor from one place.
Issue fork varbase_admin_base-3620064
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
rajab natshahComment #5
rajab natshah