From f76a7f6ca259853744845ffe004a1510dabe4cf2 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Fri, 19 May 2023 10:32:46 +0200
Subject: [PATCH 1/3] Pattern: Experiment with using template slots for content
 replacement

---
 lib/experimental/pattern.php                | 42 +++++++++++++++++++++
 lib/load.php                                |  1 +
 packages/blocks/src/api/validation/index.js | 12 +++++-
 3 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 lib/experimental/pattern.php

diff --git a/lib/experimental/pattern.php b/lib/experimental/pattern.php
new file mode 100644
index 0000000000000..c305902081f07
--- /dev/null
+++ 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
index b8ec4a4d60784..9352f89a6c400 100644
--- 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
index 29b8a08771833..4f9f966d3725a 100644
--- 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;

From 969d6df2749405362040517183058be03148ab55 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Fri, 19 May 2023 13:32:56 +0200
Subject: [PATCH 2/3] Add Template Fill block to use with Pattern

---
 docs/reference-guides/core-blocks.md          |  9 +++++++
 lib/blocks.php                                |  1 +
 packages/block-library/src/index.js           |  2 ++
 .../src/template-fill/block.json              | 25 +++++++++++++++++++
 .../block-library/src/template-fill/edit.js   | 25 +++++++++++++++++++
 .../block-library/src/template-fill/index.js  | 18 +++++++++++++
 .../block-library/src/template-fill/init.js   |  6 +++++
 .../block-library/src/template-fill/save.js   |  8 ++++++
 8 files changed, 94 insertions(+)
 create mode 100644 packages/block-library/src/template-fill/block.json
 create mode 100644 packages/block-library/src/template-fill/edit.js
 create mode 100644 packages/block-library/src/template-fill/index.js
 create mode 100644 packages/block-library/src/template-fill/init.js
 create mode 100644 packages/block-library/src/template-fill/save.js

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 6f7314d5e5188..56bae08a2ebd5 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/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 Fill
+
+Add custom template fill to use with the template slot. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/template-fill))
+
+-	**Name:** core/template-fill
+-	**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))
diff --git a/lib/blocks.php b/lib/blocks.php
index bbee108b71c5f..da2d8447205e6 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -40,6 +40,7 @@ function gutenberg_reregister_core_block_types() {
 				'spacer',
 				'table',
 				'table-of-contents',
+				'template-fill',
 				'text-columns',
 				'verse',
 				'video',
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index a0c7b75eac19b..ca13d1a5bae37 100644
--- a/packages/block-library/src/index.js
+++ b/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 templateFill from './template-fill';
 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,
+		templateFill,
 		preformatted,
 		pullquote,
 		reusableBlock,
diff --git a/packages/block-library/src/template-fill/block.json b/packages/block-library/src/template-fill/block.json
new file mode 100644
index 0000000000000..63fb107ea6871
--- /dev/null
+++ b/packages/block-library/src/template-fill/block.json
@@ -0,0 +1,25 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"__experimental": true,
+	"name": "core/template-fill",
+	"title": "Template Fill",
+	"category": "widgets",
+	"description": "Add custom template fill to use with the template slot.",
+	"textdomain": "default",
+	"attributes": {
+		"content": {
+			"type": "string",
+			"source": "html"
+		},
+		"name": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"customClassName": false,
+		"className": false,
+		"html": false,
+		"inserter": false
+	}
+}
diff --git a/packages/block-library/src/template-fill/edit.js b/packages/block-library/src/template-fill/edit.js
new file mode 100644
index 0000000000000..c69f380d38435
--- /dev/null
+++ b/packages/block-library/src/template-fill/edit.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+function TemplateFillBlock( { attributes: { content }, setAttributes } ) {
+	const blockProps = useBlockProps();
+
+	return (
+		<RichText
+			{ ...blockProps }
+			identifier="content"
+			tagName={ 'div' }
+			value={ content }
+			onChange={ ( newContent ) =>
+				setAttributes( { content: newContent } )
+			}
+			aria-label={ __( 'Heading text' ) }
+			placeholder={ __( 'Content' ) }
+		/>
+	);
+}
+
+export default TemplateFillBlock;
diff --git a/packages/block-library/src/template-fill/index.js b/packages/block-library/src/template-fill/index.js
new file mode 100644
index 0000000000000..4c60b5f5c2063
--- /dev/null
+++ b/packages/block-library/src/template-fill/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 } );
diff --git a/packages/block-library/src/template-fill/init.js b/packages/block-library/src/template-fill/init.js
new file mode 100644
index 0000000000000..79f0492c2cb2f
--- /dev/null
+++ b/packages/block-library/src/template-fill/init.js
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();
diff --git a/packages/block-library/src/template-fill/save.js b/packages/block-library/src/template-fill/save.js
new file mode 100644
index 0000000000000..0c51056d9ab83
--- /dev/null
+++ b/packages/block-library/src/template-fill/save.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+
+export default function save( { attributes: { content } } ) {
+	return <RawHTML>{ content }</RawHTML>;
+}

