/advanced-custom-blocks

ACF integrations for Gutenberg blocks

Primary LanguagePHP

Advanced Custom Blocks

Create custom blocks for the new Wordpress Gutenberg editor using Advanced Custom Fields.

Key FeaturesInstallationHow to make a blockHow To Use The BlockCreditsRelatedLicense

Motivation

Make an easy straightforward way for Wordpress developers to create custom Gutenberg blocks using a pipeline they are already familiar with.

Installation

Download the zipped folder from Github, and then install manually to Wordpress via upload in the admin interface.

How to make a block

  1. First create a custom field group in ACF and set the location rules to target the block.

screen shot 2018-08-23 at 7 23 20 pm

  1. Next, at the bottom of the field group page you can set the block name, and the icon that will appear in the Gutenberg block menu.

screen shot 2018-08-23 at 7 23 33 pm

  1. Create testimonial.php inside of the blocks/acf/ directory within your theme

      <div class="testimonial">
        <img src="<? the_field('avatar'); ?>" />
        <h3><? the_field('author'); ?></h3>
        <span><? the_field('testimonial'); ?></span>
      </div>
    

How to use the block

It's really simple! Just add the block when from the normal Gutenberg insert block menu when writing a post.

screen shot 2018-08-23 at 7 13 59 pm

And you can add multiple blocks of the same kind, similar to the repeater field.

screen shot 2018-08-23 at 7 21 38 pm

Rendering block content

Here are the ways in which Advanced Custom Blocks will load block content:

# Prepend
do_action("acf/before_render_block",  $attributes);
do_action("acf/before_render_block/name=$block_name", $attributes);


# Block content actions
do_action("acf/render_block", $attributes);
do_action("acf/render_block/name=$block_name", $attributes);


# Block content templates
include(get_template_directory() . "/blocks/acf/$block_name.php");
include(get_template_directory() . "/blocks/acf-$block_name.php");


# Append
do_action("acf/after_render_block", $attributes);
do_action("acf/after_render_block/name=$block_name", $attributes);

Contribute

Please contribute! Just fork this repo and make a pull request.

TODOs:

  • Create a "Block" field type so that we can have inner blocks as fields
  • Location rules for block placement and quantity restrictions
  • Sidebar positioning for block field groups

Credits

See this thread for original project discussion.

Project by Robbie Chipka

Logo by David Aslan French (forked from Darius Dan )