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

Transitioning to a block based editor in a pre-Gutenberg world

Mark Wilkinson
October 27, 2018

Transitioning to a block based editor in a pre-Gutenberg world

View this talk on my blog here: https://wp.me/p2F3oW-1FV

How do we move towards a block-based admin UI in a pre-Gutenberg WordPress?

With the rise of page builders and ‘block-based’ layouts, and the imminent arrival of Gutenberg – WordPress’ new block-based editor – we needed a solution for transitioning towards this new way of editing content while sticking with the mature and stable technology stack that we know and love.

We, therefore, set out to find another solution and this led to the development of the HD ACF Blocks plugin that we use on most sites today.

This talk introduces the plugin, how we built it, how it works, and how it provides value to our clients and our business.

This talk is aimed at developers who are looking to move towards building sites with blocks. Perhaps those that have looked at Gutenberg and had little success and looking for something different.

Mark Wilkinson

October 27, 2018
Tweet

More Decks by Mark Wilkinson

Other Decks in Education

Transcript

  1. Transitioning to a block
    based editor in a pre-
    Gutenberg world
    Mark Wilkinson
    Co-founder & developer at Highrise Digital
    https://highrise.digital
    @wpmark

    View full-size slide

  2. We are not anti-Gutenberg
    Neither is this talk

    View full-size slide

  3. Designs have changed

    View full-size slide

  4. (Maybe) A more
    traditional site design

    View full-size slide

  5. Content
    The Editor

    View full-size slide

  6. Sidebar
    Widgets

    View full-size slide

  7. Footer
    Widgets?

    View full-size slide

  8. A more modern
    design

    View full-size slide

  9. A more modern
    design

    View full-size slide

  10. Page built up of
    blocks of content

    View full-size slide

  11. Page built up of
    blocks of content

    View full-size slide

  12. wp_nav_menu()
    the_content()
    Sidebar widgets
    Footer widgets or
    wp_nav_menu()

    View full-size slide

  13. Attempted solutions

    View full-size slide

  14. [my_shortcode]

    View full-size slide

  15. Page Builders

    View full-size slide

  16. Our solution

    View full-size slide

  17. Advanced Custom Fields
    Flexible Content Field

    View full-size slide

  18. Groups of fields - blocks
    Add multiple groups
    Drag and drop the order

    View full-size slide

  19. HD ACF Blocks plugin

    View full-size slide

  20. Content
    Hero
    Feature row
    Call to action
    Videos
    Quotes
    Image(s)
    Accordion
    Documents
    Locations
    Heading
    Separator
    Statistics
    Recent content
    Gravity form
    Pricing

    View full-size slide

  21. Extensible development
    Template overrides
    Filterable fields
    Extensive actions and filters
    Lots of helper classes

    View full-size slide

  22. Interface/styling

    View full-size slide

  23. Interface/styling

    View full-size slide

  24. Everything is post meta
    Not searchable - by default
    Reusable blocks

    View full-size slide

  25. ACF Blocks for
    Gutenberg
    From Advanced Custom Fields
    https://www.advancedcustomfields.com/blog/acf-5-8-
    introducing-acf-blocks-for-gutenberg/

    View full-size slide

  26. Mark Wilkinson
    Co-owner of
    Highrise Digital
    WordPress dev
    @wpmark

    View full-size slide

  27. We’re hiring!
    WordPress developer
    https://highrise.digital/hiring/

    View full-size slide