Slide 1
Slide 1 text
Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl
The Future
of WordPress
Development
Slide 2
Slide 2 text
CHAPTER I
History
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
“
”
The editor will endeavour to create a new page and
post building experience that makes writing rich posts
effortless, and has “blocks” to make it easy what today
might take shortcodes, custom HTML, or “mystery
meat” embed discovery.
make.wordpress.org/core/2017/01/04/focus-tech-and-design-leads/
MATT MULLENWEG
Slide 10
Slide 10 text
By embracing "the block", we can
potentially unify multiple different
interfaces into one.
Slide 11
Slide 11 text
”Mystery meat" refers to hidden
features in software, features that you
have to discover.
Slide 12
Slide 12 text
CHAPTER II
Gutenberg
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
The vision
• Everything is a block
• Placeholders are key
• Direct manipulation
• Customization
• Drag and drop is additive
Slide 15
Slide 15 text
“
”
Ultimately, the vision for Gutenberg is to make it much easier
to author rich content. Through ensuring good defaults,
wrapping and bundling advanced layout options blocks, and
making the most important actions immediately available,
authoring content with WordPress should be accessible to
anyone.
WORDPRESS.ORG/GUTENBERG/HANDBOOK/REFERENCE/DESIGN-PRINCIPLES/
Slide 16
Slide 16 text
CHAPTER III
Demo
Slide 17
Slide 17 text
CHAPTER IV
Technical
Slide 18
Slide 18 text
Technical overview:
make.wordpress.org/core/2017/01/17/editor-
technical-overview/
Slide 19
Slide 19 text
“
”
MATT MULLENWEG
I believe quite strongly that JavaScript
and API-driven interfaces are the future of
not just WordPress but the web.
The State of the Word 2015
Slide 20
Slide 20 text
TECHNICAL
Technologies
Slide 21
Slide 21 text
Libraries
• React
• Redux
• Lodash
• WordPress packages
• Other npm modules
Slide 22
Slide 22 text
Tools
• WordPress :)
• Webpack
• Babel
• Eslint
• Jest
• Cypress
Slide 23
Slide 23 text
Gutenberg is built using modular
architecture.
Slide 24
Slide 24 text
Third-party libraries are hidden
behind the abstraction layer.
Slide 25
Slide 25 text
Reusable components over plain
HTML markup.
Slide 26
Slide 26 text
TECHNICAL
Blocks
Slide 27
Slide 27 text
Enqueue
Javascript
CSS
HTML
Slide 28
Slide 28 text
Block API:
wordpress.org/gutenberg/handbook/block-api
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Blocks are composed of components.
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
TECHNICAL
Themes
Slide 33
Slide 33 text
A theme experiment:
github.com/WordPress/gutenberg-theme
Slide 34
Slide 34 text
Templates:
wordpress.org/gutenberg/handbook/templates/
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Extensibility
TECHNICAL
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
CHAPTER V
The future
Slide 43
Slide 43 text
Merge proposal hasn’t happened yet.
Slide 44
Slide 44 text
Gutenberg is not a page builder,
customization comes in the next focus.
Slide 45
Slide 45 text
Exploring: a way to write create a block in
any framework.
Slide 46
Slide 46 text
Interactive blocks also on the frontend?
Slide 47
Slide 47 text
Starter kit and reusable scripts.
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
“
”
DAN ABRAMOV
If WordPress were to adopt React, it would
make sense for it to also provide a zero-
configuration build environment. We are
happy to offer some of the packages we
developed as part of Create React App for
reuse.
wpcouple.com/interview-react-team-facebook-wordpress-gutenberg/
Slide 50
Slide 50 text
Generate blocks with WP-CLI:
wordpress.org/gutenberg/handbook/blocks/
generate/blocks-with-wp-cli/
Slide 51
Slide 51 text
Reusable scripts:
github.com/WordPress/packages/tree/master/
packages/scripts
Slide 52
Slide 52 text
WordPress packages (npm):
github.com/WordPress/packages
Slide 53
Slide 53 text
CHAPTER VI
Get involved
Slide 54
Slide 54 text
Learn more:
wordpress.org/gutenberg
Slide 55
Slide 55 text
Documentation:
wordpress.org/gutenberg/handbook/
Slide 56
Slide 56 text
Get the plugin:
wordpress.org/plugins/gutenberg/
Slide 57
Slide 57 text
Help with issues:
github.com/WordPress/gutenberg/issues
Slide 58
Slide 58 text
Join the conversation:
#core-editor, wed 14:00 UTC
Slide 59
Slide 59 text
Come find me, let’s talk Gutenberg
Slide 60
Slide 60 text
Thanks, any questions?
Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl