The Future of Themes: Designing for the Block Editor and Beyond

When designing WordPress themes, one of the biggest challenges stems from a core component of WordPress itself: the ability for site owners to change, modify, and build new content themselves. This simple yet powerful capability was a driving force behind the adoption and popularity of WordPress, but theme designers are faced with a difficult task: designing for content and functionality that doesn’t yet exist.

As content and functionality become even more modular thanks to advances like the block editor, and as we look ahead to the adoption of Full Site Editing, theme designers will have to accommodate even more flexible ways of visualizing and presenting the information. How do we anticipate and accommodate the needs of a constantly evolving website while providing visual solutions that are clean, thoughtful, and consistent?

We will walk through the entire design thinking process as it relates to themes, and you’ll leave with a thorough checklist of steps and tools for designing themes that support WordPress core functionality, custom templates and content, common plugins, and an array of standard and custom Gutenberg blocks. This process is useful both for custom theme builds, and designing themes for sale as a product.

Transcript

1. THE FUTURE OF THEMES Designing for the Block Editor and Beyond
2. @marktimemedia I Design & Build DIGITAL INTERFACES HI, I’M MICHELLE. Rockstar at saying stuff. Adorable badass. Carefully curated spontaneity & meticulously organized chaos. Accidental fitness buff. The Anxious Alicorn.
3. @marktimemedia A brief history of themes
4. @marktimemedia Themes as cohesive templates Theme look & feel & structure Content words & images & media Plugins functionality
5. “Design Dictator” What was the role of a theme designer?
6. @marktimemedia Websites begin to do more
7. @marktimemedia As a result: Managing evolving layouts and content Landing pages and bespoke content Lack of options to create unique layouts without knowing code Complex functionality End user frustration at not being able to make "simple" changes
8. @marktimemedia What we tried: Widgetized themes Heavy reliance on shortcodes Custom fields & Custom editor experiences Customizer & options based themes Third party page builders
9. @marktimemedia The rise of the block-based paradigm
10. @marktimemedia The block editor has been part of WordPress core since the end of 2018 (5.0)
11. @marktimemedia So much has happened in WordPress theme & content management since the last time we were all together
12. @marktimemedia Gutenberg Phase 2 https://wordpress.org/about/roadmap/ WordPress from 2020–2022 7 major releases 5.4-6.0 2 new themes Twenty Twenty One and Twenty Twenty Two (FSE)
13. @marktimemedia WordPress from 2020–2022 More core blocks, including site-level blocks More detailed block styling options, including typography, color, spacing, layout Block widgets
14. @marktimemedia WordPress from 2020–2022 Block patterns (5.5), including Query Loop block options Block directory & Pattern directory
15. @marktimemedia The introduction of theme.json & a new global styles/variable paradigm (5.8) • with support for Child Themes (5.9) • and Style variations (6.0) Full Site Editing (5.9) supporting html templates and template parts WordPress from 2020–2022
16. @marktimemedia Where WordPress is going: https://wordpress.org/about/roadmap/
17. @marktimemedia What is the purpose of a modern WordPress theme?
18. “Creative Curator” What does a theme designer do?
19. @marktimemedia Our job as designers and builders of themes is to provide a thorough set of thoughtfully curated opinions, patterns, styles, layouts, and templates. • Global styles of color, typography, spacing • Styling for each core block and html element • Styling rules for combinations of elements within layouts • Guiding our end user to lay out content or create new combinations
20. @marktimemedia We have the power to decide how to curate the content building experience to enable guided creativity. • Do we need full site editing or just content editing? • Do we need to support all block style options, or should we provide curated options? • How much control do we need to give the end user over changing the look and feel of the overall site?
21. @marktimemedia We can extend and enhance the block editing experience by providing additional styles, patterns, and controls for existing blocks. • Do we want to create pre-built patterns or pre-populated blocks for our content? Should these be changeable or fixed? • Do we want to extend any core blocks with custom styles or controls? • Do we want to provide multiple sets of styles? • Are we including any styles for specific third-party plugins or blocks?
22. @marktimemedia Our job, then, is not to create a single pixel- perfect solution, but to create a comprehensive design system where many future solutions can flourish. • How will design decisions impact current content? • How will design decisions impact future content?
23. "A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications." https://www.invisionapp.com/inside-design/guide-to-design-systems/
24. @marktimemedia Creating Systems with ATOMIC DESIGN https://bradfrost.com/ ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
25. @marktimemedia
26. @marktimemedia ATOMS THE SMALLEST BUILDING BLOCKS
27. @marktimemedia https://madebymike.github.io/html5-periodic-table/
28. @marktimemedia http://demo.patternlab.io
29. @marktimemedia MOLECULES UNIQUE, REPEATABLE COMBINATIONS OF ATOMS
30. @marktimemedia http://demo.patternlab.io
31. @marktimemedia ORGANISMS MOLECULES COMING TOGETHER ALLOW ACTION
32. @marktimemedia http://demo.patternlab.io
33. About Blog Contact Login Contact Login About Blog About Blog Contact Search Login
34. @marktimemedia TEMPLATES ORGANISMS TOGETHER BECOME LAYOUTS
35. @marktimemedia http://demo.patternlab.io About Blog Contact Search Login
36. @marktimemedia PAGES TEMPLATES WITH SPECIFIC CONTENT
37. @marktimemedia http://demo.patternlab.io
38. Blocks, FSE, & The Atomization of WordPress Themes https://fullsiteediting.com/
39. @marktimemedia Standard/hybrid theme theme.json (v1 or v2) functions.php index.php style.css editor-style.css php content templates (template hierarchy) block templates for custom post types (php) /inc (php) /assets (js/css/img) /template-parts (php template parts) /patterns (html block patterns as php, defined in theme.json v2) or via register_block_pattern (php) Full Site Editing theme theme.json (v2) functions.php index.php style.css editor-style.css /templates (html templates) /parts (html template parts) /patterns (html block patterns as php) /inc (php) /assets (js/css/img) /styles (additional json files)
40. @marktimemedia Styling with style.css & editor-style.css Traditional method for styling themes • both are required to enable the frontend to match the editor • style.css is enqueued for the end user (styling the website) • editor-style.css is enqueued in the editor (styling the block editor) • can be used on their own, or to supplement theme.json
41. @marktimemedia Styling with theme.json Style & variable generation tool • loaded in both frontend and editor • generates CSS variables & CSS styles • can be used alongside style.css in a hybrid theme • responsible for most* styles in FSE https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/ https://developer.wordpress.org/themes/advanced-topics/theme-json/ *the intent is for all styles, but we aren’t quite there yet (and may never be there)
42. @marktimemedia Mapping Atomic Design to WordPress Components • Atoms variables html elements • Molecules simple blocks • Organisms complex blocks template parts reusable blocks Layout • Templates page & post content full-site views • Pages custom content layouts custom views Options • Settings editor settings block options
43. @marktimemedia SETTINGS theme.json settings Determines options available for customizing block designs within the block editor • color controls color picker, gradients, duotones, backgrounds, text, links • typography controls font size, family, spacing, line height, decoration, drop cap • border controls size, radius, color, style • spacing controls margin, padding, gap
44. @marktimemedia SETTINGS theme.json settings
45. @marktimemedia SETTINGS Block settings Custom block styles and controls for existing core or third-party blocks • custom block styles defined via php styled via css • custom block controls defined via react
46. @marktimemedia ATOMS theme.json variables Generates CSS variables presets (defines preset variables) --wp--preset--{category}--{slug} • color palette, gradients, duotone • typography font sizes, font families • layout regular and wide size • spacing units
47. @marktimemedia ATOMS theme.json variables Generates CSS variables custom (creates custom variables) --wp--custom--{nested}--{object-keys} • user defined • reference in theme.json styles or in style.css
48. @marktimemedia ATOMS theme.json element styles Generates CSS styles for specific blocks and block elements styles/elements button, caption, headings, links
49. @marktimemedia MOLECULES Simple blocks • typography (quotes, lists) • interaction (buttons, forms) • embeds, links • images, audio, video, single media • post elements (author, meta, comment, summary, image, etc) • site nav elements (logos, taglines, menus, navigation, pagination, search) https://developer.wordpress.org/block-editor/reference-guides/core-blocks/
50. @marktimemedia MOLECULES theme.json block styles Generates CSS styles for specific blocks and block elements styles/blocks
51. @marktimemedia ORGANISMS Complex blocks Blocks built of many other blocks • Layout blocks (groups, columns, rows) • Mixed media blocks (galleries, cover image, media/text, etc) • Widget blocks • Query blocks (multiple posts) • Comment blocks (multiple comments) • Other custom blocks
52. @marktimemedia ORGANISMS PHP Template parts Headers, footers, sidebars, sections, articles, comments • Reusable content areas included within different PHP templates
53. @marktimemedia ORGANISMS FSE template parts Headers, footers, and other reusable content areas • Selectable in the Site Editor
54. @marktimemedia ORGANISMS Block patterns Commonly used groups of core or custom blocks that can be preconfigured and inserted all at once • defined using register_block_pattern (traditional) or /patterns folder (FSE) • tagged, sortable, searchable
55. @marktimemedia ORGANISMS Block patterns
56. @marktimemedia ORGANISMS Reusable blocks Identical, updateable, and reusable content used across multiple pages • user generated within the WordPress content editor • when content is updated in one place, it updates everywhere the block is used • saved as a custom post type
57. @marktimemedia ORGANISMS Reusable blocks
58. @marktimemedia TEMPLATES PHP templates Both FSE and traditional themes follow the template hierarchy • Post-type block templates – defined block defaults which are pre- loaded onto empty posts in the editor • Page templates – traditional theme: php templates – FSE theme: registered in theme.json, added to /templates folder
59. @marktimemedia TEMPLATES PHP templates
60. @marktimemedia TEMPLATES FSE templates • Core templates (single, archive, page, etc) which include the entire website view (headers, footers, etc) • Can be created custom, or assembled out of FSE Template Parts
61. @marktimemedia TEMPLATES FSE templates
62. @marktimemedia Pages (and beyond) • Content created within the block editor, using blocks and patterns • Views rendered within the site, using FSE templates and template parts
63. @marktimemedia MULTIPLE ELEMENTS json style variations & custom global styles • Multiple json files within a single FSE theme • Saved in the /styles folder • Switch between different theme styles within the FSE styles dashboard • Edit or customize existing global theme styles • Predefined styles are a great option for commercial or variable themes
64. @marktimemedia MULTIPLE ELEMENTS json style variations & custom global styles
65. @marktimemedia Concerns & Considerations
66. @marktimemedia BREAKS & BETAS: Shipping software in a shifting landscape https://make.wordpress.org/core/2022/08/10/proposal-stop-merging-experimental-apis-from- gutenberg-to-wordpress-core/
67. @marktimemedia How do we address breaking changes? • How do we know when to use a new feature in a commercial or production site? • How do we continually monitor updates and new best practices more stringently than in past years? • How do we provide ongoing support or updates if we choose to use new features?
68. @marktimemedia Where and how should we be defining our styles? • Should we use theme.json or style.css for a specific item? • Do we build alongside (or override) core styles, or fully replace them with our own? • How do we deal with issues of battling specificity ?
69. @marktimemedia Are themes supposed to be unique or standardized? • When content and design are mixed, what happens when themes change? • How do we address incompatible style issues? https://richtabor.com/standardizing-theme-json-colors/
70. @marktimemedia How long is a theme supposed to last? • Are we going to be changing themes or do we just change options within a theme? • Are we just going to be loading new json files, blocks, and patterns over an existing theme?
71. @marktimemedia How do we learn all of this new theme technology? • New tooling involved (template markup, json, react) • Modifying anything via JS will require compiling/build tools • Less transparency into core code (learning by reading) due to React scripts being compiled and minified* * You can use define('SCRIPT_DEBUG', true) in wp- config to view developer (unminified) versions of scripts
72. Theme design may be evolving, but it is still a crucial part of the WordPress ecosystem. Let’s help people build creative content! Key Takeaway:
73. @marktimemedia Additional Resources Design Systems • https://elementor.com/blog/design-system • https://www.uxpin.com/studio/design-systems/create- component-based-websites-with-design-systems/ • https://webdevstudios.com/2020/02/20/design-systems- for-wordpress/ • https://www.invisionapp.com/inside-design/guide-to-design- systems/ Block Editor • https://fullsiteediting.com/ • https://wordpress.org/support/article/site-editor/ • https://make.wordpress.org/core/2022/01/07/state-of-the- customizer-with-block-themes-in-wordpress-5-9/ • https://make.wordpress.org/core/2022/01/10/wordpress-5- 9-field-guide/ • https://css-tricks.com/a-deep-introduction-to-wordpress- block-themes/ • https://developer.wordpress.org/block-editor/how-to- guides/themes/theme-json/ • https://developer.wordpress.org/themes/advanced- topics/theme-json/
74. @marktimemedia QUESTIONS? Here’s how to get in touch: Michelle Schulp michelle@marktimemedia.com @marktimemedia michelleschulp.pink bit.ly/future-of-themes-2022 WHERE TO FIND ME NEXT: NOW: See you at the social! ONLINE: WordPress Slack Twitter IN PERSON: Whatever is next!