Slide 1
Slide 1 text
How Theme Developers
Should Approach Full Site
Editing
casabona.org/fse
Joe Casabona
Slide 2
Slide 2 text
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…
Slide 3
Slide 3 text
A funny thing happened
on that train ride…
Slide 4
Slide 4 text
Walt Created
Mickey Mouse
Slide 5
Slide 5 text
Being Able to Pivot and
adapt are insanely
important in development,
and business
Slide 6
Slide 6 text
As a kicker…
The Walt Disney
Company got the rights
to Oswald back in 2006.
Slide 7
Slide 7 text
Full Site Editing is not
the end of Themes.
Slide 8
Slide 8 text
@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.
Slide 9
Slide 9 text
StudioPress: Decisions, not options
Slide 10
Slide 10 text
Eksell: Some of Both
Slide 11
Slide 11 text
Astra: Options, not Decisions
Slide 12
Slide 12 text
New Mantra*:
Decisions Not Options.
*Same as the old mantra.
Slide 13
Slide 13 text
Put a different
way:
Let the block editor
be where options live.
Slide 14
Slide 14 text
@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/
Slide 15
Slide 15 text
Demo Time!
Slide 16
Slide 16 text
What You Should Think
about if you create
Themes
Slide 17
Slide 17 text
@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.
Slide 18
Slide 18 text
@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.
Slide 19
Slide 19 text
@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.
Slide 20
Slide 20 text
@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
Slide 21
Slide 21 text
@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
Slide 22
Slide 22 text
Pro Version Idea:
Free Theme with Premium
plugin for additional block
patterns and page templates.
Slide 23
Slide 23 text
Wrapping Up
Slide 24
Slide 24 text
Think About
• Typography and Fonts
• Colors and Color Palettes
• Speed and Responsiveness
• User Experience
• Robust templates and block patterns
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
Joe Casabona
@jcasabona - casabona.org/fse/