feat: #3607697 Rework Canvas Patterns from real site sections, back up global regions, and refresh component configs

Rajab Natshahrequested to merge
issue/varbase_starter-3607697:3607697-canvas-patterns-from-site-sections into 1.0.x

Issue: #3607697: Add reusable Canvas Patterns (sections) to Varbase Starter

Reworks the Canvas Patterns set so every pattern comes from a real section used on the Varbase Starter demo pages, with clear human readable names for site builders, and adds Site Header / Site Footer patterns for the global regions.

Patterns (14)

Pattern Source
Hero Slider Home — with media images on every slide
Page Intro Banner Contact Us — breadcrumb + heading + text over media banner
Text with Cards Home
Feature Cards Home
Counters Home
Feature Highlight Home
Latest Blog Posts Home — Latest Blog view + button
FAQ Accordion Kept from the previous set
Image Cards About Varbase
Contact Form with Info Contact Us — Webform + info group
Call to Action Cards Contact Us
Call to Action Banner Home
Site Header Header global region
Site Footer Footer global region

Removed (previous set): Featured Media Split, Feature Grid Icons, Hero Split, Intro Two Column, Logos Strip, Pricing Row, Testimonials Row.

Component config refresh

Fresh-install testing surfaced stale canvas.component.* configs (exported before the current Drupal Canvas 1.8 version hashes and before Text Card gained icon_image/icon_alignment). A pattern or demo page using icon_image made a fresh install fail with OutOfRangeException: 'icon_image' is not a prop on this version of the Component. All shipped component and page-region configs are refreshed from a synced fresh install; shipped status values are preserved.

Testing

  • Multiple fresh drush site:install varbase rounds on DDEV (Drupal 11.4.1, Canvas 1.8.0), minimal and full (all optional Varbase recipes).
  • All 14 patterns import at install; media references resolve (deterministic media IDs from Varbase Media Assets).
  • Browser-verified with Playwright: patterns listed in the Canvas Library and rendering on test pages with no console errors, desktop and mobile.

AI-Generated: Yes (pattern extraction, config refresh, and testing with Claude Code; reviewed by Rajab Natshah.)

Checkpoints

  • File an issue about this project
  • Addition/Change/Update/Fix to this project
  • Testing to ensure no regression
  • Automated unit/functional testing coverage
  • Developer Documentation support on feature change/addition
  • User Guide Documentation support on feature change/addition
  • 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
Edited by Rajab Natshah

Merge request reports