Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How Theme Developers Should Approach Full Site Editing

How Theme Developers Should Approach Full Site Editing

There's a lot of concern around full site editing and what that means for themes and theme creators. Are they even worth building anymore? Should all themes just be a blank slate? Will we only need a hand full of themes now?

NO! In-fact, good themes will be more important than ever now. Given the amount of flexibility the block editor and full site editing offer users, have well-designed themes with all the right guideposts is imperative.

So if you're a theme developer, or want to be one, here's what you should focus on.

Resources: https://casabona.org/fse/

Joe Casabona

July 08, 2021

More Decks by Joe Casabona

Other Decks in Design


  1. 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…
  2. @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.
  3. @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/
  4. @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.
  5. @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.
  6. @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.
  7. @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
  8. @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
  9. Think About • Typography and Fonts • Colors and Color

    Palettes • Speed and Responsiveness • User Experience • Robust templates and block patterns
  10. 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