timber2 theme webpack'd assets -- add in twig, or still enqueue in WP? #2731

pgnd · 2023-04-26T12:47:11Z

pgnd
Apr 26, 2023

i'm setting up a WP + timber2 project.

i manage assets with webpack5.

i build a webpack asset-manifest that maps unhashed key names to hashed asset paths.

e.g.,

cat app/themes/mytheme/build/assets-manifest.json
	{
	  "main.css": {
	    "src": "/build/css/main.bdca003df20b90e6e12e.css",
	    "integrity": "sha512-XYZ...Q=="
	  },
	  "main.js": {
	    "src": "/build/js/main.578215f5f7a840445b54.js",
	    "integrity": "sha512-ABC...ymJA=="
	  }
	}

when using assets in the timber2 proj theme, i can either

(1) enqueue the style in WP

function get_webpack_asset($asset_name) {
	$manifest = file_get_contents('./app/themes/' . get_stylesheet() . '/build/assets-manifest.json');
	$manifest = json_decode($manifest, true);
	if (!isset($manifest[$asset_name])) {
		return $asset_name;
	}
	return $manifest[$asset_name]['src'];
}

function theme_styles() {
	wp_enqueue_style('ri_main', get_stylesheet_directory_uri() . get_webpack_asset('main.css'));
}
add_action('wp_enqueue_scripts', 'theme_styles');

or,
(2) load the asset in twig

	public function add_twig_filters($filters) {
		$filters['webpack_asset'] = [
			'callable' => [$this, 'get_twig_manifest_asset'],
		];
		return $filters;
	}

	public function get_twig_manifest_asset($assetName) {
		$this->manifest = file_get_contents('./app/themes/' . get_stylesheet() . '/build/assets-manifest.json');
		$this->manifest = json_decode($this->manifest, true);
		if (!isset($this->manifest[$assetName])) {
			return $assetName;
		}
		return $this->manifest[$assetName]['src'];
	}

cat base.twig
	<!DOCTYPE html>
	<html lang="en">
		<head>
		{% block head %}

			{{ function('wp_head') }}

	        {% block stylesheets %}
			<link rel="stylesheet" href="{{ 'main.css'|webpack_asset }}">
			{% endblock stylesheets %}
		...

both work as expected in the theme, correctly deploying the style asset

using (2) seems cleaner -- everything in my twig/timber theme.

is there a sound reason NOT to -- and, instead, enqueue using WP functions?
is the WP-enqueueing needed, e.g., for Timper2 + ACF/Pro usage in Gutenberg?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

timber2 theme webpack'd assets -- add in twig, or still enqueue in WP? #2731

{{title}}

Replies: 0 comments

Select a reply

timber2 theme webpack'd assets -- add in twig, or still enqueue in WP? #2731

pgnd Apr 26, 2023

Replies: 0 comments

pgnd
Apr 26, 2023