Successfully reported this slideshow.
Your SlideShare is downloading. ×

The Future of WordPress Themes & Gutenberg

Upcoming SlideShare
Contributing To WordPress
Contributing To WordPress
Loading in …3

Check these out next

1 of 44 Ad

The Future of WordPress Themes & Gutenberg

Download to read offline

What do WordPress themes look like once Gutenberg is merged in WordPress 5.0? While I don’t know all the answers, I do have some insights based on my experience as a theme developer at ThemeBeans.

What do WordPress themes look like once Gutenberg is merged in WordPress 5.0? While I don’t know all the answers, I do have some insights based on my experience as a theme developer at ThemeBeans.


More Related Content

Similar to The Future of WordPress Themes & Gutenberg (20)


Recently uploaded (20)

The Future of WordPress Themes & Gutenberg

  1. 1. WordPress Themes & Gutenberg with Rich Tabor
  2. 2. @richard_tabor
  3. 3.
  4. 4. I skate to where to puck is going to be, not where it has been. — Wayne Gretzky
  5. 5. WordPress Themes of Today
  6. 6. It’s a mess.
  7. 7. 1. One theme to rule them all. 2. Themes with page building built-in. 3. Themes compatible with specific page builders. 4. Theme lock-in. 5. You don’t know what you’re buying, ‘till you install it. 6. Disjointed WordPress experience.
  8. 8. WordPress Themes of Tomorrow
  9. 9. A Future of Blocks
  10. 10. ❖ Blocks are a fundamental shift in how content is created within WordPress. ❖ In today’s WordPress, there are a multitude of ways to add very similar content... like widgets and shortcodes.
  11. 11. Blocks to Replace Shortcodes
  12. 12. But it will...
  13. 13. ❖ Shortcodes output content without any UI ❖ Mystery meat ❖ Content blocks are the new shortcodes ❖ Blocks are shortcodes with a UI
  14. 14. Blocks to Replace Widgets & Widget Areas
  15. 15. ❖ Block API is more flexible than the Widgets API ❖ All widgets should should appear as blocks ❖ There’s no difference between blocks and widgets ❖ No need for widget visibility settings
  16. 16. Block Templates
  17. 17. ❖ Pre-defined templates of blocks ❖ Blocks can have predefined attributes, placeholder content, and be static or dynamic. ❖ Block templates specify a default initial state for an editor session.
  18. 18. ❖ Custom post types can register templates ❖ Block templates for posts and pages too ❖ Locking Block Templates ❖ All — Prevents all operations ❖ Insert — Enable reordering, but prevents inserting new blocks
  19. 19. Block Templates are a Work in Progress
  20. 20. …but the Future is Bright
  21. 21. The key thing with page templates is that we want all of it to be potentially covered by blocks, not just the_content. — Matias Ventura
  22. 22. As soon as we expand the scope, include more blocks (site title, header, menus, widgets, etc), and describe a way to store page templates as a list of blocks, Gutenberg would be fundamentally capable of building an entire website. — Matias Ventura
  23. 23. What About Page Builders?
  24. 24. Page Builders, as we know them today, are on borrowed time
  25. 25. ❖ Nobody wants a shortcode soup ❖ Nobody wants the complex interfaces authors build to hide/manage them ❖ Why would folks accept with difficult experiences when we can have a familiar (and great) native experience everywhere?
  26. 26. WordPress Themes of the Future
  27. 27. The future of themes can become more about empowering users to work on their vision, instead of always having to learn how to theme. — David A. Kennedy, Automattic
  28. 28. Companion Block Plugins
  29. 29. ❖ Blocks built to expand your theme’s purpose ❖ Example: A simple blog theme may have ad placement blocks, blogroll posts blocks, call to actions, etc ❖ Themes can also support third-party blocks by adding custom styling
  30. 30. Should custom blocks be built into themes?
  31. 31. Nope.
  32. 32. ❖ When a block no longer exists, the HTML markup is spit out, instead of a [button color=””/] code ❖ You still lose any subjective styles that your theme has applied — but objective styles should remain (as they should be built into themes)
  33. 33. Styling Gutenberg
  34. 34. ❖ You’ll likely need additional styles to resolve conflicts ❖ Gutenberg loads its own styles for many blocks (buttons, block quotes, images, galleries, cover images, horizontal rules, etc)
  35. 35. ❖ Do not load the entire frontend stylesheet into the Gutenberg editor ❖ Prepend with .edit-post-visual-editor ❖ SASS comes in handy
  36. 36. Resources
  37. 37. ❖ ❖ ❖
  38. 38. Questions?

