Building Gutenberg Blocks with ACF

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

About Me Developer Community Manager     Alumni Developer Outreach Manager • Love Obsessed with Dogs • Shoot Archery • Passionate about teaching others @tessak22 all over the internet

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Wait, what is Gutenberg?

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

acf_register_block

Slide 10

Slide 10 text

$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 ]

Slide 11

Slide 11 text

$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

Slide 12

Slide 12 text

$settings ● Align  Default block alignment: “left”, “center”, “right”, “wide” and “full”

Slide 13

Slide 13 text

$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.

Slide 14

Slide 14 text

$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