{"id":17494401,"url":"https://github.com/thetwopct/create-acf-block-json","last_synced_at":"2025-10-19T21:33:26.794Z","repository":{"id":65202419,"uuid":"559471274","full_name":"thetwopct/create-acf-block-json","owner":"thetwopct","description":"Create ACF Block JSON (create-acf-block-json) is a quick utility to scaffold an ACF block for WordPress Gutenberg using the new block.json format","archived":false,"fork":false,"pushed_at":"2024-12-09T07:52:44.000Z","size":280,"stargazers_count":19,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-22T22:17:45.506Z","etag":null,"topics":["acf","gutenberg","wordpress"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thetwopct.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-30T08:06:37.000Z","updated_at":"2025-02-12T11:00:14.000Z","dependencies_parsed_at":"2024-11-08T19:02:23.105Z","dependency_job_id":"716e50e7-7f9c-482b-be66-61a3573b2b6f","html_url":"https://github.com/thetwopct/create-acf-block-json","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetwopct%2Fcreate-acf-block-json","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetwopct%2Fcreate-acf-block-json/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetwopct%2Fcreate-acf-block-json/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thetwopct%2Fcreate-acf-block-json/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thetwopct","download_url":"https://codeload.github.com/thetwopct/create-acf-block-json/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250331819,"owners_count":21413103,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["acf","gutenberg","wordpress"],"created_at":"2024-10-19T13:25:29.004Z","updated_at":"2025-10-19T21:33:26.789Z","avatar_url":"https://github.com/thetwopct.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Create ACF Block JSON\n\n\u003e Quickly create a new [WordPress](https://wordpress.org) Block that uses [Advanced Custom Fields](https://www.advancedcustomfields.com) (ACF) and utilises block.json and block-specific CSS and PHP files.\n\nIf you use ACF and make Gutenberg blocks, this simple utility should save you time scaffolding custom blocks.\n\n\u003cimg src=\"screenshot.gif\" width=\"630\"\u003e\n\nMinimum supported WordPress version: 6.5\n\n## Quick Start\n\nInstall globally via npm:\n\n```sh\nnpm install --global create-acf-block-json\n```\n\nthen navigate to where you want your block to be (i.e. /theme/blocks/), and run:\n\n```\n$ create-acf-block-json\n```\n\n## What does Create ACF Block JSON do\n\nCreate 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.\n\nIt will generate:\n\n- Folder - containing folder for your block.\n- block.json - prefilled with common block information and default values.\n- PHP file - setup with basic information, classes and innerblocks.\n- SCSS files - for the frontend and editor. SCSS is useful if you use a compiler to output CSS files.\n- CSS file - for the frontend and editor. To write straight CSS or be overwritten by your processed SCSS.\n\nThe script handles generating a unique class (.wp-block-namespace-name) for your block which is then referenced in each file.\n\nThis 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](https://www.billerickson.net/building-acf-blocks-with-block-json/#advanced-usage), but there are [other examples](https://github.com/cncf/cncf.io/blob/0233ccfa1fb24d46ce119049b010a18a0e3d91d3/web/wp-content/themes/cncf-twenty-two/includes/acf.php#L19) online. This blog post by ACF also talks about how to register an ACF block, [follow this guide](https://www.advancedcustomfields.com/resources/how-to-upgrade-a-legacy-block-to-block-json-with-acf-6/). 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. If you want a very quick bit of PHP to register your new block, you can use this:\n\n```\n/**\n * Load My Create ACF Block JSON Blocks\n */\nfunction thetwopct_load_acf_blocks() {\n        register_block_type( get_template_directory() . '/blocks/my-acf-block/block.json' );\n      // register_block_type( get_template_directory() . '/blocks/another-block/block.json' );\n}\nadd_action( 'init', 'thetwopct_load_acf_blocks' );\n````\n\n## Customisation Options\n\nWhen you run `create-acf-block-json` you are asked a few questions before your block is created:\n\n- Namespace: Specify a namespace for the block (defaults to `acf`)\n- Name: Give your block a name, i.e. \"My Cool Block\" (required)\n- Description: Describe the functionality of your block so editors and users can find it easily (optional)\n- Icon: The icon for your block - use any [Dashicons](https://developer.wordpress.org/resource/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`.\n\nThe script will then generate all required files. From there, you can edit, delete, remove the files as you wish.\n\n## Customising your block options via block.json\n\nThe package creates a block.json for you to customise your block. We declare all features with their defaults ready for you to set the block up as you need. Consult the [Block Supports API](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) for more information on each setting.\n\n## How to access the Block Supports setting and include them?\n\nWe include some examples in the main PHP file in the block. You can access other settings by accessing the setting on the $block array. Be aware that some settings need additional claseses to properly work (see background). For example:\n\n```php\n$font_size = ( empty( $block['fontSize'] ) ) ? '' : 'has-' . $block['fontSize'] . '-font-size';\n$align_text = ( empty( $block['align_text'] ) ) ? '' : 'has-text-align-' . $block['align_text'];\n$background = ( empty( $block['backgroundColor'] ) ) ? '' : 'has-' . $block['backgroundColor'] . '-background-color';\n$has_background = $background ? 'has-background' : null;\n```\n\n## Install Create ACF Block\n\n1. Using terminal or another CLI, download from npm and install as a global package - `npm install -g create-acf-block-json`\n2. 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/)\n3. Run `create-acf-block-json` and follow prompts.\n\n## Update Create ACF Block\n\nTo update to the latest version you can just run the install command again - `npm install -g create-acf-block-json`\n\n## Feedback and issues\n\nPlease open an issue in the [GitHub repo](https://github.com/thetwopct/create-acf-block-json/issues). Thanks.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthetwopct%2Fcreate-acf-block-json","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthetwopct%2Fcreate-acf-block-json","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthetwopct%2Fcreate-acf-block-json/lists"}