name: greenshift-blocks description: Generate WordPress Gutenberg blocks using Greenshift/GreenLight plugin. Use when user asks to create WordPress sections, blocks, layouts, hero sections, galleries, or any Gutenberg element. Triggers on keywords: wordpress, gutenberg, greenshift, section, block, layout, hero, gallery, columns, element.

Greenshift Block Generator

Purpose

Generate production-ready WordPress Gutenberg blocks using Greenshift/GreenLight Element block system. All output is HTML with JSON parameters in block comments - ready to paste directly into WordPress Gutenberg code editor.

Documentation Structure

Detailed documentation is split into modular files in the docs/ directory:

File	Topic
`docs/00-index.md`	Navigation index
`docs/01-core-structure.md`	Block format, JSON parameters, content types, styleAttributes
`docs/02-attributes.md`	HTML attributes, links, images, forms, icons
`docs/03-layouts.md`	Sections, columns, flexbox configurations
`docs/04-styling-advanced.md`	Local classes (dynamicGClasses), gradients
`docs/05-animations.md`	AOS animations, CSS keyframes, scroll animations
`docs/06-slider.md`	Swiper slider block configuration
`docs/07-dynamic-content.md`	Dynamic text, query grids, placeholders
`docs/08-variations.md`	Accordion, tabs, counter, countdown, etc.
`docs/09-css-variables.md`	All CSS variables (fonts, spacing, shadows, etc.)
`docs/10-scripts.md`	Custom JavaScript and GSAP integration

Read relevant docs files when you need detailed information on specific topics.

Quick Reference

Core Block Structure

Every Greenshift element follows this pattern:

<!-- wp:greenshift-blocks/element {JSON Parameters} -->
<html_tag class="optional classes" ...attributes>
  <!-- Inner content -->
</html_tag>
<!-- /wp:greenshift-blocks/element -->

Critical Rules

Block IDs: Unique id starting with gsbp- + 7 alphanumeric chars (e.g., gsbp-b3c761b). localId must be identical to id.
Content Types (type parameter):
- "text": Text-only blocks - requires textContent with duplicated text
- "inner": Container blocks - wrap plain text in <span> element blocks
- "no": Empty/spacer elements
- "chart": ApexCharts
Styling (styleAttributes):
- Never use inline style="..." attributes
- Properties use camelCase (e.g., backgroundColor, paddingTop)
- Values are arrays for responsive: ["desktop", "tablet", "mobile_landscape", "mobile_portrait"]
- Single value ["10px"] applies to all breakpoints
- Pseudo-states: backgroundColor_hover, color_focus
- If styleAttributes exists, add localId to HTML class attribute
HTML Tags: Default is div. Prefer tag: "a" over tag: "button" for buttons (except forms).
Images: Always loading="lazy". Use https://placehold.co/WIDTHxHEIGHT. When using originalWidth and originalHeight in JSON, you MUST also add matching width and height HTML attributes to the <img> tag.
Links: linkNewWindow: true = target="_blank" + auto rel="noopener"

See docs/01-core-structure.md and docs/02-attributes.md for full details.

SVG Icons Encoding

SVG content inside the JSON icon.icon.svg parameter MUST use Unicode escape sequences, not raw HTML or escaped quotes.

Character Encoding Table

Character	Escape Sequence
`<`	`\u003c`
`>`	`\u003e`
`"`	`\u0022`

Example

WRONG:

"icon":{"icon":{"svg":"<svg viewBox=\"0 0 24 24\"><path d=\"M8 12l2 2\"/></svg>"},...}

CORRECT:

"icon":{"icon":{"svg":"\u003csvg viewBox=\u00220 0 24 24\u0022\u003e\u003cpath d=\u0022M8 12l2 2\u0022/\u003e\u003c/svg\u003e"},...}

Card Design Pattern: Inset Rounded Images

When creating cards with images that have rounded corners INSIDE the card (with visible margin/padding around them):

Structure

Card Wrapper (white bg, border-radius: 15px, overflow: hidden)
├── Image Container (padding: 8px top/left/right, 0px bottom)
│   └── Image (border-radius: 10px on ALL 4 corners, object-fit: cover)
└── Footer/Label Area (padding for content)

Key Points

Card wrapper: overflow: hidden + larger border-radius (e.g., 15px)
Image container: padding on 3 sides, paddingBottom: 0px (no gap to footer)
Image itself: SMALLER border-radius than card (e.g., 10px) on ALL 4 corners
This creates the "inset" look where white card background shows as margin around image

Image styleAttributes for Inset Cards

"styleAttributes": {
  "width": ["100%"],
  "aspectRatio": ["16/10"],
  "objectFit": ["cover"],
  "borderTopLeftRadius": ["var(--wp--custom--border-radius--small, 10px)"],
  "borderTopRightRadius": ["var(--wp--custom--border-radius--small, 10px)"],
  "borderBottomLeftRadius": ["var(--wp--custom--border-radius--small, 10px)"],
  "borderBottomRightRadius": ["var(--wp--custom--border-radius--small, 10px)"],
  "borderRadiusLink_Extra": true
}

