# slider-blocks/2.11.0/src/patterns/index.js

GutSlider – All in One Slider and Carousel Blocks for Gutenberg, version 2.11.0. 85 lines.

- Page: https://pluginprobe.com/plugins/slider-blocks/2.11.0/code/src/patterns/index.js
- Raw: https://pluginprobe.com/plugins/slider-blocks/2.11.0/raw/src/patterns/index.js
- Modified: 2026-02-21T13:53:58+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/slider-blocks/2.11.0/code/src/patterns/index.js#L10-L20`.

```javascript
/**
 * Import Style
 */
import './style.scss';
/**
 * WordPress dependencies
 */
import { registerPlugin } from '@wordpress/plugins';
import { render, useState } from '@wordpress/element';
import { subscribe } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { Button, Modal } from '@wordpress/components';

// import fixed content block form block.json
import fixedContent from './demos/fixed-content/hero-slider.json';

const Patterns = ({ onClose }) => {
    const blockTitle = fixedContent && fixedContent.title;
    const blockContent = fixedContent && fixedContent.content;

    const insertDemoBlock = () => {
        const blocks = wp.blocks.parse(blockContent);
        wp.data.dispatch('core/block-editor').insertBlocks(blocks);
        onClose();
    };

    return (
        <Modal title={__('GutSlider Patterns', 'Slider Blocks')} className="gutslider-patterns" onRequestClose={onClose}>
            <img src="https://via.placeholder.com/150" alt="placeholder" />

            <Button className="gutslider-patterns-button" icon="layout" variant="primary" onClick={insertDemoBlock}>
                {blockTitle}
            </Button>
        </Modal>
    );
};

/**
 * Demos Toolbar Library Button
 * gutslider Since v2.6.0
 */

function GutSliderToolbarLibrary() {
    const [patternState, setPatternState] = useState(false);

    const openPatternsModal = () => {
        setPatternState(true);
    };

    const closePatternsModal = () => {
        setPatternState(false);
    };

    // Block Patterns Button
    const LibraryButton = () => (
        <Button className="gutslider-patterns-button" icon="plus" onClick={openPatternsModal}>
            {__('GutSlider Demos', 'slider-blocks')}
        </Button>
    );

    const renderButton = selector => {
        const patternButton = document.createElement('div');
        patternButton.classList.add('gutslider-toolbar-design-library');
        selector.appendChild(patternButton);
        render(<LibraryButton />, patternButton);
    };

    // Watch for the toolbar to be visible and the design library button to be missing.
    subscribe(() => {
        const editToolbar = document.querySelector('.edit-post-header-toolbar');
        if (!editToolbar) {
            return;
        }
        if (!editToolbar.querySelector('.gutslider-toolbar-design-library')) {
            renderButton(editToolbar);
        }
    });

    return <>{patternState && <Patterns onClose={closePatternsModal} />}</>;
}

registerPlugin('gutslider-toolbar-library', {
    render: GutSliderToolbarLibrary
});

```