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

What Full Site Editing Means for Page Builders

Joe Casabona
October 13, 2021

What Full Site Editing Means for Page Builders

Joe Casabona

October 13, 2021
Tweet

More Decks by Joe Casabona

Other Decks in Design

Transcript

  1. What Full Site Editing
    Means for Page Builders
    Joe Casabona - joe.casa/pbs21

    View full-size slide

  2. War of the Worlds, as told by Orson Welles, 1938

    View full-size slide

  3. Video Killed the Radio Star, The Buggles 1979(also 1981)

    View full-size slide

  4. Radio isn’t Dead!

    View full-size slide

  5. Audio Dramas are back
    thanks to podcasts!

    View full-size slide

  6. Will the Block Editor
    Kill Page Builders?

    View full-size slide

  7. It’s Really Up to Page
    Builders. Here’s how
    they can Survive.

    View full-size slide

  8. What We’ll Cover
    • What is Full Site Editing and how does it
    work?


    • Pros and Cons of Block Editor vs. Page
    Builders


    • How Page Builders will bene
    fi
    t


    • How Page Builders can work with Full Site
    Editing

    View full-size slide

  9. How FSE Works

    View full-size slide

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

    View full-size slide

  11. @jcasabona
    FSE Features
    • Page Template Editor


    • Blocks in Widget Areas


    • SOME site and query loop
    blocks
    Currently in Core Currently in Plugin
    • Global Styles


    • Template Parts


    • Full Template Editing

    View full-size slide

  12. Demo!
    Time for a Quick Demo…
    Let's do it!

    View full-size slide

  13. Pros and Cons

    View full-size slide

  14. Pros of Page Builders
    • Rows


    • More design elements


    • More mature products


    • Lots of options

    View full-size slide

  15. Cons of Page Builders (vs. Gutenberg)
    • Not as performant


    • Generally bloated (markup, assets)


    • Not part of Core, so more dependencies


    • Generally not as accessible

    View full-size slide

  16. Will FSE Kill

    Page Builders?

    View full-size slide

  17. No!

    But it will change
    how we use them.

    View full-size slide

  18. How will Page Builders Benefit?
    • More competition = better products.


    • They’ll be able to share more elements from
    them theme without custom interfaces

    View full-size slide

  19. How they can
    work with FSE

    View full-size slide

  20. Imagine This
    • No more hunting for the perfect theme


    • No more setting theme defaults again in
    page builders


    • No more killing template elements to make
    page builders work

    View full-size slide

  21. With FSE…
    • Page builders can tap into theme.json and
    share resources


    • There can be more of a focus on actual page
    design and not design + design elements +
    structure


    • It will be easier to style things universally
    across tools and elements that use blocks

    View full-size slide

  22. Page Builders served an
    important purpose when we
    only had the classic
    editor.

    View full-size slide

  23. Example: Kadence Blocks

    View full-size slide

  24. Right now Page
    Builders seem like
    Radio…

    View full-size slide

  25. But from here, they can
    evolve into a new format,
    just like audio dramas
    and podcasting.

    View full-size slide

  26. Joe Casabona


    @jcasabona - joe.casa/pbs21

    View full-size slide

  27. Free 1 month
    membership to
    Creator Courses!
    Visit joe.casa/pbs21

    View full-size slide