HOW TO BUILD CUSTOM
GUTENBERG BLOCKS
WITH
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 2
Slide 2 text
FOUNDER & CEO
DIRECTOR OF BUSINESS DEVELOPMENT
• Love Obsessed with Dogs
• Shoot Archery
• Passionate about teaching others
• Slinging code since 2008
@tessak22 all over the internet
@TESSAK22
ABOUT ME
BIT.LY/ACF-ITHEMES
Slide 3
Slide 3 text
ACF PROMO!
Use Coupon Code: ITHEMES
25% OFF ACF PRO
Slide 4
Slide 4 text
LET’S GET SETUP
➤ Download Advanced Custom Fields (You need the Pro version)
➤ Open your favorite code editor
➤ Open your favorite local development tool
➤ Follow along with these slides at bit.ly/acf-ithemes
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 5
Slide 5 text
WHAT IS ACF?
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 6
Slide 6 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
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 7
Slide 7 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
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 8
Slide 8 text
TEMPLATE 101
‣ functions.php - allows you to add functionality
to your theme
‣ style.css - your CSS (styling) for your theme
‣ page.php - page template file
‣ single.php - single post file
‣ single-postname.php - Custom post type
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 9
Slide 9 text
AWESOME FEATURES
@TESSAK22
BIT.LY/ACF-ITHEMES @TESSAK22
BIT.LY/ACF-ITHEMES
Slide 10
Slide 10 text
REPEATER FIELD
This field is really nice for
sliders, carousels or
anything that someone
may want to use an
unpredictable number of
times.
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 11
Slide 11 text
FLEXIBLE CONTENT
My favorite feature of all…
With flexible content you
can essentially make your
own page builder with
just the blocks that you
need!
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 12
Slide 12 text
OPTIONS PAGE
Options page allows you to
have global fields that can be
used where ever you want in
your theme!
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 13
Slide 13 text
Edit your ACF data on the
frontend of your site!
Add where form should be:
Add before get_header
FRONTEND FORMS
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 14
Slide 14 text
ACF Register Block
acf_register_block( $settings );
*acf_register_block is only available to Pro members
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 15
Slide 15 text
acf_register_block
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 16
Slide 16 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 ]
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 17
Slide 17 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
@TESSAK22
BIT.LY/ACF-ITHEMES
$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
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 20
Slide 20 text
Preview vs Edit
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 21
Slide 21 text
LET’S BUILD SOME
BLOCKS
@TESSAK22
BIT.LY/ACF-ITHEMES @TESSAK22
BIT.LY/ACF-ITHEMES
Slide 22
Slide 22 text
4 Easy Steps
1. Register Your Block
2. Create your field group
3. Create your template
4. Beautify it with CSS
@TESSAK22
BIT.LY/ACF-ITHEMES
Team Member
Bio
https://gist.github.com/tessak22/
a13c720e59347026cdbae3c8
5cc3d808
Register block in an inc file
@TESSAK22
BIT.LY/ACF-ITHEMES
Slide 26
Slide 26 text
I WANT TO HEAR WHAT YOU THINK AND HOW IT
WENT FOR YOU!
SHARE YOUR THOUGHTS HERE:
https://tessakriesel.com/contact/
HELPFUL RESOURCES
https://www.advancedcustomfields.com/blog/building-
a-custom-slider-block-in-30-minutes-with-acf
https://www.billerickson.net/building-gutenberg-block-
acf/
@TESSAK22
REACH OUT
BIT.LY/ACF-ITHEMES