$30 off During Our Annual Pro Sale. View Details »

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

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 Hunt

September 10, 2022
Tweet

More Decks by Michelle Schulp Hunt

Other Decks in Design

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
    [email protected]
    @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