Gutenberg and Nova

This section explains how Gutenberg blocks can render Nova components and integrate with the design system.

ℹ️

This documentation does not cover Nova blocks (opens in a new tab), which are the building blocks for the Nova homepage.

Configuration

Configure pmc-gutenberg the same way you'd configure any other PMC Plugin.

The base configuration for all brands is at pmc-nova/classes/theme/config/plugins/class-pmc-gutenberg.php (opens in a new tab).

Rendering a block as a Nova component

Basic blocks (aka. blocks that render markup)

Simple blocks like core/paragraph or core/buttons that render markup directly will need to be styled globally.

Global Brand Tokens have established patterns from paragraphs, captions, and horizontal rules already.

Example

We use the pull-quote--text and pull-quote--author token groups to target .wp-block-pullquote and the blockquote elements, ensuring that we're consistently styling these elements in Nova across brands.

.wp-block-pullquote,
blockquote {
	@include token-group-styles($tokens, 'pull-quote--text');
 
	cite {
		@include token-group-styles($tokens, 'pull-quote--author');
	}
 
	p {
		@include token-group-styles($tokens, 'pull-quote--text');
	}
}

Dynamic blocks (aka. blocks that render dynamically via PHP)

Nova components can be implemented in blocks using the Block_Base interface (ref (opens in a new tab)) while also implementing the With_Nova_Render_Callback method (ref (opens in a new tab)).

Example

<?php
/**
 * Registers the pmc/example-block block.
 *
 * @global array    $attrs   Block attributes passed to the render callback.
 * @global string   $content Block content from InnerBlocks passed to the render callback.
 * @global WP_Block $block   Block registration object.
 *
 * @package pmc-gutenberg
 */
 
namespace PMC\Gutenberg\Blocks;
 
use PMC;
use PMC\Gutenberg\Blocks\Block_Base;
use PMC\Gutenberg\Interfaces\Block_Base\With_Nova_Render_Callback;
use PMC\Gutenberg\Interfaces\Block_Base\With_Render_Callback;
use PMC\Nova;
use WP_Block;
 
/**
 * Class for the pmc/example-block block.
 */
class Example_Block extends Block_Base implements With_Nova_Render_Callback, With_Render_Callback {
 
	/**
	 * Constructor.
	 */
	protected function __construct() {
		$this->_block = 'example-block';
	}
 
	/**
	 * Render block.
	 *
	 * Declaration must be compatible with interface.
	 *
	 * @param array    $attrs   Block attributes.
	 * @param string   $content Block content.
	 * @param WP_Block $block   Block object.
	 * @return string
	 */
	public function render_callback(
		// phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
		array $attrs,
		string $content,
		WP_Block $block
		// phpcs:enable
	): string {
 
		// This is where you'd render a Larva component. This is how we preserved
		// backwards compatibility easily.
		return '';
	}
 
	/**
	 * Render block via Nova
	 *
	 * Declaration must be compatible with nova interface.
	 *
	 * @param array    $attrs   Block attributes.
	 * @param string   $content Block content.
	 * @param WP_Block $block   Block object.
	 * @return string
	 */
	public function nova_render_callback(
		// phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
		array $attrs,
		string $content,
		WP_Block $block
		// phpcs:enable
	): string {
 
		// Render a Nova component. The second argument passes data into the
		// model, hydrating the component's data.
		return Nova\render_component(
			'example-component',
			[
				'post_id' => $attrs['postId'],
			]
		);
	}
}

Global Components Homepage