@wordpress/block-library
Version:
Block library for the WordPress editor.
8 lines (7 loc) • 6.44 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/query/edit/query-placeholder.js"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tcreateBlocksFromInnerBlocksTemplate,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\nimport { useState } from '@wordpress/element';\nimport {\n\tstore as blockEditorStore,\n\t__experimentalBlockVariationPicker,\n\tuseBlockProps,\n} from '@wordpress/block-editor';\nimport { Button, Placeholder } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useResizeObserver } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { useScopedBlockVariations } from '../utils';\nimport { useBlockPatterns } from './pattern-selection';\nimport QueryToolbar from './query-toolbar';\n\nexport default function QueryPlaceholder( {\n\tattributes,\n\tclientId,\n\tname,\n\topenPatternSelectionModal,\n\tisSelected,\n} ) {\n\tconst [ isStartingBlank, setIsStartingBlank ] = useState( false );\n\tconst [ containerWidth, setContainerWidth ] = useState( 0 );\n\n\t// Use ResizeObserver to monitor container width.\n\tconst resizeObserverRef = useResizeObserver( ( [ entry ] ) => {\n\t\tsetContainerWidth( entry.contentRect.width );\n\t} );\n\n\tconst SMALL_CONTAINER_BREAKPOINT = 160;\n\n\tconst isSmallContainer =\n\t\tcontainerWidth > 0 && containerWidth < SMALL_CONTAINER_BREAKPOINT;\n\n\tconst { blockType, activeBlockVariation } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getActiveBlockVariation, getBlockType } =\n\t\t\t\tselect( blocksStore );\n\t\t\treturn {\n\t\t\t\tblockType: getBlockType( name ),\n\t\t\t\tactiveBlockVariation: getActiveBlockVariation(\n\t\t\t\t\tname,\n\t\t\t\t\tattributes\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ name, attributes ]\n\t);\n\tconst hasPatterns = !! useBlockPatterns( clientId, attributes ).length;\n\tconst icon =\n\t\tactiveBlockVariation?.icon?.src ||\n\t\tactiveBlockVariation?.icon ||\n\t\tblockType?.icon?.src;\n\tconst label = activeBlockVariation?.title || blockType?.title;\n\tconst blockProps = useBlockProps( {\n\t\tref: resizeObserverRef,\n\t} );\n\n\tif ( isStartingBlank ) {\n\t\treturn (\n\t\t\t<QueryVariationPicker\n\t\t\t\tclientId={ clientId }\n\t\t\t\tattributes={ attributes }\n\t\t\t\ticon={ icon }\n\t\t\t\tlabel={ label }\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ isSelected && (\n\t\t\t\t<QueryToolbar\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\thasInnerBlocks={ false }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Placeholder\n\t\t\t\tclassName=\"block-editor-media-placeholder\"\n\t\t\t\ticon={ ! isSmallContainer && icon }\n\t\t\t\tlabel={ ! isSmallContainer && label }\n\t\t\t\tinstructions={\n\t\t\t\t\t! isSmallContainer &&\n\t\t\t\t\t__( 'Choose a pattern for the query loop or start blank.' )\n\t\t\t\t}\n\t\t\t\twithIllustration={ isSmallContainer }\n\t\t\t>\n\t\t\t\t{ !! hasPatterns && ! isSmallContainer && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ openPatternSelectionModal }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Choose' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\n\t\t\t\t{ ! isSmallContainer && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetIsStartingBlank( true );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Start blank' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t</Placeholder>\n\t\t</div>\n\t);\n}\n\nfunction QueryVariationPicker( { clientId, attributes, icon, label } ) {\n\tconst scopeVariations = useScopedBlockVariations( attributes );\n\tconst { replaceInnerBlocks } = useDispatch( blockEditorStore );\n\tconst blockProps = useBlockProps();\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t<__experimentalBlockVariationPicker\n\t\t\t\ticon={ icon }\n\t\t\t\tlabel={ label }\n\t\t\t\tvariations={ scopeVariations }\n\t\t\t\tonSelect={ ( variation ) => {\n\t\t\t\t\tif ( variation.innerBlocks ) {\n\t\t\t\t\t\treplaceInnerBlocks(\n\t\t\t\t\t\t\tclientId,\n\t\t\t\t\t\t\tcreateBlocksFromInnerBlocksTemplate(\n\t\t\t\t\t\t\t\tvariation.innerBlocks\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],
"mappings": "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",
"names": []
}