[create-block] Refinements to the create-block-interactive-template package.

packages/create-block-interactive-template/CHANGELOG.md

@@ -1 +1,7 @@
 <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+### Enhancement
+
+-   Moves the `example` property into block.json by leveraging changes to create-block to now support `example`. [#52801](https://github.com/WordPress/gutenberg/pull/52801)

packages/create-block-interactive-template/block-templates/index.js.mustache

@@ -28,14 +28,6 @@ import metadata from './block.json';
  * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block
  */
 registerBlockType( metadata.name, {
-	/**
-	 * Used to construct a preview for the block to be shown in the block inserter.
-	 */
-	example: {
-		attributes: {
-			message: '{{title}}',
-		},
-	},
 	/**
 	 * @see ./edit.js
 	 */

packages/create-block-interactive-template/block-templates/render.php.mustache

@@ -1,6 +1,13 @@
 {{#isBasicVariant}}
 <?php
 /**
+ * PHP file to use when rendering the block type on the server to show on the front end.
+ *
+ * The following variables are exposed to the file:
+ *     $attributes (array): The block attributes.
+ *     $content (string): The block default content.
+ *     $block (WP_Block): The block instance.
+ *
  * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
  */
 
@@ -16,18 +23,18 @@ $unique_id = uniqid( 'p-' );
 	<button
 		data-wp-on--click="actions.{{namespace}}.toggle"
 		data-wp-bind--aria-expanded="context.{{namespace}}.isOpen"
-		aria-controls="p-<?php echo $unique_id; ?>"
+		aria-controls="p-<?php echo esc_attr( $unique_id ); ?>"
 	>
-		<?php _e( 'Toggle', '{{textdomain}}' ); ?>
+		<?php esc_html_e( 'Toggle', '{{textdomain}}' ); ?>
 	</button>
 
 	<p
-		id="p-<?php echo $unique_id; ?>"
+		id="p-<?php echo esc_attr( $unique_id ); ?>"
 		data-wp-bind--hidden="!context.{{namespace}}.isOpen"
 	>
 		<?php
-			_e( '{{title}} - hello from an interactive block!', '{{textdomain}}' );
+			esc_html_e( '{{title}} - hello from an interactive block!', '{{textdomain}}' );
 		?>
 	</p>
 </div>
-{{/isBasicVariant}}
+{{/isBasicVariant}}

packages/create-block-interactive-template/index.js

@@ -15,6 +15,7 @@ module.exports = {
 		},
 		render: 'file:./render.php',
 		viewScript: 'file:./view.js',
+		example: {},
 	},
 	variants: {
 		basic: {},