Problem/Motivation
Adopting the Canvas Icon Picker across the Varbase site templates takes three pieces. The module install and its default icon packs go in Varbase Admin Base, once, for every template: #3620064. The theme opts its icon props in with x-canvas-icon: #3620060. This issue is the third piece, and it is the one that keeps Horizon Aid installable at all.
Opting the theme's props in changes the component version hash Drupal Canvas derives for each converted component. This recipe ships Canvas component configs whose icon prop is pinned to the old list_string/options_select shape, and recipe.yml additionally hardcodes 134 component_version values, 13 of which are the pre-conversion hashes of those components. So the theme change cannot land on its own: a fresh install stops with a config validation error.
Steps to reproduce
- Apply the theme change from #3620060 and nothing else.
- Build a Varbase 11 site and install the Horizon Aid site template.
- The install fails:
There were validation errors in canvas.content_template.node.blog.impressed_card_large: - component_tree.24ba3122-db28-40e3-bc50-72642df36880.component_version: '13d91759ac4fcdfe' is not a version that exists on component config entity 'sdc.vartheme_bs5_horizonaid.badge'. Available versions: '60738022e738eef8', '6110e8f5a7d6d5cf'.
Confirmed as caused by the change and not pre-existing: with the theme reverted, the same build installs green.
Proposed resolution
Re-export six Canvas component configs against the converted theme, and rewrite the icon prop to the picker shape on every stored version, not only the active one:
config/canvas.component.sdc.vartheme_bs5_horizonaid.badge.yml, new active version60738022e738eef8config/canvas.component.sdc.vartheme_bs5_horizonaid.button.yml,22dfe88e799bff14config/canvas.component.sdc.vartheme_bs5_horizonaid.date.yml,7b870a5d2bc56530config/canvas.component.sdc.vartheme_bs5_horizonaid.icon.yml,9bc1e1a79ad3aca5config/canvas.component.sdc.vartheme_bs5_horizonaid.icon-toggle.yml,9b1120a77a9891d1config/canvas.component.sdc.vartheme_bs5_horizonaid.card-icon.yml,62345acf6ed14ba8
Rewriting the non-active stored versions is what does the work. Because each config keeps the pre-conversion hash as a stored version, recipe.yml's 134 hardcoded pins keep validating and need no edits at all, and content already placed by the recipe, including the header search toggle on every page, edits through the picker rather than the old select. It also means no update hook is needed, which matters because a theme cannot implement hook_update_N.
Nothing else changes here. This recipe does not install the module and does not set the packs: Varbase Admin Base does, in #3620064.
Two pre-existing oddities found on the way, not fixed here
- Every one of these six shipped configs declares an
active_versionthat the theme does not derive: badge ships6110e8f5a7d6d5cfwhile the theme derives13d91759ac4fcdfe. Installs work only because Canvas adds the derived version alongside the shipped one. Worth its own issue. - The shipped
dateconfig's stored version69cd1843b2f2a0e5has noiconprop at all, so it predates that prop being added to the component.recipe.ymlpins it in four places, so those instances show no Icon field. Left exactly as found.
What was verified
Two fresh builds, both installing this recipe during install rather than applying it afterwards (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 11.0.x-dev, Varbase Admin Base 1.0.0-rc1, Horizon Aid theme 1.0.0-alpha3):
drush site:install varbase installer_site_template_form.add_ons=horizonaidcompletes green, on a codebase built from scratch as well as on the development site.- Install warnings match an unmodified Horizon Aid install exactly (
system_branding_block4,system_menu_block.main4,views_exposed_filter_block3). None names a theme component. Zero log entries at Error or worse. - All six components: every stored version on
field_widget: canvas_icon_pickerwithfield_type: string; none left onoptions_select. allowed_icon_idsmatches the manifests exactly: badge 43, button 51, date 7, icon 51, icon-toggle 50, card-icon 43.- Curation honoured in the drawer: searching
hearton the Button prop returns nothing, because it is not among that prop's 51 curated ids;arrow-rightreturns exactly its two curated matches. - Round trip: picking
arrow-rightstores the bare id, notbootstrap_icons:arrow-right; published, the Donate button renders<i data-component-id="vartheme_bs5_horizonaid:bootstrap-icon" class="bi bi-arrow-right d-inline-block lh-1 fs-4">to an anonymous visitor. Zerobi-bootstrap_iconsclasses in the output. - All eight Canvas pages return 200 anonymously. Anonymous requests to
/canvas-icon-picker/indexand/canvas-icon-picker/spriteboth return 403.
Note for whoever tests this: a recipe cannot simply be re-applied to an already-installed site, so the install path has to be checked on a build that applies the modified recipe during install.
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, horizonaid-1.0.0-alpha2
User interface changes
- In the Drupal Canvas editor, Icon fields on content already placed by this recipe, including the header search toggle on every page, become a searchable icon picker with live previews instead of a select list of names.
- No change for site visitors.
API changes
- N/A
Data model changes
- Six
canvas.component.sdc.vartheme_bs5_horizonaid.*configs gain a new active component version and keep their previous versions, with theiconprop definition rewritten on those. Stored prop values are unchanged: both field shapes hold the same bare scalar. - No change to
recipe.yml's 134 hardcodedcomponent_versionpins.
Release notes snippet
- Horizon Aid's Canvas component configs are re-exported for the Canvas Icon Picker, so icon fields on the pages and regions the template ships offer a searchable, visual picker. Requires the matching Horizon Aid theme and Varbase Admin Base releases.
Issue fork horizonaid-3620065
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✅ Released horizonaid-1.0.0-alpha2