How to extend and customize the new WordPress editor.

1. Gutenberg
Extended
How to
extend and customize
the new WordPress editor

2. Sören Wrede
@soean
Webdeveloper
Hamburg
12+ Years WordPress
1+ Year Gutenberg

3. Why

4. Why
● Extensibility as core feature
● New possibilities
● New concepts
● Less documentation
● Work in progress
● What do we need?

5. Content
● Blocks
● Theme Support
● Block Templates
● Editor UI
● Data store
● Parser

6. Work in progress!
(Gutenberg 4.0)

7. Blocks

8. Block API
● Handbook
● GitHub Gutenberg Repository
● CSS-Tricks: Learning Gutenberg
● javascriptforwp.com Course
● create-guten-block Boilerplate
● Tuts+ Tutorial
JS: ES5 or ES6/JSX
PHP: ServerSideRender

9. ACF Block API
The State of ACF in a Gutenberg World

10. Gutenberg
Fields Middleware
by rtCamp
● Register fields for Gutenberg blocks
with a simple, declarative API.
● JS or PHP
● GitHub

11. Gutenberg Cloud
● Reuse across CMSs (WordPress, Drupal, …)
● Discover new blocks
● No plugin bloat, NPM
https://gutenbergcloud.org/

12. Extending Blocks
wp.hooks
● Hooks like in PHP
● addAction, addFilter, removeAction,
removeFilter, doAction, applyFilters ...
● Filter Block API properties and functions
● Handbook examples
● Hooks npm package

13. Extending Blocks
Block Style Variations API

14. Theme support

15. Theme Support
● Override block styles
● Enable opt-in features
(add_theme_support)
● Customize block options
● Apply Styles to editor

16. Theme Support
Wide Alignment (Opt-in)
● Classes:
○ .alignfull
○ .alignwide

17. Theme Support
Editor Color Palette (Customize)
● Classes:
○ has-slug-background-color // background
○ has-slug-color // Text
● disable-custom-colors // Color picker

18. Theme Support
Editor font Sizes (Customize)
● Class: has-slug-font-size

19. Theme Support
Editor Styles
● Editor Styles: Auto-prefix: .editor-block-list__block
● Support dark background themes
● Add default Styles
● Alternative: Extra stylesheet via
enqueue_block_editor_assets hook

20. Block Templates

21. Templates
● list of block items
● initial state for an editor session
● attributes and placeholder content
● per custom post type
● PHP and JS API
● Many planned additions
Handbook
Video Tutorial

22. Editor UI

23. Editor UI
● Plugins API
● Slot / Fill
● Sidebar, Toolbar, Pre-publish panel,
own Sidebar, ...

24. Editor UI
● Own Sidebar
● Examples
○ Yoast
○ Drop it
○ Public Post Preview

25. Data store

26. Data store
● modular pattern for organizing and
sharing data
● Redux like core principles
● Browser plugins
● Handbook
● Beyond the block - David Remer
(inpsyde.com) (+Video + Code)
● Redux with WordPress - Josh Pollock
● Efficient client data management for
WordPress Plugins - Riad Benguella

27. Data store
● core/data, core/nux, core/viewport,
core/editor, core/edit-post, yoast-
seo/editor, …
● registerStore('my-shop', {...})
● store.select(): Returns the state value
of the registered reducer
● store.subscribe( listener: Function ):
Registers a function called any time
the value of state changes.
● store.dispatch( action: Object ): Given
an action object, calls the registered
reducer and updates the state value.

28. Data store
● get current post content
● get currently selected tags/categories
● is Sidebar visible
● notify if an image block is inserted
● Rest API data (latest post, user
object, create category)
● Store / upsate own plugin data
● get Data from other plugins
● extend other plugins

29. Parser

30. Parser
● HTML structure to data structure
● Server-side parser
● Client-side parser (not replaceable yet)
● Handbook
● Compare parser
● An experimental Rust parser
(100 - 1000 times faser)

31. We need you!
Documentation
Code examples
Blog posts
Tutorials
...

32. This is the end!
Sören Wrede
@soean