## Greenshift/GreenLight Block Creation Instructions ### 1. Core Block Structure All Greenshift Element blocks follow this basic structure: ```html ``` Example: ```html

Heading

My text
Simple Link Content Simple text
``` ### 2. JSON Parameters - **`id`**: A unique block identifier (e.g., `"gsbp-b3c761b"`). Starts with `gsbp-` followed by 7 alphanumeric characters. - **`localId`**: Must be **identical** to the `id`. Used for internal identification. - **`tag`**: Specifies the HTML tag for the element (e.g., `"h2"`, `"a"`, `"img"`, `"svg"`). - If omitted, defaults to `"div"`. - For SVG icons, use `tag: "svg"`. - Prefer `tag: "a"` over `tag: "button"` for button-like elements, unless it's part of a form requiring a ` ``` ### 7. Dynamic Attributes (`dynamicAttributes`) - For any HTML attributes not covered by specific JSON parameters. - Use an array of objects, each with `name` and `value`. - *Example:* `dynamicAttributes: [{"name":"data-type","value":"scroll"}]` ### 8. Icons (`icon`) - Used for SVG icons (`tag: "svg"`). - Contains an `icon` object with the SVG code (`svg`) or font icon class (`font`). - *Example:* ```html ``` - **Note:** Remove `xmlns` attributes from the `` and `` tags in the final HTML output. ### 9. Advanced Styling: Local Classes (`dynamicGClasses`) - Use only when needing styles for complex sub-selectors (e.g., `.class > .child`, `.class::before`, `.class:hover + .sibling`) or pseudo-elements that cannot be handled by `styleAttributes` with `_hover`/`_focus`. - `dynamicGClasses` is an array of class definition objects. - Each object contains: - `value`: The class name (e.g., `"hoverinner"`). - `label`: Same as `value`. - `type`: `"local"`. - `localed`: `false`. - `css`: String containing the CSS rules for the base class. - `attributes`: An object containing base styles (like `styleAttributes`). - `originalID`: Same as the block's `localId`. - `originalBlock`: `"greenshift-blocks/element"`. - `selectors`: An array for sub-selector styles. Each object has: - `value`: The sub-selector string (e.g., `" a:hover"`). - `attributes`: Style object for this sub-selector. - `css`: CSS string for this specific sub-selector rule. - The class name (`value`) must also be added to the block's `className` parameter and HTML `class` attribute. - *Example:* ```html
``` ### 10. Layouts & Specific Structures - **Columns (e.g., Two Columns):** Use nested Elements with specific `isVariation` flags and flexbox `styleAttributes`. - *Example (Two Columns):* Use `isVariation: "contentcolumns"` on the outer section and `isVariation: "contentarea"` on the inner flex container. Configure `flexColumns_Extra` and `flexWidths_Extra`. ```html
``` - **Section** For full width sections with centered content use `align: "full"` and next example. ```html
``` ### 11.Gradients - Use `backgroundImage` with `linear-gradient(...)`. - Set `imageGradient_Extra: true`. - For text gradients, also set `backgroundClip: ["text"]` and `color: ["transparent"]`. - *Example (Text Gradient):* ```html

Design Without Limits

``` - *Example (Gradient Background):* ```html
``` ### 12.Scripts - If you need to use scripts, use native support for blocks inside attributes `customJs` and `customJsEnabled` parameters. You can use also import function - *Example:* ```html
block with some script
``` ### 13.Animations (`styleAttributes`) - Define keyframes using `animation_keyframes_Extra`: An array of objects, each with `name` (e.g., `"gs_3450"`) and `code` (CSS keyframe string). - Apply animation using `animation`: Array, e.g., `["gs_3450 3s infinite"]`. - **Scroll Animations:** - Use `animationTimeline: ["view()"]`. - Optionally use `animationRange: ["entry"]` or define ranges within the keyframe `code` (e.g., `entry 0%`, `exit 100%`). - *Example (Scroll Triggered Fade/Scale):* ```html

Scroll Animate

