Update/block template api version (#36955)

* Block Scaffolding: update API version in template * changelog
Automattic · Apr 18, 2024 · e743347 · e743347
1 parent 7225aae
commit e743347
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-block-template-api-version b/projects/plugins/jetpack/changelog/update-block-template-api-version
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Block Scaffolding: update API version in template
diff --git a/projects/plugins/jetpack/wp-cli-templates/block-block-json.mustache b/projects/plugins/jetpack/wp-cli-templates/block-block-json.mustache
@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 1,
+	"apiVersion": 3,
 	"name": "jetpack/{{ slug }}",
 	"title": {{ title }},
 	"description": {{ description }},

diff --git a/projects/plugins/jetpack/wp-cli-templates/block-edit-js.mustache b/projects/plugins/jetpack/wp-cli-templates/block-edit-js.mustache
@@ -1,5 +1,5 @@
 import { getBlockIconComponent } from '@automattic/jetpack-shared-extension-utils';
-import { BlockIcon } from '@wordpress/block-editor';
+import { BlockIcon, useBlockProps } from '@wordpress/block-editor';
 import { Placeholder, withNotices } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -8,7 +8,7 @@ import './editor.scss';
 
 const icon = getBlockIconComponent( metadata );
 
-function {{ className }}Edit( { attributes, className, noticeOperations, noticeUI, setAttributes } ) {
+function {{ className }}Edit( { attributes, noticeOperations, noticeUI, setAttributes } ) {
 	/**
 	 * Write the block editor UI.
 	 *
@@ -22,8 +22,10 @@ function {{ className }}Edit( { attributes, className, noticeOperations, noticeU
 		noticeOperations.createErrorNotice( __( 'Put error message here.', 'jetpack' ) );
 	};
 
+	const blockProps = useBlockProps();
+
 	return (
-		<div className={ className }>
+		<div { ...blockProps }>
 			<Placeholder
 				label={ __( '{{ title }}', 'jetpack' ) }
 				instructions={ __( 'Instructions go here.', 'jetpack' ) }

diff --git a/projects/plugins/jetpack/wp-cli-templates/block-editor-js.mustache b/projects/plugins/jetpack/wp-cli-templates/block-editor-js.mustache
@@ -5,5 +5,9 @@ import './editor.scss';
 
 registerJetpackBlockFromMetadata( metadata, {
 	edit,
-	save: () => null, // TODO: Implement save.
+	// TODO: implement the `save` function for static blocks. If you do, make sure to add the block
+	// props returned by `useBlockProps.save()`.
+	// https://developer.wordpress.org/news/2023/02/27/static-vs-dynamic-blocks-whats-the-difference/
+	// https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
+	save: () => null,
 } );