Greenshift Addon

https://github.com/wpsoul/greenshiftaddon
Admin
Greenshift Addon is a WordPress Gutenberg blocks plugin that provides custom example blocks for...
Tokens:5,395
Snippets:30
Trust Score:7.4
Update:6 months ago
Show doc for...
Tokens:
Raw
### Register Context-Aware Block

Source: https://context7.com/wpsoul/greenshiftaddon/llms.txt

Registers a new WordPress block type that subscribes to query context. Ensure the Query Addon is installed for full functionality.

```javascript
// src/blocks/exampleforquery/index.js
import { __ } from '@wordpress/i18n';
import edit from './edit';
import { registerBlockType } from '@wordpress/blocks';
import blockIcon from './icon';
import attributes from './attributes';

registerBlockType('greenshift-blocks/exampleforquery', {
    category: 'greenShiftAddon',
    icon: blockIcon,
    title: __('Dynamic post title example', 'greenshiftquery'),
    description: __('Use in Query builder block. Requires Query Addon', 'greenshiftquery'),
    // Subscribe to query context
    usesContext: ["postId", "postType", "greenshiftquery_post_type", "postName"],
    attributes: attributes,
    edit,
    save: () => null
});
```

--------------------------------

### Initialize Greenshift Addon Plugin

Source: https://context7.com/wpsoul/greenshiftaddon/llms.txt

This snippet initializes the plugin by defining constants, checking for the parent Greenshift plugin, and setting up actions for editor assets or admin notices. It ensures the addon only runs when its primary dependency is active.

```php
<?php
/**
 * Plugin Name: Greenshift Boilerplate Addon
 * Description: Extend your blocks with Greenshift high quality library and performance
 * Author: Wpsoul
 * Version: 0.3
 */

defined('ABSPATH') || exit;

define('GREENSHIFTADDON_DIR_URL', plugin_dir_url(__FILE__));
define('GREENSHIFTADDON_DIR_PATH', plugin_dir_path(__FILE__));
define('GREENSHIFTADDON_PLUGIN_VER', '0.3');

// Check if parent Greenshift plugin is active
function gspb_greenShiftAddon_is_parent_active() {
    $active_plugins = get_option('active_plugins', array());

    if (is_multisite()) {
        $network_active_plugins = get_site_option('active_sitewide_plugins', array());
        $active_plugins = array_merge($active_plugins, array_keys($network_active_plugins));
    }

    foreach ($active_plugins as $basename) {
        if (strpos($basename, 'greenshift-animation-and-page-builder-blocks/') === 0) {
            return true;
        }
    }
    return false;
}

if (gspb_greenShiftAddon_is_parent_active()) {
    add_action('enqueue_block_editor_assets', 'greenShiftAddon_editor_assets');
} else {
    add_action('admin_notices', 'gspb_greenShiftAddon_admin_notice_warning');
}

function gspb_greenShiftAddon_admin_notice_warning() {
    ?>
    <div class="notice notice-warning">
        <p><?php printf(
            __('Please, activate %s plugin to use Boilerplate Addon'),
            '<a href="https://wordpress.org/plugins/greenshift-animation-and-page-builder-blocks" target="_blank">Greenshift</a>'
        ); ?></p>
    </div>
    <?php
}

// Register block category
add_filter('block_categories_all', 'gspb_greenShiftAddon_category', 1, 2);

function gspb_greenShiftAddon_category($categories, $post) {
    return array_merge(
        array(array('slug' => 'greenShiftAddon', 'title' => __('GreenShift Addon'))),
        $categories
    );
}

```

--------------------------------

### ProductSelect Component for Post Selection

Source: https://context7.com/wpsoul/greenshiftaddon/llms.txt

A reusable asynchronous select component for choosing posts or products in block settings. It uses react-select/async and WordPress data fetching. Ensure @wordpress/components, @wordpress/element, @wordpress/data, and @wordpress/api-fetch are available.

