Gutenberg Blocks in WordPress

1. Paragraph Block

Definition

The Paragraph Block is the default block used to write normal text in WordPress posts and pages.

Features

  • Write and edit text.
  • Change text alignment (Left, Center, Right, Justify).
  • Change text color and background color.
  • Adjust font size.
  • Add drop cap (large first letter).
  • Supports hyperlinks.

Uses

  • Writing articles
  • Blog posts
  • Website content
  • Descriptions

Example

Welcome to Geetanjali Group of Colleges.
We provide quality education in IT and Management.

2. Heading Block

Definition

The Heading Block is used to create headings and titles.

Heading Levels

  • H1
  • H2
  • H3
  • H4
  • H5
  • H6

Features

  • Different heading sizes
  • Alignment options
  • Color settings
  • HTML anchor support

Uses

  • Page Titles
  • Section Titles
  • Chapter Names

Example

WordPress Installation

3. Subheading

Definition

A Subheading is a smaller heading placed under the main heading. In Gutenberg, this is usually created using an H2, H3, or H4 Heading Block.

Uses

  • Divide content into sections
  • Improve readability
  • Organize articles

Example

Main Heading
How to Install WordPress

Subheading
Download XAMPP

4. Quote Block

Definition

The Quote Block is used to display quotations in a highlighted format.

Features

  • Large quotation marks
  • Citation (Author Name)
  • Different styles
  • Alignment options

Uses

  • Famous Quotes
  • Testimonials
  • Inspirational Messages

Example

"The best way to predict the future is to create it."

– Peter Drucker

5. Image Block

Definition

The Image Block inserts a single image into the page.

Image Sources

  • Media Library
  • Upload
  • Insert from URL

Features

  • Resize image
  • Crop image
  • Add Caption
  • Alt Text
  • Link Image
  • Rounded corners

Uses

  • Product Images
  • College Photos
  • Blog Images

Example

[College Building Image]
Caption:
Geetanjali Group of Colleges Campus

6. Cover Image Block

Definition

The Cover Block displays a large image with text placed on top of it.

Features

  • Background image
  • Overlay color
  • Overlay opacity
  • Fixed background
  • Full-width display

Uses

  • Website Banner
  • Homepage Hero Section
  • Event Advertisement

Example

[Background Image]

Welcome to
Geetanjali Group of Colleges

Apply Now

7. Gallery Block

Definition

The Gallery Block displays multiple images together.

Features

  • Multiple images
  • Number of columns
  • Captions
  • Image cropping
  • Lightbox support (plugin dependent)

Uses

  • Event Photos
  • Campus Gallery
  • Product Gallery

Example

Image 1   Image 2   Image 3

Image 4 Image 5 Image 6

8. Video Block

Definition

The Video Block embeds videos into WordPress pages.

Sources

  • Upload Video
  • Media Library
  • URL

Supported Formats

  • MP4
  • WebM
  • OGV

Features

  • Autoplay
  • Loop
  • Controls
  • Poster Image

Uses

  • Tutorials
  • College Introduction
  • Product Demonstration

9. Audio Block

Definition

The Audio Block adds audio files to WordPress.

Supported Formats

  • MP3
  • WAV
  • OGG

Features

  • Audio Player
  • Download Option
  • Playback Controls

Uses

  • Podcast
  • Music
  • Speeches
  • Lectures

10. Columns Block

Definition

The Columns Block divides content into multiple columns.

Available Layouts

  • 2 Columns
  • 3 Columns
  • 4 Columns
  • 5 Columns
  • 6 Columns

Features

  • Equal width
  • Custom width
  • Responsive layout

Uses

  • Service Section
  • Team Members
  • Feature Comparison

Example

Column 1       Column 2

Course Duration

BCA 3 Years

B.Sc IT 3 Years

11. Code Block

Definition

The Code Block displays programming code while preserving formatting.

Features

  • Monospaced font
  • Preserves indentation
  • Easy copy and paste

Uses

  • HTML
  • CSS
  • PHP
  • JavaScript
  • SQL

Example

<h1>Welcome</h1>
<p>Hello Students</p>

12. List Block

Definition

The List Block creates ordered and unordered lists.

Types

  • Bulleted List
  • Numbered List

Features

  • Nested Lists
  • Indentation
  • Reordering

Example (Bulleted)

• WordPress
• PHP
• MySQL
• HTML

Example (Numbered)

1. Install XAMPP
2. Download WordPress
3. Create Database
4. Install WordPress

13. Button Block

Definition

The Button Block creates clickable buttons.

Features

  • Custom Text
  • Hyperlink
  • Background Color
  • Border Radius
  • Alignment
  • Multiple Buttons

Uses

  • Register Now
  • Apply Online
  • Contact Us
  • Download PDF

Example

[ Register Now ]

[ Contact Us ]

14. Embeds Block

Definition

The Embed Block inserts content from external websites without uploading it.

Supported Websites

  • YouTube
  • Vimeo
  • Twitter/X
  • Facebook
  • Instagram
  • Spotify
  • SoundCloud
  • TED
  • WordPress
  • Pinterest

Features

  • Automatic embedding
  • Responsive display
  • Interactive content

Uses

  • Educational Videos
  • Social Media Posts
  • Music
  • Podcasts

Example

YouTube Video

How to Install WordPress

(Embedded Video Player)

Advantages of Gutenberg Blocks

  • Easy drag-and-drop content creation.
  • No coding knowledge required.
  • Reusable blocks save time.
  • Mobile-friendly and responsive.
  • Rich media support (images, videos, audio).
  • Flexible page layouts with columns and cover blocks.
  • Faster content editing compared to the Classic Editor.

Summary Table

BlockPurposeCommon Uses
ParagraphWrite textArticles, blogs, descriptions
HeadingTitles and headingsPage titles, section headings
SubheadingOrganize sectionsContent structure
QuoteDisplay quotationsTestimonials, inspirational quotes
ImageAdd a single imagePhotos, logos, products
Cover ImageBanner with text overlayHero sections, event banners
GalleryDisplay multiple imagesPhoto galleries, portfolios
VideoEmbed or upload videosTutorials, presentations
AudioPlay audio filesPodcasts, lectures
ColumnsMulti-column layoutsServices, features, comparisons
CodeDisplay source codeHTML, CSS, PHP, SQL examples
ListCreate bullet or numbered listsSteps, features, checklists
ButtonCall-to-action linksRegister, Contact, Download
EmbedsInsert external mediaYouTube, social media, podcasts

By admin

Leave a Reply

Your email address will not be published. Required fields are marked *