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

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

Michelle Schulp
September 10, 2022

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.

Michelle Schulp

September 10, 2022
Tweet

More Decks by Michelle Schulp

Other Decks in Design

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!