Gutenberg Blocks are the building blocks of content in WordPress 5.0's new editor. There are two types of blocks - static blocks contain fixed content and require minimal coding, while dynamic blocks fetch external data and can update in real time. Static blocks are suitable for simple elements like headings and paragraphs, while dynamic blocks integrate features like latest blog posts or weather updates by connecting to APIs. The document then provides examples and characteristics of each block type and guides the reader in creating their first static Gutenberg block.
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.
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.