GoDevs Blocks

GoDevs Blocks is a free WordPress block plugin that extends the Gutenberg editor with 36 production-ready blocks built on a modern CSS Custom Property design token system. Every block is responsive across 7 breakpoints, outputs clean semantic HTML, and ships with zero inline styles — all styling is compiled to a single per-page CSS file served as a static asset.

Core Blocks

• Box — Universal layout container with full flex and CSS grid support, link mode, animation classes, and custom HTML attributes
• Text — Rich text block for paragraphs, captions, labels, and dynamic content
• Heading — Semantic headings (h1–h6) with full typography control and dynamic content support
• Button — CTA button or anchor link with full styling and ARIA support
• Image — Responsive image with dynamic content source, link wrapping, and caption
• Grid — Powerful CSS grid layout system with responsive column control
• Query — Visual post query builder — filter by type, taxonomy, author, date, and more
• Query Loop — Loop template rendered inside the Query block
• Pagination — Standard, load-more, and infinite scroll pagination modes
• Icon — SVG icon block with stroke/fill control and size responsiveness
• Shape — Decorative SVG shape dividers for section transitions
• Separator — Styled horizontal rule with width, height, and colour control
• Spacer — Fixed-height vertical spacer with responsive height per breakpoint
• Tabs — ARIA-compliant tabbed content panels with keyboard navigation
• Accordion — Native <details>/<summary> accordion with FAQ schema.org markup support
• Query No Results — Customisable fallback content shown when a Query block returns zero posts

Design System Features

• Full CSS Custom Property design token system (--gb-* prefix)
• Responsive controls for every property (6 breakpoints: xs, sm, md, lg, xl, 2xl)
• Global color and typography presets managed in the GoDevs Blocks → Global Styles panel
• Theme.json integration — reads and writes to WordPress global styles color palette
• Dark mode support via CSS custom properties
• RTL language support with automatic CSS flip

Performance

• Zero frontend JavaScript for layout and text blocks
• Per-page CSS file caching — served as a static file from the uploads directory
• Delta CSS regeneration — only regenerates CSS for blocks that change
• Block-level JavaScript code splitting in the editor
• No jQuery dependency

Accessibility

• WCAG 2.1 AA compliant markup
• Keyboard navigation for all interactive blocks (Tabs: Arrow keys, Home, End)
• Proper ARIA roles and attributes (role="tablist", role="tab", role="tabpanel", etc.)
• Semantic HTML output — choose your own wrapper tag (div, section, article, aside…)
• FAQ block content ships with schema.org/FAQPage structured data

Dynamic Content

• 15 built-in dynamic content tags: post title, excerpt, date, featured image, author name, meta fields, site name, and more
• Conditional output based on context (single post, archive, query loop)
• Secure validation and escaping for every tag
• Extensible via goblocks_register_dynamic_tags hook

Pattern Library

• 41 built-in block patterns across 18 categories: Hero (4), Features (4), Social Proof (5), Pricing (2), Stats (3), CTA (4), FAQ (2), Blog (3), Cards (2), Portfolio (2), Services (1), Team (2), About (1), Video (1), Newsletter (2), Contact (3), Logos (2), Announcement (1)
• Pattern browser in GoDevs Blocks → Patterns admin page
• All patterns available in the block editor pattern inserter

Developer Friendly

• TypeScript throughout — strict mode, no any
• Zustand for editor state (no Redux boilerplate)
• Fully extensible via WordPress hooks and filters
• PSR-4 PHP, WordPress Coding Standards compliant
• PHPStan level 8 compliant
• REST API for settings, styles, queries, dynamic content, and patterns

Links

• Plugin Page
• Support Forum
• Source Code (GitHub)

Source Code & Build

The complete, human-readable source code for this plugin — including all TypeScript block source files, SCSS, and build configuration — is publicly available at:

https://github.com/godevsltd/godevsblocks

The build/ directory in the plugin ZIP contains compiled assets generated from the src/ directory. To regenerate them:

1. Clone the repository: git clone https://github.com/godevsltd/godevsblocks.git
2. Install Node.js dependencies: npm install
3. Build for production: npm run build

Build tool: @wordpress/scripts (webpack-based). Node.js 18+ and npm 9+ required.