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

More Decks by Matthew Haines-Young

Other Decks in Technology


  1. • 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?
  2. • Full width for content area. • Max width and

    center align all child elements. • Wider max-width for full and wide aligned blocks. style.css
  3. style.css • Add some styles for videos. I stole these

    styles from those Gutenberg uses in the admin.
  4. • 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.
  5. • 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
  6. • 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
  7. 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.
  8. • 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
  9. • 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
  10. • You can register completely custom blocks • These are

    defined in JavaScript. • Gutenberg uses React. Add Custom Blocks
  11. • Register a block. • Title, desc, icon, category. •

    Define attributes supported • Edit component • Save component gutenberg.js
  12. 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.
  13. • Register a block in PHP • Register attributes. •

    Specify a render callback function. functions.php
  14. • Render callback should return HTML string. • Receives array

    of registered block attributes. functions.php
  15. • 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
  16. • 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
  17. • 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?
  18. • 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?
  19. • 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
  20. • 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?