canvas-component-composability

Decomposing a large React component for Drupal Canvas involves breaking it into child components and declaring named slots in component.yml so Canvas users can compose variable content directly in Workbench. This approach replaces excessive props with slot-based composition.

Slots are preferred over props for variable or nested child content in Canvas because they allow users to compose instances directly in Workbench. Props are limited, particularly for array data, making slots the better choice for repeatable content patterns like lists and grids.

Refactor a monolithic React component into child components when it grows complex, has excessive props, or contains repeated elements like cards and metadata items. Extracting these into child components with named slots improves reusability and Canvas compatibility.

Modeling repeatable lists or grids for Drupal Canvas requires converting array or object item patterns into parent and child slot pairs. This preserves interactive drop zones in Workbench while allowing users to compose repeating UI elements like carousels dynamically.

Drupal Canvas has limitations around array props in React components. To handle repeatable content, you should use parent and child slot pairs instead of array props, ensuring that interactive drop zones remain functional for users composing in Workbench.

Slot containers in Canvas components require minimum container sizes to preserve drop-zone interactivity. When declaring named slots in component.yml, you must include layout advice noting these minimum dimensions so users can successfully drag and drop content into the slots.