Oxygen Builder vs Gutenberg: Design and Customization

Gutenberg includes styling tools for block-level customization, such as theme.json for global styles. This file allows users to set fonts, colors, and spacing site-wide. Additional plugins further extend its design capabilities without adding complexity.

Here’s a sample theme.json file snippet demonstrating Gutenberg’s basic global styling settings. This file allows you to set fonts, colors, and spacing across your site.

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#3490dc", "name": "Primary" },
        { "slug": "secondary", "color": "#ff5733", "name": "Secondary" }
      ]
    },
    "typography": {
      "fontSize": {
        "small": "14px",
        "medium": "18px",
        "large": "24px"
      },
      "fontFamily": "Arial, sans-serif"
    },
    "spacing": {
      "padding": "20px",
      "margin": "10px"
    }
  }
}

Key Features

• Block-Level Styling: Control individual blocks’ appearance, like colors and typography.
• Global Styling via theme.json: Simplifies consistent design for large sites.
• Custom Block Patterns: Allows users to save and reuse layout patterns, streamlining design across pages​

Oxygen provides detailed styling options with tools like class-based styling and a design library of pre-designed elements. Users can manage global colors and typography to maintain brand consistency across complex layouts.

Key Features:

• Class-Based Styling: Style multiple elements quickly using shared classes.
• Design Libraries: Access pre-designed sliders, galleries, and other elements.
• Advanced Control for Branding: Global settings for color and typography create cohesive, brand-specific layouts.

Full-Site Editing vs Theme Replacement

With Full-Site Editing (FSE), Gutenberg enables users to modify global site elements like headers, footers, and templates through block-based themes.

FSE Highlights

• Unified Site Management: Edit headers, footers, and templates directly in the editor.
• Theme-Dependent: Requires block-based themes.
  

Oxygen bypasses WordPress themes entirely, giving users a blank canvas to build every element manually. This approach provides total control over site design but may require additional setup for plugins that rely on theme-based integration.