@wordpress/block-library
Version:
Block library for the WordPress editor.
8 lines (7 loc) • 10.1 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/accordion/edit.js"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tInspectorControls,\n\tBlockControls,\n\tuseBlockEditingMode,\n\tstore as blockEditorStore,\n\tHeadingLevelDropdown,\n} from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tToggleControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\tToolbarButton,\n\tToolbarGroup,\n} from '@wordpress/components';\nimport { useDispatch, useSelect, useRegistry } from '@wordpress/data';\nimport { createBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\nconst ACCORDION_BLOCK_NAME = 'core/accordion-item';\nconst ACCORDION_HEADING_BLOCK_NAME = 'core/accordion-heading';\nconst ACCORDION_BLOCK = {\n\tname: ACCORDION_BLOCK_NAME,\n};\n\nexport default function Edit( {\n\tattributes: {\n\t\tautoclose,\n\t\ticonPosition,\n\t\tshowIcon,\n\t\theadingLevel,\n\t\tlevelOptions,\n\t},\n\tclientId,\n\tsetAttributes,\n\tisSelected: isSingleSelected,\n} ) {\n\tconst registry = useRegistry();\n\tconst { getBlockOrder } = useSelect( blockEditorStore );\n\tconst blockProps = useBlockProps( {\n\t\trole: 'group',\n\t} );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst { updateBlockAttributes, insertBlock } =\n\t\tuseDispatch( blockEditorStore );\n\tconst blockEditingMode = useBlockEditingMode();\n\tconst isContentOnlyMode = blockEditingMode === 'contentOnly';\n\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: [ [ ACCORDION_BLOCK_NAME ] ],\n\t\tdefaultBlock: ACCORDION_BLOCK,\n\t\tdirectInsert: true,\n\t\ttemplateInsertUpdatesSelection: true,\n\t} );\n\n\tconst addAccordionItemBlock = () => {\n\t\t// When adding, set the header's level to current headingLevel\n\t\tconst newAccordionItem = createBlock( ACCORDION_BLOCK_NAME, {}, [\n\t\t\tcreateBlock( ACCORDION_HEADING_BLOCK_NAME, {\n\t\t\t\tlevel: headingLevel,\n\t\t\t} ),\n\t\t\tcreateBlock( 'core/accordion-panel', {} ),\n\t\t] );\n\t\tinsertBlock( newAccordionItem, undefined, clientId );\n\t};\n\n\t/**\n\t * Update all child Accordion Header blocks with a new heading level\n\t * based on the accordion group setting.\n\t * @param {number} newHeadingLevel The new heading level to set\n\t */\n\tconst updateHeadingLevel = ( newHeadingLevel ) => {\n\t\tconst innerBlockClientIds = getBlockOrder( clientId );\n\n\t\t// Get all accordion-header blocks from all accordion-content blocks.\n\t\tconst accordionHeaderClientIds = [];\n\t\tinnerBlockClientIds.forEach( ( contentClientId ) => {\n\t\t\tconst headerClientIds = getBlockOrder( contentClientId );\n\t\t\taccordionHeaderClientIds.push( ...headerClientIds );\n\t\t} );\n\n\t\t// Update own and child block heading levels.\n\t\tregistry.batch( () => {\n\t\t\tsetAttributes( { headingLevel: newHeadingLevel } );\n\t\t\tupdateBlockAttributes( accordionHeaderClientIds, {\n\t\t\t\tlevel: newHeadingLevel,\n\t\t\t} );\n\t\t} );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{ isSingleSelected && ! isContentOnlyMode && (\n\t\t\t\t<>\n\t\t\t\t\t<BlockControls>\n\t\t\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t\t\t<HeadingLevelDropdown\n\t\t\t\t\t\t\t\tvalue={ headingLevel }\n\t\t\t\t\t\t\t\toptions={ levelOptions }\n\t\t\t\t\t\t\t\tonChange={ updateHeadingLevel }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</ToolbarGroup>\n\t\t\t\t\t</BlockControls>\n\t\t\t\t\t<BlockControls group=\"other\">\n\t\t\t\t\t\t<ToolbarButton onClick={ addAccordionItemBlock }>\n\t\t\t\t\t\t\t{ __( 'Add item' ) }\n\t\t\t\t\t\t</ToolbarButton>\n\t\t\t\t\t</BlockControls>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t<InspectorControls key=\"setting\">\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tresetAll={ () => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tautoclose: false,\n\t\t\t\t\t\t\tshowIcon: true,\n\t\t\t\t\t\t\ticonPosition: 'right',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Auto-close' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => !! autoclose }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( { autoclose: false } )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\tlabel={ __( 'Auto-close' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tautoclose: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tchecked={ autoclose }\n\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t'Automatically close accordions when a new one is opened.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Show icon' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => ! showIcon }\n\t\t\t\t\t\tonDeselect={ () => setAttributes( { showIcon: true } ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\tlabel={ __( 'Show icon' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tshowIcon: value,\n\t\t\t\t\t\t\t\t\ticonPosition: value\n\t\t\t\t\t\t\t\t\t\t? iconPosition\n\t\t\t\t\t\t\t\t\t\t: 'right',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tchecked={ showIcon }\n\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t'Display a plus icon next to the accordion header.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t{ showIcon && (\n\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\tlabel={ __( 'Icon Position' ) }\n\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t\thasValue={ () => iconPosition !== 'right' }\n\t\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\t\tsetAttributes( { iconPosition: 'right' } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ToggleGroupControl\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tlabel={ __( 'Icon Position' ) }\n\t\t\t\t\t\t\t\tvalue={ iconPosition }\n\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\tsetAttributes( { iconPosition: value } );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Left' ) }\n\t\t\t\t\t\t\t\t\tvalue=\"left\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Right' ) }\n\t\t\t\t\t\t\t\t\tvalue=\"right\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ToggleGroupControl>\n\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t) }\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t\t<div { ...innerBlocksProps } />\n\t\t</>\n\t);\n}\n"],
"mappings": "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",
"names": ["blockEditorStore", "ToolsPanel", "ToolsPanelItem", "ToggleGroupControl", "ToggleGroupControlOption"]
}