Common CSS Variables

Font Sizes

var(--wp--preset--font-size--mini, 11px)
var(--wp--preset--font-size--xs, 0.85rem)
var(--wp--preset--font-size--s, 1rem)
var(--wp--preset--font-size--m, 1.35rem)
var(--wp--preset--font-size--l, 1.55rem)
var(--wp--preset--font-size--xl, clamp(1.6rem, 2.75vw, 1.9rem))
var(--wp--preset--font-size--grand, clamp(2.2rem, 4vw, 2.8rem))
var(--wp--preset--font-size--giga, clamp(3rem, 5vw, 4.5rem))
var(--wp--preset--font-size--giant, clamp(3.2rem, 6.2vw, 6.5rem))

Spacing

var(--wp--preset--spacing--40, 1rem)
var(--wp--preset--spacing--50, 1.5rem)
var(--wp--preset--spacing--60, 2.25rem)
var(--wp--preset--spacing--70, 3.38rem)
var(--wp--preset--spacing--80, 5.06rem)

Border Radius

var(--wp--custom--border-radius--mini, 5px)
var(--wp--custom--border-radius--small, 10px)
var(--wp--custom--border-radius--medium, 15px)
var(--wp--custom--border-radius--large, 20px)

Shadows & Transitions

var(--wp--preset--shadow--soft, 0px 15px 30px 0px rgba(119, 123, 146, 0.1))
var(--wp--preset--shadow--elegant, 0px 5px 23px 0px rgba(188, 207, 219, 0.35))
var(--wp--custom--transition--ease, all 0.5s ease)
var(--wp--custom--transition--smooth, all 1s cubic-bezier(0.66,0,0.34,1))

See docs/09-css-variables.md for complete list.

Common Patterns

Full-Width Section Wrapper

<!-- wp:greenshift-blocks/element {"id":"gsbp-XXXXXXX","tag":"section","type":"inner","localId":"gsbp-XXXXXXX","align":"full","styleAttributes":{"display":["flex"],"justifyContent":["center"],"flexDirection":["column"],"alignItems":["center"],"paddingRight":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002dside, min(3vw, 20px))"],"paddingLeft":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002dside, min(3vw, 20px))"],"paddingTop":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d80, 5rem)"],"paddingBottom":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d80, 5rem)"],"marginBlockStart":["0px"]},"isVariation":"contentwrapper"} -->
<section class="gsbp-XXXXXXX alignfull">
  <!-- Content Area -->
</section>
<!-- /wp:greenshift-blocks/element -->

Content Area (Centered Container)

<!-- wp:greenshift-blocks/element {"id":"gsbp-XXXXXXX","type":"inner","localId":"gsbp-XXXXXXX","styleAttributes":{"maxWidth":["100%"],"width":["var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002dglobal\u002d\u002dwide-size, 1200px)"]},"isVariation":"nocolumncontent","metadata":{"name":"Content Area"}} -->
<div class="gsbp-XXXXXXX">
  <!-- Inner content -->
</div>
<!-- /wp:greenshift-blocks/element -->

Two-Column Layout

<!-- wp:greenshift-blocks/element {"id":"gsbp-XXXXXXX","type":"inner","localId":"gsbp-XXXXXXX","styleAttributes":{"display":["flex"],"flexColumns_Extra":2,"flexWidths_Extra":{"desktop":{"name":"50/50","widths":[50,50]},"tablet":{"name":"50/50","widths":[50,50]},"mobile":{"name":"100/100","widths":[100,100]}},"flexDirection":["row"],"columnGap":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d60, 2rem)"],"rowGap":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d60, 2rem)"],"flexWrap":["wrap"]},"isVariation":"contentarea"} -->
<div class="gsbp-XXXXXXX">
  <!-- Column 1 -->
  <!-- Column 2 -->
</div>
<!-- /wp:greenshift-blocks/element -->

See docs/03-layouts.md for more layout patterns.

Heading with Animation

<!-- wp:greenshift-blocks/element {"id":"gsbp-XXXXXXX","textContent":"Your Heading","tag":"h2","animation":{"duration":800,"easing":"ease","type":"fade-up","onlyonce":true},"localId":"gsbp-XXXXXXX","styleAttributes":{"fontSize":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002dgrand, 2.8rem)"],"marginBottom":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d50, 1.5rem)"]}} -->
<h2 data-aos="fade-up" data-aos-easing="ease" data-aos-duration="800" data-aos-once="true" class="gsbp-XXXXXXX">Your Heading</h2>
<!-- /wp:greenshift-blocks/element -->

See docs/05-animations.md for all animation options.

Button/Link

