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
   

   View Slide

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.
   

   View Slide

3. @marktimemedia
   A brief history
   of themes
   

   View Slide

4. @marktimemedia
   Themes as cohesive templates
   Theme
   look & feel
   & structure
   Content
   words & images
   & media
   Plugins
   functionality
   

   View Slide

5. “Design
   Dictator”
   What was the role of
   a theme designer?
   

   View Slide

6. @marktimemedia
   Websites begin
   to do more
   

   View Slide

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
   

   View Slide

8. @marktimemedia
   What we tried:
   Widgetized
   themes
   Heavy
   reliance on
   shortcodes
   Custom fields &
   Custom editor
   experiences
   Customizer
   & options
   based
   themes
   Third party
   page builders
   

   View Slide

9. @marktimemedia
   The rise of the
   block-based
   paradigm
   

   View Slide

10. @marktimemedia
    The block editor
    has been part of
    WordPress core
    since the end of
    2018 (5.0)
    

    View Slide

11. @marktimemedia
    So much has happened in
    WordPress theme & content
    management since the last
    time we were all together
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

14. @marktimemedia
    WordPress from 2020–2022
    Block patterns (5.5), including
    Query Loop block options
    Block directory & Pattern directory
    

    View Slide

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
    

    View Slide

16. @marktimemedia
    Where WordPress is going:
    https://wordpress.org/about/roadmap/
    

    View Slide

17. @marktimemedia
    What is the purpose
    of a modern
    WordPress theme?
    

    View Slide

18. “Creative
    Curator”
    What does a theme designer do?
    

    View Slide

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
    

    View Slide

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?
    

    View Slide

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?
    

    View Slide

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?
    

    View Slide

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/
    

    View Slide

24. @marktimemedia
    Creating Systems with
    ATOMIC DESIGN
    https://bradfrost.com/
    ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
    

    View Slide

25. @marktimemedia
    

    View Slide

26. @marktimemedia
    ATOMS
    THE SMALLEST BUILDING BLOCKS
    

    View Slide

27. @marktimemedia
    https://madebymike.github.io/html5-periodic-table/
    

    View Slide

28. @marktimemedia
    http://demo.patternlab.io
    

    View Slide

29. @marktimemedia
    MOLECULES
    UNIQUE, REPEATABLE
    COMBINATIONS OF ATOMS
    

    View Slide

30. @marktimemedia
    http://demo.patternlab.io
    

    View Slide

31. @marktimemedia
    ORGANISMS
    MOLECULES COMING TOGETHER
    ALLOW ACTION
    

    View Slide

32. @marktimemedia
    http://demo.patternlab.io
    

    View Slide

33. About Blog Contact Login
    Contact Login
    About Blog
    About Blog Contact
    Search Login
    

    View Slide

34. @marktimemedia
    TEMPLATES
    ORGANISMS TOGETHER BECOME
    LAYOUTS
    

    View Slide

35. @marktimemedia
    http://demo.patternlab.io
    About Blog Contact
    Search Login
    

    View Slide

36. @marktimemedia
    PAGES
    TEMPLATES WITH SPECIFIC
    CONTENT
    

    View Slide

37. @marktimemedia
    http://demo.patternlab.io
    

    View Slide

38. Blocks, FSE, &
    The Atomization of
    WordPress Themes
    https://fullsiteediting.com/
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

44. @marktimemedia
    SETTINGS
    theme.json
    settings
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

48. @marktimemedia
    ATOMS
    theme.json
    element
    styles
    Generates CSS styles for specific blocks
    and block elements
    styles/elements
    button, caption,
    headings, links
    

    View Slide

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/
    

    View Slide

50. @marktimemedia
    MOLECULES
    theme.json
    block styles
    Generates CSS styles for specific blocks
    and block elements
    styles/blocks
    

    View Slide

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
    

    View Slide

52. @marktimemedia
    ORGANISMS
    PHP
    Template
    parts
    Headers, footers, sidebars, sections,
    articles, comments
    • Reusable content areas included within
    different PHP templates
    

    View Slide

53. @marktimemedia
    ORGANISMS
    FSE
    template
    parts
    Headers, footers, and other reusable
    content areas
    • Selectable in the Site Editor
    

    View Slide

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
    

    View Slide

55. @marktimemedia
    ORGANISMS
    Block
    patterns
    

    View Slide

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
    

    View Slide

57. @marktimemedia
    ORGANISMS
    Reusable
    blocks
    

    View Slide

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
    

    View Slide

59. @marktimemedia
    TEMPLATES
    PHP
    templates
    

    View Slide

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
    

    View Slide

61. @marktimemedia
    TEMPLATES
    FSE
    templates
    

    View Slide

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
    

    View Slide

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
    

    View Slide

64. @marktimemedia
    MULTIPLE ELEMENTS
    json style variations &
    custom global styles
    

    View Slide

65. @marktimemedia
    Concerns &
    Considerations
    

    View Slide

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/
    

    View Slide

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?
    

    View Slide

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 ?
    

    View Slide

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/
    

    View Slide

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?
    

    View Slide

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
    

    View Slide

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:
    

    View Slide

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/
    

    View Slide

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!
    

    View Slide