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 full-size 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 full-size 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 full-size 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 full-size slide

  5. Wait, what is Gutenberg?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. acf_register_block

    View full-size slide

  9. $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 full-size slide

  10. $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 full-size slide

  11. $settings
    ● Align

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

    View full-size slide

  12. $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 full-size slide

  13. $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 full-size slide

  14. Preview vs Edit

    View full-size slide

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

    View full-size slide

  16. Dog Block
    Featured Rescue Dog Block

    View full-size slide

  17. CPT Dog Block
    Featured Rescue Dog Block

    View full-size slide

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

    View full-size slide