Try using slot fill for template content

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

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',

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 -->',
 			)
 		),
 	)

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,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,

packages/block-library/src/template-fill/block.json → 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": {

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-fill/save.js → 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>;
 }

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