| 1 |
/** |
| 2 |
* Import Style |
| 3 |
*/ |
| 4 |
import './style.scss'; |
| 5 |
/** |
| 6 |
* WordPress dependencies |
| 7 |
*/ |
| 8 |
import { registerPlugin } from '@wordpress/plugins'; |
| 9 |
import { render, useState } from '@wordpress/element'; |
| 10 |
import { subscribe } from '@wordpress/data'; |
| 11 |
import { __ } from '@wordpress/i18n'; |
| 12 |
import { Button, Modal } from '@wordpress/components'; |
| 13 |
|
| 14 |
// import fixed content block form block.json |
| 15 |
import fixedContent from './demos/fixed-content/hero-slider.json'; |
| 16 |
|
| 17 |
const Patterns = ({ onClose }) => { |
| 18 |
const blockTitle = fixedContent && fixedContent.title; |
| 19 |
const blockContent = fixedContent && fixedContent.content; |
| 20 |
|
| 21 |
const insertDemoBlock = () => { |
| 22 |
const blocks = wp.blocks.parse(blockContent); |
| 23 |
wp.data.dispatch('core/block-editor').insertBlocks(blocks); |
| 24 |
onClose(); |
| 25 |
}; |
| 26 |
|
| 27 |
return ( |
| 28 |
<Modal title={__('GutSlider Patterns', 'Slider Blocks')} className="gutslider-patterns" onRequestClose={onClose}> |
| 29 |
<img src="https://via.placeholder.com/150" alt="placeholder" /> |
| 30 |
|
| 31 |
<Button className="gutslider-patterns-button" icon="layout" variant="primary" onClick={insertDemoBlock}> |
| 32 |
{blockTitle} |
| 33 |
</Button> |
| 34 |
</Modal> |
| 35 |
); |
| 36 |
}; |
| 37 |
|
| 38 |
/** |
| 39 |
* Demos Toolbar Library Button |
| 40 |
* gutslider Since v2.6.0 |
| 41 |
*/ |
| 42 |
|
| 43 |
function GutSliderToolbarLibrary() { |
| 44 |
const [patternState, setPatternState] = useState(false); |
| 45 |
|
| 46 |
const openPatternsModal = () => { |
| 47 |
setPatternState(true); |
| 48 |
}; |
| 49 |
|
| 50 |
const closePatternsModal = () => { |
| 51 |
setPatternState(false); |
| 52 |
}; |
| 53 |
|
| 54 |
// Block Patterns Button |
| 55 |
const LibraryButton = () => ( |
| 56 |
<Button className="gutslider-patterns-button" icon="plus" onClick={openPatternsModal}> |
| 57 |
{__('GutSlider Demos', 'slider-blocks')} |
| 58 |
</Button> |
| 59 |
); |
| 60 |
|
| 61 |
const renderButton = selector => { |
| 62 |
const patternButton = document.createElement('div'); |
| 63 |
patternButton.classList.add('gutslider-toolbar-design-library'); |
| 64 |
selector.appendChild(patternButton); |
| 65 |
render(<LibraryButton />, patternButton); |
| 66 |
}; |
| 67 |
|
| 68 |
// Watch for the toolbar to be visible and the design library button to be missing. |
| 69 |
subscribe(() => { |
| 70 |
const editToolbar = document.querySelector('.edit-post-header-toolbar'); |
| 71 |
if (!editToolbar) { |
| 72 |
return; |
| 73 |
} |
| 74 |
if (!editToolbar.querySelector('.gutslider-toolbar-design-library')) { |
| 75 |
renderButton(editToolbar); |
| 76 |
} |
| 77 |
}); |
| 78 |
|
| 79 |
return <>{patternState && <Patterns onClose={closePatternsModal} />}</>; |
| 80 |
} |
| 81 |
|
| 82 |
registerPlugin('gutslider-toolbar-library', { |
| 83 |
render: GutSliderToolbarLibrary |
| 84 |
}); |
| 85 |
|
