z ACF Blocks (deprecated)

Since: 3.0.0
Require: ACF Pro 5.8

Register custom block using ACF. Must be used within acf/init action.

H::register_block( $slug, [$args] )

$slug (string) - The block's unique identifier.

• All lower-case and use dash (-) instead of space.

$args (array / optional) - Available arguments are:

• name (string) - Block's name.
  Default: $slug with first letter capitalized.

• description (string) - Block's description. Displayed in editor's sidebar.
  Default: Empty

• post_types (array) - Where this block can be used.
  Default: [post, page]

• icon (string) - Either Dashicons or raw SVG markup.
  Default: "dashicons-admin-post"

  We recommend using SVG from Material Icons. Download the file, open with notepad, then paste the content here enclosed with single quote.

• context_filter (function) - Modify the block's value before being rendered. Read more

How to Use

1. Register the block via code

// functions.php

add_action( 'acf/init', 'my_create_blocks' );

function my_create_blocks() {
  H::register_block( 'sample', [
    'description' => 'Sample block created with ACF and Edje',
  ] );
}

2. Create ACF Fields

Set the rules to Block > is equal to > your block's name

IMPORTANT!

We made modification on how the ACF fields are displayed. It's now on a Grid with 10 columns.

If you put the field's width to 50%, it will become 5 columns, 55% will be rounded down to 5 columns too.

3. Create Template

WITH TIMBER

It will look for the template in views/acf-blocks/$slug.twig.

All ACF fields are directly accessible. There's also block variable that contains the block's name and alignment.

<section class="acf-block-sample align{{ block.align }}">
  <h2>{{ title }}</h2>
  <img src="{{ image.url }}" alt="{{ image.alt }}">
  {{ content }}
</section>

WITHOUT TIMBER (Pure PHP)

It will look for the template in acf-blocks/$slug.php.

All ACF fields are stored in $block object.

<section class="acf-block-sample align<?php echo $block->block['align']; ?>">
  <h2><?php echo $block->title; ?></h2>
  <img src="<?php $block->image['url']; ?>" alt="<?php $block->image['alt']; ?>">
  <?php echo $block->content; ?>
</section>

4. Done! Go test it

Create a new Post or Page and add the new block. You should get something like this:

---

Modifying Context Data

You can modify the template's data by using the argument context_filter when registering a new block.

The example below is based on the above ACF Fields.

H::register_block( 'sample', [
  'description' => 'Sample block created with ACF and Edje',
  'context_filter' => function( $context ) {
    $context['title'] = ucwords( $context['title'] ) // make sure first letter capitalized
   
    $context['extra_data'] = 'Lorem ipsum dolor sit amet'; // add new variable

    return $context;
  }
] );

Now the title variable has been modified and a new variable extra_data can be used: