Developing Blocks without React - Attributes.pptx
Download as PPTX, PDF0 likes39 views
This document outlines a coding session led by Jonathan Bossenger on developing WordPress blocks without React, offering a welcome, announcements, and key learning outcomes. Participants are encouraged to prepare their local development environment and engage through questions. The session will cover reviewing block code, implementing developer principles, and utilizing rich text components for improved user interaction.
Developing Blocks without React - Attributes.pptx
- 1. Jonathan Bossenger Let’s Code Learn.WordPress.org Developing Blocks without React! - Part 2
- 2. 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 1 block code - https://github.com/jonathanbossenger/wp- learn-javascript/releases/download/0.0.2/wp- learn-javascript.0.0.2.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
- 3. Learn.WordPress.org Let's code! Developing Blocks without React! Jonathan Bossenger
- 4. Announcements ○ Welcome! ○ 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.
- 5. 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.2/wp-learn-javascript.0.0.2.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/
- 6. Learning Outcomes 1. Review of part 1 block code 2. Cover some general developer tools/principles for block development 3. Add an attribute to the block 4. Implement the RichText component for a better user experience 5. Make it possible to edit and save the block content
- 7. Objectives 1 1. Review the current block code 2. Review developer tools, clearing the browser cache, enabling WP debugging 3. Add the string attribute to the block 4. Update the attribute with a default value 5. See how the attribute is passed to the block 6. Discuss the difference between the block’s props and blockProps 7
- 8. Objectives 2 1. Implement the RichText component allow the user to edit the block content 2. Add the onChange functionality to the element in the edit function 3. Implement the setAttributes function in the onChange to update the attribute value 4. Update the save function to use RichText and the updated attribute value 5. Some refactoring/clean up 8
- 10. Resources ○ https://learn.wordpress.org/individual-learner-survey/ ○ https://github.com/jonathanbossenger/wp-learn-javascript/releases/download/0.0.2/wp-learn- javascript.0.0.2.zip ○ https://www.geeksforgeeks.org/browser-developer-tools/ ○ https://wordpress.org/support/article/debugging-in-wordpress/ ○ https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/ ○ https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and- editable-fields/ ○ https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/
- 11. Resources ○ https://developer.wordpress.org/block-editor/reference-guides/richtext/ ○ https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content ○ https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign ○ https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName ○ https://developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment ○ https://github.com/jonathanbossenger/wp-learn-javascript
Editor's Notes
- #2: TITLE SLIDE: Make a copy of this presentation to your Google Drive, and edit to replace with your details.