*RESOLVED* Issues creating custom blocks using ACF Pro with Gutenberg and Sage

This is the second Bedrock/Sage project I’ve worked on, and I’m having a lot of issues getting ACF Pro up and running with Gutenberg and Sage. Specifically, I’m trying to register custom blocks and setup a Theme Options page.

I am registering custom fields in web/app/fields.php:

<?php
/**
 * Register Custom Fields
 *
 * @package brightbrightgreat/kiwiartsgroup-2020
 * @author  Bright Bright Great <sayhello@brightbrightgreat.com>
 */

namespace App;

use App\Fields\Containers\ThemeOptions;
use App\Fields\Containers\PostMeta;

register_custom_blocks();
new ThemeOptions();
new PostMeta();

// /**
//  * Loop through all classes in Blocks directory and register fields
//  */
function register_custom_blocks() {
    collect(glob(__DIR__ .'/Fields/Blocks'.'/*.php'))
        ->map(function ($file_name) {
            return str_replace('.php', '', basename($file_name));
        })
        ->reject(function ($class_name) {
            return $class_name === 'AbstractBlock';
        })
        ->each(function ($class_name) {
            $full_class_name = "\\App\\Fields\\Blocks\\{$class_name}";
            new $full_class_name;
        });
};

And I have file called ThemeOptions.php and PostMeta.php in web/app/fields/containers.

This is what ThemeOptions.php looks like:
<?php

	namespace App\Fields\Containers;

	class ThemeOptions {
		public function __construct() {

			if (function_exists('acf_add_options_page')) {
		
				acf_add_options_page(array(
					'page_title' 	=> 'Theme Options & Settings',
					'menu_title'	=> 'Theme Options',
					'menu_slug' 	=> 'theme-general-settings',
					'capability'	=> 'edit_posts',
					'redirect'		=> false
				));
			}

			$this->fields();

		}

		public function fields() {
			
		}
	}

I’m also creating custom Gutenberg blocks by extending AbstractBlocks.php in app/fields/blocks.
<?php

/**
 * Blocks: Abstract
 *
 * @package brightbrightgreat/kiwiartsgroup-2020
 * @author  Bright Bright Great <sayhello@brightbrightgreat.com>
 */

namespace App\Fields\Blocks;


abstract class AbstractBlock {

	// should be the slug for the template file (also gets used for the name of the block)
	public $name = '';

	// should be the display name of the block (don't change this after you set it up, this is how the name of the block gets set up)
	public $title = '';

	// https://developer.wordpress.org/resource/dashicons/
	public $icon = '';

	// categories: common, formatting, layout, widgets, embed
	public $category = '';

	// searchable keywords (these are helpful for anyone entering content, so use it)
	public $keywords = array();

	public function __construct() {
		// set block defaults
		$block = wp_parse_args($this, array(
			'name'              => '',
			'title'             => '',
			'supports'          => array( 'align' => false ),
			'align'             => 'full',
			'mode'				=> 'edit',
		));

		// create the name/slug for the block if it doesn't exist
		if (!$block['name']) {
			$block['name'] = strtolower(trim(preg_replace('/[^A-Za-z0-9-]+/', '-', $this->title)));
		}

		// sets the template used for newly created block
		$block['render_callback'] = function($block) {
			$slug = str_replace('acf/', '', $block['name']);
			\App\get_block_template($slug, ['block' => $block]);
		};

		// register the newly defined block
		acf_register_block($block);

		// create fields for the newly created block
		$this->fields();
	}

}

What I had been doing is creating a file in Fields with the name of a new block like FullWidthCTA.php, which extends the AbstractBlock.php and then creating a new field group in ACF and attaching it to that block, however, none of the blocks are showing up as options.

Same thing with Theme Options, I’m not able to attach any ACF field groups to it because it’s saying that a theme options page does not exist.

None of the above methods are working. I followed the same logic from another Bedrock/Sage project, but it’s still not working.

The only difference between the two projects is that KIWI (the new one) is using Trellis/Bedrock/Sage and LEARN (the previous project) was using Homestead/Bedrock/Sage. Not sure if that makes a difference.

Am I missing something?

Ok, I ended up figuring this out, and it was something super simple, of course.

I forgot to add my new files to this section of functions.php

    array_map(function ($file) use ($sage_error) {
    $file = "../app/{$file}.php";
    if (!locate_template($file, true, true)) {
        $sage_error(sprintf(__('Error locating <code>%s</code> for inclusion.', 'sage'), $file), 'File not found');
    }
}, ['helpers', 'setup', 'filters', 'admin', **'fields', 'api', 'post-types'**]);
1 Like

This topic was automatically closed after 42 days. New replies are no longer allowed.