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

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.

Mark Wilkinson

May 18, 2019
Tweet

More Decks by Mark Wilkinson

Other Decks in Education

Transcript

  1. Building blocks without
    writing javascript
    Mark Wilkinson
    Co-founder & developer at Highrise Digital
    https://highrise.digital
    @wpmark

    View Slide

  2. Blocks?

    View Slide

  3. Block editor

    View Slide

  4. View Slide

  5. View Slide

  6. How are blocks
    developed?

    View Slide

  7. PHP
    JS

    View Slide

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

    View Slide

  9. Webpack etc.

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. ACF v5.8
    acf_register_block_type()

    View Slide

  14. View Slide

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

    View Slide

  16. View Slide

  17. View Slide

  18. https://highrise.digital/hdacfblocks-wcmcr-2018/

    View Slide

  19. HD ACF GB Blocks

    Now with native block support

    View Slide

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

    View Slide

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

    View Slide

  22. Block output

    View Slide

  23. View Slide

  24. View Slide

  25. CSS helper classes

    View Slide

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

    View Slide

  27. Extensibly built

    View Slide

  28. Constantly evolving

    View Slide

  29. Mark Wilkinson
    Co-owner of Highrise
    Digital
    WordPress developer
    @wpmark
    @highrisedigital
    https://highrise.digital

    View Slide

  30. Questions ?
    Although not necessarily answers!
    @wpmark

    View Slide