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.

Examples


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.

Examples


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.


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.


Examples


Buttons block

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


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.


July 2024
M T W T F S S
1234567
891011121314
15161718192021
22232425262728
293031  

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.


RSS block

Display entries from any RSS or Atom feed.


RSS Error: A feed could not be found at `https://lightspeedwp.agency/`; the status code is `200` and content-type is `text/html; charset=UTF-8`

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.


alignments Automated Blocks Monthly Recurring Tester Test tag widgets

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

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

    These are comments relating to the WordPress blocks page.

  2. Ash Shaw Avatar

    This is a reply

Leave a Reply

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

Examples


Query Loop block

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


  • Key Points About Block Themes Reasons to Use LSX Design & Target Audience Target Audience…


    Post content example below:

    Key Points About Block Themes

    1. Accessibility for Non-Technical Users: Block themes allow users who may not be familiar with coding to customize and build their entire website using the WordPress editor, making site design more accessible to everyone.
    2. Customization within the Editor: Unlike traditional themes, block themes enable users to customize elements like headers and footers directly within the site editor, providing a real-time, visual interface that eliminates the need to modify code.
    3. Transition to a New Paradigm: The shift from classic themes to block themes represents a significant change in how WordPress sites are built, emphasizing a more hands-on, visually oriented design process that aligns with modern web design tools.
    4. Evolving User Interface (UI): The WordPress UI is evolving to accommodate block themes, aiming to improve the user experience and make the customization process more intuitive, although it’s acknowledged that this transition has its challenges and is still in progress.
    5. Continued Development and Stability: The ongoing development of block themes and the WordPress editor is geared towards increasing stability and functionality, with a focus on making these tools reliable for professional use.

    Reasons to Use LSX Design & Target Audience

    • Comprehensive Style Guide and Color Palette: LSX Design’s extensive style guide and color palette make it ideal for businesses and developers looking to ensure brand consistency while having the flexibility to be creative within the WordPress site editor.
    • Customization and Efficiency: With its design system built on Figma, LSX Design allows for rapid customization of sites, making it a great choice for web developers and agencies that need to quickly adapt designs to client needs.
    • Advanced Integration with WordPress and WooCommerce: For businesses relying on e-commerce, LSX Design offers deep integration with WooCommerce, making it a solid choice for online retailers.
    • Pattern Library: The theme’s rich library of pre-designed patterns allows users to quickly build beautiful pages, making it suitable for freelancers and creative professionals who want to focus more on content and less on layout design.
    • Block-Based Approach: For those new to WordPress or transitioning from classic themes, LSX Design provides a user-friendly, block-based approach that simplifies site building.

    Target Audience and Why They Should Use LSX Design

    • Web Developers and Agencies: The theme’s ability to be duplicated and updated with project-specific details makes it highly efficient for professionals managing multiple client projects.
    • E-commerce Businesses: The deep integration with WooCommerce ensures that online stores can be easily set up and managed, providing a seamless shopping experience for customers.
    • Freelancers and Creative Professionals: The extensive pattern library and customizable design system allow for quick site setup, enabling creatives to focus on delivering high-quality content and designs without getting bogged down in technical details.
    • WordPress Beginners: The block-based design and comprehensive style guide make it easier for newcomers to build and customize their sites without needing advanced coding skills.

    LSX Design caters to a broad audience by providing tools and features that streamline the website design process, enhance creativity, and simplify the management of online content and commerce.

  • Figma file enabling creativity & consistency when designing for the file WordPress site editor &…


    Post content example below:

    Figma file enabling creativity & consistency when designing for the file WordPress site editor & WooCommerce store blocks

    At LightSpeed, we’re excited to announce the release of our LSX Design System on Figma, a tool that promises to revolutionize the way you design WordPress sites. This system is not just a toolkit—it’s a game-changer for web designers, developers, and content creators aiming to craft visually stunning and highly functional websites.

    A Comprehensive Style Guide for Streamlined Design

    The LSX Design System features a meticulously crafted style guide accessible directly within Figma. This guide is designed to streamline your design process, ensuring consistency and efficiency from start to finish. It includes detailed specifications for typography, colors, buttons, inputs, and more, enabling you to maintain a cohesive look and feel across your projects.

    Harness the Power of a Full Spectrum Color Palette

    One of the standout features of our design system is the expanded color palette, which now registers over 100 shades, ranging from subtle hues to vibrant tones. Each color is graded from 100 to 900, offering a broad spectrum that adds depth and versatility to your design toolkit. This rich palette allows you to experiment with gradients, overlays, and shadows, pushing the boundaries of traditional design to create unique and compelling digital experiences.

    Figma Variables: Simplifying Design Changes

    Our integration of Figma variables brings unprecedented ease to updating styles across your projects. When you adjust a variable—be it a color, font, or spacing—it cascades throughout the entire project. This means that you can make significant changes to your design with just a few clicks, ensuring that updates are uniformly applied without manual adjustments to each element.

    Designed for Adaptability and Speed

    The LSX Design System has been built with adaptability in mind. It’s set up to be duplicated and customized with project-specific details and design variables, making it incredibly versatile for different types of web projects. Whether you’re building a brand-centric e-commerce site or a minimalist blog, our design system provides the foundation for rapid development and creative expression.

    Integrating with WordPress and WooCommerce

    LightSpeed continues to focus on deep integration with WordPress and WooCommerce, ensuring that our design system aligns perfectly with the needs of WordPress developers. The naming conventions used in the theme’s code have been meticulously linked to the style guide and variables within Figma, facilitating a seamless transition from design to development.

    Open Source and Community-Driven

    True to our open-source mission, the LSX Design System is freely available on Figma.com, allowing it to be accessed, shared, and improved by the global design and development community. We encourage you to explore, customize, and contribute to the system, helping us evolve and refine it further.

    Get Started with the LSX Design System

    We invite you to explore the LSX Design System today on Figma. Start by integrating it into your workflow to see how it can enhance your design efficiency and creativity. Download the system, tailor it to your needs, and begin transforming the way you design WordPress and WooCommerce sites.

    Download the LSX Design System on Figma

    Figma.com Community File Changelog

    ### Added:

    • Merged the design system files (Style Guide, WordPress, and WooCommerce) into a single file for simplified library – configuration.
    • Completely redesigned the style guide from scratch.
    • Introduced variables for colors and fonts to enhance flexibility and consistency.
    • Created new components including WordPress blocks and smaller atomic components.
    • Built larger patterns of components, including full-page layouts.
    • Expanded the color palette to over 100 colors using variables.
    • Added icons, including a selection of Heroicons.
    • Updated placeholders to use new colors.
    • Added small SVG graphics for use as repeated background graphics.

    ### Changed:

    • Merged style guide and WooCommerce files into the WordPress file, resulting in a new structure for all elements.
    • Transitioned from using styles to variables for colors and fonts.

    ### Removed:

    • Deprecated the old style guide.

    ### Demo Links:

Footnotes

  1. This is an example of a footnote ↩︎