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

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

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

More Decks by Mark Wilkinson

Other Decks in Education


  1. Transitioning to a block based editor in a pre- Gutenberg

    world Mark Wilkinson Co-founder & developer at Highrise Digital https://highrise.digital @wpmark
  2. We are not anti-Gutenberg Neither is this talk

  3. Designs have changed

  4. (Maybe) A more traditional site design

  5. Header Menus

  6. Content The Editor

  7. Sidebar Widgets

  8. Footer Widgets?

  9. A more modern design

  10. A more modern design

  11. Page built up of blocks of content

  12. Page built up of blocks of content

  13. The problem

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

  15. None
  16. None
  17. Attempted solutions

  18. [my_shortcode]

  19. None
  20. None
  21. Page Builders

  22. None
  23. Our solution

  24. Advanced Custom Fields Flexible Content Field

  25. Groups of fields - blocks Add multiple groups Drag and

    drop the order
  26. HD ACF Blocks plugin

  27. Content Hero Feature row Call to action Videos Quotes Image(s)

    Accordion Documents Locations Heading Separator Statistics Recent content Gravity form Pricing
  28. None
  29. None
  30. Extensible development Template overrides Filterable fields Extensive actions and filters

    Lots of helper classes
  31. Challenges

  32. Interface/styling

  33. None
  34. Interface/styling

  35. Everything is post meta Not searchable - by default Reusable

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

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

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