Skip to content

Complete Gutenberg Blocks Demo

This page demonstrates all built-in WordPress Gutenberg blocks with proper max-width and spacing.

Heading Levels

Heading 2 – Section Title

Heading 3 – Subsection Title

Heading 4 – Minor Heading

Heading 5 – Small Heading
Heading 6 – Smallest Heading

Paragraphs

This is a standard paragraph block inside a Group. The Group block ensures proper max-width (1,680px) and vertical padding. All text content should be wrapped in Group blocks for consistent styling.

Multiple paragraphs maintain consistent spacing. Each paragraph block has top and bottom padding to ensure visual separation between content blocks.

Lists

  • Unordered list item one
  • Unordered list item two
  • Unordered list item three with a link
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three

Quotes

This is a quote block inside a Group. It’s used to highlight important quotes or testimonials.

Author Name

This is a pullquote block, typically styled prominently to draw attention.

Images and Galleries

Columns

Column 1 content inside Group block. This demonstrates proper column layout with consistent styling.

Column 2 content inside Group block. Both columns maintain max-width and padding.

Buttons

Primary Button
Secondary Button

Tables

Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

Code Blocks

function example() {
    console.log("Code block example");
    return true;
}

Spacer Block

Content appears after spacer with proper spacing.