SlideShare a Scribd company logo
What is Gutenberg Block?
● The Default editor of wordpress
introduced in wordpress 5.0.
● Gutenberg Blocks are like building blocks
for your website content.
● Imagine each block as a different piece of
content you can add, such as text, images,
gallery, videos, etc..,
● Gutenberg isn't just for typing text. It
lets you add cool stuff like images,
buttons, and even interactive elements.
Types Of Gutenberg Blocks
Static Blocks:
Dynamic Blocks:
Static Blocks Dynamic Blocks
● Definition: Static blocks are fixed content blocks that
do not rely on external data or dynamic sources. They
are typically used for simple and static content
elements.
● Characteristics:
○ The content within static blocks is fixed and
doesn't change dynamically.
○ They are easy to create and require minimal
coding.
○ Suitable for content that doesn't rely on
external APIs or data sources.
● Example:
○ A "Call to Action" block with a fixed message
and a button.
○ A "Separator", “Heading”, “Paragraph”
block to add empty space between content.
● Definition: Dynamic blocks are blocks that can fetch
and display dynamic content from external sources
or APIs. They can be more complex, allowing for
real-time updates and interaction with external data.
● Characteristics:
○ Dynamic blocks can fetch data from various
sources, such as APIs, databases, or external
services.
○ They can update in real-time as the
underlying data changes.
○ Dynamic blocks often require more extensive
coding, including PHP and JavaScript.
● Example:
○ A "Latest Posts" block that dynamically
fetches and displays the latest blog posts
from the WordPress database.
○ A "Weather Forecast" block that connects to a
weather API to display real-time weather
information.
Create a static gutenberg block.
Now lets try to create a static gutenberg block in this session.
QUESTIONS???

More Related Content

Similar to Introduction to WordPress Custom Gutenberg Blocks

DrupalCamp Florida 2015 - One Content Type to Rule Them All
DrupalCamp Florida 2015 - One Content Type to Rule Them AllDrupalCamp Florida 2015 - One Content Type to Rule Them All
DrupalCamp Florida 2015 - One Content Type to Rule Them AllWill Jackson
 
Gutenberg word press
Gutenberg word pressGutenberg word press
Gutenberg word pressManev Dave
 
Getting Started with Gutenberg Development
Getting Started with Gutenberg DevelopmentGetting Started with Gutenberg Development
Getting Started with Gutenberg DevelopmentJason Yingling
 
Devoxx France - Web Components, Polymer et Material Design
Devoxx France -  Web Components, Polymer et Material DesignDevoxx France -  Web Components, Polymer et Material Design
Devoxx France - Web Components, Polymer et Material DesignHoracio Gonzalez
 

Similar to Introduction to WordPress Custom Gutenberg Blocks (6)

DrupalCamp Florida 2015 - One Content Type to Rule Them All
DrupalCamp Florida 2015 - One Content Type to Rule Them AllDrupalCamp Florida 2015 - One Content Type to Rule Them All
DrupalCamp Florida 2015 - One Content Type to Rule Them All
 
Gutenberg word press
Gutenberg word pressGutenberg word press
Gutenberg word press
 
Html5 training
Html5 trainingHtml5 training
Html5 training
 
Getting Started with Gutenberg Development
Getting Started with Gutenberg DevelopmentGetting Started with Gutenberg Development
Getting Started with Gutenberg Development
 
Wordpress New Avatar - Gutenberg
Wordpress New Avatar - GutenbergWordpress New Avatar - Gutenberg
Wordpress New Avatar - Gutenberg
 
Devoxx France - Web Components, Polymer et Material Design
Devoxx France -  Web Components, Polymer et Material DesignDevoxx France -  Web Components, Polymer et Material Design
Devoxx France - Web Components, Polymer et Material Design
 

Recently uploaded

Introduction to Casting Processes in Manufacturing
Introduction to Casting Processes in ManufacturingIntroduction to Casting Processes in Manufacturing
Introduction to Casting Processes in Manufacturingssuser0811ec
 
Final project report on grocery store management system..pdf
Final project report on grocery store management system..pdfFinal project report on grocery store management system..pdf
Final project report on grocery store management system..pdfKamal Acharya
 
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptxCFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptxR&R Consult
 
