Matthew Haines-Young mattheu

Using handlebars in WordPress.

One approach we have taken is to mix handlebars templates into the standard WordPress theme templates.

We have a template function available in WordPress render_hbs_template which will render a handlebars template using the data provided. Under the hood render_hbs_template uses this PHP class https://github.com/zordius/lightncandy

The render function handles some logic around caching the compiled templates to improve performance using these.

Here is an example single.php template of how this might be used to render an article.

	const el = wp.element.createElement,
	registerBlockType = wp.blocks.registerBlockType,
	InnerBlocks = wp.blocks.InnerBlocks;

	registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-01', {
	title: 'Hello World (Step 1)',

	icon: 'universal-access-alt',

	category: 'layout',

	import React from 'react';
	import ReactDOM from 'react-dom';
	import PropTypes from 'prop-types';
	import classNames from 'classnames';
	import _ from 'lodash';

	// Simple row block.
	const Row = ({ children = [] }) => {
	return <div className="block block-row sun-row-v3">
	{ children.map( ( block, i ) => <Block key={ i } {...block} /> ) }

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style>body, html { background: rgba(0,0,0,0.05); padding: 0; margin: 0; }</style>
	</head>
	<body>

	( function( window, document ) {

	var el = document.querySelector( '.grid-overlay' );

	if ( el ) {
	el.parentNode.removeChild( el );
	return;
	}

	var colCount = 16;

	<?php


	/**
	* We do not want to load any plugins.
	*/
	function wpcom_vip_load_plugin( $plugin ) {

	// Array of files to check for loading the plugin. This is to support
	// non-standard plugin structures, such as $folder/plugin.php

	<?php

	add_action( 'rest_api_init', 'wpleeds_rest_api' );

	function wpleeds_rest_api() {

	register_rest_route(
	'wpleeds/v1',
	'/movies/(?P<name>.+)/?$',
	[

	<?php

	add_action( 'rest_api_init', 'my_rest_api' );

	function my_rest_api() {
	// My custom endpoint code here.
	}