With the advent of Gutenberg in WordPress, Advanced Custom Fields stepped up to help make the process of creating custom blocks easier and faster. This plugin creates a set of custom blocks with basic styles for you to customize in your theme.
This plugin includes the following blocks:
- Accordion
- Carousel
WDS ACF Blocks is bundled with a Style Lint, ESLint, and PHPCS linting rulesets – plus, it passes both WCAG 2.1AA and Section 508 standards out of the box.
To better manage ACF Field Groups, the plugin supports synchronized JSON for Advanced Custom Fields.
👉 Please visit the WDS ACF Blocks Wiki to learn more about the features of the blocks and how you can create Gutenberg Blocks with ACF.
We highly recommend NVM so you can easily switch between Node versions.
Clone the repository into wp-content/plugins of a WordPress website:
git clone git@github.com:WebDevStudios/wds-acf-blocks.gitFrom the command line, change directories:
cd wds-acf-blocksInstall plugin dependencies and trigger an initial build:
npm installTo watch for changes during development, run the following command:
npm run dev
To build the production version, execute this command:
npm run buildLinting rules for JavaScript and SCSS are defined in package.json from line number 40 to 84.
Lint JS:
npm run lint:jsLint SCSS:
npm run lint:cssLint PHP:
The PHPCS ruleset is defined in .phpcs.xml.dist. To lint PHP via composer, run the following command:
composer run lint👉 Important: This plugin uses @wordpress/scripts to lint and compile JavaScript and SCSS.
To edit an ACF block in Gutenberg, you need to access the settings. Please follow these three simple steps to access the block settings:
Go to the WordPress admin and open the add new post or edit post screen in Gutenberg.
Click on the add (+) block icon on the top left corner of the screen and search for carousel to add a new Carousel block to the editor.
Clicking on the block will toggle edit mode to access the settings. Block will always show the preview.
ACF Block Settings:
By default, saving the ACF blocks to JSON files filter is set to save to the current theme. You will need to create the acf-json folder on the root of your theme and transfer the existing json files in acf-json to that folder. You can change to save in the plugin by changing the $path variable to plugin_dir_path( dirname( __FILE__ ) ) . '/acf-json'; in this line: https://github.com/WebDevStudios/wds-acf-blocks/blob/main/inc/hooks.php#L27
To know more about loading and saving of blocks in ACF JSON files, visit the Saving and Loading Blocks section in the Wiki.
Styling blocks will be done in the theme and not in the plugin. The accordion block has a starter stylesheet that can be copied over to the theme, this contains the base style to make the accordion work and can be modified as needed. The carousel block is using the default glider-js stylesheet.
Please find extensive developer documentation at the following links:
- WDS ACF Blocks
- Block Features
- Block Details
- How to create Gutenberg Blocks with ACF
- Saving and Loading Blocks
- Glider.js - Carousel
Your contributions and support tickets are welcome. Please see our guidelines before submitting a pull request.