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] 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 -->'
 			);
 		}