How To Develop Widgets For Gutenberg Using ACF

How To Develop Widgets For Gutenberg Using ACF

1 May 2020 6 min read

Gutenberg is a new WordPress editor for posts and pages, built on the principles of builders, allows you to write custom page builder elements.

Using the ACF plugin, you can very simply make a widget of any type. And here we’ll show how.

For example, it was necessary to develop a block of selected categories.

How-To-Develop-Widgets-For-Gutenberg-Using-ACF_1-e1588327722345

The client wanted to be able to change icons, text, title and link, insert this block on any page or post, without reference to templates or post-types, in any part of the content part of the page.

This is how the widget looks in the admin panel in a visual format

How-To-Develop-Widgets-For-Gutenberg-Using-ACF_2

as well as in edit mode

How-To-Develop-Widgets-For-Gutenberg-Using-ACF_3

This block is added to the page using a custom widget built on the basis of ACF plugin.

How-To-Develop-Widgets-For-Gutenberg-Using-ACF_4

To create a block, first we need to register it in functions.php

add_action('acf/init', 'wds_acf_init');
function wds_acf_init() {

// check function exists
if( function_exists('acf_register_block') ) {

// register a testimonial block
acf_register_block(array(
'name'                => 'future_cat',
'title'                => __('Featured category'),
'description'        => __('A Featured category block.'),
'render_template'   => get_template_directory() . '/global-templates/block/content-future_cat.php',
'enqueue_script'    => get_template_directory_uri() . '/global-templates/block/future_cat.js',
'enqueue_style'    => get_template_directory_uri() . '/global-templates/block/future_cat.css',
'category'            => 'widgets',
'icon'                => 'screenoptions',
'keywords'            => array( 'category', 'featured' ),
));

}
}

Here we register the block, its files styles and scripts, as well as a template for output.

How-To-Develop-Widgets-For-Gutenberg-Using-ACF_5

Indicate in which category to display it

How-To-Develop-Widgets-For-Gutenberg-Using-ACF_6

and icon’s code from Dashicons(is the official icon font of the WordPress admin)

After that, in the ACF plugin, create a new group of fields, to which we connect the registered before block.

How-To-Develop-Widgets-For-Gutenberg-Using-ACF_7

Fill it with the necessary fields.

Next, in the PHP template file, display the contents of the block with a standard ACF loop.

<?php
/**
* Block Name: Future category
*
* This is the template that displays the testimonial block.
*/

// check if the repeater field has rows of data
if( have_rows('category_list') ):

?>
<div class="flex flex--wrap waffle waffle--large">

<?php
// loop through the rows of data
while ( have_rows('category_list') ) : the_row();

?>

<div class="flex__column flex__column--6 flex">

<div class="media-thumbnail">

<a class="media-thumbnail__inner flex flex--stack flex--queue@xlarge waffle waffle--large" href="<?php echo 
get_category_link(get_sub_field('block_item')); ?>">

<span class="flex__column flex__column--shrink">

<span class="media-thumbnail__icon"><?php echo file_get_contents(get_sub_field('taxonomy_icon')); ?></span>

</span>

<div class="media-thumbnail__body flex__column">

<h3 class="media-thumbnail__heading"><?php the_sub_field('block_title'); ?></h3>

<div class="media-thumbnail__content">

<?php the_sub_field('short_description'); ?>

</div>

</div>

</a>

</div>

</div>

<?php

endwhile;

?>

</div>

<?php

endif;

?>

If necessary, write styles and scripts in previously connected files.

That’s all, building blocks is pretty simple process, it’s convenient to use, and they are isolated and will always look equally good in any part of the content of a page or post.

And here in the ACF documentation, you can read more details if you need, on how the plugin works with the editor.

ERP development final cta

Get a Custom Solution with Web Design Sun

At Web Design Sun, we specialize in building web applications for clients in every business and industry.  If you’re interested in custom applications for your business, contact us today.

Contact us today to get started

More From Blog

How To Create Custom Post Type In WordPress (Without Plugin)

Sometimes there is a need to create your own version of the post and in this article, we show step by step how to create a custom post type without a plugin.
21 Sep 2018 9 min read

Press Release: Top Developers in New York Recognition

For almost a decade, we have been dedicated to our clients and their products’ success. We are so proud to receive another Clutch Award, this time as top developers in New York!
23 Aug 2019 5 min read

Best AI Services for Generation Content

Artificial Intelligence (AI) has come a long way in recent years and has proven to be a valuable tool for content generation. With the help of AI, businesses and individuals can now generate high-quality content in a fraction of the time it would take to do it manually. In this blog post, we will take a look at some of the best AI services currently available for content generation and how they can help you save time and effort.
23 Jan 2023 11 min read