Site Studio
Single Directory Components
Single Directory Components (SDC) is a core Drupal feature that groups all files for a UI component, such as Twig templates, CSS, and JavaScript, into a single directory. This approach simplifies component management and improves mobility across different projects.
To use SDCs in Site Studio, embed them in the Twig template of a custom component. Fields from your custom component that you want to use in your SDC can be passed to an SDC prop. Developers must ensure that the field types match the data types that users input. For additional information about custom components, visit Custom components and Create a custom component.
The following example shows how to embed an SDC into the Twig template of a custom component. In this example, text is the SDC prop and field.input is the custom component form field that passes data.
Site Studio{% embed 'example_custom_component:test_sdc' with {
text: field.input
} %}
{% endembed %}If a custom component includes a dropzone, you can map and render the dropzone with an SDC slot. Use the following method to map a dropzone:
{% embed 'example_custom_component:test_sdc' with {
text: field.input
} %}
{% block slot_example %}
{{ dropzones['dropzone_c6d16282_1402_41cc_bcfd_c8204b3aae0b'] }}
{% endblock %}
{% endembed %}When you use SDCs in this method, the SDC code does not require changes. This enables you to use SDCs from other contributed modules. You can create and share components across different projects and use them in Site Studio.
Single Directory Components (SDC) is a core Drupal feature that groups all files for a UI component, such as Twig templates, CSS, and JavaScript, into a single directory. This approach simplifies component management and improves mobility across different projects.
To use SDCs in Site Studio, embed them in the Twig template of a custom component. Fields from your custom component that you want to use in your SDC can be passed to an SDC prop. Developers must ensure that the field types match the data types that users input. For additional information about custom components, visit Custom components and Create a custom component.
The following example shows how to embed an SDC into the Twig template of a custom component. In this example, text is the SDC prop and field.input is the custom component form field that passes data.
{% embed 'example_custom_component:test_sdc' with {
text: field.input
} %}
{% endembed %}If a custom component includes a dropzone, you can map and render the dropzone with an SDC slot. Use the following method to map a dropzone:
{% embed 'example_custom_component:test_sdc' with {
text: field.input
} %}
{% block slot_example %}
{{ dropzones['dropzone_c6d16282_1402_41cc_bcfd_c8204b3aae0b'] }}
{% endblock %}
{% endembed %}When you use SDCs in this method, the SDC code does not require changes. This enables you to use SDCs from other contributed modules. You can create and share components across different projects and use them in Site Studio.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.