Nucleic Phosphate Modifier


    0.7.3 • Public • Published

    Create ACF Block

    Register and scaffold your ACF blocks through a CLI

    Read my blog post on why and how I created the create-acf-block CLI.

    What this CLI does

    The create-acf-block CLI registers your block within the acf_register_block_type() function, scaffolds a block render template, and optionally preps CSS and JS.


    1. Run npm i --save-dev create-acf-block

    2. Add these comments as markers in your block registration file. The CLI will register blocks only between these two comments.

    // Begin Create-ACF-Block
    // End Create-ACF-Block


    function register_my_blocks() {
      // check function exists
      if( function_exists('acf_register_block_type') ) {
        // Begin Create-ACF-Block
        // End Create-ACF-Block
        // ... Other blocks you might have registered manually
    1. Run npx create-acf-block


    When you first run the CLI, you'll set some basic preferences:

    Block registration file path
    The path to our ACF block registration file (where your acf_register_block_type() functions live.)
    Example: ./inc/acf-blocks.php.

    Render template folder path
    The path to the folder where your ACF block render templates live. Example: ./blocks.

    Create block specific CSS and JS files
    Whether the CLI should scaffold CSS and JS files for your blocks.

    Group block CSS and JS files with the render template Whether the CLI should place your CS and JS files in the same directory as your render template.

    If no, your blocks will look something like:

    │   hero.php
    │   quote.php
    │   hero.css
    │   quote.css
    │   hero.js
    │   quote.js

    If yes, you'll provide the paths to your CSS and JS directories and your blocks will look something like:

    │    │   block.php
    │    │   block.css
    │    │   block.js
          │   block.php
          │   block.css
          │   block.js

    General Flags

    --preferences - Clear your preferences and set them again.

    Block Detail Flags

    When block flags are used, you will only be prompted to provide details for those flags. Note: name and title fields are required and will always be included in prompts.

    Only prompts for the block name and title

    The block description

    The block category as seen in the editor

    The default mode: [edit/preview/auto]

    The default block alignment

    Whether the block will use innerBlocks


    npm i create-acf-block

    DownloadsWeekly Downloads






    Unpacked Size

    15.3 kB

    Total Files


    Last publish


    • jfarruggio