``` ### 14.Slider Blocks (`greenshift-blocks/swiper`) Slider blocks use the Swiper.js library and have extensive configuration options. Each slide is working as container and can include other blocks and background image. The basic structure includes: ```html
I am content of slider 1
I am content of Slider 2
``` **Key Slider Parameters:** - **`tabs`**: Number of slides (integer) - **`slidesPerView`**: Array of responsive values for slides per view `[desktop, tablet, mobile_landscape, mobile_portrait]` - **`spaceBetween`**: Array of responsive spacing between slides - **`speed`**: Transition speed in milliseconds - **`loop`**: Boolean for infinite loop - **`autoplay`**: Boolean for automatic sliding - **`autodelay`**: Delay between autoplay transitions in milliseconds - **`navigationarrows`**: Boolean to show navigation arrows - **`bullets`**: Boolean to show pagination bullets **Additional Slider Features:** - **`centered`**: Center the active slide - **`freemode`**: Enable free mode for momentum-based sliding - **`vertical`**: Vertical sliding direction - **`autoHeight`**: Auto-adjust height based on slide content - **`parallax_enable`**: Enable parallax effects on slide content - **`kenBurnsEnable`**: Enable Ken Burns zoom effect on images - **`scrollbar`**: Show scrollbar navigation - **`clicktoslide`**: Enable click-to-slide functionality - **`enableKeyboard`**: Enable keyboard navigation - **`enableMousewheel`**: Enable mousewheel navigation ### 15. Dynamic Blocks Dynamic blocks allow you to display content that changes based on post data, user information, site data, and more. Dynamic content is wrapped in `` tags and configured through the `dynamictext` parameter. #### Basic Dynamic Block Structure ```html
Hello world!
``` #### Complete Dynamic Query Grid Example ```html
Hello world!
 September 28, 2025 ``` #### Query Loop Configuration For arguments, use the same as available in WP Query as json in query_filters. For wrapper styles, use styleAttributesWrapper and for item style use styleAttributesItem. These attributes except the same parameters as styleAttributes in greenshift-blocks/element block. #### Dynamic Text Configuration (`dynamictext`) The `dynamictext` parameter contains all dynamic content configuration: **Core Parameters:** - **`dynamicEnable: true`**: Enables dynamic content functionality - **`dynamicType`**: Type of dynamic content (see options below) - **`dynamicSource`**: Source selection - `"latest_item"` or `"definite_item"` - **`dynamicPostType`**: Post type to query (optional, uses current if empty) - **`dynamicPostId`**: Specific post ID (for definite_item source) #### Available Dynamic Types **1. Post Data (`dynamicType: "postdata"`)** - **`dynamicPostData`** options: - `"post_title"` - Post title - `"post_image"` - Featured image - `"ID"` - Post ID - `"post_date"` - Publish date - `"post_modified"` - Last modified date - `"post_excerpt"` - Post excerpt - `"comment_count"` - Number of comments - `"permalink"` - Post URL - `"fullcontent"` - Full content without formatting - `"fullcontentfilters"` - Formatted content - `"post_author"` - Author name - `"post_name"` - Post slug - `"post_parent_title"` - Parent post title - `"post_parent_link"` - Parent post link **2. Author Data (`dynamicType: "authordata"`)** - **`dynamicAuthorData`** options: - `"display_name"` - Author display name - `"description"` - Author bio - `"user_level"` - User level - `"user_registered"` - Registration date - `"user_email"` - Author email - `"user_login"` - Username - `"user_url"` - Author website - `"user_avatar_url"` - Avatar image URL - `"user_status"` - User status - `"ID"` - Author ID - `"meta"` - Custom author meta (requires `dynamicAuthorField`) **3. Current User Data (`dynamicType: "user_data"`)** - Same options as Author Data but for currently logged-in user **4. Taxonomy Value (`dynamicType: "taxonomyvalue"`)** - **`dynamicTaxonomyValue`**: Taxonomy name (e.g., `"category"`, `"post_tag"`) - **`dynamicTaxonomyLink: true`**: Show taxonomy terms as links - **`dynamicTaxonomyDivider`**: Separator between terms (e.g., `", "`) **5. Custom Meta Field (`dynamicType: "custom"`)** - **`dynamicField`**: Custom field name or meta key **6. Taxonomy Meta (`dynamicType: "taxonomy"`)** - **`dynamicTaxonomy`**: Taxonomy name - **`dynamicTaxonomyField`**: Field to retrieve from taxonomy - **`dynamicTaxonomyType`**: Data type (`"name"`, `"description"`, or meta) **7. Site Data (`dynamicType: "sitedata"`)** - **`dynamicSiteData`** options: - `"siteoption"` - WordPress option - `"acfsiteoption"` - ACF site option - `"name"` - Site name - `"description"` - Site description - `"year"` - Current year - `"month"` - Current month - `"today"` - Today's date - `"todayplus1"` - Tomorrow - `"todayplus2"` - Day after tomorrow - `"todayplus3"` - 3 days from now - `"todayplus7"` - 1 week from now - `"querystring"` - URL query parameter - `"transient"` - WordPress transient **8. Repeater (`dynamicType: "repeater"`)** - **`repeaterField`**: Repeater field name - Works within repeater contexts #### Dynamic Link Configuration (`dynamiclink`) dynamiclink attribute supports the same options as dynamictext. Use dynamiclink for link element and images, video elements. #### Dynamic Placeholders Dynamic placeholders can be used in query arguments and text content. Available placeholders: **Basic Placeholders:** - `{{POST_ID}}` - Current post ID - `{{POST_TITLE}}` - Current post title - `{{POST_URL}}` - Current post URL - `{{POST_DATE}}` - Current post publish date - `{{POST_DATE_MODIFIED}}` - Current post last modified date - `{{AUTHOR_ID}}` - Post author ID - `{{AUTHOR_NAME}}` - Post author name - `{{AUTHOR_AVATAR_URL}}` - Post author avatar image URL - `{{THUMBNAIL_URL}}` - Current post featured image (thumbnail) URL - `{{CURRENT_USER_ID}}` - Logged-in user ID - `{{CURRENT_USER_NAME}}` - Logged-in user name - `{{CURRENT_OBJECT_ID}}` - Current object ID - `{{CURRENT_OBJECT_NAME}}` - Current object name - `{{CURRENT_DATE_YMD}}` - Current date (YYYY-MM-DD) - `{{CURRENT_DATE_YMD_HMS}}` - Current date and time - `{{SITE_URL}}` - Site URL **Advanced Placeholders:** - `{{TIMESTRING:today+10days}}` - Date calculations - `{{GET:get_name}}` - URL GET parameters - `{{META:meta_key}}` - Post meta - `{{AUTHOR_META:meta_key}}` - Post author meta (author of current post) - `{{TERM_META:meta_key}}` - Taxonomy term meta (from all taxonomies of current post) - `{{TERM_META:meta_key|taxonomy}}` - Term meta for a specific taxonomy - `{{TERM_LINKS:taxonomy}}` - List of links for a post's terms - `{{USER_META:meta_key}}` - User meta - `{{COOKIE:cookie_name}}` - Cookie values - `{{RANDOM:0-100}}` - Random numbers - `{{RANDOM:red|blue|green}}` - Random selection #### Data Formatting (`postprocessor`) This is used for further processing returned data Available formatting options: - `"textformat"` - Use if returned data has WYSIWYG formatting - `"mailto"` - Email links - `"tel"` - Convert to Phone links - `"postlink"` - Post links - `"idtofile"` - Convert ID of file to file link - `"idtofileurl"` - Convert ID of file to file URL - `"idtoimageurl"` - ID to image URL (full size) - `"idtoimageurlthumb"` - ID to image URL (thumbnail) - `"ymd"` - Date YYYYMMDD to WordPress date - `"ytmd"` - Date yyyy-mm-dd to WordPress date - `"unixtowp"` - Unix time to WordPress date - `"ymdhis"` - Date Y-m-d H:i:s to WordPress date - `"ymdtodiff"` - Date difference with current - `"datecustom"` - Custom date format (requires `dateformat`) - `"numberformat"` - Number formatting - `"numberformatenglish"` - English number formatting - `"numeric"` - Only numeric values - `"json"` - Array to JSON #### Additional Parameters - **`fallbackValue`**: Fallback text when no data is found - **`avatarSize`**: Avatar size for user avatars - **`dynamicPostImageSize`**: Image size for post images - **`dateformat`**: Custom date format string ### Preset / Interactive Blocks (`isVariation`) There are some special interactive blocks that have additional rules and attributes. **Video block** ```html ``` **Audio block** ```html ``` **SVG with Text path** ```html GreenLight Element Text Path ``` **Counter block** ```html
