packaging block.json renderTemplate in basic webpack setup

• StudioAl

• November 13, 2024 at 11:07 pm

I am using ACF blocks with “block.json”, where my blocks are compiled from a /source directory to a /build directory, where they are registered. I’m using a relatively default variation of ‘@wordpress/scripts/config/webpack.config for compiling/building.

My issue is that “render.php” will not copy over into my build directory unless I include the “render” property ("render": "file:./render.php). But if I include that, then the render template is interpreted as a standard block render template and not an ACF template.

Is there are straightforward workaround for this, or is this something I need to work out manually in my “webpack.config.js”? I’m pretty new to webpack configuration, and all I can think of is to create a new entry point in modules.exports for each of the render.php files, but I feel like that’s a really inefficient way to do it, since the default config already works as it should.

Is there perhaps a function or filter that could force the ACF renderTemplate over the core “render”, even when “render” is present in block.json?

Simple file structure:
src
|--blocks
| |-- carousel
| | |-- block.json
| | |-- render.php
| |-- anotherBlock
| | |-- block.json
| | |-- render.php
build
|--blocks
| |-- carousel
| | |-- block.json
| | |-- render.php
| |-- anotherBlock
| | |-- block.json
| | |-- render.php</code?

Registration:

function my_register_acf_blocks() {
  register_block_type(dirname(__DIR__, 1) . '/build/blocks/carousel' );
  register_block_type(dirname(__DIR__, 1) . '/build/blocks/anotherBlock' );
}
add_action( 'init', 'my_register_acf_blocks' );

Relevant lines of block.json:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "acf/carousel",
  "title": "Image or Video Carousel with Overlay",
  "render": "file:./render.php", //<-- webpack won't copy this to build without this, but ACF block breaks when present
  "script": "file:./index.js",
  "style":  ["splide", "file:./style-index.css"],
  "acf": {
    "mode": "edit",
    "renderTemplate": "render.php"
  }
}

webpack.config.js

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

module.exports = {
	...defaultConfig,
	entry: {
		...defaultConfig.entry(),
		index: './src/index.js',
		loginStyles: './src/sass/login-styles.scss',
		splide: './src/js/splide.js'
	},
};