From 7f17cf4eaecbbe63391c2f17211d696f46d8186f Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Fri, 19 May 2023 15:02:33 +0200
Subject: [PATCH 3/3] Try using slot fill for template content

---
 docs/reference-guides/core-blocks.md          |  6 ++--
 lib/blocks.php                                |  2 +-
 lib/experimental/pattern.php                  |  6 ++--
 packages/block-editor/src/components/index.js |  1 +
 .../src/components/rich-text/index.js         | 14 +++++++-
 .../src/components/template-content/index.js  | 10 ++++++
 packages/block-library/src/index.js           |  4 +--
 .../block.json                                |  6 ++--
 .../src/template-content/edit.js              | 35 +++++++++++++++++++
 .../index.js                                  |  0
 .../init.js                                   |  0
 .../save.js                                   |  2 +-
 .../block-library/src/template-fill/edit.js   | 25 -------------
 packages/blocks/src/api/validation/index.js   |  4 +--
 14 files changed, 74 insertions(+), 41 deletions(-)
 create mode 100644 packages/block-editor/src/components/template-content/index.js
 rename packages/block-library/src/{template-fill => template-content}/block.json (72%)
 create mode 100644 packages/block-library/src/template-content/edit.js
 rename packages/block-library/src/{template-fill => template-content}/index.js (100%)
 rename packages/block-library/src/{template-fill => template-content}/init.js (100%)
 rename packages/block-library/src/{template-fill => template-content}/save.js (61%)
 delete mode 100644 packages/block-library/src/template-fill/edit.js

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 56bae08a2ebd5..c4cff0cf5f73e 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -827,11 +827,11 @@ 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 Fill
+## Template Content
 
-Add custom template fill to use with the template slot. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/template-fill))
+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-fill
+-	**Name:** core/template-content
 -	**Category:** widgets
 -	**Supports:** ~~className~~, ~~customClassName~~, ~~html~~, ~~inserter~~
 -	**Attributes:** content, name
diff --git a/lib/blocks.php b/lib/blocks.php
index da2d8447205e6..cf13f4270f2e5 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -40,7 +40,7 @@ function gutenberg_reregister_core_block_types() {
 				'spacer',
 				'table',
 				'table-of-contents',
-				'template-fill',
+				'template-content',
 				'text-columns',
 				'verse',
 				'video',
diff --git a/lib/experimental/pattern.php b/lib/experimental/pattern.php
index c305902081f07..4846477153797 100644
--- a/lib/experimental/pattern.php
+++ b/lib/experimental/pattern.php
@@ -14,7 +14,7 @@
 			'',
 			array(
 				'<!-- wp:paragraph {"fontSize":"huge"} -->',
-				'<p class="has-huge-font-size"></$wp:template-slot name="getInTouch"></p>',
+				'<p class="has-huge-font-size"></$wp:template-content name="getInTouch"></p>',
 				'<!-- /wp:paragraph -->',
 				'<!-- wp:columns -->',
 				'<div class="wp-block-columns"><!-- wp:column -->',
@@ -33,9 +33,9 @@
 				'<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"} -->',
+				'<!-- wp:template-content {"name":"getInTouch"} -->',
 				esc_html__( 'Get In Touch', 'default' ),
-				'<!-- /wp:template-fill -->',
+				'<!-- /wp:template-content -->',
 			)
 		),
 	)
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index f113ad3b05f63..4b2295a7c0fff 100644
--- a/packages/block-editor/src/components/index.js
+++ b/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';
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index 4217d6de58899..09d3410ae8bfb 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/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 );
diff --git a/packages/block-editor/src/components/template-content/index.js b/packages/block-editor/src/components/template-content/index.js
new file mode 100644
index 0000000000000..f266c986c59d2
--- /dev/null
+++ b/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;
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index ca13d1a5bae37..a9f6b8980f315 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -111,7 +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 templateFill from './template-fill';
+import * as templateContent from './template-content';
 import * as templatePart from './template-part';
 import * as termDescription from './term-description';
 import * as textColumns from './text-columns';