10
``` **Accordion Element** ```html

``` **Tabs Element** ```html
``` **Countdown block** ```html
00 : 00 : 00 : 00
``` **Table Element** Tables have extra tableStyles attribute where we have styles for table, td, th elements + responsive attribute to make table responsive. ```html
Header Header Header
``` **Button Component Element** If user don't have specific requirement for button, use next button component. ```html Download for Free! ``` **Inline Youtube Video block** This block is used primarly for Video backgrounds from Youtube links. It has muted autoplay and loop ```html ``` **Inline Vimeo Video block** This block is used primarly for Video backgrounds from Vimeo links. It has muted autoplay and loop ```html ``` **Video LightBox Block** This block is used for lightboxes with video and play button ```html
``` **Marquee block** ```html
Add Scroll Elements Here
``` **Charts Elements** It's possible also to create Chart block, it's based on ApexCharts.js and uses specific data. Charts have special extra attribute chartData where data related to chart is stored. Make sure that chartData has options parameter like chartData:{options: {chart: {...}}}. Make sure that you do not have double slash in options. There are several types of charts. Here are examples, follow them when you do conversion: *Line chart* ```html
``` *Area chart* ```html
``` *Bar chart* ```html
``` *Horizontal Bar chart* ```html
``` *Pie chart* ```html
``` *Radar chart* ```html
``` *Candlestick chart* ```html
``` ### General Rules & Best Practices - **Images (``):** - Always add `loading="lazy"`. - Use placeholder URLs like `https://placehold.co/WIDTHxHEIGHT` (e.g., `https://placehold.co/600x400`). - Include `alt`, `width`, `height`, `src`. - **Links (``):** If using `target="_blank"` (via `linkNewWindow: true`), ensure `rel="noopener"` is present. - **SVG:** Remove `xmlns="..."` attributes from `` and `` tags in the final HTML. - **Buttons:** Prefer `` tags styled as buttons unless a `
Variable Example
``` ### Output Requirements - **Return only the generated block code.** - **Make sure that name of blocks are wp:greenshift-blocks/element.** - No surrounding explanations, comments, or introductory/concluding text. - The format must be exactly as shown in the examples, ready to be pasted into the WordPress Gutenberg code editor.