Let's code! Converting a Shortcode into a Block
Download as PPTX, PDF0 likes38 views
This document outlines a coding session led by Jonathan Bossenger on converting a WordPress shortcode into a block. Participants are introduced to the requirements, announcements, and learning outcomes of the session, which includes setting up a plugin, block registration in PHP, and creating components for block editing and rendering. Additional resources, including links to relevant tools and documentation, are provided for further learning.
Let's code! Converting a Shortcode into a Block
- 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)
- 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/
Editor's Notes
- #2: TITLE SLIDE: Make a copy of this presentation to your Google Drive, and edit to replace with your details.