Theming

[CarmelClark]

Let's talk about Slots and Wrappers. If you have never used View/Vue before... Its important.
DruxtWrapper - Same system for all of them. They all get atters(unregistered props) /(registered)props.

Each of the Druxt modules has its own set of data/propertites/things that it can provide.

Wrapper component from Vue developer tools - Druxt entity

Every module that uses the wrapper component system provides a component data entry. And that will tell you what component is currently being used, and what the available options are if any of these exist as components in your code base, they will be selected in the hierarchy or order you can see.

Example of Druxt code base's components - because of Druxt auto discovery features, it will pick up DruxtBlockSystemSearchFormBlock

Allows you to just drop in your components and do whatever you need to do.

Components Directory - Make a file

DruxtBlocks and Regions - page or layout it will take the configuration from Drupal, including some visibility settings:- The page that your on, what blocks should be rendered, and it will render that for you, or alternatively you can just render a block by saying DruxtBlock ID and the ID of the thing. eg- Umami banner block.

Make a layout - because we want something closer to what we would expect in Drupal, right?

The easiest way to get your layout regions is to use the DruxtSite component, and say which theme you want your blocks for. In this case I'm going to use Bartik.

See that it is rendering out our block regions that it has available, unfortunately there is no way for it to know the order of those regions, because Drupal doesn't actually contain that information, because that is usually done in the templates system. So that would be great to get that Decoupled. You can also reference the regions directly. I'm not going to.

Some blocks are empty in development mode

All you need to make a Branding block, is to make a wrapper. Lets look at the attributes (component/option). and we see DruxtBlockSystemBrandingBlock. So if we simply go ahead and make that.

DruxtBlock doesn't provide as much information as would be preferred, but lets look forwards to a improved system in a future version of Drupal. What's important though, is that at the moment you can work with what you have.

Storybook
Druxt provides out of the box Storybook support via the Nuxt