Update template to fix block validation errors.

packages/create-block-quick-start-template/block-templates/edit.js.mustache

@@ -6,21 +6,17 @@
 import { __ } from '@wordpress/i18n';
 
 /**
- * React hook that is used to mark the block wrapper element.
- * It provides all the necessary props like the class name.
- *
- * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
- */
-import { useBlockProps } from '@wordpress/block-editor';
-
-/**
- * Imports the InspectorControls component, which is used to wrap 
+ * Imports the InspectorControls component, which is used to wrap
  * the block's custom controls that will appear in in the Settings
  * Sidebar when the block is selected.
+ * 
+ * Also imports the React hook that is used to mark the block wrapper 
+ * element. It provides all the necessary props like the class name.
  *
- * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#inspectoradvancedcontrols
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#inspectorcontrols
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
  */
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Imports the necessary components that will be used to create
@@ -32,6 +28,14 @@ import { InspectorControls } from '@wordpress/block-editor';
  */
 import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
 
+/**
+ * Imports the useEffect React Hook. This is used to set an attribute when the
+ * block is loaded in the Editor.
+ *
+ * @see https://react.dev/reference/react/useEffect
+ */
+import { useEffect } from 'react';
+
 /**
  * The edit function describes the structure of your block in the context of the
  * editor. This represents what the editor will render when the block is used.
@@ -45,10 +49,19 @@ import { PanelBody, TextControl, ToggleControl } from '@wordpress/components';
  * @return {Element} Element to render.
  */
 export default function Edit( { attributes, setAttributes } ) {
-	const { showStartingYear, startingYear } = attributes;
+	const { fallbackCurrentYear, showStartingYear, startingYear } = attributes;
+
+	// Get the current year and make sure it's a string.
+	const currentYear = new Date().getFullYear().toString();
+
+	// When the block loads, set the fallbackCurrentYear attribute to the
+	// current year if it's not already set.
+	useEffect( () => {
+		if ( currentYear !== fallbackCurrentYear ) {
+			setAttributes( { fallbackCurrentYear: currentYear } );
+		}
+	}, [ currentYear, fallbackCurrentYear, setAttributes ] );
 
-	// Get the current year.
-	const currentYear = new Date().getFullYear();
 	let displayDate;
 
 	// Display the starting year as well if supplied by the user.
@@ -81,8 +94,8 @@ export default function Edit( { attributes, setAttributes } ) {
 								'{{textdomain}}'
 							) }
 							value={ startingYear }
-							onChange={ ( year ) =>
-								setAttributes( { startingYear: year } )
+							onChange={ ( value ) =>
+								setAttributes( { startingYear: value } )
 							}
 						/>
 					) }

packages/create-block-quick-start-template/block-templates/render.php.mustache

@@ -13,14 +13,21 @@
 // Get the current year.
 $current_year = date( "Y" );
 
-// Set the display date.	
-if ( ! empty( $attributes['startingYear'] ) && ! empty( $attributes['showStartingYear'] ) ) {
-	$display_date = $attributes['startingYear'] . '–' . $current_year;
+// Determine which content to display.
+if ( isset( $attributes['fallbackCurrentYear'] ) && $attributes['fallbackCurrentYear'] === $current_year ) {
+
+	// The current year is the same as the fallback, so use the block content saved in the database (by the save.js function).
+	$block_content = $content;
 } else {
-	$display_date = $current_year;
+
+	// The current year is different from the fallback, so render the updated block content.
+	if ( ! empty( $attributes['startingYear'] ) && ! empty( $attributes['showStartingYear'] ) ) {
+		$display_date = $attributes['startingYear'] . '–' . $current_year;
+	} else {
+		$display_date = $current_year;
+	}
+
+	$block_content = '<p' . get_block_wrapper_attributes() . '>© ' . esc_html( $display_date ) . '</p>';
 }
 
-?>
-<p <?php echo get_block_wrapper_attributes(); ?>>
-	© <?php echo esc_html( $display_date ); ?>
-</p>
+echo wp_kses_post( $block_content );

packages/create-block-quick-start-template/block-templates/save.js.mustache

@@ -15,21 +15,18 @@ import { useBlockProps } from '@wordpress/block-editor';
  *
  * @param {Object} props            Properties passed to the function.
  * @param {Object} props.attributes Available block attributes.
- * 
+ *
  * @return {Element} Element to render.
  */
 export default function save( { attributes } ) {
-	const { showStartingYear, startingYear } = attributes;
-
-	// Get the current year.
-	const currentYear = new Date().getFullYear();
+	const { fallbackCurrentYear, showStartingYear, startingYear } = attributes;
 	let displayDate;
 
 	// Display the starting year as well if supplied by the user.
 	if ( showStartingYear && startingYear ) {
-		displayDate = startingYear + '–' + currentYear;
+		displayDate = startingYear + '–' + fallbackCurrentYear;
 	} else {
-		displayDate = currentYear;
+		displayDate = fallbackCurrentYear;
 	}
 
 	return <p { ...useBlockProps.save() }>© { displayDate }</p>;

packages/create-block-quick-start-template/index.js

@@ -11,6 +11,9 @@ module.exports = {
 			"Display your site's copyright date. (Quick Start Example)",
 		npmDependencies: [ '@wordpress/icons' ],
 		attributes: {
+			fallbackCurrentYear: {
+				type: 'string',
+			},
 			showStartingYear: {
 				type: 'boolean',
 			},