Pattern: Experiment with using template slots for content replacement

Author: gziolo

lib/experimental/pattern.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * Temporary compatibility shims for pattern APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+register_block_pattern(
+	'gutenberg/get-in-touch',
+	array(
+		'title'      => esc_html__( 'Get In Touch', 'default' ),
+		'categories' => array( 'call-to-action' ),
+		'content'    => implode(
+			'',
+			array(
+				'<!-- wp:paragraph {"fontSize":"huge"} -->',
+				'<p class="has-huge-font-size"></$wp:template-slot name="getInTouch"></p>',
+				'<!-- /wp:paragraph -->',
+				'<!-- wp:columns -->',
+				'<div class="wp-block-columns"><!-- wp:column -->',
+				'<div class="wp-block-column"><!-- wp:paragraph -->',
+				'<p>' . esc_html__( '20 Cooper Avenue', 'default' ) . '<br>' . esc_html__( 'New York, New York 10023', 'default' ) . '</p>',
+				'<!-- /wp:paragraph --></div>',
+				'<!-- /wp:column -->',
+				'<!-- wp:column -->',
+				'<div class="wp-block-column"><!-- wp:paragraph -->',
+				'<p>' . esc_html__( '(555) 555-5555', 'default' ) . '<br><a href="mailto:[email protected]">' . esc_html__( '[email protected]', 'default' ) . '</a></p>',
+				'<!-- /wp:paragraph --></div>',
+				'<!-- /wp:column --></div>',
+				'<!-- /wp:columns -->',
+				'<!-- wp:buttons -->',
+				'<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"dark-gray"} -->',
+				'<div class="wp-block-button"><a class="wp-block-button__link has-dark-gray-background-color has-background">' . esc_html__( 'Contact Us', 'default' ) . '</a></div>',
+				'<!-- /wp:button --></div>',
+				'<!-- /wp:buttons -->',
+				'<!-- wp:template-fill {"name":"getInTouch"} -->',
+				esc_html__( 'Get In Touch', 'default' ),
+				'<!-- /wp:template-fill -->',
+			)
+		),
+	)
+);

lib/load.php

@@ -103,6 +103,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/kses.php';
 require __DIR__ . '/experimental/l10n.php';
 require __DIR__ . '/experimental/navigation-fallback.php';
+require __DIR__ . '/experimental/pattern.php';
 if ( gutenberg_is_experiment_enabled( 'gutenberg-interactivity-api-core-blocks' ) ) {
 	require __DIR__ . '/experimental/interactivity-api/script-loader.php';
 	require __DIR__ . '/experimental/interactivity-api/blocks.php';

packages/blocks/src/api/validation/index.js

@@ -573,10 +573,18 @@ export function getNextNonWhitespaceToken( tokens ) {
  * @return {Object[]|null} Array of valid tokenized HTML elements, or null on error
  */
 function getHTMLTokens( html, logger = createLogger() ) {
+	let temp = html;
 	try {
-		return new Tokenizer( new DecodeEntityParser() ).tokenize( html );
+		// Quick way to ensure that the template slot is correctly validated as HTML comment.
+		if ( temp.includes( '</$wp:template-slot' ) ) {
+			temp = temp.replace(
+				/<\/(\$wp\:template-slot[^>]*)>/gi,
+				'<!-- $1 -->'
+			);
+		}
+		return new Tokenizer( new DecodeEntityParser() ).tokenize( temp );
 	} catch ( e ) {
-		logger.warning( 'Malformed HTML detected: %s', html );
+		logger.warning( 'Malformed HTML detected: %s', temp );
 	}
 
 	return null;