npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

create-acf-block-json

v1.0.11

Published

Quickly create an a new WordPress Block that uses Advanced Custom Fields (ACF) and utilised block.json and block-specific CSS.

Downloads

26

Readme

Create ACF Block JSON

Quickly create a new WordPress Block that uses Advanced Custom Fields (ACF) and utilises block.json and block-specific CSS and PHP files.

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

Quick Start

Install globally via npm:

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

then navigate to where you want your block to be (i.e. /theme/blocks/), and run:

$ create-acf-block-json

What does Create ACF Block JSON do

Create ACF Block JSON is an npm package command line program that will create a new folder in your current directory containing scaffolding for a new WordPress block using Advanced Custom Fields.

It will generate:

  • Folder - containg folder for your block.
  • block.json - prefilled with common block information and default values.
  • PHP file - setup with basic information, classes and innerblocks.
  • SCSS files - for the frontend and editor. SCSS is useful if you use a compiler to output CSS files.
  • CSS file - for the frontend and editor. To write straight CSS or be overwritten by your processed SCSS.

The script handles generating a unique class (.wp-block-namespace-name) for your block which is then referenced in each file.

This script doesn't handle registration of the block - we recommend directory scanning methods to auto load blocks without registering each one. This method is outlined by Bill Erickson, but there are other examples online. But if you need an easier solution to register an ACF block, follow this guide. FYI, many guides are out of date, make sure you use guides released after 28th September 2022 (when ACF 6.0 was released) which will properly use block.json.

Customisation Options

When you run create-acf-block-json you are asked a few questions before your block is created:

  • Namespace: Specify a namespace for the block (defaults to acf)
  • Name: Give your block a name, i.e. "My Cool Block" (required)
  • Description: Describe the functionality of your block so editors and users can find it easily (optional)
  • Icon: The icon for your block - use any Dashicons name (defaults to icon star-filled). Note, when copying the name of the Dashicon you must remove the prefix dashicons-, for example: dashicons-smiley should be written as smiley.

The script will then generate all required files. From there, you can edit, delete, remove the files as you wish.

Install Create ACF Block

  1. Using terminal or another CLI, download from npm and install as a global package - npm install -g create-acf-block-json
  2. Using terminal or another CLI, navigate to your WordPress theme folder where you want all of your blocks (we use /wp-content/themes/my-theme/blocks/)
  3. Run create-acf-block-json and follow prompts.

Update Create ACF Block

To update to the latest version you can just run the install command again - npm install -g create-acf-block-json

Feedback and issues

Please open an issue in the GitHub repo. Thanks.