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

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?
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