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.

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 Slide

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

   View Slide

3. Designs have changed
   

   View Slide

4. (Maybe) A more
   traditional site design
   

   View Slide

5. Header
   Menus
   

   View Slide

6. Content
   The Editor
   

   View Slide

7. Sidebar
   Widgets
   

   View Slide

8. Footer
   Widgets?
   

   View Slide

9. A more modern
   design
   

   View Slide

10. A more modern
    design
    

    View Slide

11. Page built up of
    blocks of content
    

    View Slide

12. Page built up of
    blocks of content
    

    View Slide

13. The problem
    

    View Slide

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

    View Slide

15. View Slide

16. View Slide

17. Attempted solutions
    

    View Slide

18. [my_shortcode]
    

    View Slide

19. View Slide

20. View Slide

21. Page Builders
    

    View Slide

22. View Slide

23. Our solution
    

    View Slide

24. Advanced Custom Fields
    Flexible Content Field
    

    View Slide

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

    View Slide

26. HD ACF Blocks plugin
    

    View Slide

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

    View Slide

28. View Slide

29. View Slide

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

    View Slide

31. Challenges
    

    View Slide

32. Interface/styling
    

    View Slide

33. View Slide

34. Interface/styling
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide