Re-export the Canvas component configs for the Canvas Icon Picker

Problem/Motivation

Rewritten after the team decided where the module install belongs. The first version of this issue proposed installing the module and setting the icon packs here. That now happens once in Varbase Admin Base instead, so every site template inherits it. This issue keeps only the part that is genuinely per-template.

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: #3620057. This issue is the third piece.

This recipe ships five exported Canvas component configs whose icon prop is pinned to the old list_string/options_select shape. On a fresh install that shape is imported and the picker never appears, however the theme is written. The shipped default content also pins pre-conversion component versions, and the header region pins icon-toggle, so every page of a new site is affected.

Steps to reproduce

1. Build a Varbase 11 site and pick the Educare site template in the installer.
2. Open any Canvas page in the editor and select a Button, a Badge, an Icon, an Icon Card, or the header search toggle.
3. The Icon field is a select list of icon names, with no preview and no search.

Proposed resolution

Re-export five 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_educare.icon.yml, new active version 9bc1e1a79ad3aca5
• config/canvas.component.sdc.vartheme_bs5_educare.icon-toggle.yml, c46ff94ac9f4ece2
• config/canvas.component.sdc.vartheme_bs5_educare.badge.yml, 60738022e738eef8
• config/canvas.component.sdc.vartheme_bs5_educare.button.yml, 423695058e28f2f8
• config/canvas.component.sdc.vartheme_bs5_educare.card-icon.yml, 62345acf6ed14ba8

Rewriting the non-active stored versions is what does the work. The shipped content still pins button@a3bdd446d7020573 (19 references across 11 files) and the header region pins icon-toggle@f94416574e5a0133. Keeping those hashes as stored versions, with the icon prop rewritten inside them, brings the picker to that content with no content re-pinning and no update hook, 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.

What does not work, so nobody repeats it

Deleting the five configs from the recipe so that Canvas derives them fresh. The shipped default content pins those exact component_version hashes, and without them the install fails at content import with a wall of:

component_tree.<uuid>.inputs.label: 'label' is not a supported key.
component_tree.<uuid>.inputs.variant: 'variant' is not a supported key.
component_tree.<uuid>.inputs.icon: 'icon' is not a supported key.

What was verified

Two fresh builds, both applying this recipe during install rather than 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, Educare theme 1.0.0-alpha4):

• drush site:install varbase installer_site_template_form.add_ons=educare completes green, on a codebase built from scratch as well as on the development site.
• All five 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: icon 51, icon-toggle 50, badge 43, button 51, card-icon 43.
• The Home page Button, still pinned to a3bdd446d7020573, gets the picker rather than the 52-option select. The same mechanism covers the header icon-toggle pinned at f94416574e5a0133.
• Curation preserved: 51 curated ids offered where the prop has an enum, against 2,092 where it does not.
• Round trip: picking people stores the bare id, publishes, and renders as <i class="btn__icon-circle-glyph bi bi-people d-inline-block lh-1 fs-5"> to an anonymous visitor. Zero bi-bootstrap_icons classes in the output.
• Clearing with "Remove icon" stores an empty string with no validation error: the props are required: false, and the templates already treat empty and none alike.
• Every Canvas page returns 200 anonymously. Anonymous requests to /canvas-icon-picker/index and /canvas-icon-picker/sprite both return 403. Zero log entries at Error or worse.
• The install's only remaining error-level noise is the pre-existing views_exposed_filter_block.search-page broken block, whose identical warning appears three times in an unmodified Educare install too.

Note for whoever tests this: a recipe cannot simply be re-applied to an already-installed site (it stops on The configuration 'views.view.content' exists already and does not match), 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

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

• Five canvas.component.sdc.vartheme_bs5_educare.* 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.

Release notes snippet

• Educare'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 Educare theme and Varbase Admin Base releases.