DesignSetGo 2.0 Release

DesignSetGo 2.0 is here. Three new blocks, two new extensions, 150+ ready-to-use patterns, a major performance overhaul, two tech debt sprints, a CI/CD rebuild, and 30 merged pull requests in two weeks. This is our biggest release yet.

What’s new in 2.0

Comparison Table block

Product comparisons, pricing tiers, feature matrices — the Comparison Table block handles all of it. Build tables with 2-6 dynamic columns, use checkmarks, X marks, or custom text in cells, highlight a featured column, and add CTA buttons. On mobile, tables scroll horizontally or stack vertically — your choice.

Timeline block

Tell a story in sequence. The Timeline block supports vertical and horizontal orientations, alternating left/right layouts, customizable markers (circle, square, diamond), scroll-triggered animations, and optional links on each entry. Perfect for company histories, project milestones, process flows, or event schedules.

Advanced Heading block

Standard heading blocks give you one style per heading. Advanced Heading gives you as many as you need. Create a single H1-H6 element with independent heading segments — each segment gets its own font style, weight, size, and color. Build headings like “Build faster with WordPress” where every word can look different, all within one semantic heading element. No wrapper divs, no accessibility compromises.

The toolbar gives you quick access to font family, font weight, and text transform controls right where you’re editing — no hunting through the sidebar for basic typography changes.

Grid Mobile Order extension

The zigzag layout problem is solved. When you alternate image-left/text-right and text-left/image-right rows in a grid, mobile stacking puts things in the wrong order. Grid Mobile Order lets you reorder grid items on mobile without touching the desktop layout or changing the HTML structure. Just set the order you want per breakpoint.

SVG Patterns extension

Add visual texture to any section or group with 25+ repeatable SVG background patterns. Choose from simple, geometric, organic, decorative, architectural, and technical categories. Customize the color, opacity, and scale. Everything renders as pure CSS — zero JavaScript on the frontend, zero performance cost.

150+ patterns and 12 homepage templates

