Home / Blocks / WordPress Blocks

WordPress Style Book

Explore Our WooCommerce Style Guide

See the the use of WordPress blocks within the LSX Design Theme. This guide provides an in-depth look at how to utilize various blocks for content creation, from basic text and image layouts to complex column and group structures. Ideal for both beginners and seasoned developers, our style book equips you with the tools to craft engaging and responsive pages that resonate with your audience.

Text

Documentation

Examples

View Demo

Heading block

Introduce new sections and organise content to help visitors (and search engines) understand the structure of your content.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

Paragraph block

Start with the basic building block of all narrative.

This is a default paragraph block with default settings.

This is a paragraph block with a footnote1.

List block

Create a bulleted or numbered list.

  • This is an unordered list block
  • This is an unordered list block
  1. This is an ordered list block
  2. This is an ordered list block
  1. This is an ordered list block
  2. This is an ordered list block
  1. This is an ordered list block
  2. This is an ordered list block

Quote block

Give quoted text visual emphasis.

The Quote Block gives quoted text visual emphasis.

Ash Shaw
CEO, LightSpeed

Pull Quote block

Give quoted text visual emphasis.

Give special visual emphasis to a quote from your text.

Ash Shaw

Code block

Display code snippets that respect your spacing and tabs.

<?php
// Theme setup function
function mytheme_setup() {
    add_theme_support('post-thumbnails'); // Support for featured images

    register_nav_menus(array(
        'primary' => __('Primary Menu', 'mytheme')
    )); // Custom navigation menu
}

// Hook the setup function into WordPress's 'after_setup_theme' action
add_action('after_setup_theme', 'mytheme_setup');
?>

Details block

Hide and show additional content.

Default details block

WordPress themes are essential for styling and structuring a website. Themes control the layout, colors, fonts, and other visual elements, creating a cohesive appearance.

Customization Options:

  • Themes Directory: Choose from thousands of free and premium themes.
  • CSS Styling: Customize fonts, colors, and spacing.
  • Theme Functions: Themes can include features such as menus, widgets, and page templates.

Expand your knowledge on how themes can transform your WordPress site.

Default details block open by default

WordPress themes are essential for styling and structuring a website. Themes control the layout, colors, fonts, and other visual elements, creating a cohesive appearance.

Customization Options:

  • Themes Directory: Choose from thousands of free and premium themes.
  • CSS Styling: Customize fonts, colors, and spacing.
  • Theme Functions: Themes can include features such as menus, widgets, and page templates.

Expand your knowledge on how themes can transform your WordPress site.

Details block with arrow

WordPress themes are essential for styling and structuring a website. Themes control the layout, colors, fonts, and other visual elements, creating a cohesive appearance.

Customization Options:

  • Themes Directory: Choose from thousands of free and premium themes.
  • CSS Styling: Customize fonts, colors, and spacing.
  • Theme Functions: Themes can include features such as menus, widgets, and page templates.

Expand your knowledge on how themes can transform your WordPress site.

Another details block with arrow

WordPress themes are essential for styling and structuring a website. Themes control the layout, colors, fonts, and other visual elements, creating a cohesive appearance.

Customization Options:

  • Themes Directory: Choose from thousands of free and premium themes.
  • CSS Styling: Customize fonts, colors, and spacing.
  • Theme Functions: Themes can include features such as menus, widgets, and page templates.

Expand your knowledge on how themes can transform your WordPress site.

Preformatted block

Add text that respects your spacing and tabs, and also allows styling.

This is a Preformatted Block in WordPress.

  - This block retains formatting, such as spaces and line breaks.
  - It's useful for displaying code snippets, poetry, or any text needing specific formatting.
  - You can customize its style through CSS, changing font, color, or background.

Preformatted text is valuable when precision matters!

Pull Quote block

Give special visual emphasis to a quote from your text.

Pull Quotes give special visual emphasis to a quote from your text.

Ash Shaw

Table block

Create structured content in rows and columns to display information.

Header Label: Column 1Header Label: Column 2Header Label: Column 3
ValueValueValue
ValueValueValue
ValueValueValue
ValueValueValue
Footer LabelFooter LabelFooter Label
This is a table caption

