From 7118a099636f0eabcb272d0f51443d84e5cc695a Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Thu, 27 Jan 2022 18:39:07 -0600 Subject: [PATCH 1/7] Begin the exercise for the ProgressIndicator --- INSTRUCTIONS.md | 11 +++++ js/src/edit.js | 4 +- js/src/progress-indicator.exercise.js | 62 +++++++++++++++++++++++++++ js/src/progress-indicator.final.js | 61 ++++++++++++++++++++++++++ js/src/progress-indicator.js | 62 ++------------------------- js/src/save.js | 12 +----- 6 files changed, 142 insertions(+), 70 deletions(-) create mode 100644 INSTRUCTIONS.md create mode 100644 js/src/progress-indicator.exercise.js create mode 100644 js/src/progress-indicator.final.js diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md new file mode 100644 index 0000000..6a3c828 --- /dev/null +++ b/INSTRUCTIONS.md @@ -0,0 +1,11 @@ +# Progress Indicator Component + +This is where the block comes together. + +You'll see the block render in the editor. + +## Exercise + +### Files +- `js/src/edit.js` +- `js/src/progress-indicator.exercise.js` diff --git a/js/src/edit.js b/js/src/edit.js index 0fc9f1c..98740c4 100644 --- a/js/src/edit.js +++ b/js/src/edit.js @@ -15,7 +15,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import ProgressIndicator from './progress-indicator'; +// Import the ProgressIndicator /** * The component for the editor. @@ -33,7 +33,7 @@ export default function Edit( { attributes, setAttributes } ) { ); return
- + { /* Render the ProgressIndicator here, with the prop it expects. */ } + { /* Step Lines */ } +
+ { [ ...Array( attributes.numberOfSteps - 1 ) ].map( ( value, index ) => { + const isLineComplete = attributes.currentStep > index + 1; + const style = { + backgroundColor: isLineComplete ? attributes.color : '#d1d5db', + }; + + // Return a
with these properties: + // key: some unique value + // style: the style object above + // className: "pib-progress-indicator__line" + } ) } +
+ { /* 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
+ { /* + If the current step is more than stepNumber, render: + + + + Otherwise, simply render stepNumber + */ } +
; + } ) } +
; +} diff --git a/js/src/progress-indicator.final.js b/js/src/progress-indicator.final.js new file mode 100644 index 0000000..b5a320a --- /dev/null +++ b/js/src/progress-indicator.final.js @@ -0,0 +1,61 @@ +/** + * 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.js b/js/src/progress-indicator.js index b5a320a..b616f35 100644 --- a/js/src/progress-indicator.js +++ b/js/src/progress-indicator.js @@ -1,61 +1,7 @@ /** - * External dependencies + * Internal dependencies */ -import * as React from 'react'; -import tinycolor2 from 'tinycolor2'; +import ProgressIndicator from './progress-indicator.exercise'; +// import ProgressIndicator from './progress-indicator.final'; -/** - * 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 - } -
; - } ) } -
; -} +export default ProgressIndicator; 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 ee5358ac9fc84ac67eb245d5bbe639436bb27664 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Thu, 27 Jan 2022 18:42:52 -0600 Subject: [PATCH 2/7] =?UTF-8?q?Add=20=F0=9F=9A=A7=20emojis=20to=20show=20w?= =?UTF-8?q?hat=20to=20do?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/src/edit.js | 4 ++-- js/src/progress-indicator.exercise.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/js/src/edit.js b/js/src/edit.js index 98740c4..11d144f 100644 --- a/js/src/edit.js +++ b/js/src/edit.js @@ -15,7 +15,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -// Import the ProgressIndicator +// 🚧 Import the ProgressIndicator /** * The component for the editor. @@ -33,7 +33,7 @@ export default function Edit( { attributes, setAttributes } ) { ); return
- { /* Render the ProgressIndicator here, with the prop it expects. */ } + { /* 🚧 Render the ProgressIndicator here, with the prop it expects. */ } with these properties: + // 🚧 Return a
with these props: // key: some unique value // style: the style object above // className: "pib-progress-indicator__line" @@ -50,7 +50,7 @@ export default function ProgressIndicator( { attributes } ) { return
{ /* - If the current step is more than stepNumber, render: + 🚧 If the current step is more than stepNumber, render: From 8a4a45eb6bce2119c29d85377ae21264bbba63d7 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Fri, 28 Jan 2022 17:48:20 -0600 Subject: [PATCH 3/7] Add links to the files --- INSTRUCTIONS.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index 6a3c828..f61324d 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -7,5 +7,5 @@ You'll see the block render in the editor. ## Exercise ### Files -- `js/src/edit.js` -- `js/src/progress-indicator.exercise.js` +- [js/src/edit.js](https://github.com/kienstra/progress-indicator/blob/exercise/3-progress-indicator/js/src/edit.js) +- [js/src/progress-indicator.exercise.js](https://github.com/kienstra/progress-indicator/blob/exercise/3-progress-indicator/js/src/progress-indicator.exercise.js) From 1ca43f70584e5a59f704942d14c9dd7edad15706 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Fri, 28 Jan 2022 18:03:47 -0600 Subject: [PATCH 4/7] Add a placeholder to the Save component --- INSTRUCTIONS.md | 20 ++++++++++++++++++-- js/src/save.js | 8 ++++---- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index f61324d..a4dee19 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -4,8 +4,24 @@ This is where the block comes together. You'll see the block render in the editor. +And you'll almost be finished once you finish this exercise. + ## Exercise +When this works, `npm run lint:js` and `npm run test:js` should pass. + +In `ProgressIndicator`, you'll use a ternary conditional to render either an `` or a number. + +When conditionally rendering in React, we'll usually use ternary conditionals: +```jsx +
+ { isOpen + ? __( 'This is open', 'progress-indicator' ) + : __( 'This is closed', 'progress-indicator' ) + } +
+``` + ### Files -- [js/src/edit.js](https://github.com/kienstra/progress-indicator/blob/exercise/3-progress-indicator/js/src/edit.js) -- [js/src/progress-indicator.exercise.js](https://github.com/kienstra/progress-indicator/blob/exercise/3-progress-indicator/js/src/progress-indicator.exercise.js) +- [js/src/edit.js](js/src/edit.js) +- [js/src/progress-indicator.exercise.js](js/src/progress-indicator.exercise.js) diff --git a/js/src/save.js b/js/src/save.js index 1b4c01e..82c9887 100644 --- a/js/src/save.js +++ b/js/src/save.js @@ -7,7 +7,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 +15,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 48e4be4e50aeb8a08be3f33c46c82cab7113d68e Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Fri, 28 Jan 2022 18:05:20 -0600 Subject: [PATCH 5/7] Change the order of the files --- INSTRUCTIONS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index a4dee19..640cb2e 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -23,5 +23,5 @@ When conditionally rendering in React, we'll usually use ternary conditionals: ``` ### Files -- [js/src/edit.js](js/src/edit.js) - [js/src/progress-indicator.exercise.js](js/src/progress-indicator.exercise.js) +- [js/src/edit.js](js/src/edit.js) From fc441c6c7a8f97d8b8ea4c91c38bebbdf49c035a Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Fri, 28 Jan 2022 18:26:50 -0600 Subject: [PATCH 6/7] Change ternary to 'conditionally render' --- INSTRUCTIONS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index 640cb2e..8323ec4 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -10,7 +10,7 @@ And you'll almost be finished once you finish this exercise. When this works, `npm run lint:js` and `npm run test:js` should pass. -In `ProgressIndicator`, you'll use a ternary conditional to render either an `` or a number. +In `ProgressIndicator`, you'll conditionally render an `` or a number. When conditionally rendering in React, we'll usually use ternary conditionals: ```jsx From dbf086ce11ce0cc840169d5deead307f58eeafe1 Mon Sep 17 00:00:00 2001 From: Ryan Kienstra Date: Wed, 9 Feb 2022 22:35:55 -0600 Subject: [PATCH 7/7] Add a link to the solution video --- INSTRUCTIONS.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/INSTRUCTIONS.md b/INSTRUCTIONS.md index 8323ec4..2f25ae9 100644 --- a/INSTRUCTIONS.md +++ b/INSTRUCTIONS.md @@ -25,3 +25,5 @@ When conditionally rendering in React, we'll usually use ternary conditionals: ### Files - [js/src/progress-indicator.exercise.js](js/src/progress-indicator.exercise.js) - [js/src/edit.js](js/src/edit.js) + +[Solution video](https://bit.ly/364b0Is)