Pattern: Experiment with using template slots for content replacement

docs/reference-guides/core-blocks.md

@@ -827,6 +827,15 @@ A cloud of your most used tags. ([Source](https://github.com/WordPress/gutenberg
 -	**Supports:** align, anchor, spacing (margin, padding), typography (lineHeight), ~~html~~
 -	**Attributes:** largestFontSize, numberOfTags, showTagCounts, smallestFontSize, taxonomy
 
+## Template Content
+
+Use template content to replace the template placeholder. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/template-content))
+
+-	**Name:** core/template-content
+-	**Category:** widgets
+-	**Supports:** ~~className~~, ~~customClassName~~, ~~html~~, ~~inserter~~
+-	**Attributes:** content, name
+
 ## Template Part
 
 Edit the different global regions of your site, like the header, footer, sidebar, or create your own. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/template-part))

lib/blocks.php

@@ -40,6 +40,7 @@ function gutenberg_reregister_core_block_types() {
 				'spacer',
 				'table',
 				'table-of-contents',
+				'template-content',
 				'text-columns',
 				'verse',
 				'video',

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-content 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-content {"name":"getInTouch"} -->',
+				esc_html__( 'Get In Touch', 'default' ),
+				'<!-- /wp:template-content -->',
+			)
+		),
+	)
+);

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/block-editor/src/components/index.js

@@ -84,6 +84,7 @@ export {
 	RichTextToolbarButton,
 	__unstableRichTextInputEvent,
 } from './rich-text';
+export { default as __experimentalTemplateContent } from './template-content';
 export { default as ToolSelector } from './tool-selector';
 export { default as __experimentalUnitControl } from './unit-control';
 export { default as URLInput } from './url-input';

packages/block-editor/src/components/rich-text/index.js

@@ -46,6 +46,7 @@ import { useInsertReplacementText } from './use-insert-replacement-text';
 import { useFirefoxCompat } from './use-firefox-compat';
 import FormatEdit from './format-edit';
 import { getMultilineTag, getAllowedFormats } from './utils';
+import TemplateContent from '../template-content';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -318,7 +319,7 @@ function RichTextWrapper(
 	}
 
 	const TagName = tagName;
-	return (
+	const result = (
 		<>
 			{ isSelected && (
 				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
@@ -415,6 +416,17 @@ function RichTextWrapper(
 			/>
 		</>
 	);
+
+	if ( ! originalValue.startsWith( '<!--$wp:template-content' ) ) {
+		return result;
+	}
+
+	return (
+		<div { ...props }>
+			<TemplateContent.Slot bubblesVirtually />
+			Hello!
+		</div>
+	);
 }
 
 const ForwardedRichTextContainer = forwardRef( RichTextWrapper );

packages/block-editor/src/components/template-content/index.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: TemplateContent, Slot } = createSlotFill( 'TemplateContent' );
+
+TemplateContent.Slot = Slot;
+
+export default TemplateContent;

packages/block-library/src/index.js

@@ -111,6 +111,7 @@ import * as spacer from './spacer';
 import * as table from './table';
 import * as tableOfContents from './table-of-contents';
 import * as tagCloud from './tag-cloud';
+import * as templateContent from './template-content';
 import * as templatePart from './template-part';
 import * as termDescription from './term-description';
 import * as textColumns from './text-columns';
@@ -160,6 +161,7 @@ const getAllBlocks = () => {
 		pageList,
 		pageListItem,
 		pattern,
+		templateContent,
 		preformatted,
 		pullquote,
 		reusableBlock,

packages/block-library/src/template-content/block.json

@@ -0,0 +1,25 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"__experimental": true,
+	"name": "core/template-content",
+	"title": "Template Content",
+	"category": "widgets",
+	"description": "Use template content to replace the template placeholder.",
+	"textdomain": "default",
+	"attributes": {
+		"content": {
+			"type": "string",
+			"source": "html"
+		},
+		"name": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"customClassName": false,
+		"className": false,
+		"html": false,
+		"inserter": false
+	}
+}

packages/block-library/src/template-content/edit.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalTemplateContent as TemplateContent,
+} from '@wordpress/block-editor';
+
+function TemplateContentEdit( {
+	attributes: { content, name },
+	setAttributes,
+} ) {
+	const blockProps = useBlockProps();
+
+	return (
+		<>
+			<RichText
+				{ ...blockProps }
+				identifier="content"
+				tagName={ 'div' }
+				value={ content }
+				onChange={ ( newContent ) =>
+					setAttributes( { content: newContent } )
+				}
+				aria-label={ __( 'Template content' ) }
+				placeholder={ __( 'Template content' ) }
+			/>
+			<TemplateContent name={ name }>Foo!</TemplateContent>
+		</>
+	);
+}
+
+export default TemplateContentEdit;

packages/block-library/src/template-content/index.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import edit from './edit';
+import metadata from './block.json';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/template-content/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

packages/block-library/src/template-content/save.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+
+export default function templateContentSave( { attributes: { content } } ) {
+	return <RawHTML>{ content }</RawHTML>;
+}

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-content' ) ) {
+			temp = temp.replace(
+				/<\/(\$wp\:template-content[^>]*)>/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;