How Theme Developers Should Approach Full Site Editing casabona.org/fse Joe Casabona

This is Oswald • Create by Walt Disney in the 1920s • Disney partnered with Universal 
 to distribute Oswald cartoons • Universal retained the rights. • They eventually edged out Walt in a NYC meeting. • Walt returned to LA by train, totally dejected…

A funny thing happened on that train ride…

Walt Created Mickey Mouse

Being Able to Pivot and adapt are insanely important in development, and business

As a kicker… The Walt Disney Company got the rights to Oswald back in 2006.

Full Site Editing is not the end of Themes.

@jcasabona Current Theme Landscape • There are many different types of themes. • We can break them into 3 categories • Decisions, Not Options. • Some Decisions with Options. • Options, not Decisions.

StudioPress: Decisions, not options

Eksell: Some of Both

Astra: Options, not Decisions

New Mantra*: Decisions Not Options. *Same as the old mantra.

Put a different way: Let the block editor be where options live.

@jcasabona What is Full Site Editing? The goal of the full site editing project is to utilize the power of Gutenberg’s block model in an editing experience beyond post or page content. In other words, the idea is to make the entire site customizable. This editing mode will understand the structure of the site and provide ways to modify global elements like headers and footers. https://make.wordpress.org/design/handbook/focuses/full-site-editing/

Demo Time!

What You Should Think about if you create Themes

@jcasabona Typography • Spend a lot of time on the typography • Not just the font faces, but spacing, line heights, letter spacing, etc. • Font selection can make or break a site, so help your users make it. • Don’t give options to choose a font. Decisions, not options.

@jcasabona Color • Pick good color schemes - maybe offer options here for branding purposes. • Maybe write a function to fi gure out good color schemes based on a brand color. • Support dark mode! • Run this through the accessibility ringer. Make sure you have good contrast.

@jcasabona Speed • Lean on the block editor for speed. • Don’t load too many resources • Spend a lot of time on critical CSS, optimizing your code and markup, and images • It should load quickly, even on 3G.

@jcasabona User Experience (UX) • Since you don’t need to spend time building layouts, you can really test the theme to see how user-friendly it is. • Do lots of mobile testing and speed tests • Check to make sure buttons and links are obvious (underline links!!!) • Test for all sorts of content and conditions

@jcasabona Help Users with Templates • Create a robust set of block patterns to give users a starting point • Page Templates are fl exible and editable with FSE, so create a few to help users get started

Pro Version Idea: Free Theme with Premium plugin for additional block patterns and page templates.

Wrapping Up

Think About • Typography and Fonts • Colors and Color Palettes • Speed and Responsiveness • User Experience • Robust templates and block patterns

We keep moving forward, opening up new doors and doing new things, because we're curious … and curiosity keeps leading us down new paths. - Walt Disney

Joe Casabona @jcasabona - casabona.org/fse/