Slots are predefined regions within a component where you can nest other components. This nesting capability allows you to insert child components into a parent structure to build complex, modular layouts.
Slots enable flexible layouts and are used to:
Create dedicated spaces where you can drag and drop components directly from the Library.
Define the overall structure of a layout while accommodating flexible content within specific areas.
Build complex, composable designs through component nesting.
Organize page content into logical sections.
For example: A Two Column Layout component might have left and right slots where you can drag and drop different components into each column, creating varied layouts without writing code.
Slots are managed within the code Editor. You can navigate to this interface by selecting a component from either the code-based components menu or the Component Library. Both access methods open the same editor workspace.
Example HTML/JSX value: Enter the code that determines how the slot content renders by default.
(Optional) Click + Add to add additional slots.
Editing existing slots
Site builders and developers expand the layout capabilities of components already placed on pages. You can evolve these components while they remain in use across a site. The system manages the transition of existing content to the new component definitions to ensure data integrity and provide flexibility.
When editing slots within a component that is already in use, you can perform the following actions:
Add new slots: Add new slots to existing components without re-creating them. Existing instances on your site continue to function. The new layout region displays the next time a content creator edits that specific component.
Update values: Update the default or example values for slots.
Delete slots: Remove layout regions that are no longer needed.
However, to prevent layout breaks and preserve data integrity, there is a strict limitation. After you add a component to the library, you cannot perform the following action on an existing slot:
Change the Slot name.
To achieve a name change, you must delete the existing slot and create a new slot with the desired name. The system treats renaming a slot as a deletion of the old name and an addition of a new name. This action causes any child components stored in the original slot to be hidden.
Important
Always preview the impact of component changes in Drupal Canvas before you publish.
Changes made to an existing slot do not display on the live site until you publish the page.
To edit slots on components that are already in use across your site:
Click and hold the Drag handle icon of the slot you want to relocate.
The system displays the hand icon.
Drag and drop the slot in the new location in the slots list.
Publish the changes.
Deleting a slot
If a slot is no longer needed, you can remove it from the code component. After you delete a slot, any child components that were placed in that slot will no longer be visible on the live site or in the Drupal Canvas Editor.
The system retains the deleted data in the background until the page is explicitly saved. If you accidentally delete a slot and hide its child components, you can re-add the slot with the exact same name before you save the page. The system restores the child components so they reappear in their original locations.
Slots are predefined regions within a component where you can nest other components. This nesting capability allows you to insert child components into a parent structure to build complex, modular layouts.
Slots enable flexible layouts and are used to:
Create dedicated spaces where you can drag and drop components directly from the Library.
Define the overall structure of a layout while accommodating flexible content within specific areas.
Build complex, composable designs through component nesting.
Organize page content into logical sections.
For example: A Two Column Layout component might have left and right slots where you can drag and drop different components into each column, creating varied layouts without writing code.
Slots are managed within the code Editor. You can navigate to this interface by selecting a component from either the code-based components menu or the Component Library. Both access methods open the same editor workspace.
Example HTML/JSX value: Enter the code that determines how the slot content renders by default.
(Optional) Click + Add to add additional slots.
Editing existing slots
Site builders and developers expand the layout capabilities of components already placed on pages. You can evolve these components while they remain in use across a site. The system manages the transition of existing content to the new component definitions to ensure data integrity and provide flexibility.
When editing slots within a component that is already in use, you can perform the following actions:
Add new slots: Add new slots to existing components without re-creating them. Existing instances on your site continue to function. The new layout region displays the next time a content creator edits that specific component.
Update values: Update the default or example values for slots.
Delete slots: Remove layout regions that are no longer needed.
However, to prevent layout breaks and preserve data integrity, there is a strict limitation. After you add a component to the library, you cannot perform the following action on an existing slot:
Change the Slot name.
To achieve a name change, you must delete the existing slot and create a new slot with the desired name. The system treats renaming a slot as a deletion of the old name and an addition of a new name. This action causes any child components stored in the original slot to be hidden.
Important
Always preview the impact of component changes in Drupal Canvas before you publish.
Changes made to an existing slot do not display on the live site until you publish the page.
To edit slots on components that are already in use across your site:
Click and hold the Drag handle icon of the slot you want to relocate.
The system displays the hand icon.
Drag and drop the slot in the new location in the slots list.
Publish the changes.
Deleting a slot
If a slot is no longer needed, you can remove it from the code component. After you delete a slot, any child components that were placed in that slot will no longer be visible on the live site or in the Drupal Canvas Editor.
The system retains the deleted data in the background until the page is explicitly saved. If you accidentally delete a slot and hide its child components, you can re-add the slot with the exact same name before you save the page. The system restores the child components so they reappear in their original locations.