SlideShare una empresa de Scribd logo
1 de 9
Descargar para leer sin conexión
Jonathan Bossenger
Let’s Code
Learn.WordPress.org
Developing Blocks without React!
Block Supports
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
Learn.WordPress.org
Let's code!
Developing Blocks
without React!
Jonathan Bossenger
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.
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/
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
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
Let’s code.
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/

Más contenido relacionado

Similar a Developing Blocks without React - Block Supports.pptx

Help test WordPress - developer edition
Help test WordPress - developer editionHelp test WordPress - developer edition
Help test WordPress - developer editionJonathan Bossenger
 
Let's code: WordPress multisite experiments
Let's code: WordPress multisite experimentsLet's code: WordPress multisite experiments
Let's code: WordPress multisite experimentsJonathan Bossenger
 
Let's code! Converting a Shortcode into a Block
Let's code! Converting a Shortcode into a BlockLet's code! Converting a Shortcode into a Block
Let's code! Converting a Shortcode into a BlockJonathan Bossenger
 
Using Block Patterns in your Block Theme.pptx
Using Block Patterns in your Block Theme.pptxUsing Block Patterns in your Block Theme.pptx
Using Block Patterns in your Block Theme.pptxJonathan Bossenger
 
Developing Blocks without React - Part 1
Developing Blocks without React - Part 1Developing Blocks without React - Part 1
Developing Blocks without React - Part 1Jonathan Bossenger
 
Developing Blocks without React - Controls.pptx
Developing Blocks without React - Controls.pptxDeveloping Blocks without React - Controls.pptx
Developing Blocks without React - Controls.pptxJonathan Bossenger
 
Global Styles Variations in Block Themes.pptx
Global Styles Variations in Block Themes.pptxGlobal Styles Variations in Block Themes.pptx
Global Styles Variations in Block Themes.pptxJonathan Bossenger
 
Developing Blocks without React - Attributes.pptx
Developing Blocks without React - Attributes.pptxDeveloping Blocks without React - Attributes.pptx
Developing Blocks without React - Attributes.pptxJonathan Bossenger
 
Developing Blocks without React - Part 2.pptx
Developing Blocks without React - Part 2.pptxDeveloping Blocks without React - Part 2.pptx
Developing Blocks without React - Part 2.pptxJonathan Bossenger
 
Developing Blocks without React - Part 2
Developing Blocks without React - Part 2Developing Blocks without React - Part 2
Developing Blocks without React - Part 2Jonathan Bossenger
 
Creating Custom Templates and Template Parts
Creating Custom Templates and Template PartsCreating Custom Templates and Template Parts
Creating Custom Templates and Template PartsJonathan Bossenger
 
Common WordPress APIs - Dashboard Widgets
Common WordPress APIs - Dashboard WidgetsCommon WordPress APIs - Dashboard Widgets
Common WordPress APIs - Dashboard WidgetsJonathan Bossenger
 
Common WordPress APIs_ Internationalization
Common WordPress APIs_ InternationalizationCommon WordPress APIs_ Internationalization
Common WordPress APIs_ InternationalizationJonathan Bossenger
 
Let's code! Creating your Primary Templates in the Editor.pptx
Let's code! Creating your Primary Templates in the Editor.pptxLet's code! Creating your Primary Templates in the Editor.pptx
Let's code! Creating your Primary Templates in the Editor.pptxJonathan Bossenger
 
Let's code! What Happens When You Make Theme Changes
Let's code! What Happens When You Make Theme ChangesLet's code! What Happens When You Make Theme Changes
Let's code! What Happens When You Make Theme ChangesJonathan Bossenger
 
Let's code_ WP REST API - custom routes and endpoints.pptx
Let's code_ WP REST API - custom routes and endpoints.pptxLet's code_ WP REST API - custom routes and endpoints.pptx
Let's code_ WP REST API - custom routes and endpoints.pptxJonathan Bossenger
 

Similar a Developing Blocks without React - Block Supports.pptx (20)

Testing plugins for PHP 8
Testing plugins for PHP 8Testing plugins for PHP 8
Testing plugins for PHP 8
 
Help test WordPress - developer edition
Help test WordPress - developer editionHelp test WordPress - developer edition
Help test WordPress - developer edition
 
Developing for multisite
Developing for multisiteDeveloping for multisite
Developing for multisite
 
Let's code: WordPress multisite experiments
Let's code: WordPress multisite experimentsLet's code: WordPress multisite experiments
Let's code: WordPress multisite experiments
 
Let's code! Converting a Shortcode into a Block
Let's code! Converting a Shortcode into a BlockLet's code! Converting a Shortcode into a Block
Let's code! Converting a Shortcode into a Block
 
Using Block Patterns in your Block Theme.pptx
Using Block Patterns in your Block Theme.pptxUsing Block Patterns in your Block Theme.pptx
Using Block Patterns in your Block Theme.pptx
 
