DESIGN MODULE — TOOLS
WordPress Site Editor Plugin — Product Grids, Theme Manager, and Block Patterns
LuperIQ Site Editor gives you a complete visual toolkit for WordPress: WooCommerce product grids with responsive layouts, a full theme and color palette manager with CSS variable injection, and 12 ready-made Gutenberg block patterns. One module replaces three or four single-purpose plugins and loads only on the pages that need it.
The Problem: Too Many Plugins for Basic Site Design Tasks
Building a polished WordPress site with WooCommerce typically requires a patchwork of separate plugins: one for product grid layouts, another for managing theme colors and fonts, a third for Gutenberg block patterns, and possibly a fourth for custom CSS injection. Each plugin loads its own stylesheets and scripts on every page, adds its own settings panel, and operates independently of the others. When one plugin updates, it can break the styling another plugin depends on. Your site slows down under the weight of redundant assets, and your admin sidebar fills up with disconnected settings screens.
LuperIQ Site Editor consolidates product grids, theme palette management, custom CSS, and Gutenberg block patterns into a single module with three admin tabs. Assets load conditionally — product grid scripts only appear on WooCommerce pages, theme CSS variables are injected once into the document head, and block pattern registration happens during the Gutenberg editor initialization. There are no redundant file loads and no conflicting style sources. You get a unified design system where your color palette propagates automatically from the Theme Manager into your product grids, block patterns, and custom CSS.
Everything You Get With the Site Editor Module
Product Grid Manager
WooCommerce Integration
Displays your WooCommerce products in responsive grid layouts. Supports 2 to 6 columns with automatic reflow for smaller screens. Includes a modal system for product quick-view without leaving the page. The entire grid manager spans 967 lines of dedicated functionality.
Theme Color Palette
6 Named Color Roles
Define your site palette with six named slots: primary, accent, dark, success, warning, and info. Colors are injected as CSS custom properties into the document head, so every element on your site can reference them. Change a color once and it propagates everywhere.
Custom CSS Editor
Live Stylesheet Injection
Write custom CSS rules that are saved to the database and injected alongside your theme variables. No need for a separate custom CSS plugin or child theme edits. Your rules integrate with the palette variables so you can reference --lq-primary and similar tokens.
Gutenberg Block Patterns
12 Pre-Built Patterns
Twelve ready-made block patterns covering common page sections: hero areas, feature grids, testimonial layouts, and content columns. All patterns use the section, row, and column system for consistent structure.
Responsive Column System
2 to 6 Columns
The section/row/column architecture supports layouts from two columns up to six columns. Column counts adjust automatically on mobile breakpoints. This system is shared across product grids and block patterns for visual consistency.
Import and Export
Theme Configuration Portability
Export your entire theme configuration — color palette, custom CSS, and settings — as a portable file. Import it on another site to replicate your design system across multiple WordPress installations.
Conditional Asset Loading
WooCommerce Page Detection
Product grid scripts and styles load only on WooCommerce pages. The module detects the current page context and skips enqueueing assets when they are not needed, reducing page weight on non-shop pages.
REST API Endpoints
Product and Configuration Data
A dedicated REST API endpoint serves product listing data for the grid manager. Additional configuration endpoints let external tools read your current theme settings programmatically.
Performance Mode Options
Standard, Optimized, Maximum
Three performance tiers control how aggressively the module caches and defers asset loading. Standard mode is compatible with all configurations. Optimized mode enables the module cache system. Maximum mode adds aggressive deferral for sites where speed scores matter most.
Who This Module Is Built For
Any WordPress site owner who wants product grids, a design system, and reusable block patterns without installing three separate plugins.
WooCommerce Store Owners
- Product grid layouts display your catalog in responsive 2-to-6 column grids with quick-view modals, so customers can browse without constant page loads.
- The theme color palette applies automatically to product grids and checkout pages, keeping your store visually consistent without manual CSS tweaks.
- Conditional asset loading means product grid scripts only run on WooCommerce pages, so your blog posts and landing pages stay fast.
- Import and export lets you replicate your store design across staging, production, and any additional WordPress installations.
Agencies and Freelance Developers
- The import/export system lets you build a design configuration once and deploy it to every client site in seconds, eliminating repetitive setup.
- REST API endpoints expose product data and theme configuration, so headless builds and external dashboards can read your settings without screen scraping.
- Three performance modes give you control over caching aggressiveness per site, allowing you to match optimization level to hosting capability.
- The section/row/column system in block patterns provides a consistent layout architecture that junior developers can use without building from scratch.
Content Creators and Bloggers
- Twelve pre-built Gutenberg block patterns let you assemble professional page layouts without touching code or hiring a designer.
- The color palette manager ensures your brand colors are consistent across every page, post, and block without copying hex codes manually.
- Custom CSS editor gives you a safe place to add style overrides that persist through theme updates and do not require a child theme.
- Responsive column layouts from 2 to 6 columns adjust automatically on mobile, so your content looks correct on every screen size.
How the Theme Manager and CSS Variable System Works
The Theme Manager provides six named color roles: primary, accent, dark, success, warning, and info. Each role maps to a CSS custom property that is injected into the document head on every page load. When you set your primary color to #2563EB, the module outputs --lq-primary: #2563EB as an inline style on the root element. Every block pattern, product grid, and custom CSS rule that references this variable picks up the change instantly.
The custom CSS editor extends this system by giving you a database-backed stylesheet that is injected alongside the color variables. You can write rules that reference the palette tokens — for example, setting a custom button background to var(--lq-accent). When you change the accent color in the Theme Manager, your custom button updates automatically without editing the CSS. The combination of named palette roles and a token-aware CSS editor creates a genuine design system rather than a collection of disconnected color pickers.
Import and export functionality covers the entire theme configuration: all six color values, your custom CSS, and your performance mode setting. Export produces a portable file you can import on another WordPress installation. This is particularly useful for agencies that maintain a brand standard across multiple client sites, or for store owners who want identical styling on their staging and production environments.
Product Grids: Architecture and Conditional Loading
The Product Grid Manager is the largest component of the module at 967 lines. It integrates directly with WooCommerce to pull product data through a dedicated REST API endpoint, renders responsive grid layouts supporting 2 to 6 columns, and includes a modal system for product quick-view. The grid layout automatically reflows on smaller screens: a 4-column grid on desktop becomes 2 columns on tablet and a single column on mobile. All of this is controlled from the Product Grid Manager admin tab without writing code.
Critically, the product grid assets — JavaScript and CSS — only load on WooCommerce pages. The module checks the current page context during the WordPress enqueue phase and skips registration entirely on non-shop pages. This means your blog posts, landing pages, about page, and contact page carry zero additional weight from the product grid system. On a typical WordPress site where shop pages represent a fraction of total pages, this conditional loading makes a measurable difference in page speed scores across the site.
Frequently Asked Questions
Does the Site Editor module require WooCommerce?
No. The Theme Manager, custom CSS editor, and Gutenberg block patterns work on any WordPress site. The Product Grid Manager feature requires WooCommerce to be installed and active because it pulls product data from the WooCommerce catalog. If WooCommerce is not detected, the product grid features are simply hidden from the admin.
How many block patterns are included?
The module ships with 12 pre-built Gutenberg block patterns. These cover common page sections including hero areas, feature grids, testimonial layouts, and multi-column content sections. All patterns use the section/row/column system and inherit your theme color palette automatically.
Can I use the color palette with my existing theme?
Yes. The module injects CSS custom properties into the document head, so they are available to any theme. Your theme does not need to be modified to use the palette colors — but if you reference the CSS variables in your theme CSS or the custom CSS editor, the colors will update automatically when you change them in the Theme Manager.
What are the three performance modes?
Standard mode runs with default WordPress enqueue behavior and no additional caching. Optimized mode enables the module cache system, which caches rendered output and configuration data. Maximum mode adds aggressive script deferral on top of caching. Choose based on your hosting environment and speed requirements.
Does the product grid slow down non-shop pages?
No. Product grid JavaScript and CSS are only enqueued on WooCommerce pages. The module detects the page context during the enqueue phase and skips registration entirely on pages that do not display products. Blog posts, landing pages, and other non-shop content carry zero overhead from the grid system.
Can I export my theme settings and import them on another site?
Yes. The import/export feature covers all six color palette values, your custom CSS rules, and your performance mode setting. Export produces a portable configuration file. Import on the destination site and your entire design system is replicated.
Is the REST API available for headless WordPress setups?
Yes. The module registers a product listing endpoint and configuration endpoints through the WordPress REST API. These endpoints follow standard WordPress REST conventions, including nonce-based authentication and permission callbacks. External applications, headless frontends, or custom dashboards can consume the data programmatically.
Product Grids, Theme Colors, and Block Patterns — One Module Instead of Three Plugins
LuperIQ Site Editor consolidates your WooCommerce product grid layouts, color palette management, custom CSS, and 12 Gutenberg block patterns into a single module with conditional loading. Replace your plugin patchwork with a unified design system.