Gutenberg

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

Christopher Bloom

Ground Rules:

Drupal CMS
Drupal hosting
Editorial experience is highest priority

Headless CMS/JAMstack that way

Gutenberg in Drupal this way

https://drupalgutenberg.org/demo

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

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.