Getting started with block development can be a daunting task for the new developer. If you're used to developing themes and plugins for WordPress using HTML, CSS, and PHP, with a sprinkling of JavaScript, the additional build tools and modern JavaScript syntax required for block development might be confusing. In this session, we'll be looking at the software required to develop blocks, and how to set it all up. Then we'll a tool called create-block to create our first block, we'll look at the code that this generates and what each piece does.

1. Jonathan Bossenger
Let’s Code
Learn.WordPress.org
Let's Code! An Introduction to Block Development

2. 2
👋 Welcome!
As you join, feel free to
answer these questions
in the chat:
1. What region are you joining us from?
2. What do you do with WordPress?
3. What are you hoping to learn today?

3. Learn.WordPress.org
Let's code! An
Introduction to
Block
Development
Jonathan Bossenger

4. Announcements
○ Welcome, and thanks to Ross for co-hosting with me today!
○ We’ll be presenting in focus mode.
○ You are welcome to ask questions.
○ You are welcome to unmute to ask questions, or post them in the chat.

5. Announcements
○ Today we’ll be working mostly in the terminal
• Powershell for Windows
• Default MacOS terminal
○ This will be a very documentation heavy session (see the link vault in the last slide)
○ If I am going too fast, please let me know!
○ We will be posting this session to https://wordpress.tv/ afterwards
○ More more WordPress focused content please visit https://learn.wordpress.org/

6. Learning Outcomes
○ Software requirements for developing blocks
• A local WordPress install
• A terminal
⁃ Windows -> Powershell
• Node and npm
⁃ Installing these through nvm (and why)
○ Creating your first block using the create-block tool
○ Reviewing the different parts of a block

7. 7
Let’s code.

8. Learn.WordPress.org
Thank You!
Questions?

9. Link Vault
○ https://learn.wordpress.org/tutorial/local-wordpress-installations-for-beginners/
○ https://microsoft.com/powershell/
○ https://chocolatey.org/
○ https://nvm.sh/
○ https://developer.wordpress.org/block-editor/getting-started/create-block/
○ https://developer.wordpress.org/block-editor/reference-
guides/packages/packages-create-block/
○ https://developer.wordpress.org/block-editor/getting-started/create-block/block-
anatomy/