We went from 74 patterns to 159. The bulk of the new additions came from extracting individual sections out of our 12 homepage templates into reusable, standalone patterns (#189). Every homepage template — SaaS, agency, restaurant, real estate, fitness, non-profit, events, education, portfolio, and more — contributed hero sections, feature grids, testimonial sliders, CTAs, pricing tables, team layouts, FAQs, galleries, and contact forms that you can now use independently.

The pattern categories break down like this:

• Hero (12) — one per industry template
• Features (10) — numbered services, benefit cards, flip card grids
• Testimonials (8) — centered sliders, star ratings, client grids
• CTA (11) — newsletter signups, event registration, donation forms
• Content (19) — stats bars, brand trust logos, product demos, impact stories
• Team (5) — minimal dark, instructor profiles, speaker showcases
• Pricing (4) — event tickets, membership tiers, SaaS plans
• FAQ (3) — split-image, professional, SaaS layouts
• Gallery (4) — portfolio projects, property showcases
• Contact (2) — consultation forms

Insert a pattern, swap the content, and you’re done. No design skills required.

Shape dividers for sections

Sections can now have decorative shape dividers on the top and bottom edges. Pick from 24 shapes — waves, curves, triangles, peaks, clouds, zigzag, torn paper — and customize the color, height, width, and direction. A small detail that makes a big visual difference between “blocks on a page” and “designed website.”

Frontend draft preview

Administrators can now browse the live frontend and see draft content across all pages. A floating banner lets you toggle between preview and live views. Edit in the block editor, then check how everything looks on the actual site before publishing — with real theme styles, real navigation, and real layout context.

Icon Button gets a proper link experience

We replaced the old text field + toggle approach for Icon Button links with WordPress’s native LinkControl component (#211, #217). Now you get URL search with autocomplete, “open in new tab” built in, and automatic rel="noopener noreferrer" for external links. It matches how the core Button block works, which means less cognitive overhead when switching between the two.

The link control also moved from the sidebar to the inline toolbar, so you can set or change a link without breaking your editing flow.

Under the hood: Performance

Code splitting and lazy loading (#202)

This was one of the bigger architectural changes in 2.0. Previously, all extension editor controls and admin pages loaded upfront in a single bundle. Now they’re dynamically imported — background video controls, animation panels, clickable group settings, custom CSS editors, and all three admin pages (Dashboard, Blocks & Extensions, Settings) load on demand with Suspense boundaries and loading spinners.

The result: a smaller initial bundle and a faster editor load, especially on sites that use only a subset of the available extensions.

Animation system overhaul (#198)

The animation frontend got a significant rewrite:

• Shared IntersectionObserver instances: Instead of creating one observer per animated element, elements with the same scroll offset now share a single observer. On a page with 20 animated elements, that’s potentially 20 observers reduced to 2-3.
• WeakMap for element state: Animation state per element is stored in a WeakMap instead of custom properties, which means automatic garbage collection when elements are removed from the DOM.
• Reduced observer thresholds: Dropped from 11 threshold values to 3, cutting the callback frequency without affecting visual behavior.
• Smart default handling: The PHP renderer now only outputs data-dsgo-* attributes that differ from defaults. If you’re using the default animation (fade in, 0.6s, no delay), the HTML is cleaner.
• Reduced motion: All animations respect prefers-reduced-motion. If a user has motion reduction enabled in their OS settings, animations are automatically disabled. No opt-in required.

Pattern loading optimization

Patterns are now cached and registered only in the editor context. Frontend page loads skip pattern registration entirely, and the editor caches pattern content to avoid re-reading PHP files on every request.

Under the hood: Tech debt sprints

We ran two focused tech debt sprints before the 2.0 release, addressing all 3 critical and 9 high-priority items from our internal debt inventory.

Sprint 1 — Performance and shared utilities (#201)

Performance fixes:

• The map block’s render filter was attached to render_block (fires for every block on the page). Now it uses render_block_designsetgo/map and only fires for map blocks.
• Block style registration was creating N separate WP_Theme_JSON_Data objects via N filter closures. Now it batches them into a single callback.
• Settings::get_settings() gained a static cache with invalidation on save, eliminating redundant get_option() calls.

Code quality:

• Extracted convertPresetToCSSVar() from 4 duplicate locations (row/edit, row/save, grid/edit, grid/save) into a shared utility.
• Created an abstract Configure_Form_Field base class that 12 form field configurators now extend, eliminating ~300 lines of repeated boilerplate.
• Standardized error handling across 14 block inserters.
• Removed dead code from the icon injector (legacy migration branches that were no longer needed).

Infrastructure:

• Updated GitHub Actions to v4, Node.js 18 to 20 (18 reached EOL), added PHP 8.3 to the CI matrix, and started tracking composer.lock.

Sprint 2 — Decompose God objects (#204)

Two classes had grown too large:

• Block_Inserter (the Abilities API inserter): All 11 form field HTML generation methods plus 3 helpers were extracted into a new Form_Field_Html_Generator class. ~530 lines removed from the original.
• Form_Handler (form submission processing): Security concerns — honeypot detection, rate limiting, Turnstile verification, and IP detection with CIDR proxy support — were extracted into a new Form_Security class. ~270 lines removed.

We also found and removed a duplicate form-textarea block directory that was causing “Block already registered” console warnings.

Net result: -372 lines across the two sprints, with cleaner boundaries between concerns.

Under the hood: CI/CD rebuild (#210)

The CI pipeline was rebuilt from scratch to be faster and smarter:

• Build once, test many: A single build job runs first and uploads artifacts. All downstream jobs (JS tests, PHP tests, E2E tests, WordPress compatibility) download the pre-built artifacts instead of rebuilding.
• Parallel testing: JS linting/tests, PHP linting (PHPCS + PHPStan across PHP 8.0/8.1/8.2), and E2E tests all run in parallel after the build completes.
• Smart matrix strategy: Pull requests test only boundary PHP/WordPress version pairs. Pushes to main get the full compatibility matrix.
• Separated concerns: Each job has a single responsibility — easier to understand, faster to debug when something fails.

Under the hood: AI Abilities API testing (#186)

DesignSetGo’s Abilities API (which lets AI agents discover and use blocks programmatically) gained 59 integration tests:

• 22 smoke tests covering discovery (list abilities, filter by category), block indexing (depth-first document order), block catalog (DSG-only results, summary vs. detail), configurators (update by index/name, style objects, shape dividers), and inserters (add child blocks, verify serialize_blocks() round-trip integrity).
• 37 security/validation tests covering color injection attacks (var(--x, <script>), expression() — all rejected), block name validation, out-of-bounds targeting, permission checks (subscribers blocked from write operations), recursive XSS sanitization at 3 nesting levels, and edge cases like empty posts and freeform blocks.

The API itself also got REST method annotations (GET for info abilities, DELETE for destructive ones) and AI agent guidance metadata (readonly, destructive, idempotent flags plus natural language instructions strings).

The draft mode ampersand bug (#219)

This one’s worth telling because it’s the kind of bug that hides in plain sight.

Publishing a draft was corrupting any block containing an ampersand. “Tom & Jerry” became “Tom u0026amp; Jerry.” The root cause: WordPress’s wp_update_post() and wp_insert_post() expect slashed data (yes, really — it’s a WordPress legacy convention), but we were passing unslashed content straight from get_post(). The fix was wrapping the content in wp_slash() before passing it to the update functions.

But there was a second layer. Our sanitize_block_content() function was running content through wp_kses(), which was stripping block comment delimiters (<!-- wp:namespace/block -->) from the HTML. And for users with the unfiltered_html capability (administrators and editors), we were applying kses filtering that WordPress itself would skip. The fix: check capabilities first and skip kses for users who have unfiltered_html, matching WordPress’s default behavior.

Two lines of actual code change. Two weeks of “why are ampersands broken?”

Bug fixes worth mentioning

Beyond the ampersand fix:

• Pill, Icon Button, Icon, and Modal Trigger blocks no longer float beside content in Group blocks
• Grid and Row blocks go edge-to-edge with full-width alignment outside Section blocks
• Sticky header no longer overrides custom button colors in non-navigation areas — CSS selectors were refined to target only navigation elements (#213)
• Background images with URL query parameters render correctly on the frontend
• Modal trigger button padding is now consistent with WordPress buttons; link-style triggers maintain compact styling on mobile (#216)
• Card block badge and overlay color controls now appear correctly in the sidebar — was caused by duplicate clientId suffixes in ColorGradientSettingsDropdown (#215)
• Text alignment works in sections with content justification enabled (#193)
• Buttons and pills no longer stretch vertically in grid layout contexts (#192)
• Icon block vertical alignment and SVG rendering fixed in editor (#194)
• Row block no longer overflows when padding or border is applied inside constrained containers (#196)
• Block inserter selector updated for WordPress 6.8+ strict-mode compatibility (#197, #205)
• 4 new icons added: dumbbell, fire, layers, refresh (#200)

Internationalization

All translation strings updated across 9 languages (German, Spanish, French, Italian, Japanese, Dutch, Portuguese, Russian, Chinese) to cover the new blocks, extensions, patterns, and UI elements added in 2.0 (#218).

By the numbers

• 52 blocks (up from 48)
• 16 universal extensions (up from 14)
• 159 patterns (up from 74)
• 12 homepage templates
• 24 shape divider styles
• 25+ SVG background patterns
• 30 pull requests merged in 2 weeks
• 59 new integration tests for the Abilities API
• 1,099 JS unit tests passing
• 9 languages with full translation coverage
• 0 jQuery dependencies
• 0 npm vulnerabilities

Upgrade now

DesignSetGo 2.0 is available now on WordPress.org. Update from your WordPress dashboard or download the latest version. All existing blocks and content are fully compatible — no migration needed. You may need to click the fix it button in the editor on some blocks but frontend should remain the same.

If you’re new to DesignSetGo: it’s a free WordPress plugin that gives you page builder power using native blocks. Everything works in the standard block editor. No separate interface, no learning curve, no lock-in.

---

DesignSetGo 2.0 requires WordPress 6.7+ and PHP 8.0+.