README

Generate ACF Gutenberg blocks just by adding templates to your Sage theme. This package is based heavily on this article by nicoprat.

Installation

Run the following in your Sage (v9 or 10) based theme directory:

composer require "mwdelaney/sage-acf-gutenberg-blocks"

Creating blocks

Add blade templates to views/blocks which get and use ACF data. Each template requires a comment block with some data in it:

{{--  Title:  Description:  Category:  Icon:  Keywords:  Mode:  Align:  PostTypes:  SupportsAlign:  SupportsMode:  SupportsMultiple:  EnqueueStyle:  EnqueueScript:  EnqueueAssets: --}}

Example block template

{{--  Title: Testimonial  Description: Customer testimonial  Category: formatting  Icon: admin-comments  Keywords: testimonial quote  Mode: edit  Align: left  PostTypes: page post  SupportsAlign: left right  SupportsMode: false  SupportsMultiple: false  EnqueueStyle: styles/style.css  EnqueueScript: scripts/script.js  EnqueueAssets: path/to/asset --}} <blockquote data-{{ $block['id'] }} class="{{ $block['classes'] }}"> <p>{{ get_field('testimonial') }}</p> <cite> <span>{{ get_field('author') }}</span> </cite> </blockquote> <style type="text/css">  [data-{{$block['id']}}] {  background: {{ get_field('background_color') }};  color: {{ get_field('text_color') }};  } </style>

Data Options

The options in the file header map to options in the acf_register_block_type function.

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.

Filter block data

Block data can be altered via the 'sage/blocks/[block-name]/data' filter. For example, if your block template is called my-block.blade.php, you can alter the data this way:

add_filter('sage/blocks/my-block/data', function ($block) { // Do your thing here. });

Filter template folders

By default all your template files in views/blocks will be loaded. You can use the templates filter to add more folders if you wish. See an example below of how to add your own folders.

add_filter('sage-acf-gutenberg-blocks-templates', function ($folders) { $folders[] = 'views/your-folder'; // Adds your folder return $folders; });