Slide 1
Slide 1 text
Building sites
with Gutenberg
Matthew Haines-Young
Slide 2
Slide 2 text
How do I add
support for
Gutenberg to
my themes?
Slide 3
Slide 3 text
You don’t really
need to do anything!
Most things will work
as before.
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
Opt-in Features
Some new features
require you to
register support in
your theme code.
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Case study:
Matthews Food Blog.
Slide 10
Slide 10 text
● Theme from WordPress.org - McLuhan by Anders Noren
● Create a child theme.
● Add theme support for wide aligned blocks.
● Add custom CSS for new block alignments
● Test compatibility of all core blocks.
What did I do?
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Create child theme
functions.php
style.css
Slide 13
Slide 13 text
functions.php
● Add theme support for
wide aligned blocks.
● Load a custom
CSS file.
Slide 14
Slide 14 text
● Full width for
content area.
● Max width and center
align all child elements.
● Wider max-width for full
and wide
aligned blocks.
style.css
Slide 15
Slide 15 text
● Setting the widths for
left/right aligned images
was a bit tricky!
style.css
Slide 16
Slide 16 text
style.css
● Add some styles for
videos. I stole these
styles from those
Gutenberg uses in the
admin.
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Case study:
Human Made Website
Slide 19
Slide 19 text
● The style of Gutenberg is nice, but quite different
from my site.
● But you can load a custom CSS file in the admin.
● Use this to add custom styles to make the editor
interface look more like the actual site.
● Best to keep it simple. Fonts, links, colours etc.
Make the editor look like the
front end of the site.
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
● Load a custom CSS file.
● Use wp_enqueue_style
exactly as you would
normally.
● Hook in on correction
action.
● Set wp-editor as
dependency to ensure
correct load order.
functions.php
Slide 22
Slide 22 text
● Add custom styles to
this file.
● Note your styles affect
the whole page!
● Target the visual editor
element to restrict your
custom styles to the
editor only.
gutenberg.css
Slide 23
Slide 23 text
Add theme colour palette.
● Colour palette used in various places by the new editor.
e.g. when selecting button background colours.
● You can register a custom colour palette to make it easy
to select the correct brand/theme colours.
● Disable use of custom colours.
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
● Disable support for
custom colours.
● Add colour palette for
brand colours.
functions.php
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
● You can register a block template for a post type.
● Each time a new post is created, it will be pre-populated
with the blocks defined in the template.
● Lock the template to prevent users moving these blocks
and adding or moving blocks.
● Or just restrict adding of new blocks.
Post type page templates
Slide 28
Slide 28 text
● Get post type object
● Add template property
● Set blocks
● Optionally set
template_lock to all
or insert
● You can also do this
when registering you
post type.
functions.php
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
● You can register completely custom blocks
● These are defined in JavaScript.
● Gutenberg uses React.
Add Custom Blocks
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
● Register a block.
● Title, desc, icon,
category.
● Define attributes
supported
● Edit component
● Save component
gutenberg.js
Slide 33
Slide 33 text
We already had
PHP templates.
● Core blocks render everything in JS.
● But we already had PHP templates. We wanted to
reuse them.
● Solution: you can register blocks in PHP, and
specify a render callback function.
Slide 34
Slide 34 text
● Register a block in PHP
● Register attributes.
● Specify a render callback
function.
functions.php
Slide 35
Slide 35 text
● Render callback should
return HTML string.
● Receives array of
registered block
attributes.
functions.php
Slide 36
Slide 36 text
● If you render in PHP,
your save component
can just return null
Gutenberg.js
Slide 37
Slide 37 text
● Gutenberg includes a lot of reusable components you can
use in your own custom blocks.
○ e.g. Rich-Text, MediaUpload etc.
● But I really wanted something for selecting posts.
● I built a plugin that adds a media-modal-like interface for
selecting posts.
● Pick single or multiple posts to be included in your block.
● https://github.com/humanmade/hm-gutenberg-tools
● Also includes a few other reusable/helper components
○ e.g. Sidebar control wrappers for links, posts, media etc.
Post Select UI
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
● WP CLI has added a command to generate basic block code
wp scaffold block
● Create-guten-block is a Create React App like project for
working developing Gutenberg blocks.
Other Tools
Slide 40
Slide 40 text
● Great tutorials on the Gutenberg handbook cover how to
create custom blocks.
https://wordpress.org/gutenberg/handbook/blocks/
● Zac Gordon has an online course on working with gutenberg
- he’s offered 40% to all WP leeds attendees.
https://gutenberg.courses/wpleeds/
Interested in learning more?
Slide 41
Slide 41 text
● Custom blocks are not trivial!
● Are they portable between themes?
● Maybe plugins can offer the functionality that I need
without having to build custom blocks!
Do I really need custom blocks?
Slide 42
Slide 42 text
● Popular plugins will add their own blocks.
○ e.g. Contact form plugins.
● Plugins to add common blocks
○ e.g. Maps, pricing tables etc.
● Plugins for advanced usage
○ Gutenberg Custom Fields - UI for creating page templates for
custom post types.
○ Reusable blocks widget.
● Future plugins might make creating custom blocks easier
Plugins
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
The Future
Slide 48
Slide 48 text
● Think in “blocks” rather than “pages”.
● New tools will appear to make your life easier
● Gutenberg will become more extensible.
● Will open up lots of new possibilities.
What will the future look like?