Web Wash: Drupal Canvas vs WordPress Gutenberg: Block Editor Comparison

Gutenberg vs Canvas

Step 8:

One thing to note is where the component lives. In the video we add the component to the byte theme, which is the theme that ships with Drupal CMS and Canvas. The same steps work in your own custom theme. Just swap the theme path for your theme folder and create the component inside its components directory.

import { useBlockProps, RichText } from '@wordpress/block-editor';

{ imageUrl && ( <div className="ww-hero__media"> <img className="ww-hero__image" src={ imageUrl } alt={ imageAlt } /> </div> ) } </div> ); }

.wp-block-ww-blocks-hero.ww-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; padding: 2rem;

.ww-hero__image { display: block; max-width: 100%; height: auto; border-radius: 8px; } }

Both WordPress and Drupal, with Canvas, let you build pages from blocks and components instead of using just a text area. But the way they go about it is very different.

• block.json is the ID card for the block. It holds the name, the attributes, and where the scripts and styles live.
• edit.js is what you see and edit inside the admin editor.
• save.js is the HTML that is saved to the post and shown on the front end.

<?php /** * Plugin Name: WW Blocks * Description: A collection of custom blocks. Currently: Hero. * Version: 1.0.0 * Text Domain: ww-blocks */

foreach ( glob( $build_dir . '/*', GLOB_ONLYDIR ) as $block_dir ) { register_block_type( $block_dir ); } } add_action( 'init', 'ww_blocks_register_blocks' );

Create components/ww_hero/ww_hero.component.yml. The props are the editable fields like heading, content, and image. The slot lets editors drop other components inside this one, in this case buttons below the content.

Create components/ww_hero/ww_hero.component.yml. The props are the editable fields like heading, content, and image. The slot lets editors drop other components inside this one, in this case buttons below the content.

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

Table of Contents

import { registerBlockType } from '@wordpress/blocks';

registerBlockType( metadata.name, { edit: Edit, save, } );

Create components/ww_hero/ww_hero.twig. The markup is Twig rendered on the server, and the classes like flex, gap-6, and md:flex-row are Tailwind utilities, which is why there’s a CSS build step next.

There’s no single winner, because the two editors are built for different people.

First we look at the main difference between the two editors. Then we build the hero as a Gutenberg block. Then we build the same hero as a Drupal SDC.

That’s the whole component. Two files in a folder, a CSS build because of Tailwind, and a cache clear. No JavaScript, no React, and no per-component build step.

The simplest way to describe the difference is that Gutenberg is content-first and Canvas is component-first.

cd web/themes/contrib/byte_theme

import { __ } from '@wordpress/i18n'; import { useBlockProps, RichText, MediaUpload, MediaUploadCheck, } from '@wordpress/block-editor'; import { Button } from '@wordpress/components';

<div className="ww-hero__media"> <MediaUploadCheck> <MediaUpload onSelect={ ( media ) => setAttributes( { imageUrl: media.url, imageAlt: media.alt, } ) } allowedTypes={ [ 'image' ] } render={ ( { open } ) => ( <> { imageUrl && ( <img className="ww-hero__image" src={ imageUrl } alt={ imageAlt } /> ) } <Button variant="secondary" onClick={ open }> { imageUrl ? __( 'Change image', 'ww-blocks' ) : __( 'Select image', 'ww-blocks' ) } </Button> </> ) } /> </MediaUploadCheck> </div> </div> ); }

Go ahead and create a folder for the hero component.

Create src/hero/save.js. This is a static block, so what you return here is the front-end HTML that gets saved into the post.

We build the hero inside a custom plugin called ww-blocks. The plugin is a container for blocks. Today it holds one block called hero, but you can drop in more blocks later and they register on their own.

Canvas is built for site builders. It doesn’t come with a set of generic content blocks. Instead, the Canvas components you see in the editor are the ones defined in modules or your theme. A Canvas component can be a block, a views block, a single directory component (SDC), or a code component (JavaScript file you build with Canvas). The most common approach is to create an SDC in your theme, define your props and slots, and then build pages from those components.

Step 2:

Add an SCSS file for the side-by-side layout. It loads on both the front end and inside the editor. You can also add an editor.scss file for editor-only tweaks.

Which One Should You Use?

If you want a typed system of server-rendered components that site builders own and editors put together, Canvas and SDCs are a clean fit. The downside is that you have to define your components up front before editors can build anything.

The “WW Hero” component now shows up in the Canvas component list under the Hero group. Add it to a page, fill in the heading, content, and image, and it renders.

{
"name": "ww-blocks",
"version": "1.0.0",
"description": "A collection of custom WordPress blocks.",
"private": true,
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},
"devDependencies": {
"@wordpress/scripts": "^32.0.0"
}
}

The two editors look similar, but they work in opposite ways. The easiest way to see the difference is to build the same thing in both. In the video, we build a hero component twice: first as a custom Gutenberg block, then as a Drupal Single Directory Component (SDC).