Developing Blocks without React - Part 1
Developing Blocks without React - Part 1Developing Blocks without React - Part 1
Developing Blocks without React - Part 1
 
Developing Blocks without React - Controls.pptx
Developing Blocks without React - Controls.pptxDeveloping Blocks without React - Controls.pptx
Developing Blocks without React - Controls.pptx
 
Global Styles Variations in Block Themes.pptx
Global Styles Variations in Block Themes.pptxGlobal Styles Variations in Block Themes.pptx
Global Styles Variations in Block Themes.pptx
 
WordPress Coding Standards
WordPress Coding StandardsWordPress Coding Standards
WordPress Coding Standards
 
Developing Blocks without React - Attributes.pptx
Developing Blocks without React - Attributes.pptxDeveloping Blocks without React - Attributes.pptx
Developing Blocks without React - Attributes.pptx
 
Developing Blocks without React - Part 2.pptx
Developing Blocks without React - Part 2.pptxDeveloping Blocks without React - Part 2.pptx
Developing Blocks without React - Part 2.pptx
 
Developing Blocks without React - Part 2
Developing Blocks without React - Part 2Developing Blocks without React - Part 2
Developing Blocks without React - Part 2
 
Creating Custom Templates and Template Parts
Creating Custom Templates and Template PartsCreating Custom Templates and Template Parts
Creating Custom Templates and Template Parts
 
Common WordPress APIs - Dashboard Widgets
Common WordPress APIs - Dashboard WidgetsCommon WordPress APIs - Dashboard Widgets
Common WordPress APIs - Dashboard Widgets
 
Common WordPress APIs_ Internationalization
Common WordPress APIs_ InternationalizationCommon WordPress APIs_ Internationalization
Common WordPress APIs_ Internationalization
 
Let's code! Creating your Primary Templates in the Editor.pptx
Let's code! Creating your Primary Templates in the Editor.pptxLet's code! Creating your Primary Templates in the Editor.pptx
Let's code! Creating your Primary Templates in the Editor.pptx
 
The WordPress Database
The WordPress DatabaseThe WordPress Database
The WordPress Database
 
Let's code! What Happens When You Make Theme Changes
Let's code! What Happens When You Make Theme ChangesLet's code! What Happens When You Make Theme Changes
Let's code! What Happens When You Make Theme Changes
 
Let's code_ WP REST API - custom routes and endpoints.pptx
Let's code_ WP REST API - custom routes and endpoints.pptxLet's code_ WP REST API - custom routes and endpoints.pptx
Let's code_ WP REST API - custom routes and endpoints.pptx
 

Más de Jonathan Bossenger

New WordPress Developer APIs The Interactivity API
New WordPress Developer APIs The Interactivity APINew WordPress Developer APIs The Interactivity API
New WordPress Developer APIs The Interactivity APIJonathan Bossenger
 
WordPress 6.4 improvements - developer edition
WordPress 6.4 improvements - developer editionWordPress 6.4 improvements - developer edition
WordPress 6.4 improvements - developer editionJonathan Bossenger
 
The WordPress Create Block tool
The WordPress Create Block toolThe WordPress Create Block tool
The WordPress Create Block toolJonathan Bossenger
 
PHP compatibility testing with PHPCompatibilityWP
PHP compatibility testing with PHPCompatibilityWPPHP compatibility testing with PHPCompatibilityWP
PHP compatibility testing with PHPCompatibilityWPJonathan Bossenger
 
Common WordPress APIs_ Settings API
Common WordPress APIs_ Settings APICommon WordPress APIs_ Settings API
Common WordPress APIs_ Settings APIJonathan Bossenger
 
Common WordPress APIs - Options API
Common WordPress APIs - Options APICommon WordPress APIs - Options API
Common WordPress APIs - Options APIJonathan Bossenger
 
Common WordPress APIs_ HTTP API.pptx
Common WordPress APIs_ HTTP API.pptxCommon WordPress APIs_ HTTP API.pptx
Common WordPress APIs_ HTTP API.pptxJonathan Bossenger
 
Common WordPress APIs: Metadata
Common WordPress APIs: MetadataCommon WordPress APIs: Metadata
Common WordPress APIs: MetadataJonathan Bossenger
 
What’s new for developers_ (August 2023).pptx
What’s new for developers_ (August 2023).pptxWhat’s new for developers_ (August 2023).pptx
What’s new for developers_ (August 2023).pptxJonathan Bossenger
 
Testing your plugins for PHP version compatibility
Testing your plugins for PHP version compatibilityTesting your plugins for PHP version compatibility
Testing your plugins for PHP version compatibilityJonathan Bossenger
 
Common WordPress APIs_ Global Variables
Common WordPress APIs_ Global VariablesCommon WordPress APIs_ Global Variables
Common WordPress APIs_ Global VariablesJonathan Bossenger
 
Testing WordPress 6.3 - Developer edition
Testing WordPress 6.3 - Developer editionTesting WordPress 6.3 - Developer edition
Testing WordPress 6.3 - Developer editionJonathan Bossenger
 
