Skip to content

Home

Jump to bottom
Oliver Harrison edited this page Oct 5, 2022 · 16 revisions

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.

This plugin includes the following blocks:

  • Accordion
  • Cards (Repeater)
  • Carousel
  • Logo Grid
  • Quotes
  • Side-by-Side
  • Tabs

WDS ACF Blocks is bundled with Style Lint, ESLint, and PHPCS linting rulesets – plus, it passes both WCAG 2.1AA and Section 508 standards out of the box. This plugin uses WP Scripts to handle the build process for the blocks. It uses

To better manage ACF Field Groups, the plugin supports synchronized JSON for Advanced Custom Fields.

WebDevStudios. WordPress for big brands.

Getting Started

Prerequisites

Because the plugin compiles and bundles assets via NPM scripts, basic knowledge of the command line and the following dependencies are required: Node LTS and NPM.

IMPORTANT

This plugin relies entirely on Advanced Custom Fields Pro for WordPress. The Pro version is required, along with a version greater than 6.0 - it will not work with any ACF 5.x version. Additonally, while the WebDevStudios theme wd_s is not required, it is highly recommended to get started with this plugin.

Who this plugin is for

It is important to be aware of who this plugin is designed for - this is squarely aimed at developers who want to use it as a starter to scaffold out a lot of blocks quickly for a project. This is ideal for that case, but it is entirely dependant on your ability to build scaffold them all yourself, along with the styling.

This is not a 'drop in', do-it-all plugin for your next blog - you'll have to understand PHP, JS, SCSS (and probably a good amount of Tailwind), and a complex build process to use this plugin.

The good news is that this plugin was designed to drastically speed up your workflow, keep your blocks consistent and keep your code DRY. If you're a developer - or a small team of developers - this plugin is for you.

Installation

  1. From the command line, change directories to your new theme directory:
cd /plugin/wds-acf-blocks
  1. Install plugin dependencies and trigger an initial build:
npm i

NPM Scripts

From the command line, type any of the following to perform an action:

npm run build - Compile and build all assets .

npm run start - Automatically compile the SCSS & Tailwind to CSS; minifies the JS. This will also

Contributing and Support

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

Clone this wiki locally