WordPress Theme Development with ACF Custom Blocks: Part 2

In Part 1 of this series, we explored the shift from using Flexible Content fields in ACF Pro to building custom Gutenberg blocks using Advanced Custom Fields (ACF). Today, we’re diving deeper into a powerful tool we’ve developed to streamline this process: the Blocks Toolkit plugin for WordPress.

What is the Blocks Toolkit?

The Blocks Toolkit is a custom WordPress plugin that enhances the already simple process of creating custom blocks with ACF by making it even easier. It provides developers with a set of tools and enhancements to streamline block creation and improve consistency across projects.

Why We Built Blocks Toolkit

On many of our WordPress projects, we found ourselves repeating the same block setups and editor customizations. Blocks Toolkit was born out of a need to streamline these tasks and reduce redundancy. The result is a faster, more maintainable workflow for custom block development.

Features of Blocks Toolkit

Block Registration Simplified

Creating custom blocks with the Blocks Toolkit is faster and more streamlined, thanks to several key features:

1. Automatic Block Registration: The plugin automatically registers any block.json files found within your theme's blocks folder, eliminating the need for manual registration.
2. Configurable Block Location: A simple filter allows you to specify additional directories where the Blocks Toolkit should look for block definitions.
3. Nested Block Support: Easily organize blocks with parent/child/ancestor relationships to create more structured and reusable content layouts.
4. Template File Support: The plugin adds support for a custom template.json file, which defines innerBlocks for your blocks, enabling more dynamic layouts.
5. Default JSX Render Template: For blocks using innerBlocks, the plugin provides a flexible default render template that saves you from needing to create a render.php file for each block.

Enhanced Block Editor Customizations

The Blocks Toolkit includes several tweaks to the block editor that improve both the developer and user experience.

Custom Block Icons

Add icons to buttons, navigation links, pagination, and Read More blocks with ease using the Icon panel. The set of icons can easily be customized via a PHP filter, allowing you to personalize the look and feel of your site.

Breakpoint Visibility Controls

Each block has a Responsive settings panel that allows editors to control the visibility of each block based on some pre-defined breakpoints, or by setting a custom breakpoint.

Media Position Transforms

Leverage the core Media/Text block’s Media Position feature by applying transforms to nested blocks, enabling seamless content rearrangement.

Other Features

Blocks Toolkit also provides several other features to simplify building sites with custom blocks:

1. Block ID Support: Automatically give each block a persistent, unique ID.
2. Remove Core Block Styles: Use a PHP filter to remove specific core block styles that may not be needed in your project without writing a single line of JavaScript.
3. Remove Core Block Variations: Easily strip out unnecessary core block variations to keep your block library clean and focused.
4. Timber/Twig Support: Create your block render files using the popular frontend framework (requires Timber).

Getting Started with Blocks Toolkit

To get started with the Blocks Toolkit, you’ll need Advanced Custom Fields Pro. Once you have that installed and activated, our plugin can be downloaded from its GitHub repository, where you’ll always find the latest version, a comprehensive list of features, and detailed documentation to help you make the most of it.

Stay tuned as we continue to build out this series, and feel free to explore Blocks Toolkit in your own projects to see how it can enhance your block development process.