Skip to content
This repository has been archived by the owner on Feb 25, 2023. It is now read-only.

Composer library for generating ACF Gutenberg blocks from templates.

Notifications You must be signed in to change notification settings

ravorona/sage-acf-wp-blocks

 
 

Repository files navigation

Sage ACF Gutenberg Blocks

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 "ravorona/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:
  Preview:
  PreviewImage:
--}}

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
  Preview: true
  PreviewImage: path/to/my/block/preview.jpg
--}}

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

Field Description Values Notes
Title Title of the block in the gutenberg editor i.e. Testimonial required
Description Description of the block in the gutenberg editor i.e. My testimonial block optional
Category Category to store the block in. Use these values or register your own custom block categories common, formatting, layout, widgets, embed required
Icon An icon property can be specified to make it easier to identify a block. Uses dashicons i.e. book-alt optional
Keywords An array of search terms to help user discover the block while searching. Sepearate values with a space. i.e. quote mention cite optional
Mode The display mode for your block. auto: Preview is shown by default but changes to edit form when block is selected. preview: Preview is always shown. Edit form appears in sidebar when block is selected. edit: Edit form is always shown. auto, preview or edit optional (defaults to preview)
Align The default block alignment. left center right wide full optional (defaults to empty string)
PostTypes An array of post types to restrict this block type to. Sepearate values with a space. i.e. post page
SupportsAlign This property adds block controls which allow the user to change the block’s alignment. Set to true to show all alignments, false to hide the alignment toolbar. Set to an array (strings separated by spaces) of specific alignment names to customize the toolbar. (boolean) true, false
or (array) left center right wide full
optional (defaults to true)
SupportsMode This property allows the user to toggle between edit and preview modes via a button. true or false optional (defaults to true)
SupportsMultiple This property allows the block to be added multiple times. true or false optional (defaults to true)
Preview Enable block sample preview true or false optional
PreviewImage Path to block sample preview image. Relative to theme directory path/to/block/sample/image.jpg optional

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. });

About

Composer library for generating ACF Gutenberg blocks from templates.

Resources

Stars

Watchers

Forks

Languages

  • PHP 100.0%