Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Sites with Gutenberg

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.


Matthew Haines-Young

February 27, 2018


  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.
  4. None
  5. None
  6. None
  7. Opt-in Features Some new features require you to register support

    in your theme code.
  8. None
  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?
  11. None
  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.
  17. None
  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.
  20. None
  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.
  24. None
  25. • Disable support for custom colours. • Add colour palette

    for brand colours. functions.php
  26. None
  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
  29. None
  30. • You can register completely custom blocks • These are

    defined in JavaScript. • Gutenberg uses React. Add Custom Blocks
  31. None
  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
  38. None
  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
  43. None
  44. None
  45. None
  46. None
  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?