Nucleic Phosphate Modifier

    create-acf-block

    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.

    Usage


    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

    Example:

    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

    Preferences


    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:

    ./blocks
    │   hero.php
    │   quote.php
    │
    ./css
    │   hero.css
    │   quote.css
    ./js
    │   hero.js
    │   quote.js
    

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

    ./blocks
    │
    └───hero
    │    │   block.php
    │    │   block.css
    │    │   block.js
    └───quote
          │   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.

    --simple
    Only prompts for the block name and title

    --description
    The block description

    --category
    The block category as seen in the editor

    --mode
    The default mode: [edit/preview/auto]

    --align
    The default block alignment

    --jsx
    Whether the block will use innerBlocks

    Install

    npm i create-acf-block

    DownloadsWeekly Downloads

    35

    Version

    0.7.3

    License

    MIT

    Unpacked Size

    15.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • jfarruggio