From 6b0df69b2a30d6d17e98f7292ca65dcf8c38ceb8 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Thu, 27 Jan 2022 17:10:08 -0600
Subject: [PATCH 01/37] Creat the exercise of block.json

---
 js/src/index.js        | 47 ++----------------------------------------
 progress-indicator.php | 11 +++++-----
 2 files changed, 7 insertions(+), 51 deletions(-)

diff --git a/js/src/index.js b/js/src/index.js
index c1e5d3c..1271da2 100644
--- a/js/src/index.js
+++ b/js/src/index.js
@@ -1,45 +1,2 @@
-/**
- * WordPress dependencies
- */
-import { registerBlockType } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import block from '../../block.json';
-import Edit from './edit';
-import Save from './save';
-
-const { apiVersion, attributes, category, icon, keywords, name } = block;
-
-/**
- * @typedef {Object} Attributes The block attributes.
- * @property {string} color         The color of the indicators.
- * @property {number} currentStep   The step that the indicator is on.
- * @property {number} numberOfSteps The total number of steps in the indicator.
- */
-
-// @ts-ignore The declaration file is probably wrong.
-registerBlockType( name, {
-	apiVersion,
-	title: __( 'Progress Indicator', 'progress-indicator' ),
-	description: __(
-		'A block that lets you easily display a progress indicator on your WordPress posts or pages.',
-		'progress-indicator',
-	),
-	attributes,
-	category,
-	icon,
-	keywords,
-	example: {
-		/** @type {Attributes} */
-		attributes: {
-			color: '#10b981',
-			currentStep: 2,
-			numberOfSteps: 5,
-		},
-	},
-	edit: Edit,
-	save: Save,
-} );
+// export * from './index.final';
+export * from './index.exercise';
diff --git a/progress-indicator.php b/progress-indicator.php
index a20bb46..5f4ae79 100644
--- a/progress-indicator.php
+++ b/progress-indicator.php
@@ -20,9 +20,8 @@
 
 add_action( 'init', 'progress_indicator_register_block' );
 
-/**
- * Registers the block with the block.json file.
- */
-function progress_indicator_register_block() {
-	register_block_type_from_metadata( __DIR__ );
-}
+// Define a function progress_indicator_register_block().
+// It should simply call the PHP function to register a block
+// That function's only argument should be the directory of this plugin.
+// That's where it'll look for the block.json file.
+// Do npm run lint:php to see if there's anything else to add.

From e84f6eee95f0e3abc999a10da53f95f4e9774d00 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Thu, 27 Jan 2022 17:28:56 -0600
Subject: [PATCH 02/37] Add an exercise file with comments about what to do

