THE FUTURE OF THEMES Designing for the Block Editor and Beyond

@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.

@marktimemedia A brief history of themes

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

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

@marktimemedia Websites begin to do more

@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

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

@marktimemedia The rise of the block-based paradigm

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

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

@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)

@marktimemedia WordPress from 2020–2022 More core blocks, including site-level blocks More detailed block styling options, including typography, color, spacing, layout Block widgets

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

@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

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

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

“Creative Curator” What does a theme designer do?

@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

@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?

@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?

@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?

"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/

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

@marktimemedia

@marktimemedia ATOMS THE SMALLEST BUILDING BLOCKS

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

@marktimemedia http://demo.patternlab.io

@marktimemedia MOLECULES UNIQUE, REPEATABLE COMBINATIONS OF ATOMS

@marktimemedia http://demo.patternlab.io

@marktimemedia ORGANISMS MOLECULES COMING TOGETHER ALLOW ACTION

@marktimemedia http://demo.patternlab.io

About Blog Contact Login Contact Login About Blog About Blog Contact Search Login

@marktimemedia TEMPLATES ORGANISMS TOGETHER BECOME LAYOUTS

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

@marktimemedia PAGES TEMPLATES WITH SPECIFIC CONTENT

@marktimemedia http://demo.patternlab.io

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

@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)

@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

@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)

@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

@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

@marktimemedia SETTINGS theme.json settings

@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

@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

@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

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

@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/

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

@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

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

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

@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

@marktimemedia ORGANISMS Block patterns

@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

@marktimemedia ORGANISMS Reusable blocks

@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

@marktimemedia TEMPLATES PHP templates

@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

@marktimemedia TEMPLATES FSE templates

@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

@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

@marktimemedia MULTIPLE ELEMENTS json style variations & custom global styles

@marktimemedia Concerns & Considerations

@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/

@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?

@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 ?

@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/

@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?

@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

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:

@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/

@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!