Create ACF blocks in WordPress Gutenberg quicker with my create-acf-block-json package

I’ve created a quicker way to make block.json blocks with Advanced Custom Fields and the WordPress Block Editor.

Advanced Custom Fields (ACF) is a WordPress plugin that allows users to add custom fields to their posts, pages, and custom post types. It provides a user-friendly interface for creating and managing custom fields, and allows for a wide range of field types, including text, images, and file uploads. Since version 5.8, you can also use ACF to create custom blocks for Gutenberg – the new WordPress Block Editor.

The WordPress Block Editor is the new default editor for WordPress, and was introduced in version 5.0. It replaces the classic editor and aims to make creating and editing content in WordPress more intuitive and user-friendly. Gutenberg uses a block-based approach, where each piece of content, such as a paragraph or an image, is represented by a block. This allows users to add, edit, and arrange blocks of content in a more visual and flexible way.

Combining ACF and the Block Editor allows for quick creation of custom blocks that will revolutionise your websites editing and publishing experience.

Introducing Create ACF Block JSON

The Create ACF Block JSON package allows you to quickly create a new WordPress Block that uses Advanced Custom Fields (ACF) and utilises block.json and block-specific CSS and PHP files.

Doing this manually is slow, copying old files is prone to error, mistakes or extraneous code. Using Create ACF Block JSON is a super quick way to scaffold your new block in seconds.

If you use ACF and make Gutenberg blocks, this simple utility should save you time scaffolding custom blocks.

Getting started with Create ACF Block JSON

I’ve created Create ACF Block JSON as an NPM package. To get started, install it globally on your system via npm in your terminal:

$ npm install --global create-acf-block-json

Installing the package globally will allow you to go to any of your projects, then simply run create-acf-block-json, and follow the prompts to generate a simple block to get you started.

Once created, add an ACF Field Group and associate it with the block. Add fields and access them in your block, or simply style the scaffold files and use the includes <InnerBlocks> to let your editors include any content they wish within your block.

Got feedback? Open an issue on Github. Want to support the project? Give it a star on Github. Thanks!