1 of 31

Introducing Gutenberg Content Editor for Drupal

Drupal Europe 2018

2 of 31

Drupal + Technology

17/3/2018

TRACK SUPPORTED BY

3 of 31

Become a Drupal contributor Friday from 9am

First timers workshop
Mentored contribution
General contribution

4 of 31

Introducing Gutenberg Content Editor for Drupal

Drupal Europe 2018

5 of 31

Hi!

Per André Rønsen, CTO

@perandre

Marco Fernandes, Senior Developer @marcoffernandes

GUTENBERG CONTENT EDITOR FOR DRUPAL

6 of 31

Poland

Portugal

Norway

Frontkom

Oslo

Fredrikstad

Berlin

Lublin

Warsaw

Madeira

frontkom.no / post@front.no / @frontkom

7 of 31

@drupalgutenberg

drupalgutenberg.org/demo

Twitter

8 of 31

9 of 31

Fragmented authoring experience

10 of 31

Competition investing in authoring UX

11 of 31

What if?

12 of 31

Introducing Gutenberg.

For Drupal.

13 of 31

Originally a WordPress (core) plugin

14 of 31

15 of 31

WordPress => Gutenberg-js (React) => Drupal

16 of 31

</theory>

It’s demo time!

GUTENBERG CONTENT EDITOR FOR DRUPAL

17 of 31

Drupal Gutenberg demo

GUTENBERG CONTENT EDITOR FOR DRUPAL

18 of 31

Installation: Enable, add to content type, GO!

First: Enable the module

Add the editor on a content type

At content admin page. Let’s add a new basic page.

Welcome… not much to see, yet. Node settings a sidebar.

Lets start using G.

A paragraph block is created. Go through settings. common options. reusable block.

Inline search

Check other core blocks like cover image - awesome title move up and set to full width

Delete other paragraphs with backspace

Add columns - add embed.

Now for something even cooler - drupal blocks, add the “required” drupal powered footer. views + gutenberg = powerful combo.

[move to browser for demo]

The Paragraph block has some handy options in the sidebar. All blocks have their unique sidebar settings. This is a very powerful tool.
Each block also has some common options: Show/hide block settings, Duplicate block, Insert before or after and Add to reusable blocks [click to test each. Name the block Drupal Europe block]
Another nice feature, is that all blocks are searchable inline using forward slash [add the new shared block]

Let’s check out some other Gutenberg core blocks: … [We have plenty of time to demo things like:

Re-order blocks

Upload image with drag/drop and make it full width

Video embed]]

This was a small preview of Gutenberg’s core blocks.

Now for something even cooler.

The module is built so that each Drupal 8 block is automatically exposed to Gutenberg. That’s right: All your core and custom Drupal blocks all appear in the Gutenberg Library.

Now imagine what you can build with Views module and Gutenberg working together. We are very excited about this. It’s the killer application Drupal blocks needed.

19 of 31

Drupal Community + Gutenberg =

GUTENBERG CONTENT EDITOR FOR DRUPAL

20 of 31

Gutenberg Cloud: A library of blocks

21 of 31

22 of 31

Browse blocks: All inside Drupal

23 of 31

Add block to Gutenberg Cloud: 1. Put on NPM 2. Profit

24 of 31

Gutenberg Cloud: Custom blocks

GUTENBERG CONTENT EDITOR FOR DRUPAL

25 of 31

26 of 31

Sales: New business

PM: Happier clients

Devs: More code reuse+sharing

27 of 31

Test it: drupalgutenberg.org

Follow: @drupalgutenberg

BoF: Feedback + how to contribute.

Like it?

28 of 31

BoF: Room 2.04 Titanium

14:45 today

THX!

frontkom.no / post@front.no / @frontkom

29 of 31

[Leftover slides]

30 of 31

Gutenberg Core: Comes with 30+ useful blocks

31 of 31

Drupal module: All your blocks are there