Not long ago the first version of Canvas was released. For the people that are not in the Drupal bubble, Canvas is the new visual page creator module.
Most people that use a CMS know the form interface to build pages, but this means more training because people don't have a visual connection with the content they are adding. That is why there has been a preview button on the form for as long as I know.
The previous iteration of a visual page creator is the Layout builder. The big problem with that module is that you still needed the form to add the page metadata.
Having a visual interface that combines the form and the visual adding of page content is the next step to improve the user experience.
I want to mention the quick edit module to complete the visual editing options of Drupal. But this is more a localized edit option than a page builder option.
The installation and first impressions
At the bottom of the release article there is a demo repository to test the module. But I like to test new things with as less distractions as possible. So I started a new project with Drupal core 11.20 and added the Canvas module.
I only enabled the main module. The configuration link of the module leads to a new Components tab in the Appearance section.
I think it is a weird place because I expected it to be in the Structure section. Because there are all the other options to build a page.
The next strange things I discovered is the Drupal Canvas link in the top menu of the admin interface and the Pages tab in the Content section.
My first thought when I saw the Pages tab was, is this not a node? So I went to the database to find out if I could spot Canvas tables.
If you are familiar with node tables, you get that Canvas is a parallel approach instead of a just a visual builder layer.
On the one hand not building on the node structure allows for more freedom. On the other hand will this create new mistakes, where nodes are already true and tested.
Will this mean nodes could become an optional part of Drupal in the future? For sites that only use Canvas pages, nodes are unnecessary bagage.
Using Canvas
To get screenshots I made my browser window smaller and I was greeted with following message after I clicked on the Drupal Canvas link.
So at the moment building pages on a smartphone is not possible. For people who want to do a quick edit while they are traveling, that might be a dealbreaker. But for a first version of the module I can understand that is not a primary concern.
The left icon leads you back to the admin interface. The left toolbar is a part of the current Drupal design language with the adoption of Gin as the default admin theme.
They have called the dropdown in the middle of the top toolbar the navigator.
And the right button is the way to save the page, which is also following the design language.
After clicking on the navigator it becomes more clear why they choose that name. When you create a new page you see the following changes.
The text in the navigator has changed, and a draft pill is added.
On the top left of the content part you see an option to resize page.
The content itself is structured according to the Block layout in the Structure section. This confirms for me the Components tab shouldn't be in the Appearance section.
And then there is a square block that invites you to drop content in.
On the right side a Page data toolbar is added.
This is the part the Layout builder module is lacking.
I wanted to confirm no node tables in the database are changed when saving a Canvas page, so I changed the title of the page.
As soon as I started typing the right button changed from No changes to Review 1 change, and in the content the title also changed.
After clicking on the button the popup shows the changes and you can select individual changes or all of them. And then the publish button on the bottom becomes active.
I went back to the database and as I suspected none of the node tables got an extra row.
Preliminary conclusion
I feel I just touched the surface of the module, while already shown quite a few differences between the Canvas way of working and the previous Drupal admin experience.
This is the reason I'm going to split the exploration of the module up into multiple posts.
At this point I'm positively surprised by the module. But after the equally positive feeling I had about the CMS anything with some more rough edges would be a disappointment.
The people building Drupal are professionals.
Eagle eyed people might wonder why there is a preview button in the Canvas interface, you are already working with a visual representation of the page.
This button hides the left and right toolbars and visual edit cues for the components to get a view closer to what people are seeing in their browser.
Top comments (0)