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

How to Build Custom Gutenberg Blocks with Advanced Custom Fields — iThemes Online Training

How to Build Custom Gutenberg Blocks with Advanced Custom Fields — iThemes Online Training

During this online training workshop, you will learn how to build custom Gutenberg blocks for WordPress utilizing a plugin called Advanced Custom Fields. We'll start off by learning some “hidden” features of the Advanced Custom Fields plugin and then move into creating 2-3 custom blocks that you can use on existing WordPress websites or future client projects.

You Will Learn...

- How to build a Hero Gutenberg block with a title, description & call-to-action
- How to create your very own custom Gutenberg blocks for the new WordPress 5.0 editor
- A few neat tricks and tips about the Advanced Custom Fields Pro plugin

Tessa Kriesel

October 29, 2019
Tweet

More Decks by Tessa Kriesel

Other Decks in Technology

Transcript

  1. HOW TO BUILD CUSTOM
    GUTENBERG BLOCKS
    WITH
    @TESSAK22
    BIT.LY/ACF-ITHEMES

    View Slide

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

    View Slide

  3. ACF PROMO!
    Use Coupon Code: ITHEMES
    25% OFF ACF PRO

    View Slide

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

    View Slide

  5. WHAT IS ACF?
    @TESSAK22
    BIT.LY/ACF-ITHEMES

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. AWESOME FEATURES
    @TESSAK22
    BIT.LY/ACF-ITHEMES @TESSAK22
    BIT.LY/ACF-ITHEMES

    View Slide

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

    View Slide

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

    View Slide

  12. OPTIONS PAGE
    the_field('header_title', 'option');
    ?>
    Options page allows you to
    have global fields that can be
    used where ever you want in
    your theme!
    @TESSAK22
    BIT.LY/ACF-ITHEMES

    View Slide


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

    View Slide

  14. ACF Register Block
    acf_register_block( $settings );
    *acf_register_block is only available to Pro members
    @TESSAK22
    BIT.LY/ACF-ITHEMES

    View Slide

  15. acf_register_block
    @TESSAK22
    BIT.LY/ACF-ITHEMES

    View Slide

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

    View Slide

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

    View Slide

  18. $settings
    ● Align

    Default block alignment: “left”, “center”, “right”, “wide” and “full”
    @TESSAK22
    BIT.LY/ACF-ITHEMES

    View Slide

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

    View Slide

  20. Preview vs Edit
    @TESSAK22
    BIT.LY/ACF-ITHEMES

    View Slide

  21. LET’S BUILD SOME
    BLOCKS
    @TESSAK22
    BIT.LY/ACF-ITHEMES @TESSAK22
    BIT.LY/ACF-ITHEMES

    View Slide

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

    View Slide

  23. Hero Block
    https://gist.github.com/tessak22/
    a81398621b32c23358cae5f3a
    1d31379
    render_callback
    @TESSAK22
    BIT.LY/ACF-ITHEMES

    View Slide

  24. Testimonial
    Block
    https://gist.github.com/
    tessak22/797fae407d1b2bbb2
    b8a02de0d24e13f
    render_template
    @TESSAK22
    BIT.LY/ACF-ITHEMES

    View Slide

  25. Team Member
    Bio
    https://gist.github.com/tessak22/
    a13c720e59347026cdbae3c8
    5cc3d808
    Register block in an inc file
    @TESSAK22
    BIT.LY/ACF-ITHEMES

    View Slide

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

    View Slide