```javascript
// src/blocks/components/ProductSelect/ProductSelect.js
import { Component } from '@wordpress/element';
import { Spinner, BaseControl } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';
import debounce from "debounce-promise";
import AsyncSelect from 'react-select/async';

function mapPosts(posts) {
    return posts.map(post => ({
        label: post.title.rendered || post.title.raw,
        value: post.id
    }));
}

class Select extends Component {
    constructor(props) {
        super(props);
        this.state = { selectedOption: null, initialValueProcessed: false };
        this.getPosts = this.getPosts.bind(this);
        this.getPostsDebounced = debounce(this.getPosts, 500);
    }

    getPosts(inputValue, callback) {
        const { type } = this.props;
        if (!inputValue) return callback([]);

        let query = type === 'post' || type === 'product'
            ? `/wp/v2/${type === 'post' ? 'posts' : type}?search=${inputValue.trim()}`
            : `greenshift/v1/get-post-search?post_type=${type}&search=${inputValue.trim()}`;

        return apiFetch({ path: query, method: 'GET' })
            .then(response => callback(mapPosts(response)));
    }

    render() {
        const { label, posts, multiple, currentValue } = this.props;
        const { selectedOption } = this.state;

        return (
            <BaseControl label={label}>
                <AsyncSelect
                    cacheOptions
                    defaultOptions={posts ? mapPosts(posts) : []}
                    loadOptions={this.getPostsDebounced}
                    onChange={(value) => {
                        this.setState({ selectedOption: value });
                        this.props.onChange(value);
                    }}
                    isMulti={multiple}
                    value={selectedOption}
                    className='react-select'
                    menuPortalTarget={document.body}
                    styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
                />
            </BaseControl>
        );
    }
}

export const ProductSelect = withSelect((select, props) => ({
    posts: select('core').getEntityRecords('postType', props.type, { per_page: 10 })
}))(Select);

```

--------------------------------

### Server-Side Block Rendering with PHP

Source: https://context7.com/wpsoul/greenshiftaddon/llms.txt

Use this PHP class to handle dynamic block rendering on the frontend. It registers a block type with a render callback.

```php
<?php
// blockrender/exampledynamic/block.php
namespace greenshiftaddon\Blocks;
defined('ABSPATH') OR exit;

class Renderbox {
    public function __construct() {
        add_action('init', array($this, 'init_handler'));
    }

    public function init_handler() {
        register_block_type(__DIR__, array(
            'render_callback' => array($this, 'render_block'),
            'attributes' => $this->attributes
        ));
    }

    public $attributes = array(
        'id' => array('type' => 'string', 'default' => null),
        'inlineCssStyles' => array('type' => 'string', 'default' => ''),
        'animation' => array('type' => 'object', 'default' => array()),
        'customcolor' => array('type' => 'string', 'default' => '#ff0000'),
        'align' => array('type' => 'string', 'default' => ''),
        'interactionLayers' => array('type' => 'array', 'default' => array())
    );

    public function render_block($settings = array(), $inner_content = '') {
        extract($settings);

        $blockId = 'gspb_id-' . $id;
        $blockClassName = 'gspb-examplebox ' . $blockId;

        $data_attributes = gspb_getDataAttributesfromDynamic($settings);
        $wrapper_attributes = get_block_wrapper_attributes(array(
            'class' => $blockClassName,
            ...$data_attributes
        ));

        $out = '<div id="' . $blockId . '" ' . $wrapper_attributes . ' ' . 
               gspb_AnimationRenderProps($animation, $interactionLayers) . '>';
        $out .= '<span class="gspb_example_value">' . esc_html($customcolor) . '</span>';
        $out .= '</div>';

        return $out;
    }
}

new Renderbox;

```

--------------------------------

### Register Frontend Scripts and Styles

Source: https://context7.com/wpsoul/greenshiftaddon/llms.txt

Registers scripts and styles for frontend use and conditionally enqueues them when specific blocks are rendered. This ensures assets are only loaded when necessary. Requires GREENSHIFTADDON_DIR_URL to be defined.

