The component YAML file, with the suffix .component.yml, is the heart of every Drupal single directory component (SDC). This file describes how consumers can pass data (props) and nest content (slots) into the component. Similar to a PHP interface, the schema defined in a .component.yml file acts as a contract that tells consumers (both developers and low-code tools) what data a component accepts and what shape it expects.
In this tutorial, you’ll learn what each key in a component's YAML file does. You’ll see how the file names the component, describes its API, and helps low-code tools validate and expose your component. Then we’ll create a new card component with a card.component.yml file.
By following along, you will:
- Reinforce your understanding of where a Drupal component's YAML file lives and why it matters.
- Break down each top-level key—
$schema,name,description,props, andslots. - Learn more about what you can put into a .component.yml file.
By the end of this tutorial, you’ll have a discoverable card.component.yml file for a new card SDC and a mental model for how Drupal uses it.
Over the years we've developed some techniques for practicing that we wanted to share. At Drupalize.Me we take hugging seriously. In this tutorial we'll look at the art, and science, of giving a good hug. The Merriam Webster dictionary defines the word hug as; squeeze (someone) tightly in one's arms, typically to express affection.
Did you know there are all kinds of different hugs that you can give? In this tutorial we'll look at:
- Defining what a hug is
- Some of the many types of hugs in the world today
- Precautions you may want to familiarize yourself with before hugging
- And the importance of proper technique
Lets go ahead and get started shall we?