外掛標籤
開發者團隊
原文外掛簡介
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
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:
Clone the repository: git clone https://github.com/godevsltd/godevsblocks.git
Install Node.js dependencies: npm install
Build for production: npm run build
Build tool: @wordpress/scripts (webpack-based). Node.js 18+ and npm 9+ required.
延伸相關外掛
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
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
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
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 browser in GoDevs Blocks → Patterns admin page
All patterns available in the block editor pattern inserter
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
Support Forum
Source Code (GitHub)
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:
Install Node.js dependencies: npm install
Build for production: npm run build