---
 INSTRUCTIONS.md          | 23 ++++++++++++++++++++
 js/src/index.exercise.js | 38 +++++++++++++++++++++++++++++++++
 js/src/index.final.js    | 45 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 106 insertions(+)
 create mode 100644 INSTRUCTIONS.md
 create mode 100644 js/src/index.exercise.js
 create mode 100644 js/src/index.final.js

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
new file mode 100644
index 0000000..c404259
--- /dev/null
+++ b/INSTRUCTIONS.md
@@ -0,0 +1,23 @@
+# Block JSON File
+
+Most content in modern WordPress is a block.
+
+This is similar to other editors you might know, like Notion.so or MailChimp.
+
+Blocks are usually interactive, so they have a React component to edit them.
+
+And they're saved to the database as HTML markup, with comments that have their attributes as JSON.
+
+Here's we're going to register a block so the editor is aware of it.
+
+The modern way to register a WordPress block is [with](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) a `block.json` file.
+
+Because WordPress [recommends](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#benefits-using-the-metadata-file) registering a block with PHP and JS, the `block.json` file makes this more DRY.
+
+We can mainly reference `block.json` in the PHP and JS functions.
+
+## Exercise
+
+### Files
+- `js/src/index.js`
+- `progress-indicator.php`
diff --git a/js/src/index.exercise.js b/js/src/index.exercise.js
new file mode 100644
index 0000000..0ca806d
--- /dev/null
+++ b/js/src/index.exercise.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import block from '../../block.json';
+// Import the Edit component.
+// Import the Save component.
+
+/**
+ * @typedef {Object} Attributes The block attributes.
+ * @property {string} color         The color of the indicators.
+ * @property {number} currentStep   The step that the indicator is on.
+ * @property {number} numberOfSteps The total number of steps in the indicator.
+ */
+
+// The second argument of registerBlockType() looks very similar to block.json,
+// which is imported above as block.
+// @ts-ignore The declaration file is probably wrong.
+registerBlockType( block.name, {
+	// For the apiVersion, pass block.apiVersion.
+	// For the title, pass the same value as block.title, but translate it using __().
+	// For the description, pass the same description as block.description, but translate it using __().
+	// Pass the same attributes, category, icon, and keywords as in block.
+	example: {
+		/** @type {Attributes} */
+		attributes: {
+			// Set any value for each of the 3 attributes, as long as it matches the type of the attribute.
+			// This is what the preview will look like.
+		},
+	},
+	// For edit, pass the Edit component imported above.
+	// For save, pass the Save component imported above.
+} );
diff --git a/js/src/index.final.js b/js/src/index.final.js
new file mode 100644
index 0000000..c1e5d3c
--- /dev/null
+++ b/js/src/index.final.js
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import block from '../../block.json';
+import Edit from './edit';
+import Save from './save';
+
+const { apiVersion, attributes, category, icon, keywords, name } = block;
+
+/**
+ * @typedef {Object} Attributes The block attributes.
+ * @property {string} color         The color of the indicators.
+ * @property {number} currentStep   The step that the indicator is on.
+ * @property {number} numberOfSteps The total number of steps in the indicator.
+ */
+
+// @ts-ignore The declaration file is probably wrong.
+registerBlockType( name, {
+	apiVersion,
+	title: __( 'Progress Indicator', 'progress-indicator' ),
+	description: __(
+		'A block that lets you easily display a progress indicator on your WordPress posts or pages.',
+		'progress-indicator',
+	),
+	attributes,
+	category,
+	icon,
+	keywords,
+	example: {
+		/** @type {Attributes} */
+		attributes: {
+			color: '#10b981',
+			currentStep: 2,
+			numberOfSteps: 5,
+		},
+	},
+	edit: Edit,
+	save: Save,
+} );

From 8d0a5f7f001671b5cbb26fd60949007384d1beaf Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Thu, 27 Jan 2022 17:31:49 -0600
Subject: [PATCH 03/37] Simplify README.md in how it describes registration

---
 INSTRUCTIONS.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index c404259..0684a67 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -8,13 +8,13 @@ Blocks are usually interactive, so they have a React component to edit them.
 
 And they're saved to the database as HTML markup, with comments that have their attributes as JSON.
 
-Here's we're going to register a block so the editor is aware of it.
+We're going to register a block so the editor is aware of it.
 
 The modern way to register a WordPress block is [with](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) a `block.json` file.
 
-Because WordPress [recommends](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#benefits-using-the-metadata-file) registering a block with PHP and JS, the `block.json` file makes this more DRY.
+WordPress [recommends](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#benefits-using-the-metadata-file) registering a block with PHP and JS.
 
-We can mainly reference `block.json` in the PHP and JS functions.
+So the `block.json` file makes this more DRY, as we can use that file in both languages.
 
 ## Exercise
 

From cc28a123063e4f2e8afbc81701e488c35024d99d Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Thu, 27 Jan 2022 17:36:19 -0600
Subject: [PATCH 04/37] Add comments about how to register the block in PHP

---
 progress-indicator.php | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/progress-indicator.php b/progress-indicator.php
index 5f4ae79..87211d9 100644
--- a/progress-indicator.php
+++ b/progress-indicator.php
@@ -21,7 +21,8 @@
 add_action( 'init', 'progress_indicator_register_block' );
 
 // Define a function progress_indicator_register_block().
-// It should simply call the PHP function to register a block
-// That function's only argument should be the directory of this plugin.
+// That function should simply call the PHP function to register a block: https://developer.wordpress.org/reference/functions/register_block_type_from_metadata/
+// And that function's only argument should be the directory of this plugin.
+// You can get that directory from a magic constant: https://www.php.net/manual/en/language.constants.magic.php
 // That's where it'll look for the block.json file.
 // Do npm run lint:php to see if there's anything else to add.

From 4a927bf54107ba618578ba9c0997965ad556d255 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Thu, 27 Jan 2022 17:43:43 -0600
Subject: [PATCH 05/37] Make the instructions more clear

---
 INSTRUCTIONS.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 0684a67..d91c3fa 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -2,16 +2,18 @@
 
 Most content in modern WordPress is a block.
 
-This is similar to other editors you might know, like Notion.so or MailChimp.
+This is similar to other editors like in [Notion](https://www.notion.so/) and [MailChimp](https://mailchimp.com/).
 
 Blocks are usually interactive, so they have a React component to edit them.
 
-And they're saved to the database as HTML markup, with comments that have their attributes as JSON.
+And they're saved to the database as HTML markup, with JSON in comments with their attributes.
 
 We're going to register a block so the editor is aware of it.
 
 The modern way to register a WordPress block is [with](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) a `block.json` file.
 
+It should go in the root of the plugin if there's only 1 block in the plugin.
+
 WordPress [recommends](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#benefits-using-the-metadata-file) registering a block with PHP and JS.
 
 So the `block.json` file makes this more DRY, as we can use that file in both languages.

From 68b184eacd479f8faad6fc4e9b4d64a18ba406a3 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Thu, 27 Jan 2022 18:45:41 -0600
Subject: [PATCH 06/37] =?UTF-8?q?Add=20=F0=9F=9A=A7=20emojis=20to=20show?=
 =?UTF-8?q?=20what=20to=20add?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 INSTRUCTIONS.md          | 2 +-
 js/src/index.exercise.js | 8 ++++----
 progress-indicator.php   | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index d91c3fa..523bed7 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -21,5 +21,5 @@ So the `block.json` file makes this more DRY, as we can use that file in both la
 ## Exercise
 
 ### Files
-- `js/src/index.js`
+- `js/src/index.exercise.js`
 - `progress-indicator.php`
diff --git a/js/src/index.exercise.js b/js/src/index.exercise.js
index 0ca806d..59e5e74 100644
--- a/js/src/index.exercise.js
+++ b/js/src/index.exercise.js
@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import block from '../../block.json';
-// Import the Edit component.
+// 🚧 Import the Edit component.
 // Import the Save component.
 
 /**
@@ -22,17 +22,17 @@ import block from '../../block.json';
 // which is imported above as block.
 // @ts-ignore The declaration file is probably wrong.
 registerBlockType( block.name, {
-	// For the apiVersion, pass block.apiVersion.
+	// 🚧 For the apiVersion, pass block.apiVersion.
 	// For the title, pass the same value as block.title, but translate it using __().
 	// For the description, pass the same description as block.description, but translate it using __().
 	// Pass the same attributes, category, icon, and keywords as in block.
 	example: {
 		/** @type {Attributes} */
 		attributes: {
-			// Set any value for each of the 3 attributes, as long as it matches the type of the attribute.
+			// 🚧 Set any value for each of the 3 attributes, as long as it matches the type of the attribute.
 			// This is what the preview will look like.
 		},
 	},
-	// For edit, pass the Edit component imported above.
+	// 🚧 For edit, pass the Edit component imported above.
 	// For save, pass the Save component imported above.
 } );
diff --git a/progress-indicator.php b/progress-indicator.php
index 87211d9..7a5fe28 100644
--- a/progress-indicator.php
+++ b/progress-indicator.php
@@ -20,7 +20,7 @@
 
 add_action( 'init', 'progress_indicator_register_block' );
 
-// Define a function progress_indicator_register_block().
+// 🚧 Define a function progress_indicator_register_block().
 // That function should simply call the PHP function to register a block: https://developer.wordpress.org/reference/functions/register_block_type_from_metadata/
 // And that function's only argument should be the directory of this plugin.
 // You can get that directory from a magic constant: https://www.php.net/manual/en/language.constants.magic.php

From 01eb4c26bf864ef36d11114a8e92dc0157594c2f Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 16:02:19 -0600
Subject: [PATCH 07/37] Add links to the files and text to INSTRUCTIONS.md

---
 INSTRUCTIONS.md | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 523bed7..cf4febb 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -2,7 +2,7 @@
 
 Most content in modern WordPress is a block.
 
-This is similar to other editors like in [Notion](https://www.notion.so/) and [MailChimp](https://mailchimp.com/).
+This is similar to other editors like [Medium](https://medium.com/), [Notion](https://www.notion.so/), and [MailChimp](https://mailchimp.com/).
 
 Blocks are usually interactive, so they have a React component to edit them.
 
@@ -14,12 +14,20 @@ The modern way to register a WordPress block is [with](https://developer.wordpre
 
 It should go in the root of the plugin if there's only 1 block in the plugin.
 
-WordPress [recommends](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#benefits-using-the-metadata-file) registering a block with PHP and JS.
+The `block.json` file [must be](https://github.com/WordPress/wporg-plugin-guidelines/blob/28d945f414db3bb42e04805fb109e7178cbabc9a/blocks.md#4-block-plugins-must-include-a-blockjson-file) in the root of the plugin to be in the [block directory](https://wordpress.org/plugins/browse/block/).
+
+Also, WordPress [recommends](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#benefits-using-the-metadata-file) registering a block with PHP and JS.
 
 So the `block.json` file makes this more DRY, as we can use that file in both languages.
 
 ## Exercise
 
+You're going to register the block in JS and PHP.
+
+You can mainly use `block.json` for both.
+
+Look for the 🚧 in the exercise files for where to edit.
+
 ### Files
-- `js/src/index.exercise.js`
-- `progress-indicator.php`
+- [js/src/index.exercise.js](https://github.com/kienstra/progress-indicator/blob/exercise/1-block-json/js/src/index.exercise.js)
+- [progress-indicator.php](https://github.com/kienstra/progress-indicator/blob/exercise/1-block-json/progress-indicator.php)

From 3c618e19fce26d0a316b29d2266ac61e6ebc1590 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 16:11:32 -0600
Subject: [PATCH 08/37] Add an example block, add links

---
 INSTRUCTIONS.md | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index cf4febb..d6cb120 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -6,13 +6,20 @@ This is similar to other editors like [Medium](https://medium.com/), [Notion](ht
 
 Blocks are usually interactive, so they have a React component to edit them.
 
-And they're saved to the database as HTML markup, with JSON in comments with their attributes.
+And they're saved to the database as HTML markup, attributes stored in comments.
 
-We're going to register a block so the editor is aware of it.
+Here's an example of a saved Paragraph block:
+
+```html
+<!-- wp:paragraph {"textColor":"vivid-cyan-blue","fontSize":"large"} -->
+<p class="has-vivid-cyan-blue-color has-text-color has-large-font-size">This is text in an example paragraph block</p>
+```
+
+In this exercise, we're going to register a block so the editor is aware of it.
 
 The modern way to register a WordPress block is [with](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) a `block.json` file.
 
-It should go in the root of the plugin if there's only 1 block in the plugin.
+It should go in the root of the plugin if there's only 1 block in the plugin, like in this tutorial.
 
 The `block.json` file [must be](https://github.com/WordPress/wporg-plugin-guidelines/blob/28d945f414db3bb42e04805fb109e7178cbabc9a/blocks.md#4-block-plugins-must-include-a-blockjson-file) in the root of the plugin to be in the [block directory](https://wordpress.org/plugins/browse/block/).
 

From 178277d9ab2e78e8169be972aaec701198c985f7 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 16:13:55 -0600
Subject: [PATCH 09/37] Add a missing 'with'

---
 INSTRUCTIONS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index d6cb120..7e93d74 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -6,7 +6,7 @@ This is similar to other editors like [Medium](https://medium.com/), [Notion](ht
 
 Blocks are usually interactive, so they have a React component to edit them.
 
-And they're saved to the database as HTML markup, attributes stored in comments.
+And they're saved to the database as HTML markup, with attributes stored in comments.
 
 Here's an example of a saved Paragraph block:
 

From 9647938bfc5e68d9ea0c5c2c0a269a7268e53037 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 16:15:35 -0600
Subject: [PATCH 10/37] Capitalize Block Directory

---
 INSTRUCTIONS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 7e93d74..ff11b7c 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -21,7 +21,7 @@ The modern way to register a WordPress block is [with](https://developer.wordpre
 
 It should go in the root of the plugin if there's only 1 block in the plugin, like in this tutorial.
 
-The `block.json` file [must be](https://github.com/WordPress/wporg-plugin-guidelines/blob/28d945f414db3bb42e04805fb109e7178cbabc9a/blocks.md#4-block-plugins-must-include-a-blockjson-file) in the root of the plugin to be in the [block directory](https://wordpress.org/plugins/browse/block/).
+The `block.json` file [must be](https://github.com/WordPress/wporg-plugin-guidelines/blob/28d945f414db3bb42e04805fb109e7178cbabc9a/blocks.md#4-block-plugins-must-include-a-blockjson-file) in the root of the plugin to be in the [Block Directory](https://wordpress.org/plugins/browse/block/).
 
 Also, WordPress [recommends](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#benefits-using-the-metadata-file) registering a block with PHP and JS.
 

From 905fd6443f2a3cbee511f545baa0fbde007ba114 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 17:50:59 -0600
Subject: [PATCH 11/37] Change the function to register_block_type()

---
 progress-indicator.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/progress-indicator.php b/progress-indicator.php
index 7a5fe28..0f4bcfc 100644
--- a/progress-indicator.php
+++ b/progress-indicator.php
@@ -21,7 +21,7 @@
 add_action( 'init', 'progress_indicator_register_block' );
 
 // 🚧 Define a function progress_indicator_register_block().
-// That function should simply call the PHP function to register a block: https://developer.wordpress.org/reference/functions/register_block_type_from_metadata/
+// That function should simply call the PHP function to register a block: https://developer.wordpress.org/reference/functions/register_block_type/
 // And that function's only argument should be the directory of this plugin.
 // You can get that directory from a magic constant: https://www.php.net/manual/en/language.constants.magic.php
 // That's where it'll look for the block.json file.

From cce002036f6c171be462e3e34456e213bc595ca4 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 18:08:44 -0600
Subject: [PATCH 12/37] Add placeholders in Edit and Save

---
 js/src/edit.js                    | 57 ++---------------------------
 js/src/progress-indicator.js      | 61 -------------------------------
 js/src/progress-indicator.test.js | 44 ----------------------
 js/src/save.js                    | 19 +++-------
 4 files changed, 9 insertions(+), 172 deletions(-)
 delete mode 100644 js/src/progress-indicator.js
 delete mode 100644 js/src/progress-indicator.test.js

diff --git a/js/src/edit.js b/js/src/edit.js
index 0fc9f1c..bb26736 100644
--- a/js/src/edit.js
+++ b/js/src/edit.js
@@ -6,64 +6,15 @@ import * as React from 'react';
 /**
  * WordPress dependencies
  */
-// @ts-ignore The declaration file is outdated.
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { ColorPalette, PanelBody, RangeControl } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import ProgressIndicator from './progress-indicator';
-
 /**
  * The component for the editor.
  *
- * @param {{
- *  attributes: import('./index').Attributes,
- *  setAttributes: Function
- * }} props
  * @return {React.ReactElement} The component.
  */
-export default function Edit( { attributes, setAttributes } ) {
-	const blockProps = useBlockProps();
-	const { colors } = useSelect(
-		( select ) => select( 'core/block-editor' ).getSettings()
-	);
-
-	return <div { ...blockProps }>
-		<ProgressIndicator attributes={ attributes } />
-		<InspectorControls>
-			<PanelBody title={ __( 'Colors', 'progress-indicator' ) }>
-				<ColorPalette
-					colors={ colors }
-					value={ attributes.color }
-					onChange={ ( newValue ) =>
-						setAttributes( { color: newValue } )
-					}
-				/>
-			</PanelBody>
-			<PanelBody title={ __( 'Steps', 'progress-indicator' ) }>
-				<RangeControl
-					label={ __( 'Current Step', 'progress-indicator' ) }
-					value={ attributes.currentStep }
-					onChange={ ( newValue ) =>
-						setAttributes( { currentStep: Number( newValue ) } )
-					}
-					min={ 1 }
-					max={ attributes.numberOfSteps }
-				/>
-				<RangeControl
-					label={ __( 'Number of Steps', 'progress-indicator' ) }
-					value={ attributes.numberOfSteps }
-					onChange={ ( newValue ) =>
-						setAttributes( { numberOfSteps: Number( newValue ) } )
-					}
-					min={ 1 }
-					max={ 10 }
-				/>
-			</PanelBody>
-		</InspectorControls>
-	</div>;
+export default function Edit() {
+	return <span>
+		{ __( 'This is a placeholder for the Progress Indicator block', 'progress-indicator' ) }
+	</span>;
 }
diff --git a/js/src/progress-indicator.js b/js/src/progress-indicator.js
deleted file mode 100644
index b5a320a..0000000
--- a/js/src/progress-indicator.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * External dependencies
- */
-import * as React from 'react';
-import tinycolor2 from 'tinycolor2';
-
-/**
- * The progress indicator component.
- *
- * @param {{attributes: import('./index').Attributes}} props
- * @return {React.ReactElement} The component.
- */
-export default function ProgressIndicator( { attributes } ) {
-	const color = tinycolor2( attributes.color );
-	const isColorDark = color.getBrightness() < 130;
-
-	return <div className="pib-progress-indicator">
-		{ /* Step Lines  */ }
-		<div className="pib-progress-indicator__lines">
-			{ [ ...Array( attributes.numberOfSteps - 1 ) ].map( ( value, index ) => {
-				const isLineComplete = attributes.currentStep > index + 1;
-
-				return <div
-					key={ index }
-					style={ {
-						backgroundColor: isLineComplete ? attributes.color : '#d1d5db',
-					} }
-					className="pib-progress-indicator__line"
-				/>;
-			} ) }
-		</div>
-		{ /* Step Circles */ }
-		{ [ ...Array( attributes.numberOfSteps ) ].map( ( value, index ) => {
-			const stepNumber = index + 1;
-			let style = {};
-
-			if ( attributes.currentStep === stepNumber ) {
-				style = {
-					border: `2px solid ${ attributes.color }`,
-					boxShadow: `#ffffff 0 0 0 0, ${ color.lighten( 43 ).toString() } 0 0 0 4px, #000000 0 0 0 0`,
-					color: isColorDark ? attributes.color : '#6b7280',
-				};
-			} else if ( attributes.currentStep > stepNumber ) {
-				style = {
-					backgroundColor: attributes.color,
-					border: `2px solid ${ attributes.color }`,
-					color: isColorDark ? '#ecfdf5' : '#6b7280',
-				};
-			}
-
-			return <div key={ index } style={ style } className="pib-progress-indicator__step">
-				{ attributes.currentStep > stepNumber
-					? <svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-						<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
-					</svg>
-					: stepNumber
-				}
-			</div>;
-		} ) }
-	</div>;
-}
diff --git a/js/src/progress-indicator.test.js b/js/src/progress-indicator.test.js
deleted file mode 100644
index b93d704..0000000
--- a/js/src/progress-indicator.test.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import '@testing-library/jest-dom/extend-expect';
-import { render, screen } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import ProgressIndicator from './progress-indicator';
-
-test( 'ProgressIndicator with current step of 2/5', () => {
-	render(
-		<ProgressIndicator
-			attributes={ {
-				numberOfSteps: 5,
-				currentStep: 2,
-				color: '#10b981',
-			} }
-		/>
-	);
-
-	it.each( [ 2, 3, 4, 5 ], ( number ) => {
-		expect( screen.getByText( number ) ).toBeInTheDocument();
-	} );
-
-	expect( screen.getAllByRole( 'img' ).length ).toEqual( 1 );
-} );
-
-test( 'ProgressIndicator with current step of 5/5', () => {
-	render(
-		<ProgressIndicator
-			attributes={ {
-				numberOfSteps: 5,
-				currentStep: 5,
-				color: '#10b981',
-			} }
-		/>
-	);
-
-	expect( screen.queryByText( 4 ) ).not.toBeInTheDocument();
-	expect( screen.getByText( 5 ) ).toBeInTheDocument();
-	expect( screen.getAllByRole( 'img' ).length ).toEqual( 4 );
-} );
diff --git a/js/src/save.js b/js/src/save.js
index 410cda4..178ce7f 100644
--- a/js/src/save.js
+++ b/js/src/save.js
@@ -6,24 +6,15 @@ import * as React from 'react';
 /**
  * WordPress dependencies
  */
-// @ts-ignore The declaration file is outdated.
-import { useBlockProps } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ProgressIndicator from './progress-indicator';
+import { __ } from '@wordpress/i18n';
 
 /**
  * The component to save the markup.
  *
- * @param {{attributes: import('./index').Attributes}} props
  * @return {React.ReactElement} The component.
  */
-export default function Save( { attributes } ) {
-	const blockProps = useBlockProps.save();
-
-	return <div { ...blockProps }>
-		<ProgressIndicator attributes={ attributes } />
-	</div>;
+export default function Save() {
+	return <span>
+		{ __( 'This is a placeholder for the Progress Indicator block', 'progress-indicator' ) }
+	</span>;
 }

From e42f8a05c1f7a9af97ac5006cfd732cd6c892a20 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 18:11:34 -0600
Subject: [PATCH 13/37] Remove the full URL

---
 INSTRUCTIONS.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index ff11b7c..5c25c56 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -36,5 +36,5 @@ You can mainly use `block.json` for both.
 Look for the 🚧 in the exercise files for where to edit.
 
 ### Files
-- [js/src/index.exercise.js](https://github.com/kienstra/progress-indicator/blob/exercise/1-block-json/js/src/index.exercise.js)
-- [progress-indicator.php](https://github.com/kienstra/progress-indicator/blob/exercise/1-block-json/progress-indicator.php)
+- [js/src/index.exercise.js](js/src/index.exercise.js)
+- [progress-indicator.php](progress-indicator.php)

From 1d440d781f582c60b35bd481260d6156f37c9fca Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 18:19:46 -0600
Subject: [PATCH 14/37] Change to 'All content'

---
 INSTRUCTIONS.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 5c25c56..18e20dc 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -1,6 +1,6 @@
 # Block JSON File
 
-Most content in modern WordPress is a block.
+All content in the WordPress block eidtor is a block.
 
 This is similar to other editors like [Medium](https://medium.com/), [Notion](https://www.notion.so/), and [MailChimp](https://mailchimp.com/).
 
@@ -35,6 +35,14 @@ You can mainly use `block.json` for both.
 
 Look for the 🚧 in the exercise files for where to edit.
 
+In [js/src/index.exercise.js](js/src/index.exercise.js), `registerBlockType()` will look like:
+
+```js
+registerBlockType( block.name, {
+	apiVersion: block.apiVersion,
+    // Most other values taken from block also.
+```
+
 ### Files
 - [js/src/index.exercise.js](js/src/index.exercise.js)
 - [progress-indicator.php](progress-indicator.php)

From 35c50e881f1f2ea1e3c443b766801e4a57125aca Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 18:20:33 -0600
Subject: [PATCH 15/37] Change spaces to a tab

---
 INSTRUCTIONS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 18e20dc..9f66861 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -40,7 +40,7 @@ In [js/src/index.exercise.js](js/src/index.exercise.js), `registerBlockType()` w
 ```js
 registerBlockType( block.name, {
 	apiVersion: block.apiVersion,
-    // Most other values taken from block also.
+	// Most other values taken from block also.
 ```
 
 ### Files

From 94d69feda5524a36d8fe1910a0e5f97a5893fcc6 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 18:22:38 -0600
Subject: [PATCH 16/37] Add a hint about destructuring

---
 INSTRUCTIONS.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 9f66861..b2febe3 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -43,6 +43,8 @@ registerBlockType( block.name, {
 	// Most other values taken from block also.
 ```
 
+Hint: you can avoid always doing `block.` by [destructuring](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) the properties of `block`.
+
 ### Files
 - [js/src/index.exercise.js](js/src/index.exercise.js)
 - [progress-indicator.php](progress-indicator.php)

From 54fce3cf655159dac05a445de4f668f2d0104866 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 18:23:54 -0600
Subject: [PATCH 17/37] Remove always, which doesn't add much

---
 INSTRUCTIONS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index b2febe3..8e38fe3 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -43,7 +43,7 @@ registerBlockType( block.name, {
 	// Most other values taken from block also.
 ```
 
-Hint: you can avoid always doing `block.` by [destructuring](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) the properties of `block`.
+Hint: you can avoid doing `block.` by [destructuring](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) the properties of `block`.
 
 ### Files
 - [js/src/index.exercise.js](js/src/index.exercise.js)

From 66b6cf5faf671cbb59674848131c0ba4cfa9f5bd Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 18:39:28 -0600
Subject: [PATCH 18/37] Fix a type of editor

---
 INSTRUCTIONS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 8e38fe3..66c58ee 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -1,6 +1,6 @@
 # Block JSON File
 
-All content in the WordPress block eidtor is a block.
+All content in the WordPress block editor is a block.
 
 This is similar to other editors like [Medium](https://medium.com/), [Notion](https://www.notion.so/), and [MailChimp](https://mailchimp.com/).
 

From 8dfcd8a6e4848ec754365fdd8db4eaf7c5f949aa Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 18:42:04 -0600
Subject: [PATCH 19/37] Change it from must be in roo to must be present

---
 INSTRUCTIONS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 66c58ee..7440abe 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -21,7 +21,7 @@ The modern way to register a WordPress block is [with](https://developer.wordpre
 
 It should go in the root of the plugin if there's only 1 block in the plugin, like in this tutorial.
 
-The `block.json` file [must be](https://github.com/WordPress/wporg-plugin-guidelines/blob/28d945f414db3bb42e04805fb109e7178cbabc9a/blocks.md#4-block-plugins-must-include-a-blockjson-file) in the root of the plugin to be in the [Block Directory](https://wordpress.org/plugins/browse/block/).
+The `block.json` file [must be present](https://github.com/WordPress/wporg-plugin-guidelines/blob/28d945f414db3bb42e04805fb109e7178cbabc9a/blocks.md#4-block-plugins-must-include-a-blockjson-file) to be eligible for the [Block Directory](https://wordpress.org/plugins/browse/block/).
 
 Also, WordPress [recommends](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#benefits-using-the-metadata-file) registering a block with PHP and JS.
 

From 54b52b44c2ae4ce25b2bbb52cfc732af5c33a7c7 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 18:43:22 -0600
Subject: [PATCH 20/37] Remove the line about being in the root of the plugin

---
 INSTRUCTIONS.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 7440abe..43b2901 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -19,8 +19,6 @@ In this exercise, we're going to register a block so the editor is aware of it.
 
 The modern way to register a WordPress block is [with](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) a `block.json` file.
 
-It should go in the root of the plugin if there's only 1 block in the plugin, like in this tutorial.
-
 The `block.json` file [must be present](https://github.com/WordPress/wporg-plugin-guidelines/blob/28d945f414db3bb42e04805fb109e7178cbabc9a/blocks.md#4-block-plugins-must-include-a-blockjson-file) to be eligible for the [Block Directory](https://wordpress.org/plugins/browse/block/).
 
 Also, WordPress [recommends](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#benefits-using-the-metadata-file) registering a block with PHP and JS.

From d4899eae741b65f93e6c1b9a104fb14b2dd845e4 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 18:43:46 -0600
Subject: [PATCH 21/37] Change 'The' to 'A'

---
 INSTRUCTIONS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 43b2901..359707c 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -19,7 +19,7 @@ In this exercise, we're going to register a block so the editor is aware of it.
 
 The modern way to register a WordPress block is [with](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) a `block.json` file.
 
-The `block.json` file [must be present](https://github.com/WordPress/wporg-plugin-guidelines/blob/28d945f414db3bb42e04805fb109e7178cbabc9a/blocks.md#4-block-plugins-must-include-a-blockjson-file) to be eligible for the [Block Directory](https://wordpress.org/plugins/browse/block/).
+A `block.json` file [must be present](https://github.com/WordPress/wporg-plugin-guidelines/blob/28d945f414db3bb42e04805fb109e7178cbabc9a/blocks.md#4-block-plugins-must-include-a-blockjson-file) to be eligible for the [Block Directory](https://wordpress.org/plugins/browse/block/).
 
 Also, WordPress [recommends](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#benefits-using-the-metadata-file) registering a block with PHP and JS.
 

From bef8fdbd77679603bc3150b4e528aea369c5b5d9 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 18:53:59 -0600
Subject: [PATCH 22/37] Add a link to block.json

---
 INSTRUCTIONS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 359707c..de4bae4 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -29,7 +29,7 @@ So the `block.json` file makes this more DRY, as we can use that file in both la
 
 You're going to register the block in JS and PHP.
 
-You can mainly use `block.json` for both.
+You can mainly use [block.json](block.json) for both.
 
 Look for the 🚧 in the exercise files for where to edit.
 

From f783bf412c174f22261fcc5b26a35e81cb119a10 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 28 Jan 2022 18:54:37 -0600
Subject: [PATCH 23/37] Remove 'the' before the emoji

---
 INSTRUCTIONS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index de4bae4..6b6b2b2 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -31,7 +31,7 @@ You're going to register the block in JS and PHP.
 
 You can mainly use [block.json](block.json) for both.
 
-Look for the 🚧 in the exercise files for where to edit.
+Look for 🚧 in the exercise files for where to edit.
 
 In [js/src/index.exercise.js](js/src/index.exercise.js), `registerBlockType()` will look like:
 

From 5aa580a2190650e13d522f37e85e8f98e30bfad9 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Wed, 2 Feb 2022 17:33:19 -0600
Subject: [PATCH 24/37] Add comments about the arguments to __()

---
 js/src/index.exercise.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/src/index.exercise.js b/js/src/index.exercise.js
index 59e5e74..ad60179 100644
--- a/js/src/index.exercise.js
+++ b/js/src/index.exercise.js
@@ -24,6 +24,7 @@ import block from '../../block.json';
 registerBlockType( block.name, {
 	// 🚧 For the apiVersion, pass block.apiVersion.
 	// For the title, pass the same value as block.title, but translate it using __().
+	// The first argument of __() should be the string to translate, and the second argument should be 'progress-indicator'.
 	// For the description, pass the same description as block.description, but translate it using __().
 	// Pass the same attributes, category, icon, and keywords as in block.
 	example: {

From 5159aca2110ea1c843c3fac10543af0de759aa09 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Wed, 2 Feb 2022 17:33:54 -0600
Subject: [PATCH 25/37] Remove a part about the saved HTML

---
 INSTRUCTIONS.md | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 6b6b2b2..0bdff5c 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -6,15 +6,6 @@ This is similar to other editors like [Medium](https://medium.com/), [Notion](ht
 
 Blocks are usually interactive, so they have a React component to edit them.
 
-And they're saved to the database as HTML markup, with attributes stored in comments.
-
-Here's an example of a saved Paragraph block:
-
-```html
-<!-- wp:paragraph {"textColor":"vivid-cyan-blue","fontSize":"large"} -->
-<p class="has-vivid-cyan-blue-color has-text-color has-large-font-size">This is text in an example paragraph block</p>
-```
-
 In this exercise, we're going to register a block so the editor is aware of it.
 
 The modern way to register a WordPress block is [with](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/) a `block.json` file.

From 5a0a2568735f582e30899e4270b76865c10d8424 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 4 Feb 2022 13:21:51 -0600
Subject: [PATCH 26/37] Add to INSTRUCTIONS.md to clarify registration

---
 INSTRUCTIONS.md          |  9 ++-------
 js/src/index.exercise.js | 18 ++----------------
 2 files changed, 4 insertions(+), 23 deletions(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 0bdff5c..7b6f5cd 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -14,26 +14,21 @@ A `block.json` file [must be present](https://github.com/WordPress/wporg-plugin-
 
 Also, WordPress [recommends](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#benefits-using-the-metadata-file) registering a block with PHP and JS.
 
-So the `block.json` file makes this more DRY, as we can use that file in both languages.
+Both registrations will be simple because of `block.json`.
 
 ## Exercise
 
 You're going to register the block in JS and PHP.
 
-You can mainly use [block.json](block.json) for both.
-
 Look for 🚧 in the exercise files for where to edit.
 
 In [js/src/index.exercise.js](js/src/index.exercise.js), `registerBlockType()` will look like:
 
 ```js
 registerBlockType( block.name, {
-	apiVersion: block.apiVersion,
-	// Most other values taken from block also.
+	edit: // Edit component here.
 ```
 
-Hint: you can avoid doing `block.` by [destructuring](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) the properties of `block`.
-
 ### Files
 - [js/src/index.exercise.js](js/src/index.exercise.js)
 - [progress-indicator.php](progress-indicator.php)
diff --git a/js/src/index.exercise.js b/js/src/index.exercise.js
index ad60179..5622353 100644
--- a/js/src/index.exercise.js
+++ b/js/src/index.exercise.js
@@ -18,22 +18,8 @@ import block from '../../block.json';
  * @property {number} numberOfSteps The total number of steps in the indicator.
  */
 
-// The second argument of registerBlockType() looks very similar to block.json,
-// which is imported above as block.
 // @ts-ignore The declaration file is probably wrong.
 registerBlockType( block.name, {
-	// 🚧 For the apiVersion, pass block.apiVersion.
-	// For the title, pass the same value as block.title, but translate it using __().
-	// The first argument of __() should be the string to translate, and the second argument should be 'progress-indicator'.
-	// For the description, pass the same description as block.description, but translate it using __().
-	// Pass the same attributes, category, icon, and keywords as in block.
-	example: {
-		/** @type {Attributes} */
-		attributes: {
-			// 🚧 Set any value for each of the 3 attributes, as long as it matches the type of the attribute.
-			// This is what the preview will look like.
-		},
-	},
-	// 🚧 For edit, pass the Edit component imported above.
-	// For save, pass the Save component imported above.
+	// 🚧 For property 'edit', pass the Edit component imported above.
+	// For property 'save', pass the Save component imported above.
 } );

From 0b931a827334287abf4d6b369f7e2dd72a89faf6 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Wed, 9 Feb 2022 18:19:23 -0600
Subject: [PATCH 27/37] Change the heading in INSTRUCTIONS.md

---
 INSTRUCTIONS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 7b6f5cd..4685f18 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -1,4 +1,4 @@
-# Block JSON File
+# Block Registration
 
 All content in the WordPress block editor is a block.
 

From 9fedb8b929277730ddfe4b133dcbb83d50fdcb3a Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Wed, 9 Feb 2022 20:46:06 -0600
Subject: [PATCH 28/37] Remove needless __ import

---
 js/src/index.exercise.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/js/src/index.exercise.js b/js/src/index.exercise.js
index 5622353..4d088c4 100644
--- a/js/src/index.exercise.js
+++ b/js/src/index.exercise.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { registerBlockType } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies

From 8443c47767f6af34738420f068f8c0806689afc7 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Wed, 9 Feb 2022 22:32:10 -0600
Subject: [PATCH 29/37] Add a link for the solution video

---
 INSTRUCTIONS.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 4685f18..8e62220 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -32,3 +32,5 @@ registerBlockType( block.name, {
 ### Files
 - [js/src/index.exercise.js](js/src/index.exercise.js)
 - [progress-indicator.php](progress-indicator.php)
+
+[Solution Video](https://bit.ly/3HG80jv)

From 5cbf6ce5487bb39ecd14fb18f04ad9f4ae6eff87 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Wed, 9 Feb 2022 22:33:52 -0600
Subject: [PATCH 30/37] Make the link text only lower case in the first word

---
 INSTRUCTIONS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 8e62220..bc27ecc 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -33,4 +33,4 @@ registerBlockType( block.name, {
 - [js/src/index.exercise.js](js/src/index.exercise.js)
 - [progress-indicator.php](progress-indicator.php)
 
-[Solution Video](https://bit.ly/3HG80jv)
+[Solution video](https://bit.ly/3HG80jv)

From a69e65bf3508476480cb9e492552968491c03549 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Wed, 16 Mar 2022 22:40:55 -0600
Subject: [PATCH 31/37] Correct another merge conflict I forgot

---
 js/src/edit.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/js/src/edit.js b/js/src/edit.js
index 8cefd58..bb26736 100644
--- a/js/src/edit.js
+++ b/js/src/edit.js
@@ -6,12 +6,6 @@ import * as React from 'react';
 /**
  * WordPress dependencies
  */
-<<<<<<< HEAD
-=======
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { ColorPalette, PanelBody, RangeControl } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
->>>>>>> main
 import { __ } from '@wordpress/i18n';
 
 /**

From 34bd1735fce16a8ce4893573f5a953d185026973 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Wed, 16 Mar 2022 22:44:47 -0600
Subject: [PATCH 32/37] Update index.final.js for the latest changes to main

---
 js/src/index.exercise.js | 19 +++++++++---------
 js/src/index.final.js    | 42 +++++++++++-----------------------------
 2 files changed, 21 insertions(+), 40 deletions(-)

diff --git a/js/src/index.exercise.js b/js/src/index.exercise.js
index 4d088c4..107976b 100644
--- a/js/src/index.exercise.js
+++ b/js/src/index.exercise.js
@@ -7,18 +7,19 @@ import { registerBlockType } from '@wordpress/blocks';
  * Internal dependencies
  */
 import block from '../../block.json';
-// 🚧 Import the Edit component.
-// Import the Save component.
+// 🚧 Import the edit component.
+// Import the save component.
 
 /**
- * @typedef {Object} Attributes The block attributes.
- * @property {string} color         The color of the indicators.
- * @property {number} currentStep   The step that the indicator is on.
- * @property {number} numberOfSteps The total number of steps in the indicator.
+ * @typedef {{
+ *  color: typeof block.attributes.color.default,
+ *  currentStep: typeof block.attributes.currentStep.default,
+ *  numberOfSteps: typeof block.attributes.numberOfSteps.default
+ * }} Attributes
  */
 
-// @ts-ignore The declaration file is probably wrong.
+// @ts-ignore The declaration file is wrong.
 registerBlockType( block.name, {
-	// 🚧 For property 'edit', pass the Edit component imported above.
-	// For property 'save', pass the Save component imported above.
+	// 🚧 For property 'edit', pass the edit component imported above.
+	// For property 'save', pass the save component imported above.
 } );
diff --git a/js/src/index.final.js b/js/src/index.final.js
index c1e5d3c..8b02e92 100644
--- a/js/src/index.final.js
+++ b/js/src/index.final.js
@@ -2,44 +2,24 @@
  * WordPress dependencies
  */
 import { registerBlockType } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import block from '../../block.json';
-import Edit from './edit';
-import Save from './save';
-
-const { apiVersion, attributes, category, icon, keywords, name } = block;
+import edit from './edit';
+import save from './save';
 
 /**
- * @typedef {Object} Attributes The block attributes.
- * @property {string} color         The color of the indicators.
- * @property {number} currentStep   The step that the indicator is on.
- * @property {number} numberOfSteps The total number of steps in the indicator.
+ * @typedef {{
+ *  color: typeof block.attributes.color.default,
+ *  currentStep: typeof block.attributes.currentStep.default,
+ *  numberOfSteps: typeof block.attributes.numberOfSteps.default
+ * }} Attributes
  */
 
-// @ts-ignore The declaration file is probably wrong.
-registerBlockType( name, {
-	apiVersion,
-	title: __( 'Progress Indicator', 'progress-indicator' ),
-	description: __(
-		'A block that lets you easily display a progress indicator on your WordPress posts or pages.',
-		'progress-indicator',
-	),
-	attributes,
-	category,
-	icon,
-	keywords,
-	example: {
-		/** @type {Attributes} */
-		attributes: {
-			color: '#10b981',
-			currentStep: 2,
-			numberOfSteps: 5,
-		},
-	},
-	edit: Edit,
-	save: Save,
+// @ts-ignore The declaration file is wrong.
+registerBlockType( block.name, {
+	edit,
+	save,
 } );

From 0c484701672eef458cf2f6fd24da577d337a269c Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Wed, 16 Mar 2022 23:06:47 -0600
Subject: [PATCH 33/37] Clarify the use of edit in INSTRUCTIONS.md

---
 INSTRUCTIONS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index bc27ecc..c7644d0 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -26,7 +26,7 @@ In [js/src/index.exercise.js](js/src/index.exercise.js), `registerBlockType()` w
 
 ```js
 registerBlockType( block.name, {
-	edit: // Edit component here.
+	// edit component here.
 ```
 
 ### Files

From 7d6dd806f47a9a1a84f8be277c929d3118a1424a Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Wed, 16 Mar 2022 23:08:26 -0600
Subject: [PATCH 34/37] Remove 'Block' from the plugin name

---
 phpcs.xml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/phpcs.xml b/phpcs.xml
index 1250d37..21a3205 100644
--- a/phpcs.xml
+++ b/phpcs.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0"?>
-<ruleset name="WordPress Coding Standards for Progress Indicator Block">
+<ruleset name="WordPress Coding Standards for Progress Indicator">
 
 	<rule ref="WordPress-Core">
 		<exclude name="Generic.Arrays.DisallowShortArraySyntax" />

From f25c417adb5e48ae5c384fe101d6f8b167d1be30 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Wed, 16 Mar 2022 23:11:32 -0600
Subject: [PATCH 35/37] Infer the return type, no need to have a return tag

---
 js/src/edit.js               | 6 +-----
 js/src/progress-indicator.js | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/js/src/edit.js b/js/src/edit.js
index bb26736..efc53f0 100644
--- a/js/src/edit.js
+++ b/js/src/edit.js
@@ -8,11 +8,7 @@ import * as React from 'react';
  */
 import { __ } from '@wordpress/i18n';
 
-/**
- * The component for the editor.
- *
- * @return {React.ReactElement} The component.
- */
+/** The component for the editor. */
 export default function Edit() {
 	return <span>
 		{ __( 'This is a placeholder for the Progress Indicator block', 'progress-indicator' ) }
diff --git a/js/src/progress-indicator.js b/js/src/progress-indicator.js
index 2b373b4..9cdddc1 100644
--- a/js/src/progress-indicator.js
+++ b/js/src/progress-indicator.js
@@ -8,7 +8,6 @@ import tinycolor2 from 'tinycolor2';
  * The progress indicator component.
  *
  * @param {{attributes: import('./').Attributes}} props
- * @return {React.ReactElement} The component.
  */
 export default function ProgressIndicator( { attributes } ) {
 	const color = tinycolor2( attributes.color );

From 80ba3b6dc86d8da9687b9417e2fdb334a9f88d57 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 18 Mar 2022 15:21:06 -0600
Subject: [PATCH 36/37] Change the order of the exercise files

---
 INSTRUCTIONS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index c7644d0..3766bec 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -30,7 +30,7 @@ registerBlockType( block.name, {
 ```
 
 ### Files
-- [js/src/index.exercise.js](js/src/index.exercise.js)
 - [progress-indicator.php](progress-indicator.php)
+- [js/src/index.exercise.js](js/src/index.exercise.js)
 
 [Solution video](https://bit.ly/3HG80jv)

From 52aa9f4bf512e012c440ca50065885a7603f0de7 Mon Sep 17 00:00:00 2001
From: Ryan Kienstra <kienstraryan@gmail.com>
Date: Fri, 18 Mar 2022 16:16:27 -0600
Subject: [PATCH 37/37] Add the solution video to INSTRUCTIONS.md, see if that
 works

---
 INSTRUCTIONS.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md
index 3766bec..800fd01 100644
--- a/INSTRUCTIONS.md
+++ b/INSTRUCTIONS.md
@@ -33,4 +33,5 @@ registerBlockType( block.name, {
 - [progress-indicator.php](progress-indicator.php)
 - [js/src/index.exercise.js](js/src/index.exercise.js)
 
-[Solution video](https://bit.ly/3HG80jv)
+### Solution
+https://user-images.githubusercontent.com/4063887/159091534-12a41901-4100-4fc5-8222-fa25413977d7.mp4