Pattern: Experiment with using template slots for content replacement

WordPress · May 19, 2023 · f76a7f6 · f76a7f6
1 parent c1238e4
commit f76a7f6
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git a/lib/experimental/pattern.php b/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:example@example.com">' . esc_html__( 'example@example.com', '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 -->',
+			)
+		),
+	)
+);
diff --git a/lib/load.php b/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';

diff --git a/packages/blocks/src/api/validation/index.js b/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;