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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. Wait, what is Gutenberg?
   

   View Slide

6. View Slide

7. I just needed one more block to complete my homepage
   90% there
   

   View Slide

8. ACF 5.8
   acf_register_block( $settings );
   *ACF 5.8 is only available to Pro members
   

   View Slide

9. acf_register_block
   

   View Slide

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 ]
    

    View Slide

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
    

    View Slide

12. $settings
    ● Align

    Default block alignment: “left”, “center”, “right”, “wide” and “full”
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

15. Preview vs Edit
    

    View Slide

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

    View Slide

17. Dog Block
    Featured Rescue Dog Block
    

    View Slide

18. CPT Dog Block
    Featured Rescue Dog Block
    

    View Slide

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

    View Slide