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

  1. Apply the theme change from #3620060 and nothing else.
  2. Build a Varbase 11 site and install the Horizon Aid site template.
  3. 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 version 60738022e738eef8
  • config/canvas.component.sdc.vartheme_bs5_horizonaid.button.yml, 22dfe88e799bff14
  • config/canvas.component.sdc.vartheme_bs5_horizonaid.date.yml, 7b870a5d2bc56530
  • config/canvas.component.sdc.vartheme_bs5_horizonaid.icon.yml, 9bc1e1a79ad3aca5
  • config/canvas.component.sdc.vartheme_bs5_horizonaid.icon-toggle.yml, 9b1120a77a9891d1
  • config/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_version that the theme does not derive: badge ships 6110e8f5a7d6d5cf while the theme derives 13d91759ac4fcdfe. Installs work only because Canvas adds the derived version alongside the shipped one. Worth its own issue.
  • The shipped date config's stored version 69cd1843b2f2a0e5 has no icon prop at all, so it predates that prop being added to the component. recipe.yml pins 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=horizonaid completes 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_block 4, system_menu_block.main 4, views_exposed_filter_block 3). None names a theme component. Zero log entries at Error or worse.
  • All six components: every stored version on field_widget: canvas_icon_picker with field_type: string; none left on options_select.
  • allowed_icon_ids matches the manifests exactly: badge 43, button 51, date 7, icon 51, icon-toggle 50, card-icon 43.
  • Curation honoured in the drawer: searching heart on the Button prop returns nothing, because it is not among that prop's 51 curated ids; arrow-right returns exactly its two curated matches.
  • Round trip: picking arrow-right stores the bare id, not bootstrap_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. Zero bi-bootstrap_icons classes in the output.
  • All eight Canvas pages return 200 anonymously. Anonymous requests to /canvas-icon-picker/index and /canvas-icon-picker/sprite both 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 the icon prop definition rewritten on those. Stored prop values are unchanged: both field shapes hold the same bare scalar.
  • No change to recipe.yml's 134 hardcoded component_version pins.

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

Command icon 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

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Status: Active » Needs review

  • rajab natshah committed 75a3e03c on 1.0.x
    feat: #3620065 Re-export the Canvas component configs for the Canvas...
rajab natshah’s picture

Issue summary: View changes
Status: Needs review » Fixed
Issue tags: +horizonaid-1.0.0-alpha2

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.