Digital Signal Processing Lecture notes n.pdf
Digital Signal Processing Lecture notes n.pdfDigital Signal Processing Lecture notes n.pdf
Digital Signal Processing Lecture notes n.pdfAbrahamGadissa
 
ENERGY STORAGE DEVICES INTRODUCTION UNIT-I
ENERGY STORAGE DEVICES  INTRODUCTION UNIT-IENERGY STORAGE DEVICES  INTRODUCTION UNIT-I
ENERGY STORAGE DEVICES INTRODUCTION UNIT-IVigneshvaranMech
 
The Benefits and Techniques of Trenchless Pipe Repair.pdf
The Benefits and Techniques of Trenchless Pipe Repair.pdfThe Benefits and Techniques of Trenchless Pipe Repair.pdf
The Benefits and Techniques of Trenchless Pipe Repair.pdfPipe Restoration Solutions
 
Natalia Rutkowska - BIM School Course in Kraków
Natalia Rutkowska - BIM School Course in KrakówNatalia Rutkowska - BIM School Course in Kraków
Natalia Rutkowska - BIM School Course in Krakówbim.edu.pl
 
Fruit shop management system project report.pdf
Fruit shop management system project report.pdfFruit shop management system project report.pdf
Fruit shop management system project report.pdfKamal Acharya
 
Laundry management system project report.pdf
Laundry management system project report.pdfLaundry management system project report.pdf
Laundry management system project report.pdfKamal Acharya
 
shape functions of 1D and 2 D rectangular elements.pptx
shape functions of 1D and 2 D rectangular elements.pptxshape functions of 1D and 2 D rectangular elements.pptx
shape functions of 1D and 2 D rectangular elements.pptxVishalDeshpande27
 
Halogenation process of chemical process industries
Halogenation process of chemical process industriesHalogenation process of chemical process industries
Halogenation process of chemical process industriesMuhammadTufail242431
 
Immunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary AttacksImmunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary Attacksgerogepatton
 
Antenna efficency lecture course chapter 3.pdf
Antenna  efficency lecture course chapter 3.pdfAntenna  efficency lecture course chapter 3.pdf
Antenna efficency lecture course chapter 3.pdfAbrahamGadissa
 
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...Dr.Costas Sachpazis
 
İTÜ CAD and Reverse Engineering Workshop
İTÜ CAD and Reverse Engineering WorkshopİTÜ CAD and Reverse Engineering Workshop
İTÜ CAD and Reverse Engineering WorkshopEmre Günaydın
 
Event Management System Vb Net Project Report.pdf
Event Management System Vb Net  Project Report.pdfEvent Management System Vb Net  Project Report.pdf
Event Management System Vb Net Project Report.pdfKamal Acharya
 
Scaling in conventional MOSFET for constant electric field and constant voltage
Scaling in conventional MOSFET for constant electric field and constant voltageScaling in conventional MOSFET for constant electric field and constant voltage
Scaling in conventional MOSFET for constant electric field and constant voltageRCC Institute of Information Technology
 
Online resume builder management system project report.pdf
Online resume builder management system project report.pdfOnline resume builder management system project report.pdf
Online resume builder management system project report.pdfKamal Acharya
 

Recently uploaded (20)

Introduction to Casting Processes in Manufacturing
Introduction to Casting Processes in ManufacturingIntroduction to Casting Processes in Manufacturing
Introduction to Casting Processes in Manufacturing
 
Final project report on grocery store management system..pdf
Final project report on grocery store management system..pdfFinal project report on grocery store management system..pdf
Final project report on grocery store management system..pdf
 
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptxCFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptx
 
Digital Signal Processing Lecture notes n.pdf
Digital Signal Processing Lecture notes n.pdfDigital Signal Processing Lecture notes n.pdf
Digital Signal Processing Lecture notes n.pdf
 
ENERGY STORAGE DEVICES INTRODUCTION UNIT-I
ENERGY STORAGE DEVICES  INTRODUCTION UNIT-IENERGY STORAGE DEVICES  INTRODUCTION UNIT-I
ENERGY STORAGE DEVICES INTRODUCTION UNIT-I
 
The Benefits and Techniques of Trenchless Pipe Repair.pdf
The Benefits and Techniques of Trenchless Pipe Repair.pdfThe Benefits and Techniques of Trenchless Pipe Repair.pdf
The Benefits and Techniques of Trenchless Pipe Repair.pdf
 
