Gutenberg

What if creating and editing content in Drupal wasn't ass?

Christopher Bloom

Ground Rules:

  1. Drupal CMS
  2. Drupal hosting
  3. Editorial experience is highest priority

Headless CMS/JAMstack that way

Gutenberg in Drupal this way

gutenberg

Block/component-based!

Wordpress project!

React theming engine!

Drag and drop, endless configuration!

gutenberg

Cloud library of dozens of prebuilt components!

All editorial fields you'd ever need provided!

Static HTML rendered on the frontend!

Import global components and utils

Define props and meta

edit() function is React that shows while editing

save() is React rendered on view

Register block clientside

How is this possible?

SELECT body_value FROM node_revision__body ORDER BY revision_id DESC LIMIT 1 
<!-- wp:cover {"url":"/sites/default/files/inline-images/picture-1.jpg","id":3,"mediaAttrs":{"data-entity-type":"file","data-entity-uuid":"c69e6888-f508-4e11-9337-fdc2b8faea61","data-image-style":"original"}} -->
<div
  class="wp-block-cover has-background-dim"
  style="background-image:url(/sites/default/files/inline-images/picture-2.jpg)"
  data-entity-type="file"
  data-entity-uuid="c69e6888-f508-4e11-9337-fdc2b8faea61"
  data-image-style="original"
>
  <div class="wp-block-cover__inner-container">
    <!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
    <p class="has-text-align-center has-large-font-size">
      This is a cover block
    </p>
    <!-- /wp:paragraph -->
  </div>
</div>
<!-- /wp:cover -->
<!-- wp:phase2/p2-massive-cover {"title":"Hello Phase2","subtitle":"As you can see, this is a simple text block","text":"This is a third text line."} -->
<div class="wp-block-phase2-p2-massive-cover">
  <div class="column">
    <h2>Hello Phase2</h2>
    <div>As you can see, this is a simple text block</div>
    <p>This is a third text line.</p>
  </div>
  <button>This is button</button>
  <div class="column"><p>This is a paragraph.</p></div>
</div>
<!-- /wp:phase2/p2-massive-cover -->

Easy! Just store it as annotated markup in a field!

Pros

  • Easy
  • CMS-agnostic storage
  • React as a theming engine
  • The editor experience most clients expect
  • A delightful and rapid development experience

Cons

  • Stored markup does not change automatically when templates are updated.
  • Editors must manually edit all nodes/blocks, manually approve the new changes, and resave.
  • This is by design.
  • This is a deal-breaker.

What.

The.

Hell.

Wordpress.

Gutenberg

By Christopher Bloom

Gutenberg

A Squarespace-like editor for Drupal that ALMOST was.

  • 1,531