UNPKG

@wordpress/block-library

Version:
8 lines (7 loc) 8.21 kB
{ "version": 3, "sources": ["../../src/group/placeholder.js"], "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useBlockProps } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { Path, SVG, Button, Placeholder } from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Returns a custom variation icon.\n *\n * @param {string} name The block variation name.\n *\n * @return {JSX.Element} The SVG element.\n */\nconst getGroupPlaceholderIcons = ( name = 'group' ) => {\n\tconst icons = {\n\t\tgroup: (\n\t\t\t<SVG\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\twidth=\"48\"\n\t\t\t\theight=\"48\"\n\t\t\t\tviewBox=\"0 0 48 48\"\n\t\t\t>\n\t\t\t\t<Path d=\"M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Z\" />\n\t\t\t</SVG>\n\t\t),\n\t\t'group-row': (\n\t\t\t<SVG\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\twidth=\"48\"\n\t\t\t\theight=\"48\"\n\t\t\t\tviewBox=\"0 0 48 48\"\n\t\t\t>\n\t\t\t\t<Path d=\"M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10Z\" />\n\t\t\t</SVG>\n\t\t),\n\t\t'group-stack': (\n\t\t\t<SVG\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\twidth=\"48\"\n\t\t\t\theight=\"48\"\n\t\t\t\tviewBox=\"0 0 48 48\"\n\t\t\t>\n\t\t\t\t<Path d=\"M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm0 17a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V27Z\" />\n\t\t\t</SVG>\n\t\t),\n\t\t'group-grid': (\n\t\t\t<SVG\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\twidth=\"48\"\n\t\t\t\theight=\"48\"\n\t\t\t\tviewBox=\"0 0 48 48\"\n\t\t\t>\n\t\t\t\t<Path d=\"M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10ZM0 27a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V27Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V27Z\" />\n\t\t\t</SVG>\n\t\t),\n\t};\n\treturn icons?.[ name ];\n};\n\n/**\n * A custom hook to tell the Group block whether to show the variation placeholder.\n *\n * @param {Object} props Arguments to pass to hook.\n * @param {Object} [props.attributes] The block's attributes.\n * @param {string} [props.usedLayoutType] The block's current layout type.\n * @param {boolean} [props.hasInnerBlocks] Whether the block has inner blocks.\n *\n * @return {[boolean, Function]} A state value and setter function.\n */\nexport function useShouldShowPlaceHolder( {\n\tattributes = {\n\t\tstyle: undefined,\n\t\tbackgroundColor: undefined,\n\t\ttextColor: undefined,\n\t\tfontSize: undefined,\n\t},\n\tusedLayoutType = '',\n\thasInnerBlocks = false,\n} ) {\n\tconst { style, backgroundColor, textColor, fontSize } = attributes;\n\t/*\n\t * Shows the placeholder when no known styles are set,\n\t * or when a non-default layout has been selected.\n\t * Should the Group block support more style presets in the\n\t * future, e.g., attributes.spacingSize, we can add them to the\n\t * condition.\n\t */\n\tconst [ showPlaceholder, setShowPlaceholder ] = useState(\n\t\t! hasInnerBlocks &&\n\t\t\t! backgroundColor &&\n\t\t\t! fontSize &&\n\t\t\t! textColor &&\n\t\t\t! style &&\n\t\t\tusedLayoutType !== 'flex' &&\n\t\t\tusedLayoutType !== 'grid'\n\t);\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\t!! hasInnerBlocks ||\n\t\t\t!! backgroundColor ||\n\t\t\t!! fontSize ||\n\t\t\t!! textColor ||\n\t\t\t!! style ||\n\t\t\tusedLayoutType === 'flex'\n\t\t) {\n\t\t\tsetShowPlaceholder( false );\n\t\t}\n\t}, [\n\t\tbackgroundColor,\n\t\tfontSize,\n\t\ttextColor,\n\t\tstyle,\n\t\tusedLayoutType,\n\t\thasInnerBlocks,\n\t] );\n\n\treturn [ showPlaceholder, setShowPlaceholder ];\n}\n\n/**\n * Display group variations if none is selected.\n *\n * @param {Object} props Component props.\n * @param {string} props.name The block's name.\n * @param {Function} props.onSelect Function to set block's attributes.\n *\n * @return {JSX.Element} The placeholder.\n */\nfunction GroupPlaceHolder( { name, onSelect } ) {\n\tconst variations = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockVariations( name, 'block' ),\n\t\t[ name ]\n\t);\n\tconst blockProps = useBlockProps( {\n\t\tclassName: 'wp-block-group__placeholder',\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( variations && variations.length === 1 ) {\n\t\t\tonSelect( variations[ 0 ] );\n\t\t}\n\t}, [ onSelect, variations ] );\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t<Placeholder\n\t\t\t\tinstructions={ __( 'Group blocks together. Select a layout:' ) }\n\t\t\t>\n\t\t\t\t{ /*\n\t\t\t\t * Taken from BlockVariationPicker component.\n\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t */\n\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t<ul\n\t\t\t\t\trole=\"list\"\n\t\t\t\t\tclassName=\"wp-block-group-placeholder__variations\"\n\t\t\t\t\taria-label={ __( 'Block variations' ) }\n\t\t\t\t>\n\t\t\t\t\t{ variations.map( ( variation ) => (\n\t\t\t\t\t\t<li key={ variation.name }>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\ticon={ getGroupPlaceholderIcons(\n\t\t\t\t\t\t\t\t\tvariation.name\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\ticonSize={ 48 }\n\t\t\t\t\t\t\t\tonClick={ () => onSelect( variation ) }\n\t\t\t\t\t\t\t\tclassName=\"wp-block-group-placeholder__variation-button\"\n\t\t\t\t\t\t\t\tlabel={ `${ variation.title }: ${ variation.description }` }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) ) }\n\t\t\t\t</ul>\n\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t</Placeholder>\n\t\t</div>\n\t);\n}\n\nexport default GroupPlaceHolder;\n"], "mappings": "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", "names": [] }