Common WordPress APIs: Responsive Images
Common WordPress APIs: Responsive ImagesCommon WordPress APIs: Responsive Images
Common WordPress APIs: Responsive ImagesJonathan Bossenger
 
Managing a WordPress Multisite Network
Managing a WordPress Multisite NetworkManaging a WordPress Multisite Network
Managing a WordPress Multisite NetworkJonathan Bossenger
 
Introduction to WordPress Multisite Networks
Introduction to WordPress Multisite NetworksIntroduction to WordPress Multisite Networks
Introduction to WordPress Multisite NetworksJonathan Bossenger
 
Custom Post Types and Capabilities.pptx
Custom Post Types and Capabilities.pptxCustom Post Types and Capabilities.pptx
Custom Post Types and Capabilities.pptxJonathan Bossenger
 
Developing WordPress User Roles and Capabilities
Developing WordPress User Roles and CapabilitiesDeveloping WordPress User Roles and Capabilities
Developing WordPress User Roles and CapabilitiesJonathan Bossenger
 
Creating a WordPress multisite network
Creating a WordPress multisite networkCreating a WordPress multisite network
Creating a WordPress multisite networkJonathan Bossenger
 

Más de Jonathan Bossenger (20)

New WordPress Developer APIs The Interactivity API
New WordPress Developer APIs The Interactivity APINew WordPress Developer APIs The Interactivity API
New WordPress Developer APIs The Interactivity API
 
The WordPress HTML API
The WordPress HTML APIThe WordPress HTML API
The WordPress HTML API
 
WordPress 6.4 improvements - developer edition
WordPress 6.4 improvements - developer editionWordPress 6.4 improvements - developer edition
WordPress 6.4 improvements - developer edition
 
The WordPress Create Block tool
The WordPress Create Block toolThe WordPress Create Block tool
The WordPress Create Block tool
 
PHP compatibility testing with PHPCompatibilityWP
PHP compatibility testing with PHPCompatibilityWPPHP compatibility testing with PHPCompatibilityWP
PHP compatibility testing with PHPCompatibilityWP
 
Common WordPress APIs_ Settings API
Common WordPress APIs_ Settings APICommon WordPress APIs_ Settings API
Common WordPress APIs_ Settings API
 
Common WordPress APIs - Options API
Common WordPress APIs - Options APICommon WordPress APIs - Options API
Common WordPress APIs - Options API
 
Common WordPress APIs_ HTTP API.pptx
Common WordPress APIs_ HTTP API.pptxCommon WordPress APIs_ HTTP API.pptx
Common WordPress APIs_ HTTP API.pptx
 
Common WordPress APIs: Metadata
Common WordPress APIs: MetadataCommon WordPress APIs: Metadata
Common WordPress APIs: Metadata
 
What’s new for developers_ (August 2023).pptx
What’s new for developers_ (August 2023).pptxWhat’s new for developers_ (August 2023).pptx
What’s new for developers_ (August 2023).pptx
 
Testing your plugins for PHP version compatibility
Testing your plugins for PHP version compatibilityTesting your plugins for PHP version compatibility
Testing your plugins for PHP version compatibility
 
Common WordPress APIs_ Global Variables
Common WordPress APIs_ Global VariablesCommon WordPress APIs_ Global Variables
Common WordPress APIs_ Global Variables
 
Testing WordPress 6.3 - Developer edition
Testing WordPress 6.3 - Developer editionTesting WordPress 6.3 - Developer edition
Testing WordPress 6.3 - Developer edition
 
Common WordPress APIs: Responsive Images
Common WordPress APIs: Responsive ImagesCommon WordPress APIs: Responsive Images
Common WordPress APIs: Responsive Images
 
Custom Tables in WordPress
Custom Tables in WordPressCustom Tables in WordPress
Custom Tables in WordPress
 
Managing a WordPress Multisite Network
Managing a WordPress Multisite NetworkManaging a WordPress Multisite Network
Managing a WordPress Multisite Network
 
Introduction to WordPress Multisite Networks
Introduction to WordPress Multisite NetworksIntroduction to WordPress Multisite Networks
Introduction to WordPress Multisite Networks
 
Custom Post Types and Capabilities.pptx
Custom Post Types and Capabilities.pptxCustom Post Types and Capabilities.pptx
Custom Post Types and Capabilities.pptx
 
Developing WordPress User Roles and Capabilities
Developing WordPress User Roles and CapabilitiesDeveloping WordPress User Roles and Capabilities
Developing WordPress User Roles and Capabilities
 
Creating a WordPress multisite network
Creating a WordPress multisite networkCreating a WordPress multisite network
Creating a WordPress multisite network
 

Último

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 

Último (20)

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 

Developing Blocks without React - Block Supports.pptx

  • 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
  • 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.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. 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. 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
  • 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/

Notas del editor

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