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

Building Gutenberg Blocks with ACF

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

Tessa Kriesel

February 15, 2019
Tweet

More Decks by Tessa Kriesel

Other Decks in Programming

Transcript

  1. About Me Developer Community Manager 
 
 Alumni Developer Outreach

    Manager • Love Obsessed with Dogs • Shoot Archery • Passionate about teaching others @tessak22 all over the internet
  2. 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
  3. 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
  4. $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 ]
  5. $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
  6. $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.
  7. $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