Acorn in WordPress Plugin

acorn
1

Hi,
I was looking for some resource or example how to get started with acorn for building a WordPress plugin. I would appreciate any kind of suggestions.
Thanks

1 Like
2

After a lot of trial and error, I managed to make acorn work in a plugin context.

What I did:

First require acorn in the plugin’s folder:

composer require roots/acorn

Add this to composer.json scripts,

        "post-autoload-dump": [
            "Roots\\Acorn\\ComposerScripts::postAutoloadDump"
        ]

These 2 first steps are explained here in the official documentation.

Then, in my plugin, I customize acorn paths so that they match my plugin structure.

\add_filter(
	'acorn/paths.base',
	function() {
		return MY_PLUGIN_ROOT;
	}
);

\add_filter(
	'acorn/paths.app',
	function() {
		return MY_PLUGIN_ROOT . 'engine';
	}
);

\add_filter(
	'acorn/paths.public',
	function() {
		return MY_PLUGIN_ROOT . 'assets/build';
	}
);

This is explained here in the docs.

Right after I pasted this part from Sage theme:

try {
	\Roots\bootloader();
} catch ( Throwable $e ) {
	wp_die(
		__( 'You need to install Acorn to use this plugin.', MY_PLUGIN_TEXTDOMAIN ),
		'',
		[
			'link_url' => 'https://docs.roots.io/acorn/2.x/installation/',
			'link_text' => __( 'Acorn Docs: Installation',  MY_PLUGIN_TEXTDOMAIN ),
		]
	);
}

In composer.json, you want at least one of the PSR-4 classmap paths matching acorn/paths.app value, because acorn uses the PSR-4 classmap declared in composer.json to determine the app namespace while bootstraping.

If you want to use the default acorn folder structure for your plugin, similar as what you see in the theme folder from the docs, you would have something like this:

"autoload": {
        "psr-4": {
            "My_Plugin\\": "app\/",
        }
    },

After that, I was able to run:

─❯ wp cli vendor:publish

 Which provider or tag's files would you like to publish?:
  [0] Publish files from all providers and tags listed below
  [1] Provider: Log1x\AcfComposer\Providers\AcfComposerServiceProvider
  [2] Provider: Roots\Acorn\Providers\AcornServiceProvider
  [3] Tag: acorn
  [4] Tag: config
 > 1

and:

─❯ wp cli acorn acf:field TestField

🎉 TestField field successfully composed.
     ⮑  engine/Fields/TestField.php
1 Like
3

We need the Acorn blade compiler in the plugin. Our theme already uses Acorn.

How would this work when I want Acorn for both the theme and a plugin?

When I add the filters my theme stops working…

And there can be only one Bootloader (it’s a singelton), so callling \Roots\bootloader() again for my plugin does nothing :frowning:

4

Ok, figured the Blade part out myself :slight_smile:

Based on Views - Laravel - The PHP Framework For Web Artisans and php - Namespacing views in Laravel - Stack Overflow the following works

add_action( 'init', function() {
  if ( function_exists( '\Roots\view' ) ) {
    $view = \Roots\view();

    $view->addNamespace('your-plugin-name', __DIR__ . '/resources/views/');

    add_shortcode( 'acorn-blade-shortcode', function( $args ) {
      return \Roots\view( 'your-plugin-name::greeting', ['name' => 'James'] );
    } );
  }
} );
5

Thanks for your reply @joost. I’m trying to implement your suggestion, but got this error:

Unrecognized extension in file: test_plugin::test.

add_action('init', function () use ($entrypoints) {
    $view = \Roots\view();
    $view->addNamespace('test_plugin', __DIR__ . '/resources/views/');

    ...

    register_block_type('test_plugin/test', array(
        'api_version' => 2,
        'editor_script' => 'foo/editor',
        'render_callback' => function ($attributes, $content) {
            echo \Roots\view('test_plugin::test', compact('attributes', 'content'));
        },
    ));
});
1 Like
6

Is this still applicable for the latest acorn version? I am having a really hard time understand how acorn works in plugin context

1 Like
7

I’m not sure. I ended up ditching acorn in plugin context, as I faced some issues I couldn’t solve. The best resources I found on the subject was the roots/clover repo (accessible to roots sponsors only).

8

Hi Marcelo,

The error might be an “unrecognized” file extension inside your blade template? Did you try with a simple template eg. with only some basic HTML?

For me with roots/acorn v2.1.2 all works…

9

Thanks for the reply @joost. The problem is the code was looking for the blade file in my theme but I added it inside my plugin folder. I explained better in this thread