Skip to content

Commit 840d837

Browse files
authored
Merge pull request #183 from igorradovanov/patch-1
Fix example-block references
2 parents 438ec86 + 3caa884 commit 840d837

File tree

1 file changed

+10
-11
lines changed

1 file changed

+10
-11
lines changed

training/Blocks/01-overview.md

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,27 +58,26 @@ You can think about attributes as fields or data — a heading, a title, a descr
5858

5959
## File structure of a block
6060

61-
It takes a village (of files) to build a block. Luckily, our 10up scaffold has everything neatly in place for you. The scaffold comes with a [starter block](https://github.com/10up/wp-scaffold/tree/trunk/themes/10up-theme/includes/blocks/example-block)
61+
It takes a village (of files) to build a block. Luckily, our 10up scaffold has everything neatly in place for you. The scaffold comes with a [starter block](https://github.com/10up/wp-scaffold/tree/trunk/themes/10up-theme/blocks/example-block)
6262
that shows everything in place.
6363

64-
### The [10up Starter block](https://github.com/10up/wp-scaffold/tree/trunk/themes/10up-theme/includes/blocks/example-block)
64+
### The [10up Starter block](https://github.com/10up/wp-scaffold/tree/trunk/themes/10up-theme/blocks/example-block)
6565

6666
The various pieces of this starter block are:
6767

68-
- [**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.
69-
- [**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.
70-
- [**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.
71-
- [**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.
72-
- [**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.
73-
- [**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.
68+
- [**block.json**](https://github.com/10up/wp-scaffold/tree/trunk/themes/10up-theme/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.
69+
- [**edit.js**](https://github.com/10up/wp-scaffold/tree/trunk/themes/10up-theme/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.
70+
- [**index.js**](https://github.com/10up/wp-scaffold/tree/trunk/themes/10up-theme/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.
71+
- [**markup.php**](https://github.com/10up/wp-scaffold/tree/trunk/themes/10up-theme/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.
72+
- [**save.js**](https://github.com/10up/wp-scaffold/tree/trunk/themes/10up-theme/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.
7473

7574
## Putting it all Together
7675

7776
There is a lot going on here, but things should make more sense if we follow a single attribute around the codebase.
7877

7978
Let us look at the `customTitle` attribute:
8079

81-
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.
80+
1. It is first defined as an attribute in [block.json](https://github.com/10up/wp-scaffold/tree/trunk/themes/10up-theme/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.
8281

8382
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).
8483

@@ -132,7 +131,7 @@ You can see below the "Example Block" `block.json` from our 10up Scaffold that i
132131
}
133132
```
134133

135-
1. Then we wrap it in some markup and watch for changes in a `<RichText>` 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 `<RichText>` 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.
134+
1. Then we wrap it in some markup and watch for changes in a `<RichText>` element in [edit.js](https://github.com/10up/wp-scaffold/tree/trunk/themes/10up-theme/blocks/example-block/edit.js#L28). Pay close attention to the last two lines of the `<RichText>` 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.
136135

137136
```jsx title="edit.js"
138137
import { useBlockProps, RichText } from '@wordpress/block-editor';
@@ -173,7 +172,7 @@ That was a quick tour of the block editor, some of the common lingo, and a peek
173172
174173
1. Blocks live in the block editor. Most blocks have two places to control their settings: the **Toolbar** above the block and the **Inspector** located in the right sidebar.
175174
2. Blocks use and store **Attributes**. Think of attributes in the same way you would think about custom fields.
176-
3. Our scaffolding has a specific structure for blocks. The example block ships with our [WP Scaffold](https://github.com/10up/wp-scaffold/tree/trunk/themes/10up-theme/includes/blocks/example-block) repository.
175+
3. Our scaffolding has a specific structure for blocks. The example block ships with our [WP Scaffold](https://github.com/10up/wp-scaffold/tree/trunk/themes/10up-theme/blocks/example-block) repository.
177176
178177
## Further Reading
179178

0 commit comments

Comments
 (0)