PHPackages                             larodiel/sage-acf-gutenberg-blocks - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. larodiel/sage-acf-gutenberg-blocks

ActiveLibrary[Templating & Views](/categories/templating)

larodiel/sage-acf-gutenberg-blocks
==================================

Fork of the original Sage ACF Gutenberg Blocks project. Create Gutenberg blocks from Sage blade templates and ACF fields.

v0.8.1(2y ago)21.9k1[1 PRs](https://github.com/larodiel/sage-acf-wp-blocks/pulls)MITPHPPHP >=7.4

Since Jan 26Pushed 2y agoCompare

[ Source](https://github.com/larodiel/sage-acf-wp-blocks)[ Packagist](https://packagist.org/packages/larodiel/sage-acf-gutenberg-blocks)[ Docs](https://github.com/larodiel/sage-acf-wp-blocks)[ RSS](/packages/larodiel-sage-acf-gutenberg-blocks/feed)WikiDiscussions master Synced yesterday

READMEChangelog (2)DependenciesVersions (4)Used By (0)

Sage ACF Gutenberg Blocks
=========================

[](#sage-acf-gutenberg-blocks)

Generate ACF Gutenberg blocks just by adding templates to your Sage theme.

This package is based heavily on [this article](https://medium.com/nicooprat/acf-blocks-avec-gutenberg-et-sage-d8c20dab6270) by [nicoprat](https://github.com/nicooprat).

Installation
------------

[](#installation)

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

```
composer require "larodiel/sage-acf-gutenberg-blocks"
```

Creating 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:
  SupportsFullHeight:
  SupportsInnerBlocks:
  EnqueueStyle:
  EnqueueScript:
  EnqueueAssets:
  Parent:
--}}
```

### Example block template

[](#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
  SupportsFullHeight: false
  SupportsInnerBlocks: false
  EnqueueStyle: styles/style.css
  EnqueueScript: scripts/script.js
  EnqueueAssets: path/to/asset
  Parent: core/column
--}}

    {{ get_field('testimonial') }}

      {{ get_field('author') }}

  [data-{{$block['id']}}] {
    background: {{ get_field('background_color') }};
    color: {{ get_field('text_color') }};
  }

```

Data Options
------------

[](#data-options)

The options in the file header map to options in the [`acf_register_block_type` function](https://www.advancedcustomfields.com/resources/acf_register_block_type/).

FieldDescriptionValuesNotes`Title`Title of the block in the gutenberg editori.e. `Testimonial`*required*`Description`Description of the block in the gutenberg editori.e. `My testimonial block`*optional*`Category`Category to store the block in. Use these values or [register your own custom block categories](#creating-your-custom-blocks-categories)`common`, `formatting`, `layout`, `widgets`, `embed`*required*`Icon`An icon property can be specified to make it easier to identify a block. Uses [dashicons](https://developer.wordpress.org/resource/dashicons/)i.e. `book-alt`*optional*`Keywords`An array of search terms to help user discover the block while searching. Separate 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. Separate 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`)`SupportsFullHeight`This property allows enables the full height button on the toolbar of a block`true` or `false`*optional* (defaults to `false`)`SupportsInnerBlocks`This property allows the block to support the nesting of other blocks within it.`true` or `false`*optional* (defaults to `false`) ***This works just on preview mode***`SupportsAlignText`This property adds an alignment toolbar button similar to that seen when editing a paragraph of text.`true` or `false`*optional* (defaults to `false`)`SupportsAlignContent`This property adds an alignment toolbar button similar to that seen when editing a core "Cover block"`true`, `false` or matrix (Show full alignment matrix in toolbar)*optional* (defaults to `false`)`EnqueueStyle`A CSS file to load when the block is used.e.g. `styles/my-block.css`*optional* (defaults to empty string)`EnqueueScript`A JS file to load when the block is used.e.g. `scripts/my-block.js`*optional* (defaults to empty string)`Parent`An array of block types to restrict where this block can be used. Separate values with a space.e.g. `core/column acf/parent-block`*optional* (defaults to usable anywhere)Creating ACF fields
-------------------

[](#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](https://github.com/MWDelaney/sage-advanced-custom-fields) to keep your ACF fields in version control with Sage.

Filter block data
-----------------

[](#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
-----------------------

[](#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;
});
```

Creating your custom blocks categories
--------------------------------------

[](#creating-your-custom-blocks-categories)

```
add_filter('block_categories_all', function ($categories) {
    // Define the new categories
    $newCategories = [
        ['slug' => 'my-custom-category', 'title' => __('Custom Category', 'sage')],
        ['slug' => 'my-custom-category2', 'title' => __('Custom Category 2', 'sage')],
    ];

    // Merge the new categories with the existing ones
    return array_merge($categories, $newCategories);
});
```

More details about the hook `block_categories_all` on [registering your own custom block categories](https://developer.wordpress.org/reference/hooks/block_categories_all/)

###  Health Score

25

—

LowBetter than 35% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity23

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity34

Early-stage or recently created project

 Bus Factor1

Top contributor holds 50% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~13 days

Total

2

Last Release

877d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/e80acfc9b733c2042789511f18bf4f02bbfef760b2e008ee306534d620b8c930?d=identicon)[larodiel](/maintainers/larodiel)

---

Top Contributors

[![MWDelaney](https://avatars.githubusercontent.com/u/2457670?v=4)](https://github.com/MWDelaney "MWDelaney (41 commits)")[![robmeijerink](https://avatars.githubusercontent.com/u/14540290?v=4)](https://github.com/robmeijerink "robmeijerink (14 commits)")[![larodiel](https://avatars.githubusercontent.com/u/596698?v=4)](https://github.com/larodiel "larodiel (9 commits)")[![xaqrox](https://avatars.githubusercontent.com/u/394919?v=4)](https://github.com/xaqrox "xaqrox (5 commits)")[![speakerbug](https://avatars.githubusercontent.com/u/8688530?v=4)](https://github.com/speakerbug "speakerbug (3 commits)")[![tombroucke](https://avatars.githubusercontent.com/u/24292260?v=4)](https://github.com/tombroucke "tombroucke (3 commits)")[![palmiak](https://avatars.githubusercontent.com/u/2342458?v=4)](https://github.com/palmiak "palmiak (2 commits)")[![bebjakub](https://avatars.githubusercontent.com/u/10927960?v=4)](https://github.com/bebjakub "bebjakub (2 commits)")[![robyurkowski](https://avatars.githubusercontent.com/u/230379?v=4)](https://github.com/robyurkowski "robyurkowski (1 commits)")[![lachieh](https://avatars.githubusercontent.com/u/1687902?v=4)](https://github.com/lachieh "lachieh (1 commits)")[![cfaria](https://avatars.githubusercontent.com/u/756658?v=4)](https://github.com/cfaria "cfaria (1 commits)")

---

Tags

wordpressadvanced custom fieldsgutenberg

### Embed Badge

![Health badge](/badges/larodiel-sage-acf-gutenberg-blocks/health.svg)

```
[![Health](https://phpackages.com/badges/larodiel-sage-acf-gutenberg-blocks/health.svg)](https://phpackages.com/packages/larodiel-sage-acf-gutenberg-blocks)
```

###  Alternatives

[mwdelaney/sage-acf-gutenberg-blocks

Create Gutenberg blocks from Sage blade templates and ACF fields.

354376.2k1](/packages/mwdelaney-sage-acf-gutenberg-blocks)[palmiak/timber-acf-wp-blocks

Create Gutenberg blocks from Twig templates and ACF fields.

24976.7k2](/packages/palmiak-timber-acf-wp-blocks)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9762.4M131](/packages/roots-acorn)[gamajo/template-loader

A class for your WordPress plugin, to allow loading template parts with fallback through the child theme > parent theme > plugin

29849.6k5](/packages/gamajo-template-loader)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)