Drupal: Exploring Canvas (part 2)

In my previous post I was getting acquainted with the new module, and it got of to a promising start.
In this post I going to explore the components.

What are components?

The general term, based on my experience up to now, is atomic HTML with a definition. The reason why I keep the term so vague is because a component can be frontend based or backend based.

const Component = () => {
  return (
    <p>Test</p>
  );
};

export default Component;

Frontend people eyes will light up, or roll up, seeing the React component.

// test.component.yml
'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
name: test

// test.twig
<p>Test</p>

The backend component is a single directory component.

For an editor there is no difference between the two types.
Because hard-coding text or images is not beneficial for an editor components can have props, which an editor sees as an input field when the component is in focus.

const Component = ({name}) => {
  return (
    <p>Test {name}</p>
  );
};

export default Component;

For a backend component the code is as follows.

// text.component.yml
'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
name: test
props:
  type: object
  properties:
    name:
     type: string
     title: Name

// text.twig
<p>Test {{ name }}</p>

Components can also have slots, these allow an editor to nest components to create more complex page layouts.

For the frontend components there is no difference between a prop variable and a slot variable. The only thing to be aware of is that the variable has to be camelcased to work.
For the backend component the key in the yaml file is the variable that can be used as a prop or a slot variable in the twig file.

Adding a component with a slot looks like the initial content square, but instead of using blue to identify the space it is purple.

Once you add a component you will probably see a bit of a problem when you compare it with the previous image of the Test component.

Of course this is with unstyled components. It will be better with styled components, but there still will be situations where the visual cues of the components will be stacked on top of one another.

Manipulating components on the page

When you click on the plus icon of the left Canvas toolbar you see all the components you can add to the page.
In my previous post I mentioned the Content square looks like a placeholder where you can drag components on. But at the moment the only way to add components is by clicking on the the three dots and then on the Insert link.

Even if you already have components on the page that have a slot, the Insert link only allows you to add to the Content.

When the component is on the page you either right click on the component to see the manipulation options.

Or you can click on the layers icon of the left toolbar.

There it is possible to drag and drop the components. And when you click on the three dots next to the component name you see the same menu as the right click on the page.

In my example a block layout has been defined so that there is a header and a footer on the page.
You don't need to have a default block configuration, this is where patterns come into play.
Patterns are snapshots of a component setup like a header or a footer.
So for redesigns a new pattern needs to be added and changed on all the pages.

Patterns can be added with the Add pattern link in the component menu.

Creating frontend components

The creation of the backend components are separated from the Canvas modules, which makes them for me the components you don't want editors to mess with.

Frontend components can be created by editors that have the permission to Administer code components.
When clicking on the Manage library icon, you see a similar list as clicking on the Add icon.

The biggest change is the addition of the New dropdown menu and the Code section.
I'm not sure why they made New a dropdown menu because you can only add frontend components.
In the Code section you can see the components that are created but not linked to the components list.

Once you click on the Code component link in the New dropdown, you will get a popup for the name. After that closes you will see the edit interface for the component.

On the top right you see the Review changes button to save the component, and slightly to the left and down you see the Add to components button. That is the button that allows the component to be added to pages.

After playing around with creating an changing components I noticed there are quite often error on saving, but after saving it for the second time the error doesn't return.

Temporary conclusion

While the components already offer a lot of functionality, but for me the left toolbar feels confusing after using it.

Having two toolbar section that are similar, even the popup menus are similar makes me click on the wrong icons more often.
I think a manage components button next to the navigator that opens a popup would be less confusing.
But that are just teething problems.