1. Jonathan Bossenger
Let’s Code
Learn.WordPress.org
Converting a Shortcode into a Block

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 is your favourite thing about
WordPress?

3. Learn.WordPress.org
Let's code!
Converting a
Shortcode into a
Block
Jonathan Bossenger

4. Requirements
○ Local development environment configured with the required software
• https://wordpress.tv/2022/08/05/lets-code-an-introduction-to-block-development/
○ PHP Shortcode Plugin
• https://github.com/jonathanbossenger/wp-learn-
subscribe/releases/download/1.1.0/wp-learn-subscribe.1.1.0.zip

5. Announcements
○ Welcome, I don’t have a co-host 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.
○ If I am going too fast, please let me know!
○ We are recording this session, and it will be posted https://wordpress.tv/ afterwards
○ More more WordPress focused content please visit https://learn.wordpress.org/

6. Announcements
○ Shortcode plugin for this session
• https://github.com/jonathanbossenger/wp-learn-
subscribe/releases/download/1.1.0/wp-learn-subscribe.1.1.0.zip
○ Final code from this session:
• https://github.com/jonathanbossenger/wp-learn-subscribe/
• https://github.com/jonathanbossenger/wp-learn-
subscribe/releases/download/1.2.0/wp-learn-subscribe.1.2.0.zip

7. Learning Outcomes
○ Setting up the plugin for block development
○ Setting up the block registration in PHP
○ Creating the Edit component for the block editor
○ Creating the save function for front end rendering
○ Migrating the styles to the block (if there is time)

8. 8
Let’s code.

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

10. Link Vault
○ https://wordpress.tv/2022/07/29/lets-code-common-apis-shortcodes/
○ https://wordpress.tv/2022/08/05/lets-code-an-introduction-to-block-development/
○ https://wordpress.tv/2022/08/10/using-the-create-block-tool/
○ https://developer.wordpress.org/block-editor/
○ https://developer.wordpress.org/block-editor/getting-started/create-block/block-anatomy/
○ https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
○ https://developer.wordpress.org/reference/functions/register_block_type/
○ https://sass-lang.com/