Organizing components and patterns with folders

Organizing components and patterns with folders

Folders in Drupal Canvas enable organization of components, patterns, and code-based components across different sections of the system. They allow controlled creation, modification, reordering, and deletion of folders while maintaining safeguards to prevent accidental data loss. Folders are strictly organizational and do not affect the display, execution, or backend logic of components or patterns.

Folders can be created and managed in the Components and Patterns tabs in the Library, with each tab maintaining its own independent structure. In addition, folders can be created and managed in the Code section to organize code-based components. This folder structure in this section is separate from the folder structure in the tabs in the Library.

Folder structure and indicators

Each folder includes the following elements:

• Folder name: The folder name that provides a unique title to identify and organize components and patterns. 

  Note

  Folder names must be unique in their respective sections. If a folder with the same name already exists, the system prevents creation and displays an error message.

• Ellipses button:  A dropdown menu with the Rename and Delete Folder options.

• Item count: A number next to the folder name that indicates the total components and patterns in the folder. The system updates this number when users add or move items.

• Expand and collapse control: Expand or collapse folders to display or hide the components and patterns in them.

Creating folders

Creating folders for components

To create a folder for components:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.
3. In the toolbar on the left, click the Library (+) icon to open the Component Library.
4. On the Component tab, click + New.

5. Select Add folder.

   The system displays a new folder row in the list.

6. Enter the folder name in the New folder field.

7. Press Enter to create the folder.

Creating folders for patterns

To create a folder for patterns:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.
3. In the toolbar on the left, click the Library (+) icon to open the Component Library.
4. Click the Patterns tab.
5. Click + New.

6. Select Add folder.

   The system displays a new folder row in the list.

7. Enter the folder name in the New folder field.

8. Press Enter to create the folder.

Creating folders for code-based components

To create a folder for code-based components:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.
3. In the toolbar on the left, click the Code (</>) icon.
4. Click + New.

5. Select Add folder.

   The system displays a new folder row in the list.

6. Enter the folder name in the New folder field.

7. Press Enter to create the folder.

Renaming a folder

To rename a folder:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.
3. Navigate to the section containing the folder that you want to edit. For example, the Components tab, Patterns tab, or Code section.
4. Locate the folder that you want to rename.
5. Click the ellipses button for the folder.

6. Select Rename.

7. Enter the new folder name.

8. Press Enter to save the changes.

Deleting folders

To delete a folder:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.
3. Navigate to the section containing the folder that you want to edit. For example, the Components tab, Patterns tab, or Code section.
4. Locate the folder that you want to delete.
5. Click the ellipses button.

6. Select Delete folder.

Reordering folders

To reorder the folder sequence:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.
3. Navigate to the section containing the folder that you want to move. For example, the Components tab, Patterns tab, or Code section.

4. Click and hold the folder.

5. Drag the folder to the new location in the list.

6. Drop the folder to change the sequence.

Moving components and patterns between folders  

Users move components and patterns across the following levels:

• From the menu list into a folder.

• From a folder to the menu list.

• From one folder to another folder.

To move components and patterns between folders:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.
3. Navigate to the section containing the component or pattern that you want to move. For example, the Components tab, Patterns tab, or Code section.

4. Click and hold the component or pattern.

5. Drag the component or pattern to the new folder.

6. Drop the component or pattern to complete the move.

Creating folders

Creating folders for components

To create a folder for components:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.
3. In the toolbar on the left, click the Library (+) icon to open the Component Library.
4. On the Component tab, click + New.

5. Select Add folder.

   The system displays a new folder row in the list.

6. Enter the folder name in the New folder field.

7. Press Enter to create the folder.

Creating folders for patterns

To create a folder for patterns:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.
3. In the toolbar on the left, click the Library (+) icon to open the Component Library.
4. Click the Patterns tab.
5. Click + New.

6. Select Add folder.

   The system displays a new folder row in the list.

7. Enter the folder name in the New folder field.

8. Press Enter to create the folder.

Creating folders for code-based components

To create a folder for code-based components:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.
3. In the toolbar on the left, click the Code (</>) icon.
4. Click + New.

5. Select Add folder.

   The system displays a new folder row in the list.

6. Enter the folder name in the New folder field.

7. Press Enter to create the folder.

Renaming a folder

To rename a folder:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.
3. Navigate to the section containing the folder that you want to edit. For example, the Components tab, Patterns tab, or Code section.
4. Locate the folder that you want to rename.
5. Click the ellipses button for the folder.

6. Select Rename.

7. Enter the new folder name.

8. Press Enter to save the changes.

Deleting folders

To delete a folder:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.
3. Navigate to the section containing the folder that you want to edit. For example, the Components tab, Patterns tab, or Code section.
4. Locate the folder that you want to delete.
5. Click the ellipses button.

6. Select Delete folder.

Reordering folders

To reorder the folder sequence:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.
3. Navigate to the section containing the folder that you want to move. For example, the Components tab, Patterns tab, or Code section.

4. Click and hold the folder.

5. Drag the folder to the new location in the list.

6. Drop the folder to change the sequence.

Moving components and patterns between folders  

Users move components and patterns across the following levels:

• From the menu list into a folder.

• From a folder to the menu list.

• From one folder to another folder.

To move components and patterns between folders:

1. Access your site.

2. On the top right, click Edit to open Drupal Canvas.
3. Navigate to the section containing the component or pattern that you want to move. For example, the Components tab, Patterns tab, or Code section.

4. Click and hold the component or pattern.

5. Drag the component or pattern to the new folder.

6. Drop the component or pattern to complete the move.