@wordpress/create-block-interactive-template 2.8.0 → 2.9.0

package/CHANGELOG.md

@@ -1,9 +1,11 @@
 <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
 
-## Unreleased
-
 ## 2.8.0 (2024-09-19)
 
+### Enhancements
+
+-   Added TypeScript variant of the template ([#64577](https://github.com/WordPress/gutenberg/pull/64577)).
+
 ## 2.7.0 (2024-09-05)
 
 ### Enhancements

package/README.md

@@ -1,6 +1,6 @@
 # Create Block Interactive Template
 
-This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) to create interactive blocks
+This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) to create interactive blocks.
 
 ## Usage
 

package/block-templates/README.md.mustache

@@ -3,6 +3,4 @@
 > **Note**
 > Check the [Interactivity API Reference docs in the Block Editor handbook](https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/) to learn more about the Interactivity API.
 
-{{#isBasicVariant}}
 This block has been created with the `create-block-interactive-template` and shows a basic structure of an interactive block that uses the Interactivity API.
-{{/isBasicVariant}}

package/block-templates/render.php.mustache

@@ -1,4 +1,3 @@
-{{#isBasicVariant}}
 <?php
 /**
  * PHP file to use when rendering the block type on the server to show on the front end.
@@ -11,8 +10,19 @@
  * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
  */
 
-// Generate unique id for aria-controls.
+// Generates a unique id for aria-controls.
 $unique_id = wp_unique_id( 'p-' );
+
+// Adds the global state.
+wp_interactivity_state(
+	'{{namespace}}',
+	array(
+		'isDark'    => false,
+		'darkText'  => esc_html__( 'Switch to Light', '{{textdomain}}' ),
+		'lightText' => esc_html__( 'Switch to Dark', '{{textdomain}}' ),
+		'themeText'	=> esc_html__( 'Switch to Dark', '{{textdomain}}' ),
+	)
+);
 ?>
 
 <div
@@ -20,9 +30,15 @@ $unique_id = wp_unique_id( 'p-' );
 	data-wp-interactive="{{namespace}}"
 	<?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false ) ); ?>
 	data-wp-watch="callbacks.logIsOpen"
+	data-wp-class--dark-theme="state.isDark"
 >
 	<button
-		data-wp-on--click="actions.toggle"
+		data-wp-on--click="actions.toggleTheme"
+		data-wp-text="state.themeText"
+	></button>
+
+	<button
+		data-wp-on--click="actions.toggleOpen"
 		data-wp-bind--aria-expanded="context.isOpen"
 		aria-controls="<?php echo esc_attr( $unique_id ); ?>"
 	>
@@ -38,4 +54,3 @@ $unique_id = wp_unique_id( 'p-' );
 		?>
 	</p>
 </div>
-{{/isBasicVariant}}

package/block-templates/style.scss.mustache

@@ -9,4 +9,19 @@
 	font-size: 1em;
 	background: #ffff001a;
 	padding: 1em;
+
+	&.dark-theme {
+		background: #333;
+		color: #fff;
+
+		button {
+			background: #555;
+			color: #fff;
+			border: 1px solid #777;
+		}
+
+		p {
+			color: #ddd;
+		}
+	}
 }

package/block-templates/view.js.mustache

@@ -1,15 +1,23 @@
-{{#isBasicVariant}}
+{{#isDefaultVariant}}
 /**
  * WordPress dependencies
  */
-import { store, getContext } from "@wordpress/interactivity";
+import { store, getContext } from '@wordpress/interactivity';
 
-store( '{{namespace}}', {
+const { state } = store( '{{namespace}}', {
+	state: {
+		get themeText() {
+			return state.isDark ? state.darkText : state.lightText;
+		}
+	},
 	actions: {
-		toggle: () => {
+		toggleOpen() {
 			const context = getContext();
 			context.isOpen = ! context.isOpen;
 		},
+		toggleTheme() {
+			state.isDark = ! state.isDark;
+		}
 	},
 	callbacks: {
 		logIsOpen: () => {
@@ -19,5 +27,4 @@ store( '{{namespace}}', {
 		},
 	},
 } );
-
-{{/isBasicVariant}}
+{{/isDefaultVariant}}

package/block-templates/view.ts.mustache

@@ -0,0 +1,46 @@
+{{#isTypescriptVariant}}
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+type ServerState = {
+	state: {
+		isDark: boolean;
+		darkText: string;
+		lightText: string;
+	};
+};
+
+type Context = {
+	isOpen: boolean;
+};
+
+const storeDef = {
+	state: {
+		get themeText(): string {
+			return state.isDark ? state.darkText : state.lightText;
+		}
+	},
+	actions: {
+		toggleOpen() {
+			const context = getContext< Context >();
+			context.isOpen = ! context.isOpen;
+		},
+		toggleTheme() {
+			state.isDark = ! state.isDark;
+		}
+	},
+	callbacks: {
+		logIsOpen: () => {
+			const { isOpen } = getContext< Context >();
+			// Log the value of `isOpen` each time it changes.
+			console.log( `Is open: ${ isOpen }` );
+		},
+	},
+};
+
+type Store = ServerState & typeof storeDef;
+
+const { state } = store< Store >( '{{namespace}}', storeDef );
+{{/isTypescriptVariant}}

package/index.js

@@ -7,7 +7,7 @@ module.exports = {
 	defaultValues: {
 		slug: 'example-interactive',
 		title: 'Example Interactive',
-		description: 'An interactive block with the Interactivity API',
+		description: 'An interactive block with the Interactivity API.',
 		dashicon: 'media-interactive',
 		npmDependencies: [ '@wordpress/interactivity' ],
 		customPackageJSON: { files: [ '[^.]*' ] },
@@ -24,7 +24,14 @@ module.exports = {
 		},
 	},
 	variants: {
-		basic: {},
+		default: {},
+		typescript: {
+			slug: 'example-interactive-typescript',
+			title: 'Example Interactive TypeScript',
+			description:
+				'An interactive block with the Interactivity API using TypeScript.',
+			viewScriptModule: 'file:./view.ts',
+		},
 	},
 	pluginTemplatesPath: join( __dirname, 'plugin-templates' ),
 	blockTemplatesPath: join( __dirname, 'block-templates' ),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/create-block-interactive-template",
-	"version": "2.8.0",
+	"version": "2.9.0",
 	"description": "Template for @wordpress/create-block to create interactive blocks with the Interactivity API.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,5 +26,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "cecf5e14d317aa67407f77a7e5c8b6a43016bd42"
+	"gitHead": "2e5495c635910cb34bfaca3c6258d2e989f66214"
 }