DesignStudio Flow WP Registry grade A. No security issues foundWP RegistryNo security issues foundOpen the reportA

Build your WordPress Page with Artisanal Content Blocks.

Building or changing a block or form? Read BLOCK-BUILDING-README.md first. It is the mandatory human and AI/LLM workflow, including the security gates required before implementation.

✨ Overview

DesignStudio Flow is a lightweight page builder focused on clarity and control. It uses a curated block library instead of blank‑canvas editing, so pages stay consistent, responsive, and easy to manage.

✅ Philosophy

• Pre‑coded blocks only (no blank canvas)
• Limited but powerful customization
• Layouts stay consistent and hard to break
• Theme‑friendly header/footer rendering
• WooCommerce‑ready components

🧱 Block Library

🧩 Content Blocks

🛒 Ecommerce Blocks

📣 Marketing Blocks

🎛️ Editor & Theme Settings

🎨 Theme Defaults

• Primary Color: #2C5F5D
• Defaults sync across blocks unless the user overrides a block color

📲 Viewport Preview

• Desktop: 100% width
• Tablet: 768px
• Mobile: 375px

🧩 Customization Panels

• Content: Text, images, buttons, toggles
• Style: Spacing, background, text colors, independent button background + button text colors, and eyebrow text + eyebrow line colors
• Products: Source, filters, manual picks

Every button exposes its own text color separate from its background, and eyebrow labels expose separate colors for the text and the accent line/dot. Per‑block colors override the theme; leaving a color blank inherits the theme default.

🔠 Content Sizing & Typography (Settings → Content Sizing)

Global typography defaults applied across all blocks (editor preview + published page):

• Base font sizes for p, h1, h2, h3, h4
• Container max width for the main page content (per‑page override still available in the Theme panel)
• Heading/body font families and a modular type scale (Settings → Typography)
• Eyebrow labels are standardized to a single consistent size across every block

🧩 Block Capabilities

• Inline text editing on canvas
• Media Library image replacement
• Repeater fields (testimonials, features, brands)
• CTA actions: link or modal (center or right drawer)
• Smooth slider animations and pagination

📧 Mail / SMTP Delivery

Routes all WordPress email (form notifications, system mail, etc.) through a chosen transport. Configure it under DesignStudio Flow → Tools → Mail / SMTP.

Supported mailers

Features

• One‑click OAuth for Gmail and Outlook — register an OAuth app once (Client ID + Secret, redirect URI shown in the UI), then connect the mailbox with a single click. Refresh tokens are stored and access tokens minted/refreshed automatically.
• From email / name with an optional "force from" override.
• Send test email with a full SMTP connection log (access tokens redacted) for fast troubleshooting.
• Email log — recent sends (recipient, subject, mailer, status, error) stored in a dedicated table, auto‑pruned after 30 days (daily cron + opportunistic cleanup). Toggleable; only metadata is stored, never the message body.
• Admin warnings when a mailer is selected but not fully configured, or when a connected mailbox needs re‑authorization.
• Credentials encrypted at rest (see Security).

⚡ Performance

Flow pages are tuned for Core Web Vitals. On Flow‑rendered pages the plugin:

• Loads the large bundle stylesheet non‑render‑blocking on landing pages (with inlined critical loader CSS), and loads Google Fonts asynchronously.
• Module‑preloads the frontend JS bundle so Vue mounts sooner, and preconnects to the Google Fonts origins.
• Preloads the hero/LCP image (fetchpriority="high") and adds loading="lazy" / decoding="async" to rendered images.
• Dequeues WordPress defaults a self‑contained Flow page doesn't need — emoji script, the oEmbed host script, and the Gutenberg/global block stylesheets (each filterable).

🧱 Architecture

designstudio-flow/
├── designstudio-flow.php
├── includes/
│   ├── class-dsf-editor.php
│   ├── class-dsf-blocks.php
│   ├── class-dsf-frontend.php
│   ├── class-dsf-mail-smtp.php        # Mail / SMTP transports + OAuth + email log
│   ├── class-dsf-mail-oauth-provider.php
│   ├── class-dsf-crypto.php           # At-rest encryption for stored secrets
│   ├── class-dsf-import-export.php    # Tools page (import/export, redirects, mail)
│   ├── class-dsf-redirects.php
│   └── ...
├── templates/
│   ├── flow-page.php
│   └── flow-page-fullwidth.php
├── assets/
│   ├── css/
│   └── js/
├── src/
│   ├── components/
│   │   ├── blocks/
│   │   └── common/
│   ├── frontend/
│   └── styles/

🧱 Creating a New Block (Full Workflow)

Blocks render using the same Vue component for editor + frontend. Keep block CSS inside the Vue file so both views stay in sync.

✅ Steps

1. Duplicate src/components/blocks/StarterBlockPreview.vue and rename it (example: MyBlockPreview.vue).
2. Update the template + settings usage, and keep block CSS in `