@wordpress/create-block-tutorial-template 2.32.1-next.f8d8eceb.0 → 3.0.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 3.0.0 (2023-11-16)
+
+### Breaking Change
+
+-   Update the block example scaffolded by the template.
+
+## 2.33.0 (2023-11-02)
+
 ## 2.32.0 (2023-10-18)
 
 ## 2.31.0 (2023-10-05)

package/README.md

@@ -1,6 +1,6 @@
 # Create Block Tutorial Template
 
-This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) that is the finished version of the block in the official [WordPress Tutorial](https://github.com/WordPress/gutenberg/tree/HEAD/docs/getting-started/create-block/README.md) for the block editor.
+This is a template for [`@wordpress/create-block`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/create-block/README.md) that creates an example "Copyright Date" block. This block is used in the official WordPress block development [Quick Start Guide](https://developer.wordpress.org/block-editor/getting-started/quick-start-guide).
 
 ## Usage
 
@@ -10,6 +10,8 @@ This block template can be used by running the following command:
 npx  @wordpress/create-block --template @wordpress/create-block-tutorial-template
 ```
 
+Use the default options when prompted in the terminal.
+
 ## Contributing to this package
 
 This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.

package/block-templates/edit.js.mustache

@@ -1,17 +1,40 @@
 /**
- * WordPress components that create the necessary UI elements for the block
+ * Retrieves the translation of text.
  *
- * @see https://developer.wordpress.org/block-editor/packages/packages-components/
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
  */
-import { TextControl } from '@wordpress/components';
+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.
+ * 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/#inspectorcontrols
  * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Imports the necessary components that will be used to create
+ * the user interface for the block's settings.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/components/panel/#panelbody
+ * @see https://developer.wordpress.org/block-editor/reference-guides/components/text-control/
+ * @see https://developer.wordpress.org/block-editor/reference-guides/components/toggle-control/
+ */
+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
@@ -26,13 +49,59 @@ import { useBlockProps } from '@wordpress/block-editor';
  * @return {Element} Element to render.
  */
 export default function Edit( { attributes, setAttributes } ) {
-	const blockProps = useBlockProps();
+	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 ] );
+
+	let displayDate;
+
+	// Display the starting year as well if supplied by the user.
+	if ( showStartingYear && startingYear ) {
+		displayDate = startingYear + '–' + currentYear;
+	} else {
+		displayDate = currentYear;
+	}
+
 	return (
-		<div { ...blockProps }>
-			<TextControl
-				value={ attributes.message }
-				onChange={ ( val ) => setAttributes( { message: val } ) }
-			/>
-		</div>
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings', '{{textdomain}}' ) }>
+					<ToggleControl
+						checked={ showStartingYear }
+						label={ __(
+							'Show starting year',
+							'{{textdomain}}'
+						) }
+						onChange={ () =>
+							setAttributes( {
+								showStartingYear: ! showStartingYear,
+							} )
+						}
+					/>
+					{ showStartingYear && (
+						<TextControl
+							label={ __(
+								'Starting year',
+								'{{textdomain}}'
+							) }
+							value={ startingYear }
+							onChange={ ( value ) =>
+								setAttributes( { startingYear: value } )
+							}
+						/>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			<p { ...useBlockProps() }>© { displayDate }</p>
+		</>
 	);
 }

package/block-templates/index.js.mustache

@@ -5,49 +5,41 @@
  */
 import { registerBlockType } from '@wordpress/blocks';
 
-/**
- * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
- * All files containing `style` keyword are bundled together. The code used
- * gets applied both to the front of your site and to the editor. All other files
- * get applied to the editor only.
- *
- * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
- */
-import './style.scss';
-import './editor.scss';
-
 /**
  * Internal dependencies
  */
 import Edit from './edit';
-{{#isStaticVariant}}
 import save from './save';
-{{/isStaticVariant}}
 import metadata from './block.json';
 
+/**
+ * Define a custom SVG icon for the block. This icon will appear in
+ * the Inserter and when the user selects the block in the Editor.
+ */
+const calendarIcon = (
+	<svg
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 16c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V7h15v12zM9 10H7v2h2v-2zm0 4H7v2h2v-2zm4-4h-2v2h2v-2zm4 0h-2v2h2v-2zm-4 4h-2v2h2v-2zm4 0h-2v2h2v-2z"></path>
+	</svg>
+);
+
 /**
  * Every block starts by registering a new block type definition.
  *
  * @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}}',
-		},
-	},
+	icon: calendarIcon,
 	/**
 	 * @see ./edit.js
 	 */
 	edit: Edit,
-	{{#isStaticVariant}}
-
 	/**
 	 * @see ./save.js
 	 */
 	save,
-	{{/isStaticVariant}}
 } );

package/block-templates/render.php.mustache

@@ -1,10 +1,33 @@
-{{#isDynamicVariant}}
 <?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
  */
-?>
-<p <?php echo get_block_wrapper_attributes(); ?>>
-	<?php echo esc_html( $attributes['message'] ); ?>
-</p>
-{{/isDynamicVariant}}
+
+// Get the current year.
+$current_year = date( "Y" );
+
+// 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 {
+
+	// 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>';
+}
+
+echo wp_kses_post( $block_content );

package/block-templates/save.js.mustache

@@ -1,4 +1,3 @@
-{{#isStaticVariant}}
 /**
  * React hook that is used to mark the block wrapper element.
  * It provides all the necessary props like the class name.
@@ -16,10 +15,27 @@ 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 blockProps = useBlockProps.save();
-	return <div { ...blockProps }>{ attributes.message }</div>;
+	const { fallbackCurrentYear, showStartingYear, startingYear } = attributes;
+	
+	// If there is no fallbackCurrentYear, which could happen if the block
+	// is loaded from a template/pattern, return null. In this case, block
+	// rendering will be handled by the render.php file.
+	if ( ! fallbackCurrentYear ) {
+		return null;
+	}
+	
+	let displayDate;
+
+	// Display the starting year as well if supplied by the user.
+	if ( showStartingYear && startingYear ) {
+		displayDate = startingYear + '–' + fallbackCurrentYear;
+	} else {
+		displayDate = fallbackCurrentYear;
+	}
+
+	return <p { ...useBlockProps.save() }>© { displayDate }</p>;
 }
-{{/isStaticVariant}}

package/index.js

@@ -5,35 +5,35 @@ const { join } = require( 'path' );
 
 module.exports = {
 	defaultValues: {
-		slug: 'gutenpride',
-		category: 'text',
-		title: 'Gutenpride',
-		description:
-			'A Gutenberg block to show your pride! This block enables you to type text and style it with the color font Gilbert from Type with Pride.',
-		dashicon: 'flag',
+		slug: 'copyright-date-block',
+		title: 'Copyright Date',
+		description: "Display your site's copyright date.",
 		attributes: {
-			message: {
+			fallbackCurrentYear: {
+				type: 'string',
+			},
+			showStartingYear: {
+				type: 'boolean',
+			},
+			startingYear: {
 				type: 'string',
-				source: 'text',
-				selector: 'div',
 			},
 		},
 		supports: {
+			color: {
+				background: false,
+				text: true,
+			},
 			html: false,
-		},
-	},
-	variants: {
-		static: {},
-		dynamic: {
-			attributes: {
-				message: {
-					type: 'string',
-				},
+			typography: {
+				fontSize: true,
 			},
-			render: 'file:./render.php',
 		},
+		editorScript: 'file:./index.js',
+		render: 'file:./render.php',
+		example: {},
+		wpEnv: true,
 	},
 	pluginTemplatesPath: join( __dirname, 'plugin-templates' ),
 	blockTemplatesPath: join( __dirname, 'block-templates' ),
-	assetsPath: join( __dirname, 'assets' ),
 };

package/package.json

@@ -1,15 +1,16 @@
 {
 	"name": "@wordpress/create-block-tutorial-template",
-	"version": "2.32.1-next.f8d8eceb.0",
-	"description": "Template for @wordpress/create-block used in the official WordPress tutorial.",
+	"version": "3.0.0",
+	"description": "This is a template for @wordpress/create-block that creates an example 'Copyright Date' block. This block is used in the official WordPress block development Quick Start Guide.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
 	"keywords": [
 		"wordpress",
 		"create block",
-		"block template"
+		"block template",
+		"quick start"
 	],
-	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/docs/getting-started/create-block",
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/docs/getting-started/quick-start-guide",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/WordPress/gutenberg.git",
@@ -21,5 +22,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8d8fd197e202b8104ffb1cb83048efd0a6c3faf4"
+	"gitHead": "839018ff6029ba749780e288e08ff9cd898e50e8"
 }

package/plugin-templates/$slug.php.mustache

@@ -8,7 +8,7 @@
  * Description:       {{description}}
 {{/description}}
  * Version:           {{version}}
- * Requires at least: 6.1
+ * Requires at least: 6.2
  * Requires PHP:      7.0
 {{#author}}
  * Author:            {{author}}
@@ -41,7 +41,7 @@ if ( ! defined( 'ABSPATH' ) ) {
  *
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
-function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
+function {{namespaceSnakeCase}}_{{slugSnakeCase}}_init() {
 	register_block_type( __DIR__ . '/build' );
 }
-add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );
+add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_init' );

package/plugin-templates/readme.txt.mustache

@@ -3,7 +3,7 @@
 Contributors:      {{author}}
 {{/author}}
 Tags:              block
-Tested up to:      6.1
+Tested up to:      6.4
 Stable tag:        {{version}}
 {{#license}}
 License:           {{license}}

package/block-templates/editor.scss.mustache

@@ -1,13 +0,0 @@
-/**
- * The following styles get applied inside the editor only.
- *
- * Replace them with your own styles or remove the file completely.
- */
-
-.wp-block-{{namespace}}-{{slug}} input[type="text"] {
-	font-family: Gilbert, sans-serif;
-	font-size: 64px;
-	color: inherit;
-	background: inherit;
-	border: 0;
-}

package/block-templates/style.scss.mustache

@@ -1,17 +0,0 @@
-/**
- * The following styles get applied both on the front of your site
- * and in the editor.
- *
- * Replace them with your own styles or remove the file completely.
- */
-
-@font-face {
-	font-family: Gilbert;
-	src: url(../assets/gilbert-color.otf);
-	font-weight: 700;
-}
-
-.wp-block-{{namespace}}-{{slug}} {
-	font-family: Gilbert, sans-serif;
-	font-size: 64px;
-}