Building Gutenberg Blocks with ACF

3734ba5f47b3e579b367b4202aaba163?s=47 Tessa Kriesel
February 15, 2019

Building Gutenberg Blocks with ACF

For those of us that rely greatly on Advanced Custom Fields (ACF) for customizing our themes, the release of Gutenberg was and still is scary at times.

Have no fear! acf_register_block() allows you to create your own Gutenberg blocks using just Advanced Custom Fields.

You will learn:
– ACF & it’s awesome capabilities
– How to create Gutenberg blocks with ACF
– A few other handy ACF tips & tricks

3734ba5f47b3e579b367b4202aaba163?s=128

Tessa Kriesel

February 15, 2019
Tweet

Transcript

  1. slido.com Event Code: #wcorl Slides bit.ly/2OgOcvO Building Gutenberg Blocks with

    Advanced Custom Fields
  2. About Me Developer Community Manager 
 
 Alumni Developer Outreach

    Manager • Love Obsessed with Dogs • Shoot Archery • Passionate about teaching others @tessak22 all over the internet
  3. What is ACF? • Stands for Advanced Custom Fields •

    Makes content editing easier • Easy to learn and use • Allows you to add custom meta fields to content • Free & Pro Versions
  4. What can it do? • Add custom data to your

    pages, posts & custom posts. • Collect theme setting values that you can use globally in your theme. • Create a custom page builder-esque layout editor • Capture entries through a frontend form • Extend your theme capabilities and features • Data is stored in the postmeta table
  5. Wait, what is Gutenberg?

  6. None
  7. I just needed one more block to complete my homepage

    90% there
  8. ACF 5.8 acf_register_block( $settings ); *ACF 5.8 is only available

    to Pro members
  9. acf_register_block

  10. $settings • Name
 Unique name that identifies the block •

    Title
 The display title for the block • Description
 Short description explaining what the block can do • Category
 Category it appears under [ common | formatting | layout | widgets | embed ]
  11. $settings • Icon
 This can be chosen from a WordPress

    Dashicon or custom SVG • Keywords
 Search terms to help users looking for a block • Post Types
 Post type to restrict the block to • Mode
 Edit or Preview
  12. $settings • Align
 Default block alignment: “left”, “center”, “right”, “wide”

    and “full”
  13. $settings • render_template
 The path to a template file used

    to render the block HTML. This can either be a relative path to a file within the active theme or a full path to any file. • render_callback
 Instead of providing a render_template, a callback function name may be specified to output the block’s HTML.
  14. $settings • render_callback
 Instead of providing a render_template, a callback

    function name may be specified to output the block’s HTML. • render_template
 The path to a template file used to render the block HTML. This can either be a relative path to a file within the active theme or a full path to any file. in functions.php (or functions include) in a template file outside of functions
  15. Preview vs Edit

  16. Hero Block https://gist.github.com/tessak22/ a81398621b32c23358cae5f3a 1d31379

  17. Dog Block Featured Rescue Dog Block

  18. CPT Dog Block Featured Rescue Dog Block

  19. Event Code: #wcorl Slides bit.ly/2OgOcvO slido.com Q&A