README

Generate ACF Gutenberg blocks just by adding templates to your Sage 8 theme. This package is forked from the Sage 9 version by MWDelaney which is based heavily on this article by nicoprat.

Installation

Run the following in your Sage 8-based theme directory:

composer require "lachlanarthur/sage8-acf-wp-blocks"

Requirements

Wordpress 5+
Advanced Custom Fields 5.8+
Theme based on Sage 8 (See the original for Sage 9)

Creating blocks

Add templates to your-theme/wp-blocks which get and use ACF data. Each template requires a metadata comment block with some data in it:

<?php
/**
 * Title: 
 * Description: 
 * Category: 
 * Icon: 
 * Keywords: 
 * Post Types: 
 * Default Mode: 
 * Default Alignment: 
 */

Example block template

<?php
/**
 * Title: Testimonial
 * Description: Customer testimonial
 * Category: formatting
 * Icon: admin-comments
 * Keywords: testimonial quote
 * Post Types: post page
 * Default Mode: preview
 * Default Alignment: full
 */
?>

<blockquote data-<?= sanitize_html_class( $block['id'] ) ?> class="<?= esc_attr( $block['classes'] ) ?>">
  <p><?= get_field('testimonial') ?></p>
  <cite>
    <span><?= get_field('author') ?></span>
  </cite>
</blockquote>

<style type="text/css">
  [data-<?= sanitize_html_class( $block['id'] ) ?>] {
    background: <?= get_field('background_color') ?>;
    color: <?= get_field('text_color') ?>;
  }
</style>

Block options

Option	Value
Category	`common` `formatting` `layout` `widgets` `embed` Create your own
Icon	The name of a Dashicon
Post Types	Space-delimited list of post types
Default Mode	`preview` `edit`
Default Alignment	`left` `center` `right` `wide` `full`

Creating ACF fields

Once a block is created you'll be able to assign ACF fields to it using the standard Custom Fields interface in WordPress. We recommend using sage-advanced-custom-fields to keep your ACF fields in version control with Sage.

Changing the blocks directory

The wp-blocks directory can be changed with the filter sage8-acf-wp-blocks-paths:

add_filter('sage8-acf-wp-blocks-paths', function ($paths) {
  return ['templates/blocks', 'another-path'];
}, 10, 1);

lachlanarthur / sage8-acf-wp-blocks

Maintainers

Details