Editor's Notes

  • Hi my name is Rich Tabor

    I’m a theme developer, 7 years, ThemeBeans

    Also review themes at ThemeForest

    Naomi reached out to me

    I’ve been writing, talking and sharing a lot about gutenberg lately — so much that my wife has to ask me if im actually working on everything else. haha
  • I blog at

    Ive been writing a lot lately about gutenberg topics
  • Gutenberg is not being developed to surpass the competition. Not the primary goal.

    Gutenberg aims to provide a content editing experience for the next 5-10 years.

    So to understand where themes are headed. We need to look at where they stand today.
  • X, Avada — all trying to solve isues that WP could not solve,

    But they are all doing it differently

    Some themes have page building built in

    5. If youre not super techinal, you may not have staging servers or local development environments.

    6. All these points lead to a disjointed WP XP.

    So that’s where WP themes are today.
  • Some of you may be thinking…
  • That will never ever ever happen…

  • But it will
  • For example, contact form 7,

    Back to our CF7 example,
  • There’s no need for admin pages or shortcodes. It’s all there.
  • If you think about it, widgets are “blocks” of content already.
  • Im building a site for a school system.

    So now that we understand where shortcodes and widgets are headed. Let’s look at tempates.
  • Adjusting templates within the editor in the sky

    Another cool thing is that folks can build out their templates with blocks.
  • It makes it so almost anyone can go in and do it.
  • More facts about templates

    Portfolio blocks and plugin example.

    How to stop clients from breaking it

    You can also lock templates — esp good for clients (all and insert options).
  • Block templates are still a WIP
  • There’s a lot more potential than just templating out content the way that themes currently do it.

    Matias Ventura, the technical lead for the WordPress Gutenberg project mentioned the following on GitHub:
  • Let’s think about this for a moment.

    Block templates will likely push beyond the content “box”, becoming whole-page editors.

    Headers, footers, what we know as “widget areas” — all of it could be set as templates.

    Footer block may have nested columns.
  • Again, this is from the technical lead of the WordPress Gutenberg project. That’s a big deal

    So after all this talk about page editing...
  • Say goodbye to custom theme-specific widgets.

    And to limiting page templates.
  • The goal is to get the theme out of the way, and work with Gutenberg to empower users.

    To get rid of the hurdles.

    The future of WP themes holds well for themes to include blocks
  • I foresee a future of WordPress themes that tie in companion block plugins which empower users to properly flesh out their ideas.

    So what are companion block plugins?
  • A lot of themes are going to build companion blocks.

    If they’re done right, they can be used outside of the theme as well.
  • Blocks should really apply objective styles — whereas subjective design choices should be left to the theme.
  • A lot of chatter has been going on surrounding custom blocks and whether or not they should be included in WordPress themes — or built as separate block plugins.

    So, should custom blocks be built into themes?
  • Nope.

    For the exact reasons that shortcodes are generally not supposed to be built into themes. Once you switch a theme, you loose everything.

    Now blocks are a bit different… (next slide)
  • The last bit I’ll talk about is styling gutenberg.

    When you first fire Gutenberg, it’s subjectively styled.
  • Heres an example of styling the editor -- and what not to do.