From 28aa16efbc5a0b736d6586b01d3c3bc024393151 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Thu, 27 Jan 2022 18:22:06 -0600 Subject: [PATCH 01/21] Add the beginning of exercise 2 for the Edit component --- INSTRUCTIONS.md | 12 ++++++ js/src/edit.exercise.js | 59 +++++++++++++++++++++++++++ js/src/edit.final.js | 64 +++++++++++++++++++++++++++++ js/src/edit.js | 68 ++----------------------------- js/src/progress-indicator.js | 61 --------------------------- js/src/progress-indicator.test.js | 44 -------------------- js/src/save.js | 12 +----- 7 files changed, 140 insertions(+), 180 deletions(-) create mode 100644 INSTRUCTIONS.md create mode 100644 js/src/edit.exercise.js create mode 100644 js/src/edit.final.js delete mode 100644 js/src/progress-indicator.js delete mode 100644 js/src/progress-indicator.test.js diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md new file mode 100644 index 0000000..53dec71 --- /dev/null +++ b/INSTRUCTIONS.md @@ -0,0 +1,12 @@ +# Edit Component + +The Edit component of a block has its interactivity. + +We'll add the controls for the block to the . + +By rendering components inside , they appear in the inspector. + +## Exercise + +### File +- `js/src/edit.exercise.js` diff --git a/js/src/edit.exercise.js b/js/src/edit.exercise.js new file mode 100644 index 0000000..a30bac1 --- /dev/null +++ b/js/src/edit.exercise.js @@ -0,0 +1,59 @@ +/** + * External dependencies + */ +import * as React from 'react'; + +/** + * WordPress dependencies + */ +// @ts-ignore The declaration file is outdated. +import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; +import { PanelBody } from '@wordpress/components'; +// Also import a component from '@wordpress/components' to choose a color, and another component to choose a number: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src +import { useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; + +/** + * 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( + // Add an anonymous function here as an argument to useSelect(). + // The function should accept select as a parameter. + // Then, it should get the data store with: + // select( 'core/block-editor' ) + // Call .getSettings() on that data store, and return that. + ); + + return
+

{ __( 'This is a placeholder for the Progress Indicator block', 'progress-indicator' ) }

+ + { /* + Add 2 components here, and give each of them a title prop that's translated with __(). + + Inside the 1st + Add the component to choose colors that you imported above from '@wordpress/components'. That will be for attributes.color. + Inside the 2nd + Add 2 components to choose numbers that you imported above from '@wordpress/components'. Those will be for attribute.currentStep and attributes.numberOfSteps + + The value prop of those components should be the attribute for it. + For example, the value of the color component should be attributes.color. + The onChange prop should be like: + + onChange={ ( newValue ) => + setAttributes( { color: newValue } ) + } + + The setAttributes() call should have an object with its property being the attribute name. + For example, if the attribute name is color, it would be setAttributes( { color: newValue } ) + */ } + +
; +} diff --git a/js/src/edit.final.js b/js/src/edit.final.js new file mode 100644 index 0000000..f0f818e --- /dev/null +++ b/js/src/edit.final.js @@ -0,0 +1,64 @@ +/** + * External dependencies + */ +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'; + +/** + * 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
+

{ __( 'This is a placeholder for the Progress Indicator block', 'progress-indicator' ) }

