Skip to content

This package provides a set of Gutenberg blocks that can be easily created using Advanced Custom Fields (ACF) and integrated into the Lumberjack framework. It includes a block provider and an abstract block that you can extend to create custom blocks with ACF fields.

Notifications You must be signed in to change notification settings

arnaudbagnis/acf-gutenberg-custom-block

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

Acf Gutenberg Custom Block for Lumberjack

This package provides a custom block creation functionality for the Lumberjack theme with the help of ACF Pro plugin. It includes a Provider and an AbstractBlock class that allows you to create custom blocks quickly and easily.

Installation

To use this package, you need to have ACF Pro installed and activated in your project. You can install this package via composer by running the following command:

composer require arnaudbagnis/acf-gutenberg-custom-block

Usage

Create a new block in your theme's block directory by extending the AbstractBlock class provided by this package. Here is an example:

<?php
namespace App\Guttenberg\Block;

use Timber\Timber;

class MyCustomBlock extends AbstractBlock
{

    public static function getName(): string
    {
        return "my-custom-block";
    }

    public static function getTitle(): string
    {
        return "My Custom Block";
    }

    public static function getDescription(): string
    {
        return "This is a description";
    }

    public static function getCategory(): string
    {
        return "formatting";
    }

    public static function getIcon(): string
    {
        return "admin-comments";
    }

    public static function getKeywords(): array
    {
        return array('my-custom-block', 'quote');
    }

    public static function getExample(): array
    {
        return array();
    }

    public static function getEnqueueAssets()
    {
        // Add a style/js for only this block
        return null;
    }

    public static function getLocalFieldGroup(): array
    {
        // Add a php field acf block for stay in memories
        return [];
    }

    public static function getController($block)
    {
        $context = Timber::context();
        // retrieve an ACF field here
        $context['settings'] = [
            'title' => get_field('title'),
            'description' => get_field('description'),
            'image_right' => get_field('image_right'),
            'cta' => get_field('cta'),
            'explanations' => get_field('explanations'),
        ];
        Timber::render('templates/blocks/' . static::getName() . '.twig', $context);
    }
}

Create a block.php file in your theme's config directory and add the following code to it:

<?php

use App\Guttenberg\Block\MyCustomBlock;

return [
    'styles' => [
        './assets/dist/main.css'
    ],
    'blocks' => [
        MyCustomBlock::class,
    ]
];

The styles array allows you to add global styles to the Gutenberg editor, while the blocks array allows you to add the blocks you created.

That's it! Your custom block is now ready to be used in the Gutenberg editor.

About

This package provides a set of Gutenberg blocks that can be easily created using Advanced Custom Fields (ACF) and integrated into the Lumberjack framework. It includes a block provider and an abstract block that you can extend to create custom blocks with ACF fields.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages