Talking Drupal #487 - Single Directory Components Workflow

Today we are talking about Single Directory Components, How best to work with them, and their future with Drupal with guest Brian Perry. We’ll also cover Embedded Content as our module of the week.

For show notes visit:
https://www.talkingDrupal.com/487

Topics

• What are Single Directory Components (SDC)
• Why the switch to SDCs
• What is there in common between decoupled and SDCs
• Can you give us an overview of your workflow
• Common pitfalls
• How should someone get started working with SDCs
• Does it work with Paragraphs and Blocks?
• Does it need to be all at once
• How do you think SDCs will evolve
• Do you see this leading to more Decoupled front ends
• What contrib modules make working with SDCs easier

Resources

• My Single Directory Components Workflow
• Pico CSS
• Open Props
• Twig Tweak
• No Markup
• SDC Styleguide
• Radix Theme
• SDC Block
• UI Patterns 2.x
• Astro
• TAC

Guests

Brian Perry - brianperry.dev brianperry

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan
John Picozzi - epam.com johnpicozzi
Scott Weston - scott-weston

MOTW

Correspondent

Jacob Rockowitz - jrockowitz.com jrockowitz

• Embedded Content
• Brief description:
  • The Embedded Content module allows site builders to select, create, and update content embedded within HTML inside CKEditor.
  • For developers, the EmbeddedContent plugin is like a Block plugin without context.
  • There is a demo on YouTube https://www.youtube.com/watch?v=GxOn-P3Q5Gg
  • There is support embedding of single directory component in progress. Conceptually, this is already possible, the same way one would render a single directory component in Block plugin.
• Brief history
  • The concept and code started as the CKEditor5 Embedded Content module, created in August 2022.
  • In October 2023, CKEditor5 Embedded Content was renamed to Embedded Content.
• Versions available:
  • 2.0.3 - January 22nd, 2025
  • Works with Drupal: ^9 ^10 ^11
• Maintainership
  • Actively maintained? yes
  • Security coverage? Yes
  • Test coverage? Yes
  • Documentation? Video and an example module
• Number of open issues:
  • All issues: 6 open, 17 total
  • Bug report: 6 open, 15 total
• Usage stats:
  • 509 sites report using this module
  • 1,263 sites report using this module (using old version)
• Maintainer(s):
  • Teun van Veggel (nuez)
  • https://www.drupal.org/u/nuez
• Module features and usage
  • Insert themed content in Ckeditor5 using Drupal plugins without having to write rich HTML and CSS
  • Render these results directly in the CKEditor
  • Create 'inline' embedded content that sits inline with the text, like footnotes.
  • Provides
  • Embedded Content plugin
  • CKeditor 5 plugin.
  • Ecosystem
  • Embedded Content: Examples for examples of how to build your own plugins.
  • Embedded Content: Entity for embedding content entities
  • Embedded Content: SDC for single directory components (under development)
  • Potential Challenges
  • Example of the embedded content tag.
  • <embedded-content data-plugin-config="{"text":"Some quote","spoken_by_character":"Some one","align":"center"}" data-plugin-id="schemadotorg_quotation" data-button-id="default"> </embedded-content>
  • Translations via TMS (data is serialized via an attribute)