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.

Using SDC

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.

{% embed 'example_custom_component:test_sdc' with {
    text: field.input
} %}
{% endembed %}

{% 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

{% embed 'example_custom_component:test_sdc' with {
    text: field.input
} %}
{% endembed %}

{% embed 'example_custom_component:test_sdc' with {
    text: field.input
} %}
    {% block slot_example %}
      {{ dropzones['dropzone_c6d16282_1402_41cc_bcfd_c8204b3aae0b'] }}
    {% endblock %}
{% endembed %}