Skip to content

v2.2.0 — Catch up to Divi 5.6 + Performance + Diagnostics (May 27, 2026)

Choose a tag to compare

View all tags
@cjsimon2 cjsimon2 released this 27 May 09:55
· 11 commits to main since this release
v2.2.0
bddbb6a
This commit was signed with the committer’s verified signature.
cjsimon2 Casey
GPG key ID: EABDA1B773FCC236
Verified
Learn about vigilant mode.

Summary

The plugin's last knowledge refresh was v2.1.7 on April 13, 2026, targeting Divi 5.2. In the six weeks since, Elegant Themes shipped four Divi minor releases (5.3 → 5.6) — a sustained pace of substantial functional additions that the toolkit's knowledge base did not reflect.

v2.2.0 closes that gap and adds three pillars the plugin previously lacked: performance, diagnostics, and module-level CSS for the 5 new modules introduced in 5.6.

Theme: Catch up to Divi 5.6 + add Performance + Diagnostics.

What's new

divi5-performance skill (NEW)

Critical CSS strategy, Dynamic CSS pipeline, Inline Stylesheets, local font loading with size-adjust / ascent-override / descent-override for CLS prevention, lazy-loading background images, Aspect Ratio for image CLS, and a cache plugin compatibility matrix covering Perfmatters, WP Rocket, LiteSpeed, Autoptimize, WP-Optimize, Hummingbird, and W3 Total Cache.

Ships with:

  • examples/critical-css.css — hand-crafted ≤14KB above-the-fold template (font-face, CSS variables, Theme Builder header skeleton, hero section, primary CTA, CLS prevention)
  • examples/font-loading.css — WOFF2 @font-face with metric overrides calibrated to match system-ui fallback (eliminates CLS on font swap)
  • references/core-web-vitals.md — full LCP / INP / CLS reference with Divi-specific causes and fixes for each metric

divi5-performance agent (NEW)

Core Web Vitals auditor. Activates on performance keywords, Lighthouse/PSI output, slow-page reports, render-blocking flags, or cache-plugin conflicts. Returns a P0/P1/P2 prioritized fix list with file paths, estimated impact, and a fix order.

/divi5-toolkit:diagnose command (NEW)

Diagnostic dispatcher. Paste a symptom, error, file path, or "this isn't working" description; the router classifies it into one of 7 buckets (error message, CSS not applying, performance, accessibility, builder behavior, Divi 4→5 migration, plugin conflict) and hands off to the right specialist. Returns a structured response: SYMPTOM → ROOT CAUSE → WHY IT HAPPENS → FIX (with paste location) → VERIFY → RELATED → PREVENT, plus offered next actions.

3 new CSS examples in divi5-css-patterns/examples/

  • loop-builder.css — Loop Builder CSS Grid card layouts, masonry (with @supports fallback), product cards with hover overlay + sale badge, horizontal list, empty/loading states, accessible 44px pagination, reduced-motion fallback
  • forms.css — Divi 5.3 form module styling. :focus / :active / placeholder / label patterns, custom-styled checkboxes/radios that preserve native input focusability, error states, Contact Form 7 Styler integration, inline newsletter layout, Composable Settings hints
  • new-modules.css — Independent sections for each 5.6 module: Timeline (vertical + horizontal with scroll-snap), Breadcrumbs (separator + current-page), SVG (currentColor + stroke-only patterns), Table of Contents (sticky sidebar + smooth scroll + scroll-padding-top), Instagram Feed (responsive grid + hover overlay)

Knowledge base refresh

Target version bumped from Divi 5.2 → Divi 5.6. Both existing SKILL.md files (divi5-css-patterns, divi5-compatibility) now document:

Version Date Highlights
5.3 April 24, 2026 Pseudo-class editing modes (:checked / :focus / :active), Contact Form 7 Styler module, Nested Option Presets, harmonized form fields. 69 bug fixes.
5.4 — Sizing Variable Generator (fluid clamp() automation), Relative Colorscheme Generator (HSL-based color systems).
5.5 May 12, 2026 Aspect Ratio + Framing on all images (CLS prevention), Image Presets, SVG sanitization, composable settings for image option groups, AI Agent canvas tools. 58 bug fixes.
5.6 May 25, 2026 Five new modules (Timeline, Breadcrumbs, SVG, Table of Contents, Instagram Feed), Color Scale + Color Harmony Generators, decimal Section Divider, full CSS track values in Grid Auto Columns/Rows. 109 changes total.

The divi5-compatibility skill's Composable Settings Compatibility table now lists 5.3–5.5 builder-native equivalents — reach for pseudo-class tabs (5.3), Aspect Ratio (5.5), Framing (5.5), and Nested Presets (5.3) before custom CSS. A per-version Known Divi 5.x CSS Bug Fixes section spans 5.2 → 5.6 so /diagnose can answer "is my user on the version that fixed this?".

Template + docs updates

  • templates/divi5-toolkit.local.md — default divi_version bumped to "5.6", last_research to 2026-05-27
  • README.md — Commands table adds /diagnose, Agents table adds divi5-performance, Skills table adds divi5-performance, CSS Example Library adds 5 new entries, directory tree marks NEW v2.2.0 files
  • STATE.md — version, target Divi version, all counts (commands 6 → 7, agents 4 → 5, skills 2 → 3, CSS examples 6 → 12)
  • docs/usage.md — full entries for /diagnose, divi5-performance agent, divi5-performance skill, and 5 new CSS examples
  • docs/configuration.md — divi_version table expanded 5.0/5.1/5.2 → 5.0/5.1/5.2/5.3/5.4/5.5/5.6 with per-version implications
  • docs/workflows.md — 2 new workflows: "Audit Site Performance (Core Web Vitals)" (7-step guide from Lighthouse to field-data monitoring) and "Diagnose a Symptom" (4 steps showing /diagnose usage)

Verification

  • claude plugin validate . passes
  • 19 files changed, +2,737 / -70 lines net
  • Plugin tagged v2.2.0, commit bddbb6a

Installation

Per-project loading (recommended for active Divi work) — in your project's .claude/settings.local.json:

{
  "extraKnownMarketplaces": {
    "divi5-local": {
      "source": {
        "source": "directory",
        "path": "/absolute/path/to/Divi5-ToolKit"
      }
    }
  },
  "enabledPlugins": {
    "divi5-toolkit@divi5-local": true
  }
}

After restart, /divi5-toolkit: autocompletes all 7 commands. See Installation in the README for per-session and global options.

Sources used during research

The v2.2.0 knowledge refresh drew from:

🤖 Generated with Claude Code

Assets 2
Loading