From bed7aca0d329a88c9c8214da2e20b41c84cb8249 Mon Sep 17 00:00:00 2001 From: lcnogueira Date: Sat, 27 Jan 2024 10:51:14 -0300 Subject: [PATCH 1/6] fix: update links paths --- training/01-overview.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/training/01-overview.md b/training/01-overview.md index f4842c0..61cb528 100644 --- a/training/01-overview.md +++ b/training/01-overview.md @@ -65,12 +65,12 @@ It takes a village (of files) to build a block. Luckily, our 10up scaffold has e The various pieces of this starter block are: -- [**block.json**](https://github.com/10up/wp-scaffold/blob/trunk/themes/tenup-theme/includes/blocks/example-block/block.json) — This is where all of the configurations for our block happen. The block's name, icon, keywords and everything else is handled here. Most importantly, the block's attributes are listed here. We will cover attributes more in the next section. -- [**edit.js**](https://github.com/10up/wp-scaffold/blob/trunk/themes/tenup-theme/includes/blocks/example-block/edit.js) — This file controls how the block looks and behaves in the editor. This is where you use interactive elements to manage your block's attributes. Imagine that you want to add a title to your block. In `edit.js`, you will import the `RichText` component, style it to look like it does on the frontend, and listen for changes. Any time the block changes, the data gets saved in the database! Markup in this file is written in JSX like standard React components. -- [**index.css**](https://github.com/10up/wp-scaffold/blob/trunk/themes/tenup-theme/includes/blocks/example-block/index.css) — Sometimes you want your block to look slightly different in the editor than on the frontend. You can add styles to affect only the editor appearance here. -- [**index.js**](https://github.com/10up/wp-scaffold/blob/trunk/themes/tenup-theme/includes/blocks/example-block/index.js) — This is where everything about the block is brought together. You should not need to do much in this file beyond importing the edit function, the save function and the block.json. -- [**markup.php**](https://github.com/10up/wp-scaffold/blob/trunk/themes/tenup-theme/includes/blocks/example-block/markup.php) — Here is where the frontend markup for your block lives. Have a look at what is in `$attributes` to see what data is available to you. Any attributes that you have saved in the editor should be available here. -- [**save.js**](https://github.com/10up/wp-scaffold/blob/trunk/themes/tenup-theme/includes/blocks/example-block/save.js) — You generally should not need to touch this file. At 10up, we build dynamic blocks which return `null`, but this is not super-important to know at this stage. Dynamic versus static blocks is something you do not need to worry about until much later in these lessons. +- [**block.json**](https://github.com/10up/wp-scaffold/blob/trunk/themes/10up-theme/includes/blocks/example-block/block.json) — This is where all of the configurations for our block happen. The block's name, icon, keywords and everything else is handled here. Most importantly, the block's attributes are listed here. We will cover attributes more in the next section. +- [**edit.js**](https://github.com/10up/wp-scaffold/blob/trunk/themes/10up-theme/includes/blocks/example-block/edit.js) — This file controls how the block looks and behaves in the editor. This is where you use interactive elements to manage your block's attributes. Imagine that you want to add a title to your block. In `edit.js`, you will import the `RichText` component, style it to look like it does on the frontend, and listen for changes. Any time the block changes, the data gets saved in the database! Markup in this file is written in JSX like standard React components. +- [**index.css**](https://github.com/10up/wp-scaffold/blob/trunk/themes/10up-theme/includes/blocks/example-block/index.css) — Sometimes you want your block to look slightly different in the editor than on the frontend. You can add styles to affect only the editor appearance here. +- [**index.js**](https://github.com/10up/wp-scaffold/blob/trunk/themes/10up-theme/includes/blocks/example-block/index.js) — This is where everything about the block is brought together. You should not need to do much in this file beyond importing the edit function, the save function and the block.json. +- [**markup.php**](https://github.com/10up/wp-scaffold/blob/trunk/themes/10up-theme/includes/blocks/example-block/markup.php) — Here is where the frontend markup for your block lives. Have a look at what is in `$attributes` to see what data is available to you. Any attributes that you have saved in the editor should be available here. +- [**save.js**](https://github.com/10up/wp-scaffold/blob/trunk/themes/10up-theme/includes/blocks/example-block/save.js) — You generally should not need to touch this file. At 10up, we build dynamic blocks which return `null`, but this is not super-important to know at this stage. Dynamic versus static blocks is something you do not need to worry about until much later in these lessons. ## Putting it all Together @@ -78,7 +78,7 @@ There is a lot going on here, but things should make more sense if we follow a s Let us look at the `customTitle` attribute: -1. It is first defined as an attribute in [block.json](https://github.com/10up/wp-scaffold/blob/trunk/themes/tenup-theme/includes/blocks/example-block/block.json#L15). This is essentially saying "I want to store a field in the database called `customTitle` and use it in my templates. There are two instances below where you can see `customTitle` defined. +1. It is first defined as an attribute in [block.json](https://github.com/10up/wp-scaffold/blob/trunk/themes/10up-theme/includes/blocks/example-block/block.json#L15). This is essentially saying "I want to store a field in the database called `customTitle` and use it in my templates. There are two instances below where you can see `customTitle` defined. The first is the actual definition of the attribute. Here, we define the attribute and set [type validation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation). @@ -132,7 +132,7 @@ You can see below the "Example Block" `block.json` from our 10up Scaffold that i } ``` -1. Then we wrap it in some markup and watch for changes in a `` element in [edit.js](https://github.com/10up/wp-scaffold/blob/trunk/themes/tenup-theme/includes/blocks/example-block/edit.js#L28). Pay close attention to the last two lines of the `` element. We are telling the RichText component what the current current value it should display is. And then telling it what to do whenever the value it is changed. +1. Then we wrap it in some markup and watch for changes in a `` element in [edit.js](https://github.com/10up/wp-scaffold/blob/trunk/themes/10up-theme/includes/blocks/example-block/edit.js#L28). Pay close attention to the last two lines of the `` element. We are telling the RichText component what the current current value it should display is. And then telling it what to do whenever the value it is changed. ```jsx title="edit.js" import { useBlockProps, RichText } from '@wordpress/block-editor'; From dd406253d9cd33e9aa261f72dabe90dab7ff5885 Mon Sep 17 00:00:00 2001 From: lcnogueira Date: Sat, 27 Jan 2024 11:40:14 -0300 Subject: [PATCH 2/6] fix: update link and fix ponctuation --- training/02-cta-lesson.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/training/02-cta-lesson.md b/training/02-cta-lesson.md index 52bb23b..1ca9850 100644 --- a/training/02-cta-lesson.md +++ b/training/02-cta-lesson.md @@ -2,7 +2,7 @@ This lesson provides a partially completed block that needs to have some features added to it to match the existing `cta-complete` block. All of the setup and files have been pre-configured as the focus here is to work with a block on its own without adding confusion around build tools and file locations. -These files can be found inside of the starter theme at: `/wp-content/themes/tenup-theme/includes/blocks`. +These files can be found inside of the starter theme at: `/wp-content/themes/10up-theme/includes/blocks`. If you are stuck or need help, refer to the `cta-complete` block as a reference or reach out to #10up-gutenberg in Slack for help @@ -71,7 +71,7 @@ Not sure what to use as values? Here you go: :::tip :::note -See that `setAttributes` call? That's a function that is provided by the block API to set attributes for the block you can read more about it [here](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) +See that `setAttributes` call? That's a function that is provided by the block API to set attributes for the block and you can read more about it [here](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) :::note ### 3: Adding an optional field to the block @@ -157,7 +157,7 @@ The next step is to add a new `RichText` component below the one for the `descri * `onChange={(ctaText) => setAttributes({ ctaText })}` :::tip -**A quick note on block UX best practices:** Generally, speaking content such as text or setting a featured image should be input into the actual block and "settings" such as the CTA on/off toggle should be in the inspector toolbar. +**A quick note on block UX best practices:** Generally speaking, content such as text or setting a featured image should be input into the actual block and "settings" such as the CTA on/off toggle should be in the inspector toolbar. ### 4: Rendering the front-end From 46553fa7438fe9feaaf5763102467ec914166e4a Mon Sep 17 00:00:00 2001 From: lcnogueira Date: Fri, 2 Feb 2024 13:06:11 -0300 Subject: [PATCH 3/6] updates --- training/03-styles.md | 2 +- training/06-inner-blocks.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/training/03-styles.md b/training/03-styles.md index fcca131..79eb35f 100644 --- a/training/03-styles.md +++ b/training/03-styles.md @@ -90,7 +90,7 @@ function registerImageStyles() { :::tip -1. Pass the function to the `domReady` function from the `@wordpress/dom-ready` package. Registering our styles only once the DOM is fully loaded avoids race conditions with WordPress Core: +5. Pass the function to the `domReady` function from the `@wordpress/dom-ready` package. Registering our styles only once the DOM is fully loaded avoids race conditions with WordPress Core: ```js import domReady from '@wordpress/dom-ready'; diff --git a/training/06-inner-blocks.md b/training/06-inner-blocks.md index 5b577b9..1f5838a 100644 --- a/training/06-inner-blocks.md +++ b/training/06-inner-blocks.md @@ -134,7 +134,7 @@ registerBlockType(block.name, { }); ``` -Now that the content is saved in the database we also need to somehow use this content in our markup in PHP template. Inside our [`markup.php`[()] file we have access to a few variables. The `$attributes`, `$content`, `$block`, and `$context`. In this case we are interested in the `$content` variable which stores the saved markup from the editor. +Now that the content is saved in the database we also need to somehow use this content in our markup in PHP template. Inside our [markup.php]() file we have access to a few variables. The `$attributes`, `$content`, `$block`, and `$context`. In this case we are interested in the `$content` variable which stores the saved markup from the editor. If we look down at the content container, we will see the comment `// The inner blocks content should get rendered here.` Replace this comment with the following: From 1943490713bb542a9b7689f16a31e12131b2e8b9 Mon Sep 17 00:00:00 2001 From: lcnogueira Date: Fri, 2 Feb 2024 15:55:46 -0300 Subject: [PATCH 4/6] fix: syntaxe typos --- training/06-inner-blocks.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/training/06-inner-blocks.md b/training/06-inner-blocks.md index 1f5838a..420bfdd 100644 --- a/training/06-inner-blocks.md +++ b/training/06-inner-blocks.md @@ -165,12 +165,12 @@ We can improve the UX by adding a list of allowed blocks to the inner blocks com const innerBlocksProps = useInnerBlocksProps( {}, { - allowedBlocks: { [ + allowedBlocks: [ 'core/heading', 'core/paragraph', 'core/buttons', 'core/button', - ] } + ] } ); @@ -193,10 +193,10 @@ To achieve this we can define a `template` on the inner block area. The template const innerBlocksProps = useInnerBlocksProps( {}, { - template: {[ + template: [ ['core/heading', { level: 2, placeholder: 'Insert your heading here...' }], ['core/paragraph', { placeholder: 'Write some description text here...' }], - ]} + ] } ); From 408fceccafc1315e971e1704f4a4b4d37af365e1 Mon Sep 17 00:00:00 2001 From: lcnogueira Date: Fri, 2 Feb 2024 17:29:52 -0300 Subject: [PATCH 5/6] fix: remove link to non existent file --- training/01-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/training/01-overview.md b/training/01-overview.md index 61cb528..3161464 100644 --- a/training/01-overview.md +++ b/training/01-overview.md @@ -67,7 +67,7 @@ The various pieces of this starter block are: - [**block.json**](https://github.com/10up/wp-scaffold/blob/trunk/themes/10up-theme/includes/blocks/example-block/block.json) — This is where all of the configurations for our block happen. The block's name, icon, keywords and everything else is handled here. Most importantly, the block's attributes are listed here. We will cover attributes more in the next section. - [**edit.js**](https://github.com/10up/wp-scaffold/blob/trunk/themes/10up-theme/includes/blocks/example-block/edit.js) — This file controls how the block looks and behaves in the editor. This is where you use interactive elements to manage your block's attributes. Imagine that you want to add a title to your block. In `edit.js`, you will import the `RichText` component, style it to look like it does on the frontend, and listen for changes. Any time the block changes, the data gets saved in the database! Markup in this file is written in JSX like standard React components. -- [**index.css**](https://github.com/10up/wp-scaffold/blob/trunk/themes/10up-theme/includes/blocks/example-block/index.css) — Sometimes you want your block to look slightly different in the editor than on the frontend. You can add styles to affect only the editor appearance here. +- **index.css** — Sometimes you want your block to look slightly different in the editor than on the frontend. You can add styles to affect only the editor appearance here. - [**index.js**](https://github.com/10up/wp-scaffold/blob/trunk/themes/10up-theme/includes/blocks/example-block/index.js) — This is where everything about the block is brought together. You should not need to do much in this file beyond importing the edit function, the save function and the block.json. - [**markup.php**](https://github.com/10up/wp-scaffold/blob/trunk/themes/10up-theme/includes/blocks/example-block/markup.php) — Here is where the frontend markup for your block lives. Have a look at what is in `$attributes` to see what data is available to you. Any attributes that you have saved in the editor should be available here. - [**save.js**](https://github.com/10up/wp-scaffold/blob/trunk/themes/10up-theme/includes/blocks/example-block/save.js) — You generally should not need to touch this file. At 10up, we build dynamic blocks which return `null`, but this is not super-important to know at this stage. Dynamic versus static blocks is something you do not need to worry about until much later in these lessons. From 7943e03610b8587ecf0c934142f4ecb4eaef51cc Mon Sep 17 00:00:00 2001 From: lcnogueira Date: Fri, 2 Feb 2024 17:36:06 -0300 Subject: [PATCH 6/6] fix: revert link update --- training/02-cta-lesson.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/training/02-cta-lesson.md b/training/02-cta-lesson.md index 1ca9850..3147dc2 100644 --- a/training/02-cta-lesson.md +++ b/training/02-cta-lesson.md @@ -2,7 +2,7 @@ This lesson provides a partially completed block that needs to have some features added to it to match the existing `cta-complete` block. All of the setup and files have been pre-configured as the focus here is to work with a block on its own without adding confusion around build tools and file locations. -These files can be found inside of the starter theme at: `/wp-content/themes/10up-theme/includes/blocks`. +These files can be found inside of the starter theme at: `/wp-content/themes/tenup-theme/includes/blocks`. If you are stuck or need help, refer to the `cta-complete` block as a reference or reach out to #10up-gutenberg in Slack for help