```php
<?php
// greenshiftaddon.php - Frontend asset registration
add_action('init', 'greenShiftAddon_register_init');

function greenShiftAddon_register_init() {
    // Register scripts (not enqueued yet)
    wp_register_script(
        'gspbaddonscript',
        GREENSHIFTADDON_DIR_URL . 'libs/exampledynamic/index.js',
        array(),
        '1.0',
        true
    );

    wp_register_style(
        'gspbaddonstyle',
        GREENSHIFTADDON_DIR_URL . 'libs/exampledynamic/index.css',
        array(),
        '1.1'
    );

    // Register static block with block.json
    register_block_type(__DIR__ . '/blockrender/examplestatic');
}

// Conditionally enqueue scripts when block is rendered
add_filter('render_block', 'greenShiftAddon_block_script_assets', 10, 2);

function greenShiftAddon_block_script_assets($html, $block) {
    if (!is_admin()) {
        if ($block['blockName'] == 'greenshift-blocks/exampledynamic') {
            wp_enqueue_script('gspbaddonscript');
            wp_enqueue_style('gspbaddonstyle');
        }
    }
    return $html;
}

```

--------------------------------

### Fetch Dynamic Post Data in Block Edit Component

Source: https://context7.com/wpsoul/greenshiftaddon/llms.txt

Fetches dynamic post data, such as the title, based on various contexts like the Query Loop or specific post IDs. Uses wp.apiFetch for data retrieval.

```javascript
// Query block edit.js - fetching dynamic post data
import { useEffect, useState } from '@wordpress/element';
import { useSelect } from "@wordpress/data";

function edit(props) {
    const { attributes, setAttributes, context } = props;
    const { sourceType, postId, post_type } = attributes;
    const [title, setTitle] = useState('Dynamic Post Title');

    function getMetaValue(postId, part, type = '') {
        setAttributes({ loading: true });
        let posttype = type || post_type;

        wp.apiFetch({
            path: `/greenshift/v1/get-post-part?part=${part}&post_id=${postId}&post_type=${posttype}`,
            method: 'GET'
        }).then(response => {
            const data = JSON.parse(response);
            setAttributes({ loading: false });
            setTitle(data);
        }).catch(error => {
            setAttributes({ loading: false });
        });
    }

    // Respond to query context changes
    useEffect(() => {
        if (context.postName) {
            // Inside Query Loop with post name available
            setTitle(context.postName);
        } else if (sourceType === 'latest_item' && context.greenshiftquery_post_type) {
            // Inside Greenshift Query Builder
            getMetaValue(0, "title", context.greenshiftquery_post_type);
        } else if (sourceType === 'latest_item' && context.postId) {
            // Inside WordPress Query Loop
            getMetaValue(context.postId, "title");
        } else if (sourceType === 'latest_item') {
            // Standalone - get latest post
            getMetaValue(0, "title");
        } else {
            // Specific post selected
            getMetaValue(postId, "title");
        }
    }, [postId, sourceType, post_type, context.greenshiftquery_post_type]);

    // ... render component
}
```

--------------------------------

### Create Block Edit Component with Greenshift

Source: https://context7.com/wpsoul/greenshiftaddon/llms.txt

This JavaScript code defines the 'edit' component for a WordPress block using Greenshift's utilities. It handles attribute management, CSS generation for styling, and integrates Greenshift's Inspector Controls for customization. Use this as a base for creating dynamic blocks with Greenshift.

