WDS ACF Blocks

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.

🧱 Available Blocks

This plugin includes the following blocks:

Accordion
Carousel
Call To Action
Fifty/Fifty
Hero
Recent Posts
Related Posts

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.

📝 Requirements

We highly recommend NVM so you can easily switch between Node versions.

💻 Development

🚀 Installation

Clone the repository into wp-content/plugins of a WordPress website:

git clone [email protected]:WebDevStudios/wds-acf-blocks.git

From the command line, change directories:

cd wds-acf-blocks

Install plugin dependencies and trigger an initial build:

npm install

🚦 Workflow

To watch for changes during development, run the following command:

npm run dev

To build the production version, execute this command:

npm run build

🛠 Linting Commands

Linting rules for JavaScript and SCSS are defined in package.json from line number 40 to 84.

Lint JS:

npm run lint:js

Lint SCSS:

npm run lint:css

Lint 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.

✏️ Editing an ACF Block in Gutenberg

To edit an ACF block in Gutenberg, you need to access the settings. Please follow these three simple steps to access the block settings:

→ Step #1

Go to the WordPress admin and open the add new post or edit post screen in Gutenberg.

→ Step #2

Click on the add (+) block icon on the top left corner of the screen and search for call to action to add a new Call to Action block to the editor.

→ Step #3

Click on the edit (✏️) icon that is appearing in the toolbar of the block to access the settings.

ACF Block Settings:

📚 Developer Documentation

→ Saving ACF JSON Files

By default, saving the ACF blocks to JSON files filter is commented out in the plugin. You can enable this feature by removing the comments from 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.

→ Important Wiki Links

Please find extensive developer documentation at the following links:

Contributing and Support

Your contributions and support tickets are welcome. Please see our guidelines before submitting a pull request.

1thorarinn / wds-acf-blocks Goto Github PK

wds-acf-blocks's Introduction