+ + + + setAttributes( { color: newValue } ) + } + /> + + + + setAttributes( { currentStep: Number( newValue ) } ) + } + min={ 1 } + max={ attributes.numberOfSteps } + /> + + setAttributes( { numberOfSteps: Number( newValue ) } ) + } + min={ 1 } + max={ 10 } + /> + + +
; +} diff --git a/js/src/edit.js b/js/src/edit.js index 0fc9f1c..f66b64a 100644 --- a/js/src/edit.js +++ b/js/src/edit.js @@ -1,69 +1,7 @@ -/** - * External dependencies - */ -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() - ); +// import Edit from './edit.exercise'; +import Edit from './edit.final'; - return
- - - - - setAttributes( { color: newValue } ) - } - /> - - - - setAttributes( { currentStep: Number( newValue ) } ) - } - min={ 1 } - max={ attributes.numberOfSteps } - /> - - setAttributes( { numberOfSteps: Number( newValue ) } ) - } - min={ 1 } - max={ 10 } - /> - - -
; -} +export default Edit; 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
- { /* Step Lines */ } -
- { [ ...Array( attributes.numberOfSteps - 1 ) ].map( ( value, index ) => { - const isLineComplete = attributes.currentStep > index + 1; - - return
; - } ) } -
- { /* 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
- { attributes.currentStep > stepNumber - ? - - - : stepNumber - } -
; - } ) } -
; -} 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( - - ); - - 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( - - ); - - 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..1b4c01e 100644 --- a/js/src/save.js +++ b/js/src/save.js @@ -9,21 +9,13 @@ import * as React from 'react'; // @ts-ignore The declaration file is outdated. import { useBlockProps } from '@wordpress/block-editor'; -/** - * Internal dependencies - */ -import ProgressIndicator from './progress-indicator'; - /** * The component to save the markup. * - * @param {{attributes: import('./index').Attributes}} props * @return {React.ReactElement} The component. */ -export default function Save( { attributes } ) { +export default function Save() { const blockProps = useBlockProps.save(); - return
- -
; + return
; } From b8c4a87e7d6f3e95f269f50e6c5d01b3f673f9c9 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Thu, 27 Jan 2022 18:23:58 -0600 Subject: [PATCH 02/21] Remove an extra single quote --- js/src/edit.exercise.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/edit.exercise.js b/js/src/edit.exercise.js index a30bac1..3019f56 100644 --- a/js/src/edit.exercise.js +++ b/js/src/edit.exercise.js @@ -9,7 +9,7 @@ import * as React from 'react'; // @ts-ignore The declaration file is outdated. import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; import { PanelBody } from '@wordpress/components'; -// Also import a component from '@wordpress/components' to choose a color, and another component to choose a number: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src +// Also import a component from '@wordpress/components' to choose a color, and another component to choose a number: https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; From a67efb03c27321cf9ce99585edaab36acb3669c6 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Thu, 27 Jan 2022 18:43:57 -0600 Subject: [PATCH 03/21] =?UTF-8?q?Add=20=F0=9F=9A=A7=20emoji=20to=20show=20?= =?UTF-8?q?what=20to=20work=20on?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/src/edit.exercise.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/src/edit.exercise.js b/js/src/edit.exercise.js index 3019f56..4a793ee 100644 --- a/js/src/edit.exercise.js +++ b/js/src/edit.exercise.js @@ -9,7 +9,7 @@ import * as React from 'react'; // @ts-ignore The declaration file is outdated. import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; import { PanelBody } from '@wordpress/components'; -// Also import a component from '@wordpress/components' to choose a color, and another component to choose a number: https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src +// 🚧 Also import a component from '@wordpress/components' to choose a color, and another component to choose a number: https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -25,7 +25,7 @@ import { __ } from '@wordpress/i18n'; export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const { colors } = useSelect( - // Add an anonymous function here as an argument to useSelect(). + // 🚧 Add an anonymous function here as an argument to useSelect(). // The function should accept select as a parameter. // Then, it should get the data store with: // select( 'core/block-editor' ) @@ -36,7 +36,7 @@ export default function Edit( { attributes, setAttributes } ) {

{ __( 'This is a placeholder for the Progress Indicator block', 'progress-indicator' ) }

{ /* - Add 2 components here, and give each of them a title prop that's translated with __(). + 🚧 Add 2 components here, and give each of them a title prop that's translated with __(). Inside the 1st Add the component to choose colors that you imported above from '@wordpress/components'. That will be for attributes.color. From 91654a7961baf548843a9f5b83a11c52d0382d5e Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Fri, 28 Jan 2022 16:20:14 -0600 Subject: [PATCH 04/21] Add a link and more text --- INSTRUCTIONS.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index 53dec71..410ecef 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -1,12 +1,20 @@ # Edit Component -The Edit component of a block has its interactivity. +A block's Edit component is what renders in the block editor, not the front-end of the site. -We'll add the controls for the block to the . +It's a React component. -By rendering components inside , they appear in the inspector. +It's similar to a typical React component, though WordPress has custom APIs and hooks. + +WordPress also has a big component library in [@wordpress/components](https://github.com/WordPress/gutenberg/tree/trunk/packages/components) that we'll use. + +Most of the time, you won't need a custom control in WordPress. + +We'll add the controls for the block to the , using the component library. + +By rendering components inside , they appear in the Inspector. ## Exercise ### File -- `js/src/edit.exercise.js` +- [js/src/edit.exercise.js](https://github.com/kienstra/progress-indicator/blob/exercise/2-edit-component/js/src/edit.exercise.js) From b6473a0aab8e6f81b8370b75a71e8a61056009dd Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Fri, 28 Jan 2022 18:09:55 -0600 Subject: [PATCH 05/21] Add a placeholder for Save --- js/src/save.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/js/src/save.js b/js/src/save.js index 1b4c01e..178ce7f 100644 --- a/js/src/save.js +++ b/js/src/save.js @@ -6,8 +6,7 @@ import * as React from 'react'; /** * WordPress dependencies */ -// @ts-ignore The declaration file is outdated. -import { useBlockProps } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; /** * The component to save the markup. @@ -15,7 +14,7 @@ import { useBlockProps } from '@wordpress/block-editor'; * @return {React.ReactElement} The component. */ export default function Save() { - const blockProps = useBlockProps.save(); - - return
; + return + { __( 'This is a placeholder for the Progress Indicator block', 'progress-indicator' ) } + ; } From 3f85a15c65b700bbdf4a8ce6abc0dcacbb54bdbd Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Fri, 28 Jan 2022 18:10:57 -0600 Subject: [PATCH 06/21] Remove the full URL --- INSTRUCTIONS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index 410ecef..a33124f 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -17,4 +17,4 @@ By rendering components inside , they appear in the Inspector ## Exercise ### File -- [js/src/edit.exercise.js](https://github.com/kienstra/progress-indicator/blob/exercise/2-edit-component/js/src/edit.exercise.js) +- [js/src/edit.exercise.js](js/src/edit.exercise.js) From 7c1a65d55b0edf62a4407ec4250bfc9a2091d4ea Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Fri, 28 Jan 2022 18:33:41 -0600 Subject: [PATCH 07/21] Let the student call useBlockProps --- js/src/edit.exercise.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/src/edit.exercise.js b/js/src/edit.exercise.js index 4a793ee..af64c59 100644 --- a/js/src/edit.exercise.js +++ b/js/src/edit.exercise.js @@ -7,9 +7,10 @@ import * as React from 'react'; * WordPress dependencies */ // @ts-ignore The declaration file is outdated. +// 🚧 Also import useBlockProps from '@wordpress/block-editor' import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; -import { PanelBody } from '@wordpress/components'; // 🚧 Also import a component from '@wordpress/components' to choose a color, and another component to choose a number: https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src +import { PanelBody } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -23,7 +24,7 @@ import { __ } from '@wordpress/i18n'; * @return {React.ReactElement} The component. */ export default function Edit( { attributes, setAttributes } ) { - const blockProps = useBlockProps(); + const blockProps = // 🚧 Call useBlockProps. const { colors } = useSelect( // 🚧 Add an anonymous function here as an argument to useSelect(). // The function should accept select as a parameter. From 0d6cb6d249c85c83dc732722bfd5131599191bf2 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Fri, 28 Jan 2022 18:47:52 -0600 Subject: [PATCH 08/21] Add a link to InspectorControls --- INSTRUCTIONS.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index a33124f..ce384b0 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -1,16 +1,16 @@ # Edit Component -A block's Edit component is what renders in the block editor, not the front-end of the site. +A block's `Edit` component is what renders in the block editor. It's a React component. -It's similar to a typical React component, though WordPress has custom APIs and hooks. +And it's similar to a typical React component, though WordPress has custom APIs and hooks. WordPress also has a big component library in [@wordpress/components](https://github.com/WordPress/gutenberg/tree/trunk/packages/components) that we'll use. -Most of the time, you won't need a custom control in WordPress. +Most of the time, you won't need to write a custom control in WordPress. -We'll add the controls for the block to the , using the component library. +We'll render the block controls in [InspectorControls](https://github.com/WordPress/gutenberg/tree/57da3c91a166d917a2a9de98177be9c3dfe07ee5/packages/block-editor/src/components/inspector-controls). By rendering components inside , they appear in the Inspector. From 934d03601a3fa3258583d2c2e822d2034f1f003f Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Fri, 28 Jan 2022 18:48:28 -0600 Subject: [PATCH 09/21] Remoev 'in WordPress' --- INSTRUCTIONS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index ce384b0..0c22cad 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -8,7 +8,7 @@ And it's similar to a typical React component, though WordPress has custom APIs WordPress also has a big component library in [@wordpress/components](https://github.com/WordPress/gutenberg/tree/trunk/packages/components) that we'll use. -Most of the time, you won't need to write a custom control in WordPress. +Most of the time, you won't need to write a custom control. We'll render the block controls in [InspectorControls](https://github.com/WordPress/gutenberg/tree/57da3c91a166d917a2a9de98177be9c3dfe07ee5/packages/block-editor/src/components/inspector-controls). From f812e56ce56bccc84ef260e7a0c1eb9177b9c03b Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Wed, 2 Feb 2022 17:22:15 -0600 Subject: [PATCH 10/21] Remove import that a comment references --- js/src/edit.exercise.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/edit.exercise.js b/js/src/edit.exercise.js index af64c59..70a38eb 100644 --- a/js/src/edit.exercise.js +++ b/js/src/edit.exercise.js @@ -8,7 +8,7 @@ import * as React from 'react'; */ // @ts-ignore The declaration file is outdated. // 🚧 Also import useBlockProps from '@wordpress/block-editor' -import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; +import { InspectorControls } from '@wordpress/block-editor'; // 🚧 Also import a component from '@wordpress/components' to choose a color, and another component to choose a number: https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src import { PanelBody } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; From 35c168fe21497f1abe8411e61631edd7de613914 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Wed, 2 Feb 2022 17:45:40 -0600 Subject: [PATCH 11/21] Add more about the onChange handler to INSTRUCTIONS.md --- INSTRUCTIONS.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index 0c22cad..5cdd7c8 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -14,6 +14,39 @@ We'll render the block controls in [InspectorControls](https://github.com/WordPr By rendering components inside , they appear in the Inspector. +The `Edit` component is very interactive. + +It updates the block attributes and markup. + +One of its `props` is `setAttributes`: + +```jsx +export default function Edit( { + attributes, + setAttributes +} ) { +``` + +That sets an attributes to a new value. + +For example, when the user selects a color, it can set the `color` attribute: + +```jsx +onChange={ ( newValue ) => + setAttributes( { color: newValue } ) +} +``` + +That handler accepts a `newValue` parameter, which is the value that the user just selected. + +And `setAttributes` accepts an object. + +That object only needs one property, which is the name of the attribute: + +```jsx +setAttributes( { color: newValue } ) +``` + ## Exercise ### File From 55b49bbb44645957ff370ae7e29817b413592b5e Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Wed, 2 Feb 2022 17:51:08 -0600 Subject: [PATCH 12/21] Add to the Exercise section --- INSTRUCTIONS.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index 5cdd7c8..dfb5719 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -14,9 +14,15 @@ We'll render the block controls in [InspectorControls](https://github.com/WordPr By rendering components inside , they appear in the Inspector. -The `Edit` component is very interactive. +## Exercise + +You're going to write the `Edit` component. + +It's what that the user sees in the block editor. -It updates the block attributes and markup. +This component is very interactive. + +Its function is to update the block attributes and markup as the user edits the block. One of its `props` is `setAttributes`: @@ -47,7 +53,5 @@ That object only needs one property, which is the name of the attribute: setAttributes( { color: newValue } ) ``` -## Exercise - ### File - [js/src/edit.exercise.js](js/src/edit.exercise.js) From d3fad13d9be74097c9b3dfa1269a5ce75fd72e56 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Fri, 4 Feb 2022 13:32:13 -0600 Subject: [PATCH 13/21] Make attributes singular --- INSTRUCTIONS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index dfb5719..9cbf1d0 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -33,7 +33,7 @@ export default function Edit( { } ) { ``` -That sets an attributes to a new value. +That sets an attribute to a new value. For example, when the user selects a color, it can set the `color` attribute: From e2741a3d7a2cfa19b4bb7dfdf5ea9e2fdf89da1e Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Wed, 9 Feb 2022 21:35:45 -0600 Subject: [PATCH 14/21] Import the exercise one, not the final one --- js/src/edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/src/edit.js b/js/src/edit.js index f66b64a..863a366 100644 --- a/js/src/edit.js +++ b/js/src/edit.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -// import Edit from './edit.exercise'; -import Edit from './edit.final'; +import Edit from './edit.exercise'; +// import Edit from './edit.final'; export default Edit; From 92b903110bd6e2b3452c317dec98c9dbe9b4b45f Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Wed, 9 Feb 2022 21:53:25 -0600 Subject: [PATCH 15/21] Change Color to singular --- js/src/edit.final.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/edit.final.js b/js/src/edit.final.js index f0f818e..5cad45e 100644 --- a/js/src/edit.final.js +++ b/js/src/edit.final.js @@ -30,7 +30,7 @@ export default function Edit( { attributes, setAttributes } ) { return

{ __( 'This is a placeholder for the Progress Indicator block', 'progress-indicator' ) }

- + Date: Wed, 9 Feb 2022 22:33:35 -0600 Subject: [PATCH 16/21] Make the link text only lower case in the first word --- INSTRUCTIONS.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index 9cbf1d0..1b6e95f 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -55,3 +55,5 @@ setAttributes( { color: newValue } ) ### File - [js/src/edit.exercise.js](js/src/edit.exercise.js) + +[Solution video](https://bit.ly/3HJCDVg) From 2842b2f9dd7613d1167aad3225f7fdb7c5dfbeac Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Wed, 16 Mar 2022 22:53:49 -0600 Subject: [PATCH 17/21] Make indentation a little easier to read --- js/src/edit.exercise.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/js/src/edit.exercise.js b/js/src/edit.exercise.js index bc50f8f..28035f3 100644 --- a/js/src/edit.exercise.js +++ b/js/src/edit.exercise.js @@ -39,9 +39,11 @@ export default function Edit( { attributes, setAttributes } ) { 🚧 Add 2 components here, and give each of them a title prop that's translated with __(). Inside the 1st - Add the component to choose colors that you imported above from '@wordpress/components'. That will be for attributes.color. + Add the component to choose colors that you imported above from '@wordpress/components'. + That will be for attributes.color. Inside the 2nd - Add 2 components to choose numbers that you imported above from '@wordpress/components'. Those will be for attribute.currentStep and attributes.numberOfSteps + Add 2 components to choose numbers that you imported above from '@wordpress/components'. + Those will be for attribute.currentStep and attributes.numberOfSteps The value prop of those components should be the attribute for it. For example, the value of the color component should be attributes.color. From 7b1506e1255bdfbaa84ea0a7618b950305e8e639 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Wed, 16 Mar 2022 22:54:16 -0600 Subject: [PATCH 18/21] Add a period at the end of a comment --- js/src/edit.exercise.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/edit.exercise.js b/js/src/edit.exercise.js index 28035f3..9b35416 100644 --- a/js/src/edit.exercise.js +++ b/js/src/edit.exercise.js @@ -43,7 +43,7 @@ export default function Edit( { attributes, setAttributes } ) { That will be for attributes.color. Inside the 2nd Add 2 components to choose numbers that you imported above from '@wordpress/components'. - Those will be for attribute.currentStep and attributes.numberOfSteps + Those will be for attribute.currentStep and attributes.numberOfSteps. The value prop of those components should be the attribute for it. For example, the value of the color component should be attributes.color. From e24004dc08f9d9d11a3c0d3592a6db08a59c00d1 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Wed, 16 Mar 2022 22:56:13 -0600 Subject: [PATCH 19/21] Fix typos in INSTRUCTIONS.md --- INSTRUCTIONS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index 1b6e95f..02a41e0 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -10,9 +10,9 @@ WordPress also has a big component library in [@wordpress/components](https://gi Most of the time, you won't need to write a custom control. -We'll render the block controls in [InspectorControls](https://github.com/WordPress/gutenberg/tree/57da3c91a166d917a2a9de98177be9c3dfe07ee5/packages/block-editor/src/components/inspector-controls). +We'll render the block controls in [](https://github.com/WordPress/gutenberg/tree/57da3c91a166d917a2a9de98177be9c3dfe07ee5/packages/block-editor/src/components/inspector-controls). -By rendering components inside , they appear in the Inspector. +By rendering components inside ``, they appear in the Inspector. ## Exercise From 479a8d439f50c5653defec0bc3b72aa62925b58a Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Wed, 16 Mar 2022 22:56:38 -0600 Subject: [PATCH 20/21] Remove brackets that hide the link --- INSTRUCTIONS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index 02a41e0..e367dab 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -10,7 +10,7 @@ WordPress also has a big component library in [@wordpress/components](https://gi Most of the time, you won't need to write a custom control. -We'll render the block controls in [](https://github.com/WordPress/gutenberg/tree/57da3c91a166d917a2a9de98177be9c3dfe07ee5/packages/block-editor/src/components/inspector-controls). +We'll render the block controls in [InspectorControls](https://github.com/WordPress/gutenberg/tree/57da3c91a166d917a2a9de98177be9c3dfe07ee5/packages/block-editor/src/components/inspector-controls). By rendering components inside ``, they appear in the Inspector. From ebfb7bdde2932abc69954d8e1d2a89550df7e155 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Wed, 16 Mar 2022 22:59:01 -0600 Subject: [PATCH 21/21] Improve the copy in INSTRUCTIONS.md --- INSTRUCTIONS.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index e367dab..4557616 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -2,13 +2,13 @@ A block's `Edit` component is what renders in the block editor. -It's a React component. +It's a React component that's similar to non-WordPress React components. -And it's similar to a typical React component, though WordPress has custom APIs and hooks. +Though WordPress has custom APIs and hooks. WordPress also has a big component library in [@wordpress/components](https://github.com/WordPress/gutenberg/tree/trunk/packages/components) that we'll use. -Most of the time, you won't need to write a custom control. +Most of the time, you won't need to write a custom control. That component library will usually have what you need. We'll render the block controls in [InspectorControls](https://github.com/WordPress/gutenberg/tree/57da3c91a166d917a2a9de98177be9c3dfe07ee5/packages/block-editor/src/components/inspector-controls).