Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Gutenberg
Extended
How to
extend and customize
the new WordPress editor
Sören Wrede
@soean
Webdeveloper
Hamburg
12+ Years WordPress
1+ Year Gutenberg
Why
Why
● Extensibility as core feature
● New possibilities
● New concepts
● Less documentation
● Work in progress
● What do w...
Content
● Blocks
● Theme Support
● Block Templates
● Editor UI
● Data store
● Parser
Work in progress!
(Gutenberg 4.0)
Blocks
Block API
● Handbook
● GitHub Gutenberg Repository
● CSS-Tricks: Learning Gutenberg
● javascriptforwp.com Course
● create-...
ACF Block API
The State of ACF in a Gutenberg World
Gutenberg
Fields Middleware
by rtCamp
● Register fields for Gutenberg blocks
with a simple, declarative API.
● JS or PHP
●...
Gutenberg Cloud
● Reuse across CMSs (WordPress, Drupal, …)
● Discover new blocks
● No plugin bloat, NPM
https://gutenbergc...
Extending Blocks
wp.hooks
● Hooks like in PHP
● addAction, addFilter, removeAction,
removeFilter, doAction, applyFilters ....
Extending Blocks
Block Style Variations API
Theme support
Theme Support
● Override block styles
● Enable opt-in features
(add_theme_support)
● Customize block options
● Apply Style...
Theme Support
Wide Alignment (Opt-in)
● Classes:
○ .alignfull
○ .alignwide
Theme Support
Editor Color Palette (Customize)
● Classes:
○ has-slug-background-color // background
○ has-slug-color // Te...
Theme Support
Editor font Sizes (Customize)
● Class: has-slug-font-size
Theme Support
Editor Styles
● Editor Styles: Auto-prefix: .editor-block-list__block
● Support dark background themes
● Add...
Block Templates
Templates
● list of block items
● initial state for an editor session
● attributes and placeholder content
● per custom po...
Editor UI
Editor UI
● Plugins API
● Slot / Fill
● Sidebar, Toolbar, Pre-publish panel,
own Sidebar, ...
Editor UI
● Own Sidebar
● Examples
○ Yoast
○ Drop it
○ Public Post Preview
Data store
Data store
● modular pattern for organizing and
sharing data
● Redux like core principles
● Browser plugins
● Handbook
● B...
Data store
● core/data, core/nux, core/viewport,
core/editor, core/edit-post, yoast-
seo/editor, …
● registerStore('my-sho...
Data store
● get current post content
● get currently selected tags/categories
● is Sidebar visible
● notify if an image b...
Parser
Parser
● HTML structure to data structure
● Server-side parser
● Client-side parser (not replaceable yet)
● Handbook
● Com...
We need you!
Documentation
Code examples
Blog posts
Tutorials
...
This is the end!
Sören Wrede
@soean
Upcoming SlideShare
Loading in …5
×

Gutenberg Extended

How to extend and customize the new WordPress editor.

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

  • Be the first to like this

Gutenberg Extended

  1. 1. Gutenberg Extended How to extend and customize the new WordPress editor
  2. 2. Sören Wrede @soean Webdeveloper Hamburg 12+ Years WordPress 1+ Year Gutenberg
  3. 3. Why
  4. 4. Why ● Extensibility as core feature ● New possibilities ● New concepts ● Less documentation ● Work in progress ● What do we need?
  5. 5. Content ● Blocks ● Theme Support ● Block Templates ● Editor UI ● Data store ● Parser
  6. 6. Work in progress! (Gutenberg 4.0)
  7. 7. Blocks
  8. 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. 9. ACF Block API The State of ACF in a Gutenberg World
  10. 10. Gutenberg Fields Middleware by rtCamp ● Register fields for Gutenberg blocks with a simple, declarative API. ● JS or PHP ● GitHub
  11. 11. Gutenberg Cloud ● Reuse across CMSs (WordPress, Drupal, …) ● Discover new blocks ● No plugin bloat, NPM https://gutenbergcloud.org/
  12. 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. 13. Extending Blocks Block Style Variations API
  14. 14. Theme support
  15. 15. Theme Support ● Override block styles ● Enable opt-in features (add_theme_support) ● Customize block options ● Apply Styles to editor
  16. 16. Theme Support Wide Alignment (Opt-in) ● Classes: ○ .alignfull ○ .alignwide
  17. 17. Theme Support Editor Color Palette (Customize) ● Classes: ○ has-slug-background-color // background ○ has-slug-color // Text ● disable-custom-colors // Color picker
  18. 18. Theme Support Editor font Sizes (Customize) ● Class: has-slug-font-size
  19. 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. 20. Block Templates
  21. 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. 22. Editor UI
  23. 23. Editor UI ● Plugins API ● Slot / Fill ● Sidebar, Toolbar, Pre-publish panel, own Sidebar, ...
  24. 24. Editor UI ● Own Sidebar ● Examples ○ Yoast ○ Drop it ○ Public Post Preview
  25. 25. Data store
  26. 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. 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. 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. 29. Parser
  30. 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. 31. We need you! Documentation Code examples Blog posts Tutorials ...
  32. 32. This is the end! Sören Wrede @soean

×