Single Directory Components (SDC) are like building blocks in Drupal. They bring together HTML, CSS, and JavaScript to create something you see on a webpage. The idea is to keep everything related to a specific element in one place, making it easy to find and manage.
To know more about the SDC component refer this blog SDC - Single Directory Component
Paragraphs Module:
Quoting from paragraphs module itself:
“Paragraphs is the new way of content creation! It allows you — Site Builders — to make things cleaner so that you can give more editing power to your end-users.
Instead of putting all their content in one WYSIWYG body field including images and videos, end-users can now choose on-the-fly between pre-defined Paragraph Types independent from one another. Paragraph Types can be anything you want from a simple text block or image to a complex and configurable slideshow”.
Use Case (SDC with Paragraph type):
Use SDC with Paragraph needs some module:
SDC Display enables site builders to utilize the components available on the site within the Manage Display tabs of entities. With SDC Display, you can easily configure which component a specific field uses or choose the component for a particular view mode. This allows for more flexibility and customization in displaying content on your website.
Command to include SDC Display: composer require 'drupal/sdc_display'
This module includes a behavior plugin designed for the Paragraphs module. With this plugin, you can choose a different view mode for the paragraph directly in the content add/edit form.
Command to include Paragraphs View Modes: composer require 'drupal/paragraphs_viewmode'
How to Integrate SDC component with Paragraphs:
hero-banner-with-image.component.yml
hero-banner-without-image.component.yml
To see complete SDC components example refer to this github link.
E.g. : Title, Description, image, CTA Button etc.
You can see the SDC components list in SDC options:
After selecting the component you have to map the paragraph field to SDC component:
Same for other paragraph view mode you can select the other SDC Component which you want to render for that view mode.
For ‘Default’ (Banner with image) View Mode:
For ‘Banner Without Image’ view mode:
Summary/Conclusion:
The integration of the SDC Display module with paragraph types and view modes in Drupal offers a promising approach to streamlining content creation and management. By leveraging SDC for reusable components and custom view modes for paragraphs, developers can enhance the flexibility and efficiency of Drupal websites. While specific integration details may require further exploration, the potential benefits of this approach are evident.
References:
Paragraphs View Mode (Drupal.org)