index.js
89 lines
| 1 | import { registerPlugin } from '@wordpress/plugins'; |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | import { store as editPostStore } from '@wordpress/edit-post'; |
| 4 | import { applyFilters } from '@wordpress/hooks'; |
| 5 | import { useState } from '@wordpress/element'; |
| 6 | import { Button } from '@wordpress/components'; |
| 7 | import { closeSmall } from '@wordpress/icons'; |
| 8 | import { useDispatch } from '@wordpress/data'; |
| 9 | |
| 10 | import classnames from 'classnames'; |
| 11 | |
| 12 | import './editor.scss'; |
| 13 | |
| 14 | function SidebarItems( props ) { |
| 15 | const { name, children } = props; |
| 16 | |
| 17 | return ( |
| 18 | applyFilters( |
| 19 | name, |
| 20 | children || '', |
| 21 | props, |
| 22 | ) |
| 23 | ); |
| 24 | } |
| 25 | |
| 26 | function Icon() { |
| 27 | return ( |
| 28 | <svg viewBox="0 0 50 60.12" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M6.686 31.622V18.918a.077.077 0 0 1 .05-.072l6.5-2.313 6.5-2.313 9.682-3.445L39.1 7.33a.067.067 0 0 0 .036-.028.074.074 0 0 0 .014-.044V.076a.077.077 0 0 0-.032-.062.076.076 0 0 0-.069-.009l-13 4.625-13 4.625-6.5 2.313-6.5 2.313a.067.067 0 0 0-.036.028.097.097 0 0 0-.013.046V52.067c0 .026.013.048.032.062s.044.018.069.009l3.267-1.163 3.267-1.163c.015-.005.028-.015.036-.028s.014-.028.014-.044V37.999l.001-6.377c-.001 0 0 0 0 0z" /><path d="m23.949 29.976 13-4.625 13-4.625c.015-.005.028-.015.036-.028s.015-.028.015-.044V8.056a.077.077 0 0 0-.032-.062.076.076 0 0 0-.069-.009l-13 4.625-13 4.625-6.5 2.313-6.5 2.313a.067.067 0 0 0-.036.028.074.074 0 0 0-.014.044V60.045c0 .026.013.048.032.062a.076.076 0 0 0 .069.009l6.475-2.304 6.475-2.304 6.525-2.322 6.525-2.322 6.5-2.313 6.5-2.313c.015-.005.028-.015.036-.028s.014-.025.014-.041V27.193a.077.077 0 0 0-.032-.062.076.076 0 0 0-.069-.009l-6.45 2.295L37 31.711a.067.067 0 0 0-.036.028.074.074 0 0 0-.014.044v6.272a.077.077 0 0 1-.05.072l-6.45 2.295L24 42.715a.075.075 0 0 1-.101-.071V30.046c0-.016.005-.031.014-.044a.08.08 0 0 1 .036-.026z" /></svg> |
| 29 | ); |
| 30 | } |
| 31 | |
| 32 | function SidebarHeader( props ) { |
| 33 | return ( |
| 34 | <> |
| 35 | <div className="gblocks-editor-sidebar-header__inner"> |
| 36 | { applyFilters( |
| 37 | 'generateblocks.editor.sidebarHeader', |
| 38 | props.children || '', |
| 39 | props, |
| 40 | ) } |
| 41 | </div> |
| 42 | </> |
| 43 | |
| 44 | ); |
| 45 | } |
| 46 | |
| 47 | function EditorSidebar() { |
| 48 | const [ activePanel, setActivePanel ] = useState( '' ); |
| 49 | const { openGeneralSidebar } = useDispatch( editPostStore ); |
| 50 | const PluginSidebar = wp?.editor?.PluginSidebar || wp?.editPost?.PluginSidebar; |
| 51 | |
| 52 | return ( |
| 53 | <PluginSidebar |
| 54 | name="gblocks-editor-sidebar" |
| 55 | className="gblocks-editor-sidebar" |
| 56 | title={ __( 'GenerateBlocks', 'generateblocks-pro' ) } |
| 57 | icon={ <Icon /> } |
| 58 | headerClassName={ classnames( 'gblocks-editor-sidebar-header', { |
| 59 | [ `gblocks-editor-sidebar-header--${ activePanel }` ]: activePanel, |
| 60 | } ) } |
| 61 | header={ |
| 62 | <SidebarHeader |
| 63 | activePanel={ activePanel } |
| 64 | setActivePanel={ setActivePanel } |
| 65 | > |
| 66 | <span className="gblocks-editor-sidebar-header__title"> |
| 67 | { __( 'GenerateBlocks', 'generateblocks' ) } |
| 68 | </span> |
| 69 | <Button |
| 70 | onClick={ () => openGeneralSidebar( 'edit-post/block' ) } |
| 71 | icon={ closeSmall } |
| 72 | label={ __( 'Close', 'generateblocks-pro' ) } |
| 73 | /> |
| 74 | </SidebarHeader> |
| 75 | } |
| 76 | > |
| 77 | <SidebarItems |
| 78 | name="generateblocks.editor.sidebar" |
| 79 | activePanel={ activePanel } |
| 80 | setActivePanel={ setActivePanel } |
| 81 | /> |
| 82 | </PluginSidebar> |
| 83 | ); |
| 84 | } |
| 85 | |
| 86 | registerPlugin( 'gblocks-editor-sidebar', { |
| 87 | render: EditorSidebar, |
| 88 | } ); |
| 89 |