Verse block

Insert poetry. Use special spacing formats. Or quote song lyrics.

WordPress,
a platform of creation,
where themes weave together,
content like a tapestry.

Media

Documentation

Media Blocks

Examples

View Demo

Image block

Display multiple images in a rich gallery.

Display multiple images in a rich gallery.

Audio

Embed a simple audio player.

Cover block

Add an image or video with a text overlay.

Cover block text

File block

Introduce new sections and organise content to help visitors (and search engines) understand the structure of your content.

LSX-Design-SystemDownload

Media & Text block

Set media and words side–by–side for a richer layout.

WordPress themes are essential for styling and structuring a website. Themes control the layout, colors, fonts, and other visual elements, creating a cohesive appearance.

Customization Options:

  • Themes Directory: Choose from thousands of free and premium themes.
  • CSS Styling: Customize fonts, colors, and spacing.
  • Theme Functions: Themes can include features such as menus, widgets, and page templates.

Video block

Embed a video from your media library or upload a new one.

Design

Documentation

Examples

Buttons block

Prompt visitors to take action with a group of button-style links.

View Demo
Default
Outline

Columns block

Display content in multiple columns, with blocks added to each column. A single column within a columns block.

Column

Paragraph text

  • First bullet
  • Second bullet
  • Third bullet

Column

Paragraph text

  • First bullet
  • Second bullet
  • Third bullet

Column

Paragraph text

  • First bullet
  • Second bullet
  • Third bullet

Group block

Gather blocks in a container.

Paragraph in a group

Paragraph in a group

Stack block

Arrange blocks vertically.

Paragraph in a stack

Paragraph in a stack

Row block

Arrange blocks horizontally.

Paragraph in a row

Paragraph in a row

Separator block

Create a break between ideas or sections with a horizontal separator.

Widgets

Note

Purpose

Add description.

Characteristics

  • Bullet
  • Bullet

Usage

  • Bullet
  • Bullet

Documentation

Widget blocks

Examples

Archives block

Embed a video from your media library or upload a new one.

Calendar block

A calendar of your site’s posts.

June 2026
M T W T F S S
1234567
891011121314
15161718192021
22232425262728
2930  

Category list block

Embed a video from your media library or upload a new one.

Custom HTML block

Embed a video from your media library or upload a new one.

Latest comments block

Embed a video from your media library or upload a new one.

Latest posts block

Embed a video from your media library or upload a new one.

Page list block

Embed a video from your media library or upload a new one.

RSS block

Display entries from any RSS or Atom feed.

Search block

Help visitors find your content.

Shortcode block

Embed a video from your media library or upload a new one.

Social Icons block

Display icons linking to your social media profiles or sites.

Tag cloud block

A cloud of your most used tags.

Blocks Tester Test tag

Theme

Note

Purpose

Add description.

Characteristics

  • Bullet
  • Bullet

Usage

  • Bullet
  • Bullet

Documentation

Theme blocks

Examples

Navigation block

A collection of blocks that allow visitors to get around your site. Add a submenu to your navigation. Add a page, link, or another item to your navigation.

Site Logo block

Display an image to represent this site. Update this block and the changes apply everywhere.

Site Title block

Displays the name of this site. Update the block, and the changes apply everywhere it’s used. This will also appear in the browser title bar and in search results.

LSX Design Demo

Site Tagline block

Describe in a few words what the site is about. The tagline can be used in search results or when sharing on social networks even if it’s not displayed in the theme design.

A WordPress Block Theme with accompanying Figma Design System.

Login/out block

Show login form, login & logout links.

Comments

Documentation

Note

Purpose

Add description.

Characteristics

  • Bullet
  • Bullet

Usage

  • Bullet
  • Bullet

Example

Comments block

An advanced block that allows displaying post comments using different visual configurations.

  • Displays a title with the number of comments.
  • Contains the block elements used to display a comment, like the title, date, author, avatar and more.
  • Displays a paginated navigation to next/previous set of comments, when applicable.
  • Display a post’s comments form.

