Building Sites with Gutenberg

How to make your themes ready for Gutenberg, as well as a broader look at what it will be like building sites with Gutenberg in the future.

Transcript

1. Building sites with Gutenberg Matthew Haines-Young
2. How do I add support for Gutenberg to my themes?
3. You don’t really need to do anything! Most things will work as before.
7. Opt-in Features Some new features require you to register support in your theme code.
9. Case study: Matthews Food Blog.
10. • 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?
12. Create child theme functions.php style.css
13. functions.php • Add theme support for wide aligned blocks. • Load a custom CSS file.
14. • Full width for content area. • Max width and center align all child elements. • Wider max-width for full and wide aligned blocks. style.css
15. • Setting the widths for left/right aligned images was a bit tricky! style.css
16. style.css • Add some styles for videos. I stole these styles from those Gutenberg uses in the admin.
18. Case study: Human Made Website
19. • 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.
21. • 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
22. • 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
23. 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.
25. • Disable support for custom colours. • Add colour palette for brand colours. functions.php
27. • 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
28. • 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
30. • You can register completely custom blocks • These are defined in JavaScript. • Gutenberg uses React. Add Custom Blocks
32. • Register a block. • Title, desc, icon, category. • Define attributes supported • Edit component • Save component gutenberg.js
33. 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.
34. • Register a block in PHP • Register attributes. • Specify a render callback function. functions.php
35. • Render callback should return HTML string. • Receives array of registered block attributes. functions.php
36. • If you render in PHP, your save component can just return null Gutenberg.js
37. • 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
39. • 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
40. • 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?
41. • 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?
42. • 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
47. The Future
48. • 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?