Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Developing Blocks without React - Block Supports.pptx

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 9 Publicité

Developing Blocks without React - Block Supports.pptx

Télécharger pour lire hors ligne

So far, we've built a WordPress block using plain JavaScript which supports custom styles via a stylesheet, which uses block attributes and the RichText component to allow the user to edit the block content, and uses a custom toolbar control to allow the user to align the RichText content.

Next, we will look at adding additional support for managing the block styles, via the Block Supports API.

So far, we've built a WordPress block using plain JavaScript which supports custom styles via a stylesheet, which uses block attributes and the RichText component to allow the user to edit the block content, and uses a custom toolbar control to allow the user to align the RichText content.

Next, we will look at adding additional support for managing the block styles, via the Block Supports API.

Publicité
Publicité

Plus De Contenu Connexe

Plus par Jonathan Bossenger (20)

Plus récents (20)

Publicité

Developing Blocks without React - Block Supports.pptx

  1. 1. Jonathan Bossenger Let’s Code Learn.WordPress.org Developing Blocks without React! Block Supports
  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 • Version 0.0.4 of the plugin code • https://github.com/jonathanbossenger/wp- learn-javascript/releases/download/0.0.4/wp- learn-javascript.0.0.4.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. 3. Learn.WordPress.org Let's code! Developing Blocks without React! Jonathan Bossenger
  4. 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. 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.4/wp-learn-javascript.0.0.4.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. 6. Learning Outcomes 1. Review of the current block code block code 2. Introduction to Block Schema 3. Overview of Block Supports 4. Learn how to add blocks supports via the block.json file
  7. 7. Objectives 1 1. Review the current block code 2. Add the $schema key to the block.json and learn how to use it 3. Add support for block colors (background and text) 4. Add support for block padding (via spacing) 5. Set a default block background color via the block attributes 7
  8. 8. 8 Let’s code.
  9. 9. Resources ○ https://learn.wordpress.org/individual-learner-survey/ ○ https://github.com/jonathanbossenger/wp-learn-javascript/releases/download/0.0.4/wp-learn- javascript.0.0.4.zip ○ https://schemas.wp.org/trunk/block.json ○ https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/block-supports-in-static- blocks/ ○ https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/

Notes de l'éditeur

  • TITLE SLIDE: Make a copy of this presentation to your Google Drive, and edit to replace with your details.

×