yuvilio
commented
4 years ago Following up on above, I took Guttenberg + ACF out for a spin. The two seem to work fine together. Blocks seem pretty powerful, amenable to Timber. Here are some notes on the experience:
You can find the code I used in this branch: https://github.com/patronage/bubs/tree/124-activate-gutenberg
Let's compare the content modeling/templating we do using ACF + Classic Editor with ACF + Gutenberg
With ACF Classic, we model the content by declaring field groups. We associate those groups with templates/post types/etc . We set up some sample content and write timber/twig templates using those fields.
ACF+Gutenberg differs in some ways and is similar in other ways. Let's walk through an example using ACF flex content. We'll be using ACF's own Blocks Documentation as guidance.
https://www.advancedcustomfields.com/resources/blocks/
1: Start with Blocks ====
We'll register a block with acf_register_block_type so we have something to associate the Field Group(s) with. Let's call the block "Test Flex" . We can define in in a setup/helpers/blocks.php file in our theme (that we include in functions.php)
add_action( 'acf/init', 'my_acf_init' );
function my_acf_init() {
// Bail out if function doesn’t exist.
if ( ! function_exists( 'acf_register_block' ) ) {
return;
}
acf_register_block( array(
'name' => 'testflex',
'title' => __( 'Test Flex', 'your-text-domain' ),
'description' => __( 'A custom example block.', 'your-text-domain' ),
'render_callback' => 'acf_block_testflex', // see matching function below
'category' => 'formatting',
'icon' => 'admin-comments',
'keywords' => array( 'flex' ),
) );
}
Notice we promised a rendering function for this block, acf_block_testflex. That's like our template-flex.php or other template files. We'll come back to it shortly. First, to something more familiar, our ACF fields!
2: Associate field group to the block ====
- Create a field group with flex field content. We can call it
Block: Test Flexto indicate what block we're associate it. We'll give it a Flex field called flex_content, with two options ("layouts"). We then just associate our new ACF field group with our Block, "Test Flex"
3 Edit content with your new block ====
We can go to a page (any page, no restrictions) and add our content, including our new Test Flex block, filling in flex content blocks from it.
We'll add one of each of those flex content sections (plain Text Content and a Full width Image).
4: Template a block with rendering function + twig templates
In bubs we've been using the Timber Wordpress plugin for rendering. It won't come as a surprise that the Timber folks have guidance for working with Gutenberg and ACF:
https://timber.github.io/docs/guides/gutenberg/
Let's add that rendering function, acf_block_testflex Most of it is boilerplate, similar to the template-flex.php and other rendering files we already use. It sets up data and lets a twig file do the templating.
The rendering function: https://github.com/patronage/bubs/blob/124-activate-gutenberg/wp-content/themes/timber/setup/helpers/blocks.php#L33-L48
Corresponding twig files used (similar to how we set up a flex.twig file):
https://github.com/patronage/bubs/blob/124-activate-gutenberg/wp-content/themes/timber/views/block/testflex.twig https://github.com/patronage/bubs/blob/124-activate-gutenberg/wp-content/themes/timber/views/flex/text-content.twig https://github.com/patronage/bubs/blob/124-activate-gutenberg/wp-content/themes/timber/views/flex/full-width-image.twig
Notice that in testflex.twig that instead of using post, we're now using block for block specific data and fields for what holds the acf field data. Otherwise, pretty similar to our current setup.
The rendering of the flex block occurs as expected:
The main point of this post was to demo that Gutenberg and ACF blocks seem to work fine. I think more testing is needed before deciding on switching to it.
Some advantages seem to be :
- Blocks are pretty flexible (insertible anywhere) and so there are less specialized templates needed.
- Previewing content seems more customizable in a block (we can't always preview ACF powered templates)
- Gutenberg is the default within Wordpress
We'll have to look into specific projects to see if there is a payoff to switch/start with Blocks.
ccorda
Gutenberg's been around for quite a while. Is it time to turn it on by default and adapt the theme if need be?
It seems to have a bunch of benefits:
Our original hesitation about using Gutenberg was the short notice the Advanced Custom Field plugin had to adapt to it and the resulting buggy-ness. But that was a while back and the two seem to play nice together these days:
https://twitter.com/WolfgegenlichtD/status/1280532518798852098 https://twitter.com/wp_acf/status/1263680236312395776 https://twitter.com/palmiak_fp/status/1273209328091070464
So is it time to activate Gutenberg?
Unlike someother Issues, this one is less about code changes, though there still are some (removing the disabler php, ...). It's more about confirming that current bubs setup is Gutenberg ready to go.