ACF Gutenberg is a composer package based on Log1x ACF-Composer great project and StoutLogic's ACF Builder with some adaptations to our own workflow:
- Use of section component as main wrapper for blocks.
- Block's slug use different logic.
- We include vars inside the view and we can call it without using the block object ($variable instead of $block->variable)
- Global options created by default.
- 🔥 Encourages clean structuring for creating fields with Sage 10 and ACF.
- 🔥 Instantly generate working fields, blocks, widgets, and option pages. Batteries included.
- 🔥 Instantly generate re-usable field group partials.
- 🔥 Blocks and widgets are fully rendered using Blade with a native Sage 10 feel for passing view data.
- 🔥 Blocks are automatically generated with
<InnerBlocks />support if ACF v5.9.0+ is installed. - 🔥 Automatically hooks widgets with
WP_Widgetmaking them instantly ready to use. - 🔥 Automatically sets field location on blocks, widgets, and option pages.
- 🔥 Globally set default field type and field group settings. No more repeating
['ui' => 1]on every select field.
Install via Composer:
$ composer require 40q/acf-composerStart by publishing the config/acf.php configuration file using Acorn:
$ wp acorn vendor:publish --provider="AcfGutenberg\Providers\AcfComposerServiceProvider"To create your first field, start by running the following generator command from your theme directory:
$ wp acorn acf:field ExampleThis will create src/Fields/Example.php which is where you will create and manage your first field group.
Taking a glance at the generated Example.php stub, you will notice that it has a simple list configured.
<?php
namespace App\Fields;
use AcfGutenberg\Field;
use StoutLogic\AcfBuilder\FieldsBuilder;
class Example extends Field
{
/**
* The field group.
*
* @return array
*/
public function fields()
{
$example = new FieldsBuilder('example');
$example
->setLocation('post_type', '==', 'post');
$example
->addRepeater('items')
->addText('item')
->endRepeater();
return $example->build();
}
}Proceed by checking the Add Post for the field to ensure things are working as intended – and then get to work.
A field partial consists of a field group that can be re-used and/or added to existing field groups.
To start, let's generate a partial called ListItems that we can use in the Example field we generated above.
$ wp acorn acf:partial ListItems<?php
namespace App\Fields\Partials;
use AcfGutenberg\Partial;
use StoutLogic\AcfBuilder\FieldsBuilder;
class ListItems extends Partial
{
/**
* The partial field group.
*
* @return array
*/
public function fields()
{
$listItems = new FieldsBuilder('listItems');
$listItems
->addRepeater('items')
->addText('item')
->endRepeater();
return $listItems;
}
}Looking at ListItems.php, you will see out of the box it consists of an identical list repeater as seen in your generated field.
A key difference to note compared to an ordinary field is the omitting of ->build() instead returning the FieldsBuilder instance itself.
This can be utilized in our Example field by passing the ::class constant to ->addFields().
<?php
namespace App\Fields;
use AcfGutenberg\Field;
use StoutLogic\AcfBuilder\FieldsBuilder;
use App\Fields\Partials\ListItems;
class Example extends Field
{
/**
* The field group.
*
* @return array
*/
public function fields()
{
$example = new FieldsBuilder('example');
$example
->setLocation('post_type', '==', 'post');
$example
->addFields($this->get(ListItems::class));
return $example->build();
}
}Generating a block is generally the same as generating a field as seen above.
Start by creating the block field using Acorn:
$ wp acorn acf:block Example<?php
namespace App\Blocks;
use AcfGutenberg\Block;
use StoutLogic\AcfBuilder\FieldsBuilder;
class Example extends Block
{
/**
* The block name.
*
* @var string
*/
public $name = 'Example';
/**
* The block description.
*
* @var string
*/
public $description = 'Lorem ipsum...';
/**
* The block category.
*
* @var string
*/
public $category = 'common';
/**
* The block icon.
*
* @var string|array
*/
public $icon = 'star-half';
/**
* Data to be passed to the block before rendering.
*
* @return array
*/
public function with()
{
return [
'items' => $this->items(),
];
}
/**
* The block field group.
*
* @return array
*/
public function fields()
{
$example = new FieldsBuilder('example');
$example
->addRepeater('items')
->addText('item')
->endRepeater();
return $example->build();
}
/**
* Return the items field.
*
* @return array
*/
public function items()
{
return get_field('items') ?: [];
}
}When running the block generator, one difference to a generic field is an accompanied View is generated in the resources/views/blocks directory.
@if ($items)
<ul>
@foreach ($items as $item)
<li>{{ $item['item'] }}</li>
@endforeach
</ul>
@else
<p>No items found!</p>
@endif
<div>
<InnerBlocks />
</div>Like the field generator, the example block contains a simple list repeater and is working out of the box.
Creating a sidebar widget using ACF Composer is extremely easy. Widgets are automatically loaded and rendered with Blade, as well as registered with WP_Widget which is usually rather annoying.
Start by creating a widget using Acorn:
$ wp acorn acf:widget Example<?php
namespace App\Widgets;
use AcfGutenberg\Widget;
use StoutLogic\AcfBuilder\FieldsBuilder;
class Example extends Widget
{
/**
* The widget name.
*
* @var string
*/
public $name = 'Example';
/**
* The widget description.
*
* @var string
*/
public $description = 'Lorem ipsum...';
/**
* Data to be passed to the widget before rendering.
*
* @return array
*/
public function with()
{
return [
'items' => $this->items(),
];
}
/**
* The widget title.
*
* @return string
*/
public function title() {
return get_field('title', $this->widget->id);
}
/**
* The widget field group.
*
* @return array
*/
public function fields()
{
$example = new FieldsBuilder('example');
$example
->addText('title');
$example
->addRepeater('items')
->addText('item')
->endRepeater();
return $example->build();
}
/**
* Return the items field.
*
* @return array
*/
public function items()
{
return get_field('items', $this->widget->id) ?: [];
}
}Similar to blocks, widgets are also accompanied by a view generated in resources/views/widgets.
@if ($items)
<ul>
@foreach ($items as $item)
<li>{{ $item['item'] }}</li>
@endforeach
</ul>
@else
<p>No items found!</p>
@endifOut of the box, the Example widget is ready to go and should appear in the backend.
Creating an options page is similar to creating a regular field group in additional to a few configuration options available to customize the page (most of which, are optional.)
Start by creating an option page using Acorn:
$ wp acorn acf:options Example<?php
namespace App\Options;
use AcfGutenberg\Options as Field;
use StoutLogic\AcfBuilder\FieldsBuilder;
class Example extends Field
{
/**
* The option page menu name.
*
* @var string
*/
public $name = 'Example';
/**
* The option page document title.
*
* @var string
*/
public $title = 'Example | Options';
/**
* The option page field group.
*
* @return array
*/
public function fields()
{
$example = new FieldsBuilder('example');
$example
->addRepeater('items')
->addText('item')
->endRepeater();
return $example->build();
}
}Optionally, you may pass --full to the command above to generate a stub that contains additional configuration examples.
$ wp acorn acf:options Options --fullOnce finished, you should see an Options page appear in the backend.
All fields registered will have their location automatically set to this page.
One of my personal favorite features of ACF Composer is the ability to set field type as well as field group defaults. Any globally set default can of course be over-ridden by simply setting it on the individual field.
Taking a look at config/acf.php, you will see a few pre-configured defaults:
'defaults' => [
'trueFalse' => ['ui' => 1],
'select' => ['ui' => 1],
],When setting trueFalse and select to have their ui set to 1 by default, it is no longer necessary to repeatedly set 'ui' => 1 on your fields. This takes effect globally and can be overridden by simply setting a different value on a field.
It is also possible to define defaults on individual field groups. This is done by simply defining $defaults in your field class.
/**
* Default field type settings.
*
* @return array
*/
protected $defaults = ['ui' => 0];Here are a couple defaults I personally use. Any prefixed with acfe_ are related to ACF Extended.
'defaults' => [
'fieldGroup' => ['instruction_placement' => 'acfe_instructions_tooltip'],
'repeater' => ['layout' => 'block', 'acfe_repeater_stylised_button' => 1],
'trueFalse' => ['ui' => 1],
'select' => ['ui' => 1],
'postObject' => ['ui' => 1, 'return_format' => 'object'],
'accordion' => ['multi_expand' => 1],
'group' => ['layout' => 'table', 'acfe_group_modal' => 1],
'tab' => ['placement' => 'left'],
'sidebar_selector' => ['default_value' => 'sidebar-primary', 'allow_null' => 1]
],If you discover a bug in ACF Composer, please open an issue.
Contributing whether it be through PRs, reporting an issue, or suggesting an idea is encouraged and appreciated.
ACF Composer is provided under the MIT License.