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

field_guide_2023.pdf

Michelle Schulp Hunt
August 26, 2023
130

 field_guide_2023.pdf

Michelle Schulp Hunt

August 26, 2023
Tweet

More Decks by Michelle Schulp Hunt

Transcript

  1. FIELD GUIDE
    to modern WordPress
    The independent theme developer’s

    View Slide

  2. @marktimemedia
    I
    Design
    &
    Build DIGITAL
    INTERFACES
    HI, I’M
    MICHELLE.
    Rockstar at saying stuff.
    Adorable badass.
    Carefully curated spontaneity.
    Meticulously organized chaos.
    The Anxious Alicorn.

    View Slide

  3. @marktimemedia
    THE HERO’S
    JOURNEY
    In which our hero
    embraces a disruption,
    faces challenges,
    and comes out changed

    View Slide

  4. @marktimemedia
    12 STAGES OF
    TRANSFORMATION
    IN 3 ACTS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    The
    Ordinary
    World Call of
    Adventure
    Refusal
    of the
    Call
    Tests,
    Allies,
    Enemies
    Crossing
    the First
    Threshold
    Meeting
    the
    Mentor
    Approach
    the
    Innermost
    Cave
    The
    Ordeal
    The
    Reward
    The Long
    Road Back
    Resurrection
    (Final Battle)
    Return
    with the
    Elixir
    DEPARTURE
    RETURN
    INITIATION
    Departure:
    Leaving the Ordinary World
    Initiation:
    The trials & tribulations of
    the Special World
    Return:
    Journey back to the
    Ordinary World

    View Slide

  5. THE
    ORDINARY
    WORLD
    The life of the
    independent
    theme developer

    View Slide

  6. @marktimemedia
    The independent theme developer
    ROLES
    Client Service
    Creation & Building
    Support & Consulting
    HR, Finance, Sales,
    Marketing, Janitorial…
    ROLES
    Design
    Consulting
    Development
    Support
    Marketing Finance
    Family Hobbies

    View Slide

  7. @marktimemedia
    The independent theme developer
    Fine-tuned workflows
    Custom suite of tools
    Knows what to do
    Able to get help
    SKILLS
    Plugins
    Custom Fields
    HTML
    CSS
    PHP
    Page Builders
    Dev Tools
    JS

    View Slide

  8. CALL TO ADVENTURE
    The release of a new suite of tools
    BLOCK EDITOR
    WP 5.0 (DEC 2018)
    FULL SITE EDITING
    WP 5.8 (JULY 2021)

    View Slide

  9. @marktimemedia
    The lure of adventure
    WYSIWYG interface
    Powerful content layout tools
    More options
    Faster page builds
    Easily register global styles
    More unified theming framework
    AS A SERVICE PROVIDER: AS A DEVELOPER

    View Slide

  10. @marktimemedia
    Do you want to
    begin?
    YES NO

    View Slide

  11. REFUSAL OF
    THE CALL
    Resistance to adopting
    new tooling and workflows

    View Slide

  12. @marktimemedia
    The resistance to adventure
    Glitchy interactions
    Missing features
    More support requests
    Too many options
    Inconsistent documentation
    New development tools &
    language
    Missing or obscured functionality
    Constant changes
    AS A SERVICE PROVIDER: AS A DEVELOPER

    View Slide

  13. @marktimemedia
    The impossible journey
    No one is supporting/paying us to
    …learn an entire new programming language
    …learn and debug all of these new build tools
    …keep up with all of the changes

    View Slide

  14. MEETING
    THE
    MENTOR
    Finding the help you
    need to move forward

    View Slide

  15. @marktimemedia
    Find support
    social & slack communities
    tutorials & talks
    developer.wordpress.org
    learn.wordpress.org/
    fullsiteediting.com
    wordpress.tv
    RESOURCES
    Manage expectations
    changes, support, & updates
    learn new skills during paid projects
    take the journey at your own pace

    View Slide

  16. @marktimemedia
    Do you want to
    begin?
    YES NO

    View Slide

  17. CROSSING THE
    THRESHOLD
    Get your bearings in the
    new editor interface

    View Slide

  18. @marktimemedia
    Setting Up Camp
    Use preferred local
    development tool
    or
    developer.wordpress.org
    /playground/

    View Slide

  19. @marktimemedia
    Navigate The Post Editor
    Block & Pattern Inserter
    Tools
    Document Overview
    View & Preview
    Settings
    Screen Options

    View Slide

  20. @marktimemedia
    Navigate The Post Editor
    Block Settings
    Block Toolbar

    View Slide

  21. @marktimemedia
    Navigate The Post Editor
    Block, Pattern, & Media
    Inserter

    View Slide

  22. @marktimemedia
    Navigate The Post Editor
    List & Outline Views

    View Slide

  23. @marktimemedia
    Create & Copy Blocks Within The Editor
    Visual Editor
    vs
    Code Editor

    View Slide

  24. @marktimemedia
    Create & Copy Blocks Within The Editor
    Block locking

    View Slide

  25. @marktimemedia
    Navigate the FSE Editor
    View, Edit & Create
    Templates
    View & Edit Styles
    View, Edit & Create
    Patterns (6.3+)
    Navigation & Pages (6.3+)

    View Slide

  26. @marktimemedia
    Navigate The FSE Editor
    Create, edit, and manage
    templates

    View Slide

  27. @marktimemedia
    Navigate The FSE Editor
    Synced & Unsynced
    Patterns (Template Parts)

    View Slide

  28. @marktimemedia
    Navigate The FSE Editor
    Styles & Variations

    View Slide

  29. @marktimemedia
    Understand the new
    interface from a client
    perspective
    Understand the options
    available to us as a
    developer
    Time to set up a test
    environment and use the
    editor
    Time Level
    BENEFITS
    Change Level
    OBSTACLES

    View Slide

  30. TESTS, ALLIES, ENEMIES
    Adapting your PHP/Classic Theme

    View Slide

  31. @marktimemedia
    add_theme_support
    Block Tools
    Core Block Patterns
    Editor Color/Gradient Palettes
    Editor Text Size Palettes
    Alignment
    Custom Color/Gradients
    Spacing
    Responsive Embeds
    Editor Styles
    Custom Units
    Line Height
    developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/

    View Slide

  32. @marktimemedia
    Theme.json In Traditional Themes
    Settings
    Styles
    Templates – only used in FSE
    Template Parts – only used in FSE
    developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/

    View Slide

  33. @marktimemedia
    Theme.json Settings
    enable/disable of features
    theme presets
    (color/spacing/fonts/sizing/etc)
    block-level controls
    preset & custom variables
    fullsiteediting.com/lessons/remove-settings-
    in-theme-json/

    View Slide

  34. @marktimemedia
    Theme.json + CSS
    theme.json generated variable format
    • --wp--preset--{category}--{slug}
    • --wp--custom--{nested}--{object-keys}
    variables/settings automatically loaded in both editor and frontend
    enqueue_block_assets adds custom scripts and stylesheets to the
    editor and frontend

    View Slide

  35. @marktimemedia
    theme.json variables
    appearance of elements,
    blocks, and variations
    fullsiteediting.com/lessons/global-styles/
    JSON
    GENERATED CSS

    View Slide

  36. @marktimemedia
    theme.json variables
    any custom variables you need JSON
    GENERATED CSS

    View Slide

  37. @marktimemedia
    theme.json styles
    default global styles & block styles
    can be a value or reference other styles

    View Slide

  38. @marktimemedia
    More info: converting classic to block
    developer.wordpress.org/themes/block-themes/converting-a-classic-theme-to-a-block-theme/
    fullsiteediting.com/lessons/adding-full-site-editing-features-to-classic-themes/

    View Slide

  39. @marktimemedia
    Opens up the block editor
    to client & developer use
    Provide branding control
    via theme styles and
    default controls (limiting
    options)
    Setting up theme.json
    Reworking CSS to use
    variables
    Time Level
    BENEFITS
    Change Level
    OBSTACLES

    View Slide

  40. APPROACH THE
    INNERMOST CAVE
    Block Editor development
    (without Javascript)

    View Slide

  41. @marktimemedia
    Block Patterns
    PHP
    PHP (BLOCK MARKUP)

    View Slide

  42. @marktimemedia
    Block Styles
    PHP
    CSS

    View Slide

  43. @marktimemedia
    Block Templates & Block Locking
    developer.wordpress.org/block-editor/
    reference-guides/block-api/block-templates/

    View Slide

  44. @marktimemedia
    PHP Custom Block Tools

    View Slide

  45. @marktimemedia
    Additional customization
    options (bespoke needs)
    Additional controls and
    guided brand options
    (locking it down)
    Time to set up
    Learning new functions
    Block template PHP
    syntax
    Time Level
    BENEFITS
    Change Level
    OBSTACLES

    View Slide

  46. THE ORDEAL
    Building a Full Site Editing (FSE) theme

    View Slide

  47. @marktimemedia
    Block Grammar
    fullsiteediting.com/lessons/block-grammar-basics/
    wordpress.org/plugins/create-block-theme/

    View Slide

  48. @marktimemedia
    Block Themes
    https://fullsiteediting.com/lessons/creating-block-based-themes/

    View Slide

  49. @marktimemedia
    Templates & Template Parts
    developer.wordpress.org/news/2023/06/upgrading-the-site-
    editing-experience-with-custom-template-part-areas/
    fullsiteediting.com/how-to-lock-blocks-and-templates/
    fullsiteediting.com/lessons/templates-and-template-parts

    View Slide

  50. @marktimemedia
    PHP Templates In FSE
    fullsiteediting.com/lessons/how-to-use-php-templates-in-block-themes/

    View Slide

  51. @marktimemedia
    Fully take advantage of
    Full Site Editing
    Full rebuild or
    replacement
    Learning new and
    uncommon syntax
    Lack of error reporting
    (WSOD)
    Time Level
    BENEFITS
    Change Level
    OBSTACLES

    View Slide

  52. THE REWARD
    Becoming a FSE developer

    View Slide

  53. THE (LONG)
    ROAD BACK
    Block Editor development
    (with Javascript)

    View Slide

  54. @marktimemedia
    Block styles
    developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/
    JS
    PHP

    View Slide

  55. @marktimemedia
    Block variations JS

    View Slide

  56. @marktimemedia
    Transpiled Javascript
    ES5
    vs
    ES6/ESNext & JSX
    WP Scripts
    developer.wordpress.org/block-editor/how-to-guides/javascript/js-build-setup/
    / boldermail.com/reactjs-and-gutenberg-concepts-and-
    tools-to-getting-started-with-the-new-block-editor

    View Slide

  57. @marktimemedia
    Custom UI
    developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-
    using-the-wordpress-scripts-package-with-themes/

    View Slide

  58. @marktimemedia
    Custom controls and
    options more seamlessly
    integrated with UI
    Familiarity with CLI
    Setting up build tools
    Package and dependency
    management
    JS syntax
    Time Level
    BENEFITS
    Change Level
    OBSTACLES

    View Slide

  59. RESURRECTION
    (FINAL BATTLE)
    Building Custom Blocks

    View Slide

  60. @marktimemedia
    Custom Blocks
    developer.wordpress.org/news/2023/02/static-
    vs-dynamic-blocks-whats-the-difference/
    When variations, patterns,
    and styles aren’t enough
    New functionality or more
    intuitive client UI

    View Slide

  61. @marktimemedia
    Static Blocks
    Content and markup are
    created and saved to the
    post in the editor
    developer.wordpress.org/block-editor/how-to-guides/block-tutorial/
    writing-your-first-block-type/

    View Slide

  62. @marktimemedia
    Dynamic Blocks
    Content and markup are
    rendered on the server
    May be dependent on
    changes or updates in other
    parts of the site
    Can still have styles/options
    developer.wordpress.org/block-editor/how-to-guides/block-tutorial/
    creating-dynamic-blocks/

    View Slide

  63. @marktimemedia
    Fully custom functionality
    Fully custom UI
    Lack of documentation
    (“wild west”)
    Setting up build tools
    Package and dependency
    management
    React syntax
    Time Level
    BENEFITS
    Change Level
    OBSTACLES

    View Slide

  64. RETURN WITH
    THE ELIXIR
    A larger suite of tools

    View Slide

  65. THE
    HERO
    You are a hero every
    step of the way
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    The
    Ordinary
    World Call of
    Adventure
    Refusal
    of the
    Call
    Tests,
    Allies,
    Enemies
    Crossing
    the First
    Threshold
    Meeting
    the
    Mentor
    Approach
    the
    Innermost
    Cave
    The
    Ordeal
    The
    Reward
    The Long
    Road Back
    Resurrection
    (Final Battle)
    Return
    with the
    Elixir

    View Slide

  66. @marktimemedia
    QUESTIONS?
    Here’s how to
    get in touch:
    Michelle Schulp Hunt
    [email protected]
    @marktimemedia
    mynameismichelle.com
    bit.ly/2023-wp-themes
    𝕏

    View Slide