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