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
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
$ 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.