UNPKG

@wordpress/block-library

Version:
8 lines (7 loc) 7.04 kB
{ "version": 3, "sources": ["../../src/group/edit.js"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tInnerBlocks,\n\tuseBlockProps,\n\tInspectorControls,\n\tuseInnerBlocksProps,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { View } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';\nimport { unlock } from '../lock-unlock';\n\nconst { HTMLElementControl } = unlock( blockEditorPrivateApis );\n\n/**\n * Render inspector controls for the Group block.\n *\n * @param {Object} props Component props.\n * @param {string} props.tagName The HTML tag name.\n * @param {Function} props.onSelectTagName onChange function for the SelectControl.\n * @param {string} props.clientId The client ID of the current block.\n *\n * @return {JSX.Element} The control group.\n */\nfunction GroupEditControls( { tagName, onSelectTagName, clientId } ) {\n\treturn (\n\t\t<InspectorControls group=\"advanced\">\n\t\t\t<HTMLElementControl\n\t\t\t\ttagName={ tagName }\n\t\t\t\tonChange={ onSelectTagName }\n\t\t\t\tclientId={ clientId }\n\t\t\t\toptions={ [\n\t\t\t\t\t{ label: __( 'Default (<div>)' ), value: 'div' },\n\t\t\t\t\t{ label: '<header>', value: 'header' },\n\t\t\t\t\t{ label: '<main>', value: 'main' },\n\t\t\t\t\t{ label: '<section>', value: 'section' },\n\t\t\t\t\t{ label: '<article>', value: 'article' },\n\t\t\t\t\t{ label: '<aside>', value: 'aside' },\n\t\t\t\t\t{ label: '<footer>', value: 'footer' },\n\t\t\t\t] }\n\t\t\t/>\n\t\t</InspectorControls>\n\t);\n}\n\nfunction GroupEdit( { attributes, name, setAttributes, clientId } ) {\n\tconst { hasInnerBlocks, themeSupportsLayout } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlock, getSettings } = select( blockEditorStore );\n\t\t\tconst block = getBlock( clientId );\n\t\t\treturn {\n\t\t\t\thasInnerBlocks: !! ( block && block.innerBlocks.length ),\n\t\t\t\tthemeSupportsLayout: getSettings()?.supportsLayout,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst {\n\t\ttagName: TagName = 'div',\n\t\ttemplateLock,\n\t\tallowedBlocks,\n\t\tlayout = {},\n\t} = attributes;\n\n\t// Layout settings.\n\tconst { type = 'default' } = layout;\n\tconst layoutSupportEnabled =\n\t\tthemeSupportsLayout || type === 'flex' || type === 'grid';\n\n\t// Hooks.\n\tconst ref = useRef();\n\tconst blockProps = useBlockProps( { ref } );\n\n\tconst [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {\n\t\tattributes,\n\t\tusedLayoutType: type,\n\t\thasInnerBlocks,\n\t} );\n\n\t// Default to the regular appender being rendered.\n\tlet renderAppender;\n\tif ( showPlaceholder ) {\n\t\t// In the placeholder state, ensure the appender is not rendered.\n\t\t// This is needed because `...innerBlocksProps` is used in the placeholder\n\t\t// state so that blocks can dragged onto the placeholder area\n\t\t// from both the list view and in the editor canvas.\n\t\trenderAppender = false;\n\t} else if ( ! hasInnerBlocks ) {\n\t\t// When there is no placeholder, but the block is also empty,\n\t\t// use the larger button appender.\n\t\trenderAppender = InnerBlocks.ButtonBlockAppender;\n\t}\n\n\tconst innerBlocksProps = useInnerBlocksProps(\n\t\tlayoutSupportEnabled\n\t\t\t? blockProps\n\t\t\t: { className: 'wp-block-group__inner-container' },\n\t\t{\n\t\t\tdropZoneElement: ref.current,\n\t\t\ttemplateLock,\n\t\t\tallowedBlocks,\n\t\t\trenderAppender,\n\t\t}\n\t);\n\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\n\tconst selectVariation = ( nextVariation ) => {\n\t\tsetAttributes( nextVariation.attributes );\n\t\tselectBlock( clientId, -1 );\n\t\tsetShowPlaceholder( false );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<GroupEditControls\n\t\t\t\ttagName={ TagName }\n\t\t\t\tonSelectTagName={ ( value ) =>\n\t\t\t\t\tsetAttributes( { tagName: value } )\n\t\t\t\t}\n\t\t\t\tclientId={ clientId }\n\t\t\t/>\n\t\t\t{ showPlaceholder && (\n\t\t\t\t<View>\n\t\t\t\t\t{ innerBlocksProps.children }\n\t\t\t\t\t<GroupPlaceHolder\n\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\tonSelect={ selectVariation }\n\t\t\t\t\t/>\n\t\t\t\t</View>\n\t\t\t) }\n\t\t\t{ layoutSupportEnabled && ! showPlaceholder && (\n\t\t\t\t<TagName { ...innerBlocksProps } />\n\t\t\t) }\n\t\t\t{ /* Ideally this is not needed but it's there for backward compatibility reason\n\t\t\t\tto keep this div for themes that might rely on its presence */ }\n\t\t\t{ ! layoutSupportEnabled && ! showPlaceholder && (\n\t\t\t\t<TagName { ...blockProps }>\n\t\t\t\t\t<div { ...innerBlocksProps } />\n\t\t\t\t</TagName>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default GroupEdit;\n"], "mappings": "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", "names": [] }