القائمة
Build layouts using GenerateBlocks V2 elements for WordPress
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/wpgaurav/WordPress-skills --skill generateblocks-layoutsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Author Bricks Builder (WordPress) layouts, templates, and full designs as paste-ready JSON. Use for any Bricks task — sections, pages, headers/footers, query loops, ACF/dynamic data, faceted filters, conditions, interactions/animations, popups, WooCommerce templates, custom elements, or hooks. Verified against Bricks 2.3.6 source.
Use when pushing content, docs, posts, changelogs, or other updates to Fluent Community spaces through the Fluent Community REST API.
Generate or edit design for WordPress Gutenberg blocks using Greenshift/GreenLight plugin. Convert any data to wordpress blocks or convert greenshift blocks back to html + css + js. Use when user asks to create design with Greenshift or Greenlight blocks for wordpress site, convert anything to wordpress blocks or build charts in content. Triggers on keywords: wordpress, gutenberg, greenshift, greenlight, convert to wordpress, convert greenshift blocks to vanilla html, build chart.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | generateblocks-layouts |
| version | 2.0.0 |
| description | Build layouts using GenerateBlocks V2 elements for WordPress |
| author | Gaurav Tiwari |
| trigger | ["GenerateBlocks","GB blocks","GB layouts","HTML to GenerateBlocks","convert to GB","WordPress block layout","landing page section"] |
| tags | ["wordpress","generateblocks","layouts","blocks"] |
| references | ["references/block-types.md","references/css-patterns.md","references/svg-icons.md","references/responsive.md","references/troubleshooting.md"] |
| examples | ["examples/basic/","examples/compound/","examples/layouts/","examples/svg/"] |
Build professional WordPress layouts using GenerateBlocks V2's four core blocks.
ALWAYS output generated blocks to a file, never inline in the chat.
{section-name}.html (e.g., hero-section.html, services-grid.html)Why file output?
GenerateBlocks V2 uses four block types:
| Block | Class Pattern | Use For |
|---|---|---|
generateblocks/element | .gb-element-{id} | Containers (div, section, article, header, nav, footer) |
generateblocks/text | .gb-text-{id} | Text content (h1-h6, p, span, a, button) |
generateblocks/media | .gb-media-{id} | Images (static only, no dynamic features) |
generateblocks/shape | .gb-shape-{id} | SVG icons and decorative shapes |
For elements not available in GenerateBlocks or requiring advanced media features, use WordPress Core Blocks:
| Content Type | Use Core Block | Why |
|---|---|---|
| Images with captions | core/image | Built-in caption support |
| Image galleries | core/gallery | Lightbox, columns, captions |
| Videos | core/video | Native video player, controls |
| Embedded media | core/embed |
| YouTube, Vimeo, Twitter, etc. |
| Audio files | core/audio | Native audio player |
| File downloads | core/file | Download links with filename |
| Tables | core/table | Structured data tables |
| Lists | core/list | Semantic ul/ol with .list class |
| Quotes | core/quote | Blockquote with citation |
| Code blocks | core/code | Preformatted code display |
| Separators | core/separator | Horizontal rules |
| Buttons (grouped) | core/buttons | Multiple button layouts |
| Columns (simple) | core/columns | Quick equal-width layouts |
| Cover images | core/cover | Background images with overlays |
| Dynamic post content | core/post-* | Post title, excerpt, featured image, etc. |
| Query loops | core/query | Dynamic content from posts |
| Emojis | core/paragraph | GenerateBlocks doesn't render emojis properly |
Rule of thumb: Use GenerateBlocks for layout structure and custom styling. Use Core Blocks for specialized content types and media with built-in functionality.
<!-- wp:generateblocks/{type} {json_attributes} -->
<{tag} class="gb-{type} gb-{type}-{uniqueId}">
{content}
</{tag}>
<!-- /wp:generateblocks/{type} -->
Element blocks add "className":"gb-element-card001 gb-element" to attributes. HTML class order: gb-element-{id} gb-element:
<!-- wp:generateblocks/element {"uniqueId":"card001","tagName":"div","className":"gb-element-card001 gb-element",...} -->
<div class="gb-element-card001 gb-element">...</div>
<!-- /wp:generateblocks/element -->
Every block needs:
uniqueId - Unique identifier (format: {section}{number} like hero001, card023)tagName - HTML element typestyles - CSS properties as JSON object (camelCase). Supports responsive keys like "@media (max-width:1024px)":{...}css - Generated CSS string (kebab-case, minified, alphabetically sorted)htmlAttributes - Plain object of attribute key-value pairs (for links, IDs, data attributes)Optional:
className - Additional CSS classes. Must include the uniqueId class: e.g., "gb-element-card001 gb-element" for element blocks, "gb-element-hero001 gb-element alignfull" for full-width sectionsglobalClasses - Array of global CSS class slugs (e.g., ["lede"])align - Block alignment ("full" for full-width)htmlAttributes MUST be a plain object, NOT an array:
// ✅ CORRECT - Plain object
"htmlAttributes": {"href": "https://example.com/page/", "target": "_blank", "id": "section-id"}
// ❌ WRONG - Array of objects (causes block editor recovery errors)
"htmlAttributes": [
{"attribute": "href", "value": "/contact/"},
{"attribute": "target", "value": "_blank"}
]
Use full absolute URLs, not relative paths. The block editor saves links as absolute URLs; relative paths get converted on save, causing a mismatch that triggers block recovery.
// ✅ CORRECT
"htmlAttributes": {"href": "https://yoursite.com/services/web-development/"}
// ❌ WRONG
"htmlAttributes": {"href": "/services/web-development/"}
<a> vs Element <a> Links| Block Type | htmlAttributes for href | href in HTML | Use Case |
|---|---|---|---|
generateblocks/text with tagName: "a" | No - plugin manages link internally | No | Plain text buttons/links (no inner blocks) |
generateblocks/element with tagName: "a" | Yes - {"href":"https://example.com/"} | Yes | Containers wrapping inner blocks (cards, icon buttons) |
Rule: Text <a> blocks are leaf blocks - the link URL is managed by the editor UI. Element <a> blocks are containers - they need explicit htmlAttributes for the href.
Always use both styles AND css attributes:
{
"uniqueId": "card001",
"tagName": "div",
"styles": {
"backgroundColor": "#ffffff",
"display": "flex",
"padding": "2rem"
},
"css": ".gb-element-card001{background-color:#ffffff;display:flex;padding:2rem}"
}
CSS rules:
css attribute contains only base styles - no hover states, no transitions (the plugin generates those from the styles object)css: pseudo-elements (::before/::after), media queries, animations, parent hover targeting children/* Base styles only (alphabetically sorted) + pseudo-elements + media queries */
.gb-element-card001{background-color:#ffffff;border-radius:1rem;display:flex;padding:2rem;position:relative}.gb-element-card001::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:#c0392b;transform:scaleX(0)}@media(max-width:768px){.gb-element-card001{padding:1rem}}
Parent hover targeting children is written in the child's css:
.gb-element-card001:hover .gb-text-title001{color:#c0392b}
Desktop-first approach with standard breakpoints:
| Breakpoint | Width | Use For |
|---|---|---|
| Desktop | 1025px+ | Default styles (no media query) |
| Tablet | 768px - 1024px | @media(max-width:1024px) |
| Mobile | < 768px | @media(max-width:768px) |
Two approaches for responsive styles:
styles object (preferred for simple overrides):{
"styles": {
"display": "grid",
"gridTemplateColumns": "minmax(0, 1fr) minmax(0, 1fr)",
"gap": "4rem",
"@media (max-width:1024px)": {
"gridTemplateColumns": "minmax(0, 1fr)"
}
}
}
css string (for complex responsive rules):.gb-element-hero001{display:grid;gap:4rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}@media (max-width:1024px){.gb-element-hero001{grid-template-columns:minmax(0,1fr)}}
Common responsive patterns:
grid-template-columns:minmax(0,1fr) minmax(0,1fr) → grid-template-columns:minmax(0,1fr)padding:6rem 0 → padding:4rem 0 → padding:3rem 0clamp() for fluid typographyflex-direction:row → flex-direction:columngap:4rem → gap:2remtext-align:left → text-align:centerFor full-width sections with contained inner content:
<!-- wp:generateblocks/element {"uniqueId":"hero001","tagName":"section","styles":{...},"css":"...","align":"full","className":"gb-element-hero001 gb-element alignfull"} -->
<section class="gb-element-hero001 gb-element alignfull">
<!-- wp:generateblocks/element {"uniqueId":"hero002","tagName":"div","styles":{"maxWidth":"var(\u002d\u002dgb-container-width)","marginLeft":"auto","marginRight":"auto"},"css":".gb-element-hero002{margin-left:auto;margin-right:auto;max-width:var(\u002d\u002dgb-container-width)}","className":"gb-element-hero002 gb-element"} -->
<div class="gb-element-hero002 gb-element">
<!-- Inner content -->
</div>
<!-- /wp:generateblocks/element -->
</section>
<!-- /wp:generateblocks/element -->
Key:
"align":"full" + "className":"gb-element-hero001 gb-element alignfull"maxWidth: "var(\u002d\u002dgb-container-width)" (unicode-escaped --gb-container-width)Format: {section}{number}{letter}
hero, serv, card, feat, blog)a, b, c)Examples: hero001, serv023a, card014, feat007b
For detailed documentation, see:
See /examples/ folder for copy-paste ready blocks:
⛔ NEVER add HTML comments other than WordPress block markers.
The ONLY allowed comments are WordPress block delimiters:
<!-- wp:generateblocks/element {...} --> and <!-- /wp:generateblocks/element --><!-- wp:generateblocks/text {...} --> and <!-- /wp:generateblocks/text --><!-- wp:generateblocks/media {...} --> and <!-- /wp:generateblocks/media --><!-- wp:generateblocks/shape {...} --> and <!-- /wp:generateblocks/shape --><!-- wp:image {...} --> and <!-- /wp:image --><!-- wp:video {...} --> and <!-- /wp:video --><!-- wp:embed {...} --> and <!-- /wp:embed --><!-- wp:{namespace}/{block} --> formatWRONG - These will break the block editor:
<!-- Hero Section -->
<!-- Card container -->
<!-- Button wrapper -->
<!-- This is a heading -->
<!-- Content goes here -->
CORRECT - Only block delimiters:
<!-- wp:generateblocks/element {"uniqueId":"hero001",...,"className":"gb-element"} -->
<section class="gb-element-hero001 gb-element">
<!-- wp:generateblocks/text {"uniqueId":"hero002",...} -->
<h1 class="gb-text gb-text-hero002">Heading</h1>
<!-- /wp:generateblocks/text -->
</section>
<!-- /wp:generateblocks/element -->
Any extra HTML comments will break the WordPress block editor and cause parsing errors. This is non-negotiable.
css attributecss (the plugin generates those from the styles object). Exceptions: pseudo-elements, media queries, animations, parent hover targeting childrencss string must be alphabetically sortedstyles object AND css string<a> = no htmlAttributes for href - The link URL is managed by the editor UI internally<a> = use htmlAttributes for href - Container links need explicit {"href":"https://full-url.com/"}generateblocks/element (tagName a) wrapping generateblocks/text + generateblocks/shape blocks. Plain text buttons use generateblocks/textstyles.svg for SVG-specific properties (fill, stroke, width, height) OR simple styles with width/height/color and inline SVG attributes. Both patterns workcore/list with .list class - Always use the native WordPress list block with className: "list" and customize styling as needed--gb-container-width for inner containers - Set inner container width using the CSS variable; add align: "full" to parent section for full-width layouts{"href":"https://example.com/"} NOT array format [{"attribute":"href","value":"..."}]"gb-element-{uniqueId} gb-element", never just "gb-element"https://yoursite.com/services/... not /services/... — relative paths trigger block recovery on saveclamp(3rem,8vw,5rem) not clamp(3rem, 8vw, 5rem) — the block editor minifies, mismatch triggers recoverystroke-linejoin, stroke-linecap, stroke-width, stroke, fill, viewBox, height, width<!-- /wp:generateblocks/shape --></div> not separate lines<a> — Element <a> blocks with only text content (no inner blocks) trigger recovery errors. Use generateblocks/text with tagName: "a" for plain text links. Only use generateblocks/element with tagName: "a" when wrapping inner blocks (cards, icon buttons)When no CSS values are specified, infer styles based on context:
#0073e6#22222217px, line-height 1.742px, H2: 35px, H3: 29px60pxvar(--gb-container-width)15px 30px#c0392b#0a0a0a, Muted: #5c5c5c#ffffff, Light: #f5f5f3900, tight letter-spacing4rem1rem, Button radius: 2remtranslateY(-6px)0 20px 60px rgba(0,0,0,0.15)For large sections (50+ blocks), break into chunks:
See Troubleshooting for detailed guidance on complex layouts.