<!-- wp:greenshift-blocks/element {"id":"gsbp-XXXXXXX","textContent":"Click Here","tag":"a","localId":"gsbp-XXXXXXX","href":"#","styleAttributes":{"display":["inline-flex"],"paddingTop":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dbutton\u002d\u002dspacing\u002d\u002dvertical, 1rem)"],"paddingBottom":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dbutton\u002d\u002dspacing\u002d\u002dvertical, 1rem)"],"paddingLeft":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dbutton\u002d\u002dspacing\u002d\u002dhorizontal, 2rem)"],"paddingRight":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dbutton\u002d\u002dspacing\u002d\u002dhorizontal, 2rem)"],"backgroundColor":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dprimary, #000)"],"color":["#fff"],"borderRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dmedium, 15px)"],"textDecoration":["none"],"transition":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dtransition\u002d\u002dease, all 0.5s ease)"],"backgroundColor_hover":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dsecondary, #333)"]}} -->
<a class="gsbp-XXXXXXX" href="#">Click Here</a>
<!-- /wp:greenshift-blocks/element -->

Image

<!-- wp:greenshift-blocks/element {"id":"gsbp-XXXXXXX","tag":"img","localId":"gsbp-XXXXXXX","src":"https://placehold.co/800x600","alt":"Description","originalWidth":800,"originalHeight":600,"styleAttributes":{"width":["100%"],"height":["auto"],"objectFit":["cover"],"borderRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dsmall, 10px)"]}} -->
<img class="gsbp-XXXXXXX" src="https://placehold.co/800x600" alt="Description" width="800" height="600" loading="lazy"/>
<!-- /wp:greenshift-blocks/element -->

Block Variations (`isVariation`)

Variation	Use Case	Details
`"contentwrapper"`	Full-width section wrapper	See `docs/03-layouts.md`
`"nocolumncontent"`	Centered content area	See `docs/03-layouts.md`
`"contentcolumns"` / `"contentarea"`	Column layouts	See `docs/03-layouts.md`
`"accordion"`	Collapsible accordion	See `docs/08-variations.md`
`"tabs"`	Tab interface	See `docs/08-variations.md`
`"counter"`	Animated number counter	See `docs/08-variations.md`
`"countdown"`	Countdown timer	See `docs/08-variations.md`
`"marquee"`	Scrolling marquee	See `docs/08-variations.md`
`"buttoncomponent"`	Styled button	See `docs/08-variations.md`
`"videolightbox"`	Video with lightbox	See `docs/08-variations.md`

Animation Options

Available animation.type values:

fade, fade-up, fade-down, fade-left, fade-right
zoom-in, zoom-in-up, zoom-in-down, zoom-out
slide-up, slide-down, slide-left, slide-right
flip-up, flip-down, flip-left, flip-right
clip-right, clip-left, clip-up, clip-down

Animation parameters: duration (ms), delay (ms), easing, onlyonce (boolean)

See docs/05-animations.md for keyframe animations and scroll-linked animations.

Dynamic Content

For blocks displaying WordPress data (posts, users, taxonomies):

<!-- wp:greenshift-blocks/element {"id":"gsbp-xxx","textContent":"<dynamictext></dynamictext>","dynamictext":{"dynamicEnable":true,"dynamicType":"postdata","dynamicSource":"latest_item","dynamicPostData":"post_title"},"localId":"gsbp-xxx"} -->
<div class="gsbp-xxx"><dynamictext></dynamictext></div>
<!-- /wp:greenshift-blocks/element -->

See docs/07-dynamic-content.md for all dynamic types and query grids.

Slider Blocks

Use greenshift-blocks/swiper for image galleries and hero sliders.

See docs/06-slider.md for complete slider documentation.

Design Detail Attention Checklist

Before generating output, verify these visual details from the reference design:

1. Border Radius

Card/container radius vs image/inner element radius (usually different)
Are corners rounded on all 4 sides or specific corners only?
Is it subtle (5-10px), medium (15px), large (20-30px), or pill (50px+)?

2. Padding/Margins

Is image edge-to-edge or inset with visible container background?
Gap between image and footer/content below
Internal padding of content areas

3. Image Handling

Does image fill container (object-fit: cover) or maintain aspect ratio (object-fit: contain)?
Does image have its own rounded corners separate from container?
Aspect ratio of image area
originalWidth/originalHeight in JSON → matching width/height in HTML

4. Shadows

Subtle vs prominent shadow
Shadow on card vs shadow on image

5. Background Relationships

Section background vs card background vs image background
Overlay effects or gradients

Output Requirements

Return only the generated block code
Block names: wp:greenshift-blocks/element (or specialized like swiper, querygrid)
No explanations or surrounding text
Ready to paste directly into WordPress Gutenberg code editor
Save output as .html files

Example Templates

Reference templates are in the templates/ directory:

section-wrapper.html - Full-width section wrapper
two-columns.html - Two-column responsive layout
hero-section.html - Hero section with background
card-grid.html - Card grid layout

greenshift-blocks