Natalia Rutkowska - BIM School Course in Kraków
Natalia Rutkowska - BIM School Course in KrakówNatalia Rutkowska - BIM School Course in Kraków
Natalia Rutkowska - BIM School Course in Kraków
 
Fruit shop management system project report.pdf
Fruit shop management system project report.pdfFruit shop management system project report.pdf
Fruit shop management system project report.pdf
 
Laundry management system project report.pdf
Laundry management system project report.pdfLaundry management system project report.pdf
Laundry management system project report.pdf
 
Standard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - NeometrixStandard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - Neometrix
 
shape functions of 1D and 2 D rectangular elements.pptx
shape functions of 1D and 2 D rectangular elements.pptxshape functions of 1D and 2 D rectangular elements.pptx
shape functions of 1D and 2 D rectangular elements.pptx
 
Halogenation process of chemical process industries
Halogenation process of chemical process industriesHalogenation process of chemical process industries
Halogenation process of chemical process industries
 
Immunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary AttacksImmunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary Attacks
 
Water Industry Process Automation and Control Monthly - May 2024.pdf
Water Industry Process Automation and Control Monthly - May 2024.pdfWater Industry Process Automation and Control Monthly - May 2024.pdf
Water Industry Process Automation and Control Monthly - May 2024.pdf
 
Antenna efficency lecture course chapter 3.pdf
Antenna  efficency lecture course chapter 3.pdfAntenna  efficency lecture course chapter 3.pdf
Antenna efficency lecture course chapter 3.pdf
 
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
Sachpazis:Terzaghi Bearing Capacity Estimation in simple terms with Calculati...
 
İTÜ CAD and Reverse Engineering Workshop
İTÜ CAD and Reverse Engineering WorkshopİTÜ CAD and Reverse Engineering Workshop
İTÜ CAD and Reverse Engineering Workshop
 
Event Management System Vb Net Project Report.pdf
Event Management System Vb Net  Project Report.pdfEvent Management System Vb Net  Project Report.pdf
Event Management System Vb Net Project Report.pdf
 
Scaling in conventional MOSFET for constant electric field and constant voltage
Scaling in conventional MOSFET for constant electric field and constant voltageScaling in conventional MOSFET for constant electric field and constant voltage
Scaling in conventional MOSFET for constant electric field and constant voltage
 
Online resume builder management system project report.pdf
Online resume builder management system project report.pdfOnline resume builder management system project report.pdf
Online resume builder management system project report.pdf
 

Introduction to WordPress Custom Gutenberg Blocks

  • 1.
  • 2. What is Gutenberg Block? ● The Default editor of wordpress introduced in wordpress 5.0. ● Gutenberg Blocks are like building blocks for your website content. ● Imagine each block as a different piece of content you can add, such as text, images, gallery, videos, etc.., ● Gutenberg isn't just for typing text. It lets you add cool stuff like images, buttons, and even interactive elements.
  • 3.
  • 4. Types Of Gutenberg Blocks Static Blocks: Dynamic Blocks:
  • 5. Static Blocks Dynamic Blocks ● Definition: Static blocks are fixed content blocks that do not rely on external data or dynamic sources. They are typically used for simple and static content elements. ● Characteristics: ○ The content within static blocks is fixed and doesn't change dynamically. ○ They are easy to create and require minimal coding. ○ Suitable for content that doesn't rely on external APIs or data sources. ● Example: ○ A "Call to Action" block with a fixed message and a button. ○ A "Separator", “Heading”, “Paragraph” block to add empty space between content. ● Definition: Dynamic blocks are blocks that can fetch and display dynamic content from external sources or APIs. They can be more complex, allowing for real-time updates and interaction with external data. ● Characteristics: ○ Dynamic blocks can fetch data from various sources, such as APIs, databases, or external services. ○ They can update in real-time as the underlying data changes. ○ Dynamic blocks often require more extensive coding, including PHP and JavaScript. ● Example: ○ A "Latest Posts" block that dynamically fetches and displays the latest blog posts from the WordPress database. ○ A "Weather Forecast" block that connects to a weather API to display real-time weather information.
  • 6. Create a static gutenberg block. Now lets try to create a static gutenberg block in this session.