Jonathan Bossenger
Let’s Code
Learn.WordPress.org
Developing Blocks without React! - Controls

2
👋🏽
Welcome!
As you join, please make sure you have your local
development environment ready:
• A local WordPress installation
• A code editor like VSCode or Sublime
• The part 2 block code
• https://github.com/jonathanbossenger/wp-learn-
javascript/releases/download/0.0.3/wp-learn-
javascript.0.0.3.zip
Then, let everyone know in the chat where you’re joining
us from…
Hello!
○ My name is Jonathan Bossenger
○ From Cape Town, South Africa
○ Ex-developer turned code instructor
○ Sponsored contributor at Automattic
○ @jon_bossenger in Twitter

Learn.WordPress.org
Let's code!
Developing Blocks
without React!
Jonathan Bossenger

Announcements
○ Welcome, and thanks to Leo for co-hosting!
○ We’ll be presenting in focus mode, but please consider enabling your video.
○ You are welcome to ask questions.
○ You are welcome to post questions in the chat, or unmute to ask questions.

Announcements
○ Please consider taking the Learn WordPress Learner Survey
• https://learn.wordpress.org/individual-learner-survey/
○ Make sure your local install is ready
• https://github.com/jonathanbossenger/wp-learn-
javascript/releases/download/0.0.3/wp-learn-javascript.0.0.3.zip
○ If I am going too fast, please let me know!
○ We will be posting this session to https://wordpress.tv/ afterwards
○ For more WordPress focused content please visit https://learn.wordpress.org/

Learning Outcomes
1. Review of part 2 block code
2. Overview of the Block Toolbar and Settings Sidebar
3. Learn how to add multiple elements to a block
4. Prepare the block code to implement controls
5. Add an Alignment control to the block to manage content alignment

Objectives 1
1. Review the current block code
2. Review the Block Toolbar and Settings Sidebar
3. Update the block wrapper
4. Fix the styling based on the update
5. Implement the BlockControls and the AlignmentControl components
6. Add and apply an alignment attribute
7

Objectives 2
1. Update the save function to use the alignment
2. Move the control from the toolbar to the sidebar
3. Some refactoring
8

9
Let’s code.

Resources
○ https://learn.wordpress.org/individual-learner-survey/
○ https://github.com/jonathanbossenger/wp-learn-javascript/releases/download/0.0.3/wp-learn-
javascript.0.0.3.zip
○ https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/block-controls-toolbar-and-
sidebar/
○ https://reactjs.org/docs/rendering-elements.html#rendering-an-element-into-the-dom
○ https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/
○ https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/alignment-
control/README.md

Resources
○ https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-
editor/#blockcontrols
○ https://reactjs.org/docs/lists-and-keys.html#keys