Building blocks without writing Javascript using Advanced Custom Fields

Building blocks without writing Javascript using Advanced Custom Fields

When the new block-based editor was released earlier this year, WordPress development was about to get a lot harder. Instead of the low barrier to entry PHP we are used too, along came React and JavaScript based development practices.

How are “traditional” developers like me supposed to keep up? Well, fear not as I will show you in this talk the ways in which I build WordPress sites, using the block editor, developing custom blocks which meet the clients’ needs.

I outline how we standardised our block-based development into a plugin which we use on many of the sites we build today.

31af50af29856a3e6734bdae0a0d68cf?s=128

Mark Wilkinson

May 18, 2019
Tweet

Transcript

  1. Building blocks without writing javascript Mark Wilkinson Co-founder & developer

    at Highrise Digital https://highrise.digital @wpmark
  2. Blocks?

  3. Block editor

  4. None
  5. None
  6. How are blocks developed?

  7. PHP JS

  8. React.js https://reactjs.org/

  9. Webpack etc.

  10. None
  11. None
  12. None
  13. ACF v5.8 acf_register_block_type()

  14. None
  15. https://www.advancedcustomfields.com/resources/acf_register_block_type/

  16. None
  17. None
  18. https://highrise.digital/hdacfblocks-wcmcr-2018/

  19. HD ACF GB Blocks Now with native block support

  20. Content Hero Feature row Call to action Videos Quotes Image

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

    Accordion Documents Locations Heading Separator Statistics Recent content Gravity form Pricing
  22. Block output

  23. None
  24. None
  25. CSS helper classes

  26. has--light-text has--bg-image has--bg-color has--block-intro has--block-title template--one block--count-2

  27. Extensibly built

  28. Constantly evolving

  29. Mark Wilkinson Co-owner of Highrise Digital WordPress developer @wpmark @highrisedigital

    https://highrise.digital
  30. Questions ? Although not necessarily answers! @wpmark