@@ -161,7 +161,7 @@ const getAllBlocks = () => {
 		pageList,
 		pageListItem,
 		pattern,
-		templateFill,
+		templateContent,
 		preformatted,
 		pullquote,
 		reusableBlock,
diff --git a/packages/block-library/src/template-fill/block.json b/packages/block-library/src/template-content/block.json
similarity index 72%
rename from packages/block-library/src/template-fill/block.json
rename to packages/block-library/src/template-content/block.json
index 63fb107ea6871..762af512501de 100644
--- a/packages/block-library/src/template-fill/block.json
+++ b/packages/block-library/src/template-content/block.json
@@ -2,10 +2,10 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"__experimental": true,
-	"name": "core/template-fill",
-	"title": "Template Fill",
+	"name": "core/template-content",
+	"title": "Template Content",
 	"category": "widgets",
-	"description": "Add custom template fill to use with the template slot.",
+	"description": "Use template content to replace the template placeholder.",
 	"textdomain": "default",
 	"attributes": {
 		"content": {
diff --git a/packages/block-library/src/template-content/edit.js b/packages/block-library/src/template-content/edit.js
new file mode 100644
index 0000000000000..b89d37fe3639d
--- /dev/null
+++ b/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;
diff --git a/packages/block-library/src/template-fill/index.js b/packages/block-library/src/template-content/index.js
similarity index 100%
rename from packages/block-library/src/template-fill/index.js
rename to packages/block-library/src/template-content/index.js
diff --git a/packages/block-library/src/template-fill/init.js b/packages/block-library/src/template-content/init.js
similarity index 100%
rename from packages/block-library/src/template-fill/init.js
rename to packages/block-library/src/template-content/init.js
diff --git a/packages/block-library/src/template-fill/save.js b/packages/block-library/src/template-content/save.js
similarity index 61%
rename from packages/block-library/src/template-fill/save.js
rename to packages/block-library/src/template-content/save.js
index 0c51056d9ab83..0fae0800e4e00 100644
--- a/packages/block-library/src/template-fill/save.js
+++ b/packages/block-library/src/template-content/save.js
@@ -3,6 +3,6 @@
  */
 import { RawHTML } from '@wordpress/element';
 
-export default function save( { attributes: { content } } ) {
+export default function templateContentSave( { attributes: { content } } ) {
 	return <RawHTML>{ content }</RawHTML>;
 }
diff --git a/packages/block-library/src/template-fill/edit.js b/packages/block-library/src/template-fill/edit.js
deleted file mode 100644
index c69f380d38435..0000000000000
--- a/packages/block-library/src/template-fill/edit.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { RichText, useBlockProps } from '@wordpress/block-editor';
-
-function TemplateFillBlock( { attributes: { content }, setAttributes } ) {
-	const blockProps = useBlockProps();
-
-	return (
-		<RichText
-			{ ...blockProps }
-			identifier="content"
-			tagName={ 'div' }
-			value={ content }
-			onChange={ ( newContent ) =>
-				setAttributes( { content: newContent } )
-			}
-			aria-label={ __( 'Heading text' ) }
-			placeholder={ __( 'Content' ) }
-		/>
-	);
-}
-
-export default TemplateFillBlock;
diff --git a/packages/blocks/src/api/validation/index.js b/packages/blocks/src/api/validation/index.js
index 4f9f966d3725a..962c6bbe21ade 100644
--- a/packages/blocks/src/api/validation/index.js
+++ b/packages/blocks/src/api/validation/index.js
@@ -576,9 +576,9 @@ function getHTMLTokens( html, logger = createLogger() ) {
 	let temp = html;
 	try {
 		// Quick way to ensure that the template slot is correctly validated as HTML comment.
-		if ( temp.includes( '</$wp:template-slot' ) ) {
+		if ( temp.includes( '</$wp:template-content' ) ) {
 			temp = temp.replace(
-				/<\/(\$wp\:template-slot[^>]*)>/gi,
+				/<\/(\$wp\:template-content[^>]*)>/gi,
 				'<!-- $1 -->'
 			);
 		}