| New file |
| | |
| | | import { useBlockProps, InspectorControls } from '@wordpress/block-editor'; |
| | | import { PanelBody, ToggleControl, TextControl } from '@wordpress/components'; |
| | | |
| | | export default function Edit({ attributes, setAttributes }) { |
| | | const { menuId, collapsed } = attributes; |
| | | const blockProps = useBlockProps(); |
| | | |
| | | return ( |
| | | <> |
| | | <InspectorControls> |
| | | <PanelBody title="Drawer Settings"> |
| | | <TextControl |
| | | label="Menu ID" |
| | | value={menuId} |
| | | onChange={(value) => setAttributes({ menuId: value })} |
| | | help="PHP-generated menu identifier" |
| | | /> |
| | | <ToggleControl |
| | | label="Start Collapsed" |
| | | checked={collapsed} |
| | | onChange={(value) => setAttributes({ collapsed: value })} |
| | | /> |
| | | </PanelBody> |
| | | </InspectorControls> |
| | | <div {...blockProps}> |
| | | <div className="drawer-menu-preview"> |
| | | <p>Drawer Menu: {menuId || 'Not configured'}</p> |
| | | <p>State: {collapsed ? 'Collapsed' : 'Expanded'}</p> |
| | | </div> |
| | | </div> |
| | | </> |
| | | ); |
| | | } |