ACF Blocks Provides Assortment of Blocks Built from Advanced Custom Fields Pro

Over the weekend, Munir Kamal released version 2.0 of his ACF Blocks plugin, a project that creates a suite of blocks for the editor. The plugin offers 18 custom blocks in its free version and 15 more in the pro upgrade. It is built on top of Advanced Custom Fields Pro (ACF Pro).

The latest update of the plugin added support for typography, including options for using various Google Fonts for in-block text. Kamal also included base styling options for design features like margin and padding for every block in the plugin.

With ACF Pro as a hard dependency, it limits the audience of ACF Blocks. In large part, this plugin will be useful for agencies and freelancers who need to quickly build features for clients within their budget. For that purpose, the plugin does a solid job.

The tight coupling with ACF Pro hurts the user experience for the plugin. However, the ideas behind ACF Blocks and its custom options make up for the shortcomings of relying on its dependent parent plugin. Decoupling the two is unlikely, but it would make for a smoother experience and open the plugin to a wider audience.

Kamal took inspiration for the plugin from ACF and its pro version. He described the process of building blocks with the framework “super easy,” even for an intermediate-level developer. “It has been such an amazing WordPress framework for years to create custom fields,” he said. “And when [Elliot Condon] announced the block creation feature in ACF, that quickly triggered me to build this collection of ready-to-use ACF Blocks.”

The biggest technical limitation is that Kamal cannot build nested blocks, which is a current limitation of ACF. “I have already discussed it with [Condon], and he is already working on bringing that functionality hopefully soon,” he said. “Once that comes to ACF, we may create more amazing and powerful Gutenberg Blocks.”

Watch a short walkthrough of how the plugin works:

Useful Assortment of Blocks

While primarily testing the free version of ACF Blocks, I found that it has several useful blocks that could immediately address common needs for end-users. With 18 free blocks available, users have plenty to work with before deciding whether they want to move along the upgrade path to the pro version.

One of the best blocks in the collection is the Photo Collage block. It is ACF Blocks’ answer to the core Gallery block. The grid options for this block alone make this plugin worth checking out. The block offers between 2 and 15 grid layouts, depending on the grid option the user selects.

My second favorite of the assortment is the Testimonial block. Coupled with the typography options, which are available for all blocks, you can have a lot of fun designing a testimonial section.

This is a small sampling of what the plugin can do. The Price List block can help restaurant sites set up their menu. The Pricing Box block, particularly when nested into the core Columns block, makes it easy to set up a pricing section with multiple product options. And, the Team block makes it simple to create profile sections on a company’s team/about page.

The following blocks are available in the free version (with several more in the pro version):

1. Scrollable Image Block
2. Tab Block
3. Toggle Block
4. Accordion Block
5. Image Slider Block
6. Social Sharing Block
7. Photo Collage Block
8. Posts Block
9. Testimonial Block
10. Team Block
11. Multi Buttons Block
12. Pricing Box Block
13. Price List Block
14. Start Rating Block
15. Progress Bar Block
16. Counter Number Block
17. Click to tweet Block
18. Business Hours Block

Kamal’s favorite blocks from the overall suite are Image Hotspot, which allows users to set an image background with “pointers” to pop up content; Before After Image, which lets users compare two images using a sliding bar; and Photo Collage, the plugin’s grid-based gallery block. The first two are available only in the pro version of the plugin. The plugin creator said he thinks all the blocks are useful but these were the most fun to build.

Room for Improvement

ACF Blocks is a nice concept. It gets a lot of things right. However, there are minor issues that dampen the experience of working with its blocks. These issues are not insurmountable, and I expect Kamal will address them in upcoming versions based on familiarity with his past work and drive toward building great products for users.

The most immediate issue and likely the simplest to fix is the plugin’s styles for left and right margins on every block. The plugin resets these margins to 0 by default. Depending on the active theme on a site, this could shift the blocks to the edge of the screen instead of the content area on the front end. Some themes use left/right margins to align content. This is not an issue with only ACF Blocks. It is prevalent among plugins with front-end output.

One quick solution for the margin issue is to wrap any of the plugin’s blocks within the core Group block. This will put margins back under the theme’s control.

Editing block content happens in the block options panel instead of directly in the block. I am unsure if this is a limitation of using the ACF Pro framework or a design decision on Kamal’s part. It feels odd to jump between editing content in the content area to editing content in the sidebar.

One example of my confusion with block content was with the Photo Collage block. I clicked on the block, hoping to have the media library appear for uploading. Nothing happened. I clicked again because, well, maybe I did not get a good click in that first time. Nothing happened. I eventually found the image upload button under the block’s option panel on the right.

Setting block options can feel a little sluggish at times with the block output in the editor not reflecting changes immediately. This is primarily because ACF Blocks relies on the server-side rendering capabilities of ACF Pro. It is unlikely this can be addressed in the blocks plugin. Some users may find the delayed rendering to be tedious when editing multiple options.

Final Thoughts

Kamal has put together a useful set of blocks that will help many end-users build sections of content they cannot create out of the box. Between the free and pro versions, there is a total of 33 blocks. The creator is committed to adding more blocks over time based on user feedback. In the immediate future, he plans to keep hacking away at bug fixes and improving the code.

I still feel like how ACF Pro works is a hindrance to how good this plugin could be if built from scratch. With that said, the framework helped make Kamal’s plugin a reality. ACF Blocks is a showcase in what is possible via ACF Pro, which should inspire other developers who are looking for solutions built on top of one of the most widely-used frameworks in the WordPress ecosystem.

Kamal understands that some ACF Pro users may try their hands at creating similar blocks but feels like his team’s knowledge and dedication to offering support are the most important parts of the equation. “ACF Blocks saves time and effort for creating blocks yourself for the most common web design elements,” he said.

Note: this plugin review and feedback were requested by the plugin author. Read our post about honest feedback based on genuine experiences for more information on how reviews are handled.