2 responses to “WordPress Blocks”

  1. Ash Shaw Avatar
    Ash Shaw

    These are comments relating to the WordPress blocks page.

    Reply
  2. Ash Shaw Avatar
    Ash Shaw

    This is a reply

    Reply

Leave a Reply

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

Query Loop

Documentation

Note

Purpose

Add description.

Characteristics

  • Bullet
  • Bullet

Usage

  • Bullet
  • Bullet

Examples

Query Loop block

An advanced block that allows displaying post types based on different query parameters and visual configurations.

  • Categories:

    Gutenberg: Classic Block

    by

    Ash Shaw

    — on

    Headings Header one Header two Header three Header four Header five Header six Blockquotes Single…

    Post content example below:

    Headings

    Header one

    Header two

    Header three

    Header four

    Header five
    Header six

    Blockquotes

    Single line blockquote:

    Stay hungry. Stay foolish.

    Multi line blockquote with a cite reference:

    People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.

    Steve Jobs – Apple Worldwide Developers’ Conference, 1997

    Do. Or do not. There is no try.

    Yoda

    Tables

    Employee Salary
    John Doe $1 Because that’s all Steve Jobs needed for a salary.
    Jane Doe $100K For all the blogging she does.
    Fred Bloggs $100M Pictures are worth a thousand words, right? So Jane x 1,000.
    Jane Bloggs $100B With hair like that?! Enough said…

    Definition Lists

    Definition List Title
    Definition list division.
    Startup
    A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
    #dowork
    Coined by Rob Dyrdek and his personal body guard Christopher “Big Black” Boykins, “Do Work” works as a self motivator, to motivating your friends.
    Do It Live
    I’ll let Bill O’Reilly will explain this one.

    Unordered Lists (Nested)

    • List item one
      • List item one
        • List item one
        • List item two
        • List item three
        • List item four
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four

    Ordered List (Nested)

    1. List item one
      1. List item one
        1. List item one
        2. List item two
        3. List item three
        4. List item four
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four

    HTML Tags

    These supported tags come from the WordPress.com code FAQ.

    Address Tag

    1 Infinite Loop
    Cupertino, CA 95014
    United States

    Anchor Tag (aka. Link)

    This is an example of a link.

    Abbreviation Tag

    The abbreviation srsly stands for “seriously”.

    Acronym Tag (deprecated in HTML5)

    The acronym ftw stands for “for the win”.

    Big Tag (deprecated in HTML5)

    These tests are a big deal, but this tag is no longer supported in HTML5.

    Cite Tag

    “Code is poetry.” —Automattic

    Code Tag

    You will learn later on in these tests that word-wrap: break-word; will be your best friend.

    Delete Tag

    This tag will let you strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead).

    Emphasize Tag

    The emphasize tag should italicize text.

    Insert Tag

    This tag should denote inserted text.

    Keyboard Tag

    This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

    Preformatted Tag

    This tag styles large blocks of code.

    .post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
	and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

    Quote Tag

    Developers, developers, developers… –Steve Ballmer

    Strike Tag (deprecated in HTML5)

    This tag shows strike-through text

    Strong Tag

    This tag shows bold text.

    Subscript Tag

    Getting our science styling on with H2O, which should push the “2” down.

    Superscript Tag

    Still sticking with science and Isaac Newton’s E = MC2, which should lift the 2 up.

    Teletype Tag (deprecated in HTML5)

    This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

    Variable Tag

    This allows you to denote variables.

    Tags: ,

    This is the author’s byline, which could be as long or short at it needs to be.

    Ash Shaw

  • Categories:

    Gutenberg: Widget Blocks

    by

    Ash Shaw

    — on

    Archives Widget Categories Latest Posts Latest Comments YouTube Shortcode

    Post content example below:

    Archives Widget

    Categories

    Latest Posts

    Latest Comments

    YouTube Shortcode

    [youtube https://www.youtube.com/watch?v=ssfHW5lwFZg]

    Tags: ,

    This is the author’s byline, which could be as long or short at it needs to be.

    Ash Shaw

Footnotes

  1. This is an example of a footnote ↩︎