```javascript
// src/blocks/exampledynamic/edit.js
import { __ } from '@wordpress/i18n';
import { useState, useEffect } from '@wordpress/element';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, ToggleControl } from '@wordpress/components';
import attributesDefault from './attributes';

// Import Greenshift dependencies
const { gspb_setBlockId } = gspblib.utilities;
const { BlockToolBar } = gspblib.components;
const { CssTransform, Position, Animation, Spacing, Responsive,
        Shadow, Border, Background, Typography, IconPicker } = gspblib.collections;
const { gspb_csstransform_cssGen, gspb_spacing_cssGen, gspb_shadow_cssGen,
        gspb_border_cssGen, gspb_background_cssGen, gspb_typography_cssGen,
        gspb_Css_Final, getDataAttributesfromDynamic } = gspblib.utilities;
const { InspectorTabs, InspectorTab, BlpgeColorPicker, UnitControl } = gspblib.components;
const { gspb_cssGen } = gspblib.helpers;
const { AnimationWrapper, AnimationRenderProps } = gspblib.collections;
const { IconViewer } = gspblib.components;

function edit(props) {
    const { attributes, setAttributes, clientId } = props;
    const { id, spacing, shadow, border, background, typography,
            customcolor, enableicon, iconBox_icon, animation, interactionLayers } = attributes;

    // Generate unique block ID on mount
    useEffect(() => {
        gspb_setBlockId(props);
    }, []);

    let blockId = `gspb_id-${id}`;
    let css_selector = `.${blockId}`;
    let final_css = '';

    // Generate CSS using Greenshift utilities
    final_css = gspb_spacing_cssGen(spacing, css_selector, final_css);
    final_css = gspb_shadow_cssGen(shadow, css_selector, final_css);
    final_css = gspb_border_cssGen(border, css_selector, final_css);
    final_css = gspb_background_cssGen(background, css_selector, final_css);
    final_css = gspb_typography_cssGen(typography, `${css_selector} .gspb_example_value`, final_css);

    // Store final CSS
    gspb_Css_Final(id, final_css, props);

    // Prepare animation props
    let AnimationProps = AnimationRenderProps(animation, interactionLayers);
    let DynamicDataAttributes = getDataAttributesfromDynamic(props);

    const blockProps = {
        className: `gspb-examplebox ${blockId}`,
        id: blockId,
        ...DynamicDataAttributes
    };

    return (
        <div {...useBlockProps({ "data-gspb-block-id": id })}>
            <InspectorControls>
                <div className="gspb_inspector">
                    <InspectorTabs tabs={['general', 'advance']} {...props}>
                        <InspectorTab key={'general'}>
                            <PanelBody title={__('Main Settings', 'greenshiftaddon')}>
                                <BlpgeColorPicker
                                    color={customcolor}
                                    onChange={(value) => setAttributes({
                                        customcolor: value.rgb
                                            ? `rgba(${value.rgb.r}, ${value.rgb.g}, ${value.rgb.b}, ${value.rgb.a})`
                                            : value
                                    })}
                                />
                                <ToggleControl
                                    checked={enableicon}
                                    label={__("Enable icon?", "greenshiftaddon")}
                                    onChange={(value) => setAttributes({ enableicon: value })}
                                />
                                {enableicon && (
                                    <IconPicker
                                        icon={iconBox_icon}
                                        onChange={(icon) => setAttributes({ iconBox_icon: icon })}
                                    />
                                )}
                            </PanelBody>
                            <PanelBody title={__("Typography", 'greenshiftaddon')} initialOpen={false}>
                                <Typography attributeName="typography" {...props} />
                            </PanelBody>
                            <PanelBody title={__("Block Spacing", 'greenshiftaddon')} initialOpen={false}>
                                <Spacing attributeName="spacing" padding={true} margin={true} {...props} />
                            </PanelBody>
                        </InspectorTab>
                        <InspectorTab key={'advance'}>
                            <PanelBody title={__("Animation", 'greenshiftaddon')}>
                                <Animation attributeName="animation" {...props} />
                            </PanelBody>
                        </InspectorTab>
                    </InspectorTabs>
                </div>
            </InspectorControls>
            <BlockToolBar {...props} />

```

--------------------------------

### Register Custom Gutenberg Block

Source: https://context7.com/wpsoul/greenshiftaddon/llms.txt

Registers a new block type for WordPress Gutenberg using Greenshift's category and styling integrations. This is for dynamic blocks where server-side rendering is handled by PHP.

```javascript
// src/blocks/exampledynamic/index.js
import { __ } from '@wordpress/i18n';
import edit from './edit';
import { registerBlockType } from '@wordpress/blocks';
import blockIcon from './icon';
import attributes from './attributes';
import './styles.editor.scss';

registerBlockType('greenshift-blocks/exampledynamic', {
    category: 'greenShiftAddon',
    icon: blockIcon,
    example: {},
    title: __('Example Dynamic Block', 'greenshiftaddon'),
    description: __('Example block', 'greenshiftaddon'),
    keywords: [],
    attributes,
    edit,
    save: () => null  // Dynamic blocks return null; PHP handles rendering
});
```

--------------------------------

### Define Block Attributes with Greenshift Collections

Source: https://context7.com/wpsoul/greenshiftaddon/llms.txt

Defines block attributes using Greenshift's collection objects for consistent styling options. This includes standard Greenshift styling attributes and custom block-specific attributes.

```javascript
// src/blocks/exampledynamic/attributes.js
const { collectionsObjects } = gspblib.helpers;

// Clone and customize default icon settings
const defaultIcon = JSON.parse(JSON.stringify(collectionsObjects.iconPicker));
defaultIcon.icon.font = 'rhicon rhi-shopping-bag';
defaultIcon.fill = 'currentColor';
defaultIcon.iconSize = [16];

export default {
    id: { type: 'string', default: null },
    inlineCssStyles: { type: 'string' },
    dynamicGClasses: { type: 'array' },
    interactionLayers: { type: 'array' },

    // Greenshift styling collections
    csstransform: { type: 'object', default: collectionsObjects.csstransform },
    position: { type: 'object', default: collectionsObjects.position },
    animation: { type: 'object', default: collectionsObjects.animation },
    spacing: { type: 'object', default: collectionsObjects.spacing },
    responsive: { type: 'object', default: collectionsObjects.responsive },
    shadow: { type: 'object', default: collectionsObjects.shadow },
    border: { type: 'object', default: collectionsObjects.border },
    background: { type: 'object', default: collectionsObjects.background },
    typography: { type: 'object', default: collectionsObjects.typography },
    blockWidth: { type: 'object', default: collectionsObjects.blockWidth },

    // Custom block attributes
    align: { type: 'string', default: '' },
    customcolor: { type: 'string', default: '#ff0000' },
    sizeCustom: { type: 'array', default: ['200px'] },
    iconBox_icon: { type: 'object', default: defaultIcon },
    enableicon: { type: 'boolean' },

    // StyleTabs combined styling
    tabDefault: {
        type: 'object',
        default: {
            typography: collectionsObjects.typography,
            background: collectionsObjects.background,
            border: collectionsObjects.border,
            csstransform: collectionsObjects.csstransform,
            shadow: collectionsObjects.shadow,
            spacing: collectionsObjects.spacing,
        }
    },
};

```

--------------------------------

### Static Block Save Function with JavaScript

Source: https://context7.com/wpsoul/greenshiftaddon/llms.txt

This JavaScript function defines how a static block's content is saved to the database. It uses WordPress block editor hooks and utility functions.

```javascript
// src/blocks/examplestatic/save.js
import { useBlockProps } from '@wordpress/block-editor';
const { AnimationRenderProps } = gspblib.collections;
const { IconViewer } = gspblib.components;
const { getDataAttributesfromDynamic } = gspblib.utilities;

function save(props) {
    const { customcolor, id, animation, enableicon, interactionLayers } = props.attributes;

    let blockId = `gspb_id-${id}`;
    let blockClassName = `gspb-examplebox ${blockId}`;

    // Render animation data attributes
    let AnimationProps = AnimationRenderProps(animation, interactionLayers);
    let DynamicDataAttributes = getDataAttributesfromDynamic(props);

    const blockProps = useBlockProps.save({
        className: blockClassName,
        ...DynamicDataAttributes
    });
    blockProps.id = blockId;

    return (
        <div {...blockProps} {...AnimationProps}>
            <div className="gspb_example_value">{customcolor}</div>
            {enableicon && (
                <div className="gspb_example_icon">
                    <IconViewer attributeName="iconBox_icon" size={16} color="#565D66" {...props} />
                </div>
            )}
        </div>
    );
}

export default save;

```
Tokens:
Raw