@wordpress/block-library 9.13.0 → 9.13.1-next.cd6172eb0.0

package/build-module/query/edit/inspector-controls/taxonomy-controls.js

@@ -1,4 +1,3 @@
-/* wp:polyfill */
 /**
  * WordPress dependencies
  */

package/build-module/query/edit/inspector-controls/taxonomy-controls.js.map

@@ -1 +1 @@
-{"version":3,"names":["FormTokenField","__experimentalVStack","VStack","useSelect","store","coreStore","useState","useEffect","useDebounce","decodeEntities","useTaxonomies","jsx","_jsx","EMPTY_ARRAY","BASE_QUERY","order","_fields","context","getTermIdByTermValue","terms","termValue","termId","id","find","term","name","termValueLower","toLocaleLowerCase","TaxonomyControls","onChange","query","postType","taxQuery","taxonomies","length","spacing","children","map","taxonomy","termIds","slug","handleChange","newTermIds","TaxonomyItem","search","setSearch","value","setValue","suggestions","setSuggestions","debouncedSearch","searchResults","searchHasResolved","select","getEntityRecords","hasFinishedResolution","selectorArgs","orderby","exclude","per_page","existingTerms","include","sanitizedValue","reduce","accumulator","entity","push","result","onTermsChange","newTermValues","Set","add","Array","from","className","label","onInputChange","displayTransform","__experimentalShowHowTo","__nextHasNoMarginBottom","__next40pxDefaultSize"],"sources":["@wordpress/block-library/src/query/edit/inspector-controls/taxonomy-controls.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tFormTokenField,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useState, useEffect } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport { useTaxonomies } from '../../utils';\n\nconst EMPTY_ARRAY = [];\nconst BASE_QUERY = {\n\torder: 'asc',\n\t_fields: 'id,name',\n\tcontext: 'view',\n};\n\n// Helper function to get the term id based on user input in terms `FormTokenField`.\nconst getTermIdByTermValue = ( terms, termValue ) => {\n\t// First we check for exact match by `term.id` or case sensitive `term.name` match.\n\tconst termId =\n\t\ttermValue?.id || terms?.find( ( term ) => term.name === termValue )?.id;\n\tif ( termId ) {\n\t\treturn termId;\n\t}\n\n\t/**\n\t * Here we make an extra check for entered terms in a non case sensitive way,\n\t * to match user expectations, due to `FormTokenField` behaviour that shows\n\t * suggestions which are case insensitive.\n\t *\n\t * Although WP tries to discourage users to add terms with the same name (case insensitive),\n\t * it's still possible if you manually change the name, as long as the terms have different slugs.\n\t * In this edge case we always apply the first match from the terms list.\n\t */\n\tconst termValueLower = termValue.toLocaleLowerCase();\n\treturn terms?.find(\n\t\t( term ) => term.name.toLocaleLowerCase() === termValueLower\n\t)?.id;\n};\n\nexport function TaxonomyControls( { onChange, query } ) {\n\tconst { postType, taxQuery } = query;\n\n\tconst taxonomies = useTaxonomies( postType );\n\tif ( ! taxonomies || taxonomies.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 4 }>\n\t\t\t{ taxonomies.map( ( taxonomy ) => {\n\t\t\t\tconst termIds = taxQuery?.[ taxonomy.slug ] || [];\n\t\t\t\tconst handleChange = ( newTermIds ) =>\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\ttaxQuery: {\n\t\t\t\t\t\t\t...taxQuery,\n\t\t\t\t\t\t\t[ taxonomy.slug ]: newTermIds,\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\n\t\t\t\treturn (\n\t\t\t\t\t<TaxonomyItem\n\t\t\t\t\t\tkey={ taxonomy.slug }\n\t\t\t\t\t\ttaxonomy={ taxonomy }\n\t\t\t\t\t\ttermIds={ termIds }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Renders a `FormTokenField` for a given taxonomy.\n *\n * @param {Object}   props          The props for the component.\n * @param {Object}   props.taxonomy The taxonomy object.\n * @param {number[]} props.termIds  An array with the block's term ids for the given taxonomy.\n * @param {Function} props.onChange Callback `onChange` function.\n * @return {JSX.Element} The rendered component.\n */\nfunction TaxonomyItem( { taxonomy, termIds, onChange } ) {\n\tconst [ search, setSearch ] = useState( '' );\n\tconst [ value, setValue ] = useState( EMPTY_ARRAY );\n\tconst [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );\n\tconst debouncedSearch = useDebounce( setSearch, 250 );\n\tconst { searchResults, searchHasResolved } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! search ) {\n\t\t\t\treturn { searchResults: EMPTY_ARRAY, searchHasResolved: true };\n\t\t\t}\n\t\t\tconst { getEntityRecords, hasFinishedResolution } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst selectorArgs = [\n\t\t\t\t'taxonomy',\n\t\t\t\ttaxonomy.slug,\n\t\t\t\t{\n\t\t\t\t\t...BASE_QUERY,\n\t\t\t\t\tsearch,\n\t\t\t\t\torderby: 'name',\n\t\t\t\t\texclude: termIds,\n\t\t\t\t\tper_page: 20,\n\t\t\t\t},\n\t\t\t];\n\t\t\treturn {\n\t\t\t\tsearchResults: getEntityRecords( ...selectorArgs ),\n\t\t\t\tsearchHasResolved: hasFinishedResolution(\n\t\t\t\t\t'getEntityRecords',\n\t\t\t\t\tselectorArgs\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ search, termIds ]\n\t);\n\t// `existingTerms` are the ones fetched from the API and their type is `{ id: number; name: string }`.\n\t// They are used to extract the terms' names to populate the `FormTokenField` properly\n\t// and to sanitize the provided `termIds`, by setting only the ones that exist.\n\tconst existingTerms = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! termIds?.length ) {\n\t\t\t\treturn EMPTY_ARRAY;\n\t\t\t}\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\treturn getEntityRecords( 'taxonomy', taxonomy.slug, {\n\t\t\t\t...BASE_QUERY,\n\t\t\t\tinclude: termIds,\n\t\t\t\tper_page: termIds.length,\n\t\t\t} );\n\t\t},\n\t\t[ termIds ]\n\t);\n\t// Update the `value` state only after the selectors are resolved\n\t// to avoid emptying the input when we're changing terms.\n\tuseEffect( () => {\n\t\tif ( ! termIds?.length ) {\n\t\t\tsetValue( EMPTY_ARRAY );\n\t\t}\n\t\tif ( ! existingTerms?.length ) {\n\t\t\treturn;\n\t\t}\n\t\t// Returns only the existing entity ids. This prevents the component\n\t\t// from crashing in the editor, when non existing ids are provided.\n\t\tconst sanitizedValue = termIds.reduce( ( accumulator, id ) => {\n\t\t\tconst entity = existingTerms.find( ( term ) => term.id === id );\n\t\t\tif ( entity ) {\n\t\t\t\taccumulator.push( {\n\t\t\t\t\tid,\n\t\t\t\t\tvalue: entity.name,\n\t\t\t\t} );\n\t\t\t}\n\t\t\treturn accumulator;\n\t\t}, [] );\n\t\tsetValue( sanitizedValue );\n\t}, [ termIds, existingTerms ] );\n\t// Update suggestions only when the query has resolved.\n\tuseEffect( () => {\n\t\tif ( ! searchHasResolved ) {\n\t\t\treturn;\n\t\t}\n\t\tsetSuggestions( searchResults.map( ( result ) => result.name ) );\n\t}, [ searchResults, searchHasResolved ] );\n\tconst onTermsChange = ( newTermValues ) => {\n\t\tconst newTermIds = new Set();\n\t\tfor ( const termValue of newTermValues ) {\n\t\t\tconst termId = getTermIdByTermValue( searchResults, termValue );\n\t\t\tif ( termId ) {\n\t\t\t\tnewTermIds.add( termId );\n\t\t\t}\n\t\t}\n\t\tsetSuggestions( EMPTY_ARRAY );\n\t\tonChange( Array.from( newTermIds ) );\n\t};\n\treturn (\n\t\t<div className=\"block-library-query-inspector__taxonomy-control\">\n\t\t\t<FormTokenField\n\t\t\t\tlabel={ taxonomy.name }\n\t\t\t\tvalue={ value }\n\t\t\t\tonInputChange={ debouncedSearch }\n\t\t\t\tsuggestions={ suggestions }\n\t\t\t\tdisplayTransform={ decodeEntities }\n\t\t\t\tonChange={ onTermsChange }\n\t\t\t\t__experimentalShowHowTo={ false }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["FormTokenField","__experimentalVStack","VStack","useSelect","store","coreStore","useState","useEffect","useDebounce","decodeEntities","useTaxonomies","jsx","_jsx","EMPTY_ARRAY","BASE_QUERY","order","_fields","context","getTermIdByTermValue","terms","termValue","termId","id","find","term","name","termValueLower","toLocaleLowerCase","TaxonomyControls","onChange","query","postType","taxQuery","taxonomies","length","spacing","children","map","taxonomy","termIds","slug","handleChange","newTermIds","TaxonomyItem","search","setSearch","value","setValue","suggestions","setSuggestions","debouncedSearch","searchResults","searchHasResolved","select","getEntityRecords","hasFinishedResolution","selectorArgs","orderby","exclude","per_page","existingTerms","include","sanitizedValue","reduce","accumulator","entity","push","result","onTermsChange","newTermValues","Set","add","Array","from","className","label","onInputChange","displayTransform","__experimentalShowHowTo","__nextHasNoMarginBottom","__next40pxDefaultSize"],"sources":["@wordpress/block-library/src/query/edit/inspector-controls/taxonomy-controls.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tFormTokenField,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useState, useEffect } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport { useTaxonomies } from '../../utils';\n\nconst EMPTY_ARRAY = [];\nconst BASE_QUERY = {\n\torder: 'asc',\n\t_fields: 'id,name',\n\tcontext: 'view',\n};\n\n// Helper function to get the term id based on user input in terms `FormTokenField`.\nconst getTermIdByTermValue = ( terms, termValue ) => {\n\t// First we check for exact match by `term.id` or case sensitive `term.name` match.\n\tconst termId =\n\t\ttermValue?.id || terms?.find( ( term ) => term.name === termValue )?.id;\n\tif ( termId ) {\n\t\treturn termId;\n\t}\n\n\t/**\n\t * Here we make an extra check for entered terms in a non case sensitive way,\n\t * to match user expectations, due to `FormTokenField` behaviour that shows\n\t * suggestions which are case insensitive.\n\t *\n\t * Although WP tries to discourage users to add terms with the same name (case insensitive),\n\t * it's still possible if you manually change the name, as long as the terms have different slugs.\n\t * In this edge case we always apply the first match from the terms list.\n\t */\n\tconst termValueLower = termValue.toLocaleLowerCase();\n\treturn terms?.find(\n\t\t( term ) => term.name.toLocaleLowerCase() === termValueLower\n\t)?.id;\n};\n\nexport function TaxonomyControls( { onChange, query } ) {\n\tconst { postType, taxQuery } = query;\n\n\tconst taxonomies = useTaxonomies( postType );\n\tif ( ! taxonomies || taxonomies.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 4 }>\n\t\t\t{ taxonomies.map( ( taxonomy ) => {\n\t\t\t\tconst termIds = taxQuery?.[ taxonomy.slug ] || [];\n\t\t\t\tconst handleChange = ( newTermIds ) =>\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\ttaxQuery: {\n\t\t\t\t\t\t\t...taxQuery,\n\t\t\t\t\t\t\t[ taxonomy.slug ]: newTermIds,\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\n\t\t\t\treturn (\n\t\t\t\t\t<TaxonomyItem\n\t\t\t\t\t\tkey={ taxonomy.slug }\n\t\t\t\t\t\ttaxonomy={ taxonomy }\n\t\t\t\t\t\ttermIds={ termIds }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Renders a `FormTokenField` for a given taxonomy.\n *\n * @param {Object}   props          The props for the component.\n * @param {Object}   props.taxonomy The taxonomy object.\n * @param {number[]} props.termIds  An array with the block's term ids for the given taxonomy.\n * @param {Function} props.onChange Callback `onChange` function.\n * @return {JSX.Element} The rendered component.\n */\nfunction TaxonomyItem( { taxonomy, termIds, onChange } ) {\n\tconst [ search, setSearch ] = useState( '' );\n\tconst [ value, setValue ] = useState( EMPTY_ARRAY );\n\tconst [ suggestions, setSuggestions ] = useState( EMPTY_ARRAY );\n\tconst debouncedSearch = useDebounce( setSearch, 250 );\n\tconst { searchResults, searchHasResolved } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! search ) {\n\t\t\t\treturn { searchResults: EMPTY_ARRAY, searchHasResolved: true };\n\t\t\t}\n\t\t\tconst { getEntityRecords, hasFinishedResolution } =\n\t\t\t\tselect( coreStore );\n\t\t\tconst selectorArgs = [\n\t\t\t\t'taxonomy',\n\t\t\t\ttaxonomy.slug,\n\t\t\t\t{\n\t\t\t\t\t...BASE_QUERY,\n\t\t\t\t\tsearch,\n\t\t\t\t\torderby: 'name',\n\t\t\t\t\texclude: termIds,\n\t\t\t\t\tper_page: 20,\n\t\t\t\t},\n\t\t\t];\n\t\t\treturn {\n\t\t\t\tsearchResults: getEntityRecords( ...selectorArgs ),\n\t\t\t\tsearchHasResolved: hasFinishedResolution(\n\t\t\t\t\t'getEntityRecords',\n\t\t\t\t\tselectorArgs\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ search, termIds ]\n\t);\n\t// `existingTerms` are the ones fetched from the API and their type is `{ id: number; name: string }`.\n\t// They are used to extract the terms' names to populate the `FormTokenField` properly\n\t// and to sanitize the provided `termIds`, by setting only the ones that exist.\n\tconst existingTerms = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! termIds?.length ) {\n\t\t\t\treturn EMPTY_ARRAY;\n\t\t\t}\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\treturn getEntityRecords( 'taxonomy', taxonomy.slug, {\n\t\t\t\t...BASE_QUERY,\n\t\t\t\tinclude: termIds,\n\t\t\t\tper_page: termIds.length,\n\t\t\t} );\n\t\t},\n\t\t[ termIds ]\n\t);\n\t// Update the `value` state only after the selectors are resolved\n\t// to avoid emptying the input when we're changing terms.\n\tuseEffect( () => {\n\t\tif ( ! termIds?.length ) {\n\t\t\tsetValue( EMPTY_ARRAY );\n\t\t}\n\t\tif ( ! existingTerms?.length ) {\n\t\t\treturn;\n\t\t}\n\t\t// Returns only the existing entity ids. This prevents the component\n\t\t// from crashing in the editor, when non existing ids are provided.\n\t\tconst sanitizedValue = termIds.reduce( ( accumulator, id ) => {\n\t\t\tconst entity = existingTerms.find( ( term ) => term.id === id );\n\t\t\tif ( entity ) {\n\t\t\t\taccumulator.push( {\n\t\t\t\t\tid,\n\t\t\t\t\tvalue: entity.name,\n\t\t\t\t} );\n\t\t\t}\n\t\t\treturn accumulator;\n\t\t}, [] );\n\t\tsetValue( sanitizedValue );\n\t}, [ termIds, existingTerms ] );\n\t// Update suggestions only when the query has resolved.\n\tuseEffect( () => {\n\t\tif ( ! searchHasResolved ) {\n\t\t\treturn;\n\t\t}\n\t\tsetSuggestions( searchResults.map( ( result ) => result.name ) );\n\t}, [ searchResults, searchHasResolved ] );\n\tconst onTermsChange = ( newTermValues ) => {\n\t\tconst newTermIds = new Set();\n\t\tfor ( const termValue of newTermValues ) {\n\t\t\tconst termId = getTermIdByTermValue( searchResults, termValue );\n\t\t\tif ( termId ) {\n\t\t\t\tnewTermIds.add( termId );\n\t\t\t}\n\t\t}\n\t\tsetSuggestions( EMPTY_ARRAY );\n\t\tonChange( Array.from( newTermIds ) );\n\t};\n\treturn (\n\t\t<div className=\"block-library-query-inspector__taxonomy-control\">\n\t\t\t<FormTokenField\n\t\t\t\tlabel={ taxonomy.name }\n\t\t\t\tvalue={ value }\n\t\t\t\tonInputChange={ debouncedSearch }\n\t\t\t\tsuggestions={ suggestions }\n\t\t\t\tdisplayTransform={ decodeEntities }\n\t\t\t\tonChange={ onTermsChange }\n\t\t\t\t__experimentalShowHowTo={ false }\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/query/edit/{pattern-selection-modal.js → pattern-selection.js}

@@ -13,16 +13,48 @@ import { __ } from '@wordpress/i18n';
 import { useBlockNameForPatterns, getTransformedBlocksFromPattern, usePatterns } from '../utils';
 import { searchPatterns } from '../../utils/search-patterns';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function PatternSelectionModal({
+export function PatternSelectionModal({
   clientId,
   attributes,
   setIsPatternSelectionModalOpen
+}) {
+  return /*#__PURE__*/_jsx(Modal, {
+    overlayClassName: "block-library-query-pattern__selection-modal",
+    title: __('Choose a pattern'),
+    onRequestClose: () => setIsPatternSelectionModalOpen(false),
+    isFullScreen: true,
+    children: /*#__PURE__*/_jsx(PatternSelection, {
+      clientId: clientId,
+      attributes: attributes
+    })
+  });
+}
+export function useBlockPatterns(clientId, attributes) {
+  const blockNameForPatterns = useBlockNameForPatterns(clientId, attributes);
+  return usePatterns(clientId, blockNameForPatterns);
+}
+export default function PatternSelection({
+  clientId,
+  attributes,
+  showTitlesAsTooltip = false,
+  showSearch = true
 }) {
   const [searchValue, setSearchValue] = useState('');
   const {
     replaceBlock,
     selectBlock
   } = useDispatch(blockEditorStore);
+  const blockPatterns = useBlockPatterns(clientId, attributes);
+  /*
+   * When we preview Query Loop blocks we should prefer the current
+   * block's postType, which is passed through block context.
+   */
+  const blockPreviewContext = useMemo(() => ({
+    previewPostType: attributes.query.postType
+  }), [attributes.query.postType]);
+  const filteredBlockPatterns = useMemo(() => {
+    return searchPatterns(blockPatterns, searchValue);
+  }, [blockPatterns, searchValue]);
   const onBlockPatternSelect = (pattern, blocks) => {
     const {
       newBlocks,
@@ -33,40 +65,25 @@ export default function PatternSelectionModal({
       selectBlock(queryClientIds[0]);
     }
   };
-  // When we preview Query Loop blocks we should prefer the current
-  // block's postType, which is passed through block context.
-  const blockPreviewContext = useMemo(() => ({
-    previewPostType: attributes.query.postType
-  }), [attributes.query.postType]);
-  const blockNameForPatterns = useBlockNameForPatterns(clientId, attributes);
-  const blockPatterns = usePatterns(clientId, blockNameForPatterns);
-  const filteredBlockPatterns = useMemo(() => {
-    return searchPatterns(blockPatterns, searchValue);
-  }, [blockPatterns, searchValue]);
-  return /*#__PURE__*/_jsx(Modal, {
-    overlayClassName: "block-library-query-pattern__selection-modal",
-    title: __('Choose a pattern'),
-    onRequestClose: () => setIsPatternSelectionModalOpen(false),
-    isFullScreen: true,
-    children: /*#__PURE__*/_jsxs("div", {
-      className: "block-library-query-pattern__selection-content",
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "block-library-query-pattern__selection-search",
-        children: /*#__PURE__*/_jsx(SearchControl, {
-          __nextHasNoMarginBottom: true,
-          onChange: setSearchValue,
-          value: searchValue,
-          label: __('Search'),
-          placeholder: __('Search')
-        })
-      }), /*#__PURE__*/_jsx(BlockContextProvider, {
-        value: blockPreviewContext,
-        children: /*#__PURE__*/_jsx(BlockPatternsList, {
-          blockPatterns: filteredBlockPatterns,
-          onClickPattern: onBlockPatternSelect
-        })
-      })]
-    })
+  return /*#__PURE__*/_jsxs("div", {
+    className: "block-library-query-pattern__selection-content",
+    children: [showSearch && /*#__PURE__*/_jsx("div", {
+      className: "block-library-query-pattern__selection-search",
+      children: /*#__PURE__*/_jsx(SearchControl, {
+        __nextHasNoMarginBottom: true,
+        onChange: setSearchValue,
+        value: searchValue,
+        label: __('Search'),
+        placeholder: __('Search')
+      })
+    }), /*#__PURE__*/_jsx(BlockContextProvider, {
+      value: blockPreviewContext,
+      children: /*#__PURE__*/_jsx(BlockPatternsList, {
+        blockPatterns: filteredBlockPatterns,
+        onClickPattern: onBlockPatternSelect,
+        showTitlesAsTooltip: showTitlesAsTooltip
+      })
+    })]
   });
 }
-//# sourceMappingURL=pattern-selection-modal.js.map
+//# sourceMappingURL=pattern-selection.js.map

package/build-module/query/edit/pattern-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useState","useMemo","useDispatch","Modal","SearchControl","BlockContextProvider","store","blockEditorStore","__experimentalBlockPatternsList","BlockPatternsList","__","useBlockNameForPatterns","getTransformedBlocksFromPattern","usePatterns","searchPatterns","jsx","_jsx","jsxs","_jsxs","PatternSelectionModal","clientId","attributes","setIsPatternSelectionModalOpen","overlayClassName","title","onRequestClose","isFullScreen","children","PatternSelection","useBlockPatterns","blockNameForPatterns","showTitlesAsTooltip","showSearch","searchValue","setSearchValue","replaceBlock","selectBlock","blockPatterns","blockPreviewContext","previewPostType","query","postType","filteredBlockPatterns","onBlockPatternSelect","pattern","blocks","newBlocks","queryClientIds","className","__nextHasNoMarginBottom","onChange","value","label","placeholder","onClickPattern"],"sources":["@wordpress/block-library/src/query/edit/pattern-selection.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useMemo } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\nimport { Modal, SearchControl } from '@wordpress/components';\nimport {\n\tBlockContextProvider,\n\tstore as blockEditorStore,\n\t__experimentalBlockPatternsList as BlockPatternsList,\n} from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseBlockNameForPatterns,\n\tgetTransformedBlocksFromPattern,\n\tusePatterns,\n} from '../utils';\nimport { searchPatterns } from '../../utils/search-patterns';\n\nexport function PatternSelectionModal( {\n\tclientId,\n\tattributes,\n\tsetIsPatternSelectionModalOpen,\n} ) {\n\treturn (\n\t\t<Modal\n\t\t\toverlayClassName=\"block-library-query-pattern__selection-modal\"\n\t\t\ttitle={ __( 'Choose a pattern' ) }\n\t\t\tonRequestClose={ () => setIsPatternSelectionModalOpen( false ) }\n\t\t\tisFullScreen\n\t\t>\n\t\t\t<PatternSelection clientId={ clientId } attributes={ attributes } />\n\t\t</Modal>\n\t);\n}\n\nexport function useBlockPatterns( clientId, attributes ) {\n\tconst blockNameForPatterns = useBlockNameForPatterns(\n\t\tclientId,\n\t\tattributes\n\t);\n\treturn usePatterns( clientId, blockNameForPatterns );\n}\n\nexport default function PatternSelection( {\n\tclientId,\n\tattributes,\n\tshowTitlesAsTooltip = false,\n\tshowSearch = true,\n} ) {\n\tconst [ searchValue, setSearchValue ] = useState( '' );\n\tconst { replaceBlock, selectBlock } = useDispatch( blockEditorStore );\n\tconst blockPatterns = useBlockPatterns( clientId, attributes );\n\t/*\n\t * When we preview Query Loop blocks we should prefer the current\n\t * block's postType, which is passed through block context.\n\t */\n\tconst blockPreviewContext = useMemo(\n\t\t() => ( {\n\t\t\tpreviewPostType: attributes.query.postType,\n\t\t} ),\n\t\t[ attributes.query.postType ]\n\t);\n\tconst filteredBlockPatterns = useMemo( () => {\n\t\treturn searchPatterns( blockPatterns, searchValue );\n\t}, [ blockPatterns, searchValue ] );\n\n\tconst onBlockPatternSelect = ( pattern, blocks ) => {\n\t\tconst { newBlocks, queryClientIds } = getTransformedBlocksFromPattern(\n\t\t\tblocks,\n\t\t\tattributes\n\t\t);\n\t\treplaceBlock( clientId, newBlocks );\n\t\tif ( queryClientIds[ 0 ] ) {\n\t\t\tselectBlock( queryClientIds[ 0 ] );\n\t\t}\n\t};\n\treturn (\n\t\t<div className=\"block-library-query-pattern__selection-content\">\n\t\t\t{ showSearch && (\n\t\t\t\t<div className=\"block-library-query-pattern__selection-search\">\n\t\t\t\t\t<SearchControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tonChange={ setSearchValue }\n\t\t\t\t\t\tvalue={ searchValue }\n\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<BlockContextProvider value={ blockPreviewContext }>\n\t\t\t\t<BlockPatternsList\n\t\t\t\t\tblockPatterns={ filteredBlockPatterns }\n\t\t\t\t\tonClickPattern={ onBlockPatternSelect }\n\t\t\t\t\tshowTitlesAsTooltip={ showTitlesAsTooltip }\n\t\t\t\t/>\n\t\t\t</BlockContextProvider>\n\t\t</div>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/query/edit/query-content.js

@@ -13,20 +13,19 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import EnhancedPaginationControl from './inspector-controls/enhanced-pagination-control';
-import QueryToolbar from './query-toolbar';
 import QueryInspectorControls from './inspector-controls';
 import EnhancedPaginationModal from './enhanced-pagination-modal';
 import { getQueryContextFromTemplate } from '../utils';
+import QueryToolbar from './query-toolbar';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const DEFAULTS_POSTS_PER_PAGE = 3;
 const TEMPLATE = [['core/post-template']];
 export default function QueryContent({
   attributes,
   setAttributes,
-  openPatternSelectionModal,
-  name,
   clientId,
-  context
+  context,
+  name
 }) {
   const {
     queryId,
@@ -138,6 +137,7 @@ export default function QueryContent({
       clientId: clientId
     }), /*#__PURE__*/_jsx(InspectorControls, {
       children: /*#__PURE__*/_jsx(QueryInspectorControls, {
+        name: name,
         attributes: attributes,
         setQuery: updateQuery,
         setDisplayLayout: updateDisplayLayout,
@@ -147,11 +147,8 @@ export default function QueryContent({
       })
     }), /*#__PURE__*/_jsx(BlockControls, {
       children: /*#__PURE__*/_jsx(QueryToolbar, {
-        name: name,
-        clientId: clientId,
         attributes: attributes,
-        setQuery: updateQuery,
-        openPatternSelectionModal: openPatternSelectionModal
+        clientId: clientId
       })
     }), /*#__PURE__*/_jsxs(InspectorControls, {
       group: "advanced",

package/build-module/query/edit/query-content.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelect","useDispatch","useInstanceId","useEffect","useCallback","BlockControls","InspectorControls","useBlockProps","store","blockEditorStore","useInnerBlocksProps","SelectControl","__","coreStore","EnhancedPaginationControl","QueryToolbar","QueryInspectorControls","EnhancedPaginationModal","getQueryContextFromTemplate","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DEFAULTS_POSTS_PER_PAGE","TEMPLATE","QueryContent","attributes","setAttributes","openPatternSelectionModal","name","clientId","context","queryId","query","displayLayout","enhancedPagination","tagName","TagName","inherit","templateSlug","isSingular","__unstableMarkNextChangeAsNotPersistent","instanceId","blockProps","innerBlocksProps","template","postsPerPage","select","getSettings","getEntityRecord","getEntityRecordEdits","canUser","settingPerPage","kind","posts_per_page","editedSettingPerPage","updateQuery","newQuery","perPage","Object","keys","length","Number","isFinite","updateDisplayLayout","newDisplayLayout","htmlElementMessages","main","section","aside","children","setQuery","setDisplayLayout","group","__nextHasNoMarginBottom","__next40pxDefaultSize","label","options","value","onChange","help"],"sources":["@wordpress/block-library/src/query/edit/query-content.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useCallback } from '@wordpress/element';\nimport {\n\tBlockControls,\n\tInspectorControls,\n\tuseBlockProps,\n\tstore as blockEditorStore,\n\tuseInnerBlocksProps,\n} from '@wordpress/block-editor';\nimport { SelectControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport EnhancedPaginationControl from './inspector-controls/enhanced-pagination-control';\nimport QueryToolbar from './query-toolbar';\nimport QueryInspectorControls from './inspector-controls';\nimport EnhancedPaginationModal from './enhanced-pagination-modal';\nimport { getQueryContextFromTemplate } from '../utils';\n\nconst DEFAULTS_POSTS_PER_PAGE = 3;\n\nconst TEMPLATE = [ [ 'core/post-template' ] ];\nexport default function QueryContent( {\n\tattributes,\n\tsetAttributes,\n\topenPatternSelectionModal,\n\tname,\n\tclientId,\n\tcontext,\n} ) {\n\tconst {\n\t\tqueryId,\n\t\tquery,\n\t\tdisplayLayout,\n\t\tenhancedPagination,\n\t\ttagName: TagName = 'div',\n\t\tquery: { inherit } = {},\n\t} = attributes;\n\tconst { templateSlug } = context;\n\tconst { isSingular } = getQueryContextFromTemplate( templateSlug );\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst instanceId = useInstanceId( QueryContent );\n\tconst blockProps = useBlockProps();\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: TEMPLATE,\n\t} );\n\tconst { postsPerPage } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst { getEntityRecord, getEntityRecordEdits, canUser } =\n\t\t\tselect( coreStore );\n\t\tconst settingPerPage = canUser( 'read', {\n\t\t\tkind: 'root',\n\t\t\tname: 'site',\n\t\t} )\n\t\t\t? +getEntityRecord( 'root', 'site' )?.posts_per_page\n\t\t\t: +getSettings().postsPerPage;\n\n\t\t// Gets changes made via the template area posts per page setting. These won't be saved\n\t\t// until the page is saved, but we should reflect this setting within the query loops\n\t\t// that inherit it.\n\t\tconst editedSettingPerPage = +getEntityRecordEdits( 'root', 'site' )\n\t\t\t?.posts_per_page;\n\n\t\treturn {\n\t\t\tpostsPerPage:\n\t\t\t\teditedSettingPerPage ||\n\t\t\t\tsettingPerPage ||\n\t\t\t\tDEFAULTS_POSTS_PER_PAGE,\n\t\t};\n\t}, [] );\n\t// There are some effects running where some initialization logic is\n\t// happening and setting some values to some attributes (ex. queryId).\n\t// These updates can cause an `undo trap` where undoing will result in\n\t// resetting again, so we need to mark these changes as not persistent\n\t// with `__unstableMarkNextChangeAsNotPersistent`.\n\n\t// Changes in query property (which is an object) need to be in the same callback,\n\t// because updates are batched after the render and changes in different query properties\n\t// would cause to override previous wanted changes.\n\tconst updateQuery = useCallback(\n\t\t( newQuery ) => setAttributes( { query: { ...query, ...newQuery } } ),\n\t\t[ query, setAttributes ]\n\t);\n\tuseEffect( () => {\n\t\tconst newQuery = {};\n\t\t// When we inherit from global query always need to set the `perPage`\n\t\t// based on the reading settings.\n\t\tif ( inherit && query.perPage !== postsPerPage ) {\n\t\t\tnewQuery.perPage = postsPerPage;\n\t\t} else if ( ! query.perPage && postsPerPage ) {\n\t\t\tnewQuery.perPage = postsPerPage;\n\t\t}\n\t\t// We need to reset the `inherit` value if in a singular template, as queries\n\t\t// are not inherited when in singular content (e.g. post, page, 404, blank).\n\t\tif ( isSingular && query.inherit ) {\n\t\t\tnewQuery.inherit = false;\n\t\t}\n\t\tif ( !! Object.keys( newQuery ).length ) {\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tupdateQuery( newQuery );\n\t\t}\n\t}, [\n\t\tquery.perPage,\n\t\tquery.inherit,\n\t\tpostsPerPage,\n\t\tinherit,\n\t\tisSingular,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\tupdateQuery,\n\t] );\n\t// We need this for multi-query block pagination.\n\t// Query parameters for each block are scoped to their ID.\n\tuseEffect( () => {\n\t\tif ( ! Number.isFinite( queryId ) ) {\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( { queryId: instanceId } );\n\t\t}\n\t}, [\n\t\tqueryId,\n\t\tinstanceId,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\tsetAttributes,\n\t] );\n\tconst updateDisplayLayout = ( newDisplayLayout ) =>\n\t\tsetAttributes( {\n\t\t\tdisplayLayout: { ...displayLayout, ...newDisplayLayout },\n\t\t} );\n\tconst htmlElementMessages = {\n\t\tmain: __(\n\t\t\t'The <main> element should be used for the primary content of your document only.'\n\t\t),\n\t\tsection: __(\n\t\t\t\"The <section> element should represent a standalone portion of the document that can't be better represented by another element.\"\n\t\t),\n\t\taside: __(\n\t\t\t\"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content.\"\n\t\t),\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<EnhancedPaginationModal\n\t\t\t\tattributes={ attributes }\n\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\tclientId={ clientId }\n\t\t\t/>\n\t\t\t<InspectorControls>\n\t\t\t\t<QueryInspectorControls\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tsetQuery={ updateQuery }\n\t\t\t\t\tsetDisplayLayout={ updateDisplayLayout }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tisSingular={ isSingular }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t\t<BlockControls>\n\t\t\t\t<QueryToolbar\n\t\t\t\t\tname={ name }\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tsetQuery={ updateQuery }\n\t\t\t\t\topenPatternSelectionModal={ openPatternSelectionModal }\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\t\t\t<InspectorControls group=\"advanced\">\n\t\t\t\t<SelectControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'HTML element' ) }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{ label: __( 'Default (<div>)' ), value: 'div' },\n\t\t\t\t\t\t{ label: '<main>', value: 'main' },\n\t\t\t\t\t\t{ label: '<section>', value: 'section' },\n\t\t\t\t\t\t{ label: '<aside>', value: 'aside' },\n\t\t\t\t\t] }\n\t\t\t\t\tvalue={ TagName }\n\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\tsetAttributes( { tagName: value } )\n\t\t\t\t\t}\n\t\t\t\t\thelp={ htmlElementMessages[ TagName ] }\n\t\t\t\t/>\n\t\t\t\t<EnhancedPaginationControl\n\t\t\t\t\tenhancedPagination={ enhancedPagination }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t\t<TagName { ...innerBlocksProps } />\n\t\t</>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,WAAW,QAAQ,iBAAiB;AACxD,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,SAAS,EAAEC,WAAW,QAAQ,oBAAoB;AAC3D,SACCC,aAAa,EACbC,iBAAiB,EACjBC,aAAa,EACbC,KAAK,IAAIC,gBAAgB,EACzBC,mBAAmB,QACb,yBAAyB;AAChC,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASJ,KAAK,IAAIK,SAAS,QAAQ,sBAAsB;;AAEzD;AACA;AACA;AACA,OAAOC,yBAAyB,MAAM,kDAAkD;AACxF,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,sBAAsB,MAAM,sBAAsB;AACzD,OAAOC,uBAAuB,MAAM,6BAA6B;AACjE,SAASC,2BAA2B,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAEvD,MAAMC,uBAAuB,GAAG,CAAC;AAEjC,MAAMC,QAAQ,GAAG,CAAE,CAAE,oBAAoB,CAAE,CAAE;AAC7C,eAAe,SAASC,YAAYA,CAAE;EACrCC,UAAU;EACVC,aAAa;EACbC,yBAAyB;EACzBC,IAAI;EACJC,QAAQ;EACRC;AACD,CAAC,EAAG;EACH,MAAM;IACLC,OAAO;IACPC,KAAK;IACLC,aAAa;IACbC,kBAAkB;IAClBC,OAAO,EAAEC,OAAO,GAAG,KAAK;IACxBJ,KAAK,EAAE;MAAEK;IAAQ,CAAC,GAAG,CAAC;EACvB,CAAC,GAAGZ,UAAU;EACd,MAAM;IAAEa;EAAa,CAAC,GAAGR,OAAO;EAChC,MAAM;IAAES;EAAW,CAAC,GAAGxB,2BAA2B,CAAEuB,YAAa,CAAC;EAClE,MAAM;IAAEE;EAAwC,CAAC,GAChD1C,WAAW,CAAEQ,gBAAiB,CAAC;EAChC,MAAMmC,UAAU,GAAG1C,aAAa,CAAEyB,YAAa,CAAC;EAChD,MAAMkB,UAAU,GAAGtC,aAAa,CAAC,CAAC;EAClC,MAAMuC,gBAAgB,GAAGpC,mBAAmB,CAAEmC,UAAU,EAAE;IACzDE,QAAQ,EAAErB;EACX,CAAE,CAAC;EACH,MAAM;IAAEsB;EAAa,CAAC,GAAGhD,SAAS,CAAIiD,MAAM,IAAM;IACjD,MAAM;MAAEC;IAAY,CAAC,GAAGD,MAAM,CAAExC,gBAAiB,CAAC;IAClD,MAAM;MAAE0C,eAAe;MAAEC,oBAAoB;MAAEC;IAAQ,CAAC,GACvDJ,MAAM,CAAEpC,SAAU,CAAC;IACpB,MAAMyC,cAAc,GAAGD,OAAO,CAAE,MAAM,EAAE;MACvCE,IAAI,EAAE,MAAM;MACZxB,IAAI,EAAE;IACP,CAAE,CAAC,GACA,CAACoB,eAAe,CAAE,MAAM,EAAE,MAAO,CAAC,EAAEK,cAAc,GAClD,CAACN,WAAW,CAAC,CAAC,CAACF,YAAY;;IAE9B;IACA;IACA;IACA,MAAMS,oBAAoB,GAAG,CAACL,oBAAoB,CAAE,MAAM,EAAE,MAAO,CAAC,EACjEI,cAAc;IAEjB,OAAO;MACNR,YAAY,EACXS,oBAAoB,IACpBH,cAAc,IACd7B;IACF,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EACP;EACA;EACA;EACA;EACA;;EAEA;EACA;EACA;EACA,MAAMiC,WAAW,GAAGtD,WAAW,CAC5BuD,QAAQ,IAAM9B,aAAa,CAAE;IAAEM,KAAK,EAAE;MAAE,GAAGA,KAAK;MAAE,GAAGwB;IAAS;EAAE,CAAE,CAAC,EACrE,CAAExB,KAAK,EAAEN,aAAa,CACvB,CAAC;EACD1B,SAAS,CAAE,MAAM;IAChB,MAAMwD,QAAQ,GAAG,CAAC,CAAC;IACnB;IACA;IACA,IAAKnB,OAAO,IAAIL,KAAK,CAACyB,OAAO,KAAKZ,YAAY,EAAG;MAChDW,QAAQ,CAACC,OAAO,GAAGZ,YAAY;IAChC,CAAC,MAAM,IAAK,CAAEb,KAAK,CAACyB,OAAO,IAAIZ,YAAY,EAAG;MAC7CW,QAAQ,CAACC,OAAO,GAAGZ,YAAY;IAChC;IACA;IACA;IACA,IAAKN,UAAU,IAAIP,KAAK,CAACK,OAAO,EAAG;MAClCmB,QAAQ,CAACnB,OAAO,GAAG,KAAK;IACzB;IACA,IAAK,CAAC,CAAEqB,MAAM,CAACC,IAAI,CAAEH,QAAS,CAAC,CAACI,MAAM,EAAG;MACxCpB,uCAAuC,CAAC,CAAC;MACzCe,WAAW,CAAEC,QAAS,CAAC;IACxB;EACD,CAAC,EAAE,CACFxB,KAAK,CAACyB,OAAO,EACbzB,KAAK,CAACK,OAAO,EACbQ,YAAY,EACZR,OAAO,EACPE,UAAU,EACVC,uCAAuC,EACvCe,WAAW,CACV,CAAC;EACH;EACA;EACAvD,SAAS,CAAE,MAAM;IAChB,IAAK,CAAE6D,MAAM,CAACC,QAAQ,CAAE/B,OAAQ,CAAC,EAAG;MACnCS,uCAAuC,CAAC,CAAC;MACzCd,aAAa,CAAE;QAAEK,OAAO,EAAEU;MAAW,CAAE,CAAC;IACzC;EACD,CAAC,EAAE,CACFV,OAAO,EACPU,UAAU,EACVD,uCAAuC,EACvCd,aAAa,CACZ,CAAC;EACH,MAAMqC,mBAAmB,GAAKC,gBAAgB,IAC7CtC,aAAa,CAAE;IACdO,aAAa,EAAE;MAAE,GAAGA,aAAa;MAAE,GAAG+B;IAAiB;EACxD,CAAE,CAAC;EACJ,MAAMC,mBAAmB,GAAG;IAC3BC,IAAI,EAAEzD,EAAE,CACP,kFACD,CAAC;IACD0D,OAAO,EAAE1D,EAAE,CACV,kIACD,CAAC;IACD2D,KAAK,EAAE3D,EAAE,CACR,uIACD;EACD,CAAC;EAED,oBACCU,KAAA,CAAAE,SAAA;IAAAgD,QAAA,gBACCpD,IAAA,CAACH,uBAAuB;MACvBW,UAAU,EAAGA,UAAY;MACzBC,aAAa,EAAGA,aAAe;MAC/BG,QAAQ,EAAGA;IAAU,CACrB,CAAC,eACFZ,IAAA,CAACd,iBAAiB;MAAAkE,QAAA,eACjBpD,IAAA,CAACJ,sBAAsB;QACtBY,UAAU,EAAGA,UAAY;QACzB6C,QAAQ,EAAGf,WAAa;QACxBgB,gBAAgB,EAAGR,mBAAqB;QACxCrC,aAAa,EAAGA,aAAe;QAC/BG,QAAQ,EAAGA,QAAU;QACrBU,UAAU,EAAGA;MAAY,CACzB;IAAC,CACgB,CAAC,eACpBtB,IAAA,CAACf,aAAa;MAAAmE,QAAA,eACbpD,IAAA,CAACL,YAAY;QACZgB,IAAI,EAAGA,IAAM;QACbC,QAAQ,EAAGA,QAAU;QACrBJ,UAAU,EAAGA,UAAY;QACzB6C,QAAQ,EAAGf,WAAa;QACxB5B,yBAAyB,EAAGA;MAA2B,CACvD;IAAC,CACY,CAAC,eAChBR,KAAA,CAAChB,iBAAiB;MAACqE,KAAK,EAAC,UAAU;MAAAH,QAAA,gBAClCpD,IAAA,CAACT,aAAa;QACbiE,uBAAuB;QACvBC,qBAAqB;QACrBC,KAAK,EAAGlE,EAAE,CAAE,cAAe,CAAG;QAC9BmE,OAAO,EAAG,CACT;UAAED,KAAK,EAAElE,EAAE,CAAE,iBAAkB,CAAC;UAAEoE,KAAK,EAAE;QAAM,CAAC,EAChD;UAAEF,KAAK,EAAE,QAAQ;UAAEE,KAAK,EAAE;QAAO,CAAC,EAClC;UAAEF,KAAK,EAAE,WAAW;UAAEE,KAAK,EAAE;QAAU,CAAC,EACxC;UAAEF,KAAK,EAAE,SAAS;UAAEE,KAAK,EAAE;QAAQ,CAAC,CAClC;QACHA,KAAK,EAAGzC,OAAS;QACjB0C,QAAQ,EAAKD,KAAK,IACjBnD,aAAa,CAAE;UAAES,OAAO,EAAE0C;QAAM,CAAE,CAClC;QACDE,IAAI,EAAGd,mBAAmB,CAAE7B,OAAO;MAAI,CACvC,CAAC,eACFnB,IAAA,CAACN,yBAAyB;QACzBuB,kBAAkB,EAAGA,kBAAoB;QACzCR,aAAa,EAAGA,aAAe;QAC/BG,QAAQ,EAAGA;MAAU,CACrB,CAAC;IAAA,CACgB,CAAC,eACpBZ,IAAA,CAACmB,OAAO;MAAA,GAAMO;IAAgB,CAAI,CAAC;EAAA,CAClC,CAAC;AAEL","ignoreList":[]}
+{"version":3,"names":["useSelect","useDispatch","useInstanceId","useEffect","useCallback","BlockControls","InspectorControls","useBlockProps","store","blockEditorStore","useInnerBlocksProps","SelectControl","__","coreStore","EnhancedPaginationControl","QueryInspectorControls","EnhancedPaginationModal","getQueryContextFromTemplate","QueryToolbar","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DEFAULTS_POSTS_PER_PAGE","TEMPLATE","QueryContent","attributes","setAttributes","clientId","context","name","queryId","query","displayLayout","enhancedPagination","tagName","TagName","inherit","templateSlug","isSingular","__unstableMarkNextChangeAsNotPersistent","instanceId","blockProps","innerBlocksProps","template","postsPerPage","select","getSettings","getEntityRecord","getEntityRecordEdits","canUser","settingPerPage","kind","posts_per_page","editedSettingPerPage","updateQuery","newQuery","perPage","Object","keys","length","Number","isFinite","updateDisplayLayout","newDisplayLayout","htmlElementMessages","main","section","aside","children","setQuery","setDisplayLayout","group","__nextHasNoMarginBottom","__next40pxDefaultSize","label","options","value","onChange","help"],"sources":["@wordpress/block-library/src/query/edit/query-content.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useCallback } from '@wordpress/element';\nimport {\n\tBlockControls,\n\tInspectorControls,\n\tuseBlockProps,\n\tstore as blockEditorStore,\n\tuseInnerBlocksProps,\n} from '@wordpress/block-editor';\nimport { SelectControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport EnhancedPaginationControl from './inspector-controls/enhanced-pagination-control';\nimport QueryInspectorControls from './inspector-controls';\nimport EnhancedPaginationModal from './enhanced-pagination-modal';\nimport { getQueryContextFromTemplate } from '../utils';\nimport QueryToolbar from './query-toolbar';\n\nconst DEFAULTS_POSTS_PER_PAGE = 3;\n\nconst TEMPLATE = [ [ 'core/post-template' ] ];\nexport default function QueryContent( {\n\tattributes,\n\tsetAttributes,\n\tclientId,\n\tcontext,\n\tname,\n} ) {\n\tconst {\n\t\tqueryId,\n\t\tquery,\n\t\tdisplayLayout,\n\t\tenhancedPagination,\n\t\ttagName: TagName = 'div',\n\t\tquery: { inherit } = {},\n\t} = attributes;\n\tconst { templateSlug } = context;\n\tconst { isSingular } = getQueryContextFromTemplate( templateSlug );\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst instanceId = useInstanceId( QueryContent );\n\tconst blockProps = useBlockProps();\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: TEMPLATE,\n\t} );\n\tconst { postsPerPage } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst { getEntityRecord, getEntityRecordEdits, canUser } =\n\t\t\tselect( coreStore );\n\t\tconst settingPerPage = canUser( 'read', {\n\t\t\tkind: 'root',\n\t\t\tname: 'site',\n\t\t} )\n\t\t\t? +getEntityRecord( 'root', 'site' )?.posts_per_page\n\t\t\t: +getSettings().postsPerPage;\n\n\t\t// Gets changes made via the template area posts per page setting. These won't be saved\n\t\t// until the page is saved, but we should reflect this setting within the query loops\n\t\t// that inherit it.\n\t\tconst editedSettingPerPage = +getEntityRecordEdits( 'root', 'site' )\n\t\t\t?.posts_per_page;\n\n\t\treturn {\n\t\t\tpostsPerPage:\n\t\t\t\teditedSettingPerPage ||\n\t\t\t\tsettingPerPage ||\n\t\t\t\tDEFAULTS_POSTS_PER_PAGE,\n\t\t};\n\t}, [] );\n\t// There are some effects running where some initialization logic is\n\t// happening and setting some values to some attributes (ex. queryId).\n\t// These updates can cause an `undo trap` where undoing will result in\n\t// resetting again, so we need to mark these changes as not persistent\n\t// with `__unstableMarkNextChangeAsNotPersistent`.\n\n\t// Changes in query property (which is an object) need to be in the same callback,\n\t// because updates are batched after the render and changes in different query properties\n\t// would cause to override previous wanted changes.\n\tconst updateQuery = useCallback(\n\t\t( newQuery ) => setAttributes( { query: { ...query, ...newQuery } } ),\n\t\t[ query, setAttributes ]\n\t);\n\tuseEffect( () => {\n\t\tconst newQuery = {};\n\t\t// When we inherit from global query always need to set the `perPage`\n\t\t// based on the reading settings.\n\t\tif ( inherit && query.perPage !== postsPerPage ) {\n\t\t\tnewQuery.perPage = postsPerPage;\n\t\t} else if ( ! query.perPage && postsPerPage ) {\n\t\t\tnewQuery.perPage = postsPerPage;\n\t\t}\n\t\t// We need to reset the `inherit` value if in a singular template, as queries\n\t\t// are not inherited when in singular content (e.g. post, page, 404, blank).\n\t\tif ( isSingular && query.inherit ) {\n\t\t\tnewQuery.inherit = false;\n\t\t}\n\t\tif ( !! Object.keys( newQuery ).length ) {\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tupdateQuery( newQuery );\n\t\t}\n\t}, [\n\t\tquery.perPage,\n\t\tquery.inherit,\n\t\tpostsPerPage,\n\t\tinherit,\n\t\tisSingular,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\tupdateQuery,\n\t] );\n\t// We need this for multi-query block pagination.\n\t// Query parameters for each block are scoped to their ID.\n\tuseEffect( () => {\n\t\tif ( ! Number.isFinite( queryId ) ) {\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( { queryId: instanceId } );\n\t\t}\n\t}, [\n\t\tqueryId,\n\t\tinstanceId,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\tsetAttributes,\n\t] );\n\tconst updateDisplayLayout = ( newDisplayLayout ) =>\n\t\tsetAttributes( {\n\t\t\tdisplayLayout: { ...displayLayout, ...newDisplayLayout },\n\t\t} );\n\tconst htmlElementMessages = {\n\t\tmain: __(\n\t\t\t'The <main> element should be used for the primary content of your document only.'\n\t\t),\n\t\tsection: __(\n\t\t\t\"The <section> element should represent a standalone portion of the document that can't be better represented by another element.\"\n\t\t),\n\t\taside: __(\n\t\t\t\"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content.\"\n\t\t),\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<EnhancedPaginationModal\n\t\t\t\tattributes={ attributes }\n\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\tclientId={ clientId }\n\t\t\t/>\n\t\t\t<InspectorControls>\n\t\t\t\t<QueryInspectorControls\n\t\t\t\t\tname={ name }\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tsetQuery={ updateQuery }\n\t\t\t\t\tsetDisplayLayout={ updateDisplayLayout }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tisSingular={ isSingular }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t\t<BlockControls>\n\t\t\t\t<QueryToolbar attributes={ attributes } clientId={ clientId } />\n\t\t\t</BlockControls>\n\t\t\t<InspectorControls group=\"advanced\">\n\t\t\t\t<SelectControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'HTML element' ) }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{ label: __( 'Default (<div>)' ), value: 'div' },\n\t\t\t\t\t\t{ label: '<main>', value: 'main' },\n\t\t\t\t\t\t{ label: '<section>', value: 'section' },\n\t\t\t\t\t\t{ label: '<aside>', value: 'aside' },\n\t\t\t\t\t] }\n\t\t\t\t\tvalue={ TagName }\n\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\tsetAttributes( { tagName: value } )\n\t\t\t\t\t}\n\t\t\t\t\thelp={ htmlElementMessages[ TagName ] }\n\t\t\t\t/>\n\t\t\t\t<EnhancedPaginationControl\n\t\t\t\t\tenhancedPagination={ enhancedPagination }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t\t<TagName { ...innerBlocksProps } />\n\t\t</>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/query/edit/query-placeholder.js

@@ -11,7 +11,8 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useScopedBlockVariations, useBlockNameForPatterns } from '../utils';
+import { useScopedBlockVariations } from '../utils';
+import { useBlockPatterns } from './pattern-selection';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function QueryPlaceholder({
   attributes,
@@ -21,27 +22,20 @@ export default function QueryPlaceholder({
 }) {
   const [isStartingBlank, setIsStartingBlank] = useState(false);
   const blockProps = useBlockProps();
-  const blockNameForPatterns = useBlockNameForPatterns(clientId, attributes);
   const {
     blockType,
-    activeBlockVariation,
-    hasPatterns
+    activeBlockVariation
   } = useSelect(select => {
     const {
       getActiveBlockVariation,
       getBlockType
     } = select(blocksStore);
-    const {
-      getBlockRootClientId,
-      getPatternsByBlockTypes
-    } = select(blockEditorStore);
-    const rootClientId = getBlockRootClientId(clientId);
     return {
       blockType: getBlockType(name),
-      activeBlockVariation: getActiveBlockVariation(name, attributes),
-      hasPatterns: !!getPatternsByBlockTypes(blockNameForPatterns, rootClientId).length
+      activeBlockVariation: getActiveBlockVariation(name, attributes)
     };
-  }, [name, blockNameForPatterns, clientId, attributes]);
+  }, [name, attributes]);
+  const hasPatterns = !!useBlockPatterns(clientId, attributes).length;
   const icon = activeBlockVariation?.icon?.src || activeBlockVariation?.icon || blockType?.icon?.src;
   const label = activeBlockVariation?.title || blockType?.title;
   if (isStartingBlank) {

package/build-module/query/edit/query-placeholder.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelect","useDispatch","createBlocksFromInnerBlocksTemplate","store","blocksStore","useState","useBlockProps","blockEditorStore","__experimentalBlockVariationPicker","Button","Placeholder","__","useScopedBlockVariations","useBlockNameForPatterns","jsx","_jsx","jsxs","_jsxs","QueryPlaceholder","attributes","clientId","name","openPatternSelectionModal","isStartingBlank","setIsStartingBlank","blockProps","blockNameForPatterns","blockType","activeBlockVariation","hasPatterns","select","getActiveBlockVariation","getBlockType","getBlockRootClientId","getPatternsByBlockTypes","rootClientId","length","icon","src","label","title","QueryVariationPicker","children","instructions","__next40pxDefaultSize","variant","onClick","scopeVariations","replaceInnerBlocks","variations","onSelect","variation","innerBlocks"],"sources":["@wordpress/block-library/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\tuseBlockProps,\n\tstore as blockEditorStore,\n\t__experimentalBlockVariationPicker,\n} from '@wordpress/block-editor';\nimport { Button, Placeholder } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useScopedBlockVariations, useBlockNameForPatterns } from '../utils';\n\nexport default function QueryPlaceholder( {\n\tattributes,\n\tclientId,\n\tname,\n\topenPatternSelectionModal,\n} ) {\n\tconst [ isStartingBlank, setIsStartingBlank ] = useState( false );\n\tconst blockProps = useBlockProps();\n\tconst blockNameForPatterns = useBlockNameForPatterns(\n\t\tclientId,\n\t\tattributes\n\t);\n\tconst { blockType, activeBlockVariation, hasPatterns } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getActiveBlockVariation, getBlockType } =\n\t\t\t\tselect( blocksStore );\n\t\t\tconst { getBlockRootClientId, getPatternsByBlockTypes } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst rootClientId = getBlockRootClientId( clientId );\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\thasPatterns: !! getPatternsByBlockTypes(\n\t\t\t\t\tblockNameForPatterns,\n\t\t\t\t\trootClientId\n\t\t\t\t).length,\n\t\t\t};\n\t\t},\n\t\t[ name, blockNameForPatterns, clientId, attributes ]\n\t);\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\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<Placeholder\n\t\t\t\ticon={ icon }\n\t\t\t\tlabel={ label }\n\t\t\t\tinstructions={ __(\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>\n\t\t\t\t{ !! hasPatterns && (\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<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetIsStartingBlank( true );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Start blank' ) }\n\t\t\t\t</Button>\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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","ignoreList":[]}
+{"version":3,"names":["useSelect","useDispatch","createBlocksFromInnerBlocksTemplate","store","blocksStore","useState","useBlockProps","blockEditorStore","__experimentalBlockVariationPicker","Button","Placeholder","__","useScopedBlockVariations","useBlockPatterns","jsx","_jsx","jsxs","_jsxs","QueryPlaceholder","attributes","clientId","name","openPatternSelectionModal","isStartingBlank","setIsStartingBlank","blockProps","blockType","activeBlockVariation","select","getActiveBlockVariation","getBlockType","hasPatterns","length","icon","src","label","title","QueryVariationPicker","children","instructions","__next40pxDefaultSize","variant","onClick","scopeVariations","replaceInnerBlocks","variations","onSelect","variation","innerBlocks"],"sources":["@wordpress/block-library/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\tuseBlockProps,\n\tstore as blockEditorStore,\n\t__experimentalBlockVariationPicker,\n} from '@wordpress/block-editor';\nimport { Button, Placeholder } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useScopedBlockVariations } from '../utils';\nimport { useBlockPatterns } from './pattern-selection';\n\nexport default function QueryPlaceholder( {\n\tattributes,\n\tclientId,\n\tname,\n\topenPatternSelectionModal,\n} ) {\n\tconst [ isStartingBlank, setIsStartingBlank ] = useState( false );\n\tconst blockProps = useBlockProps();\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\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<Placeholder\n\t\t\t\ticon={ icon }\n\t\t\t\tlabel={ label }\n\t\t\t\tinstructions={ __(\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>\n\t\t\t\t{ !! hasPatterns && (\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<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetIsStartingBlank( true );\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Start blank' ) }\n\t\t\t\t</Button>\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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","ignoreList":[]}

package/build-module/query/edit/query-toolbar.js

@@ -1,26 +1,44 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { ToolbarGroup, ToolbarButton, Dropdown, __experimentalDropdownContentWrapper as DropdownContentWrapper } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { usePatterns } from '../utils';
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import PatternSelection, { useBlockPatterns } from './pattern-selection';
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function QueryToolbar({
-  openPatternSelectionModal,
-  name,
-  clientId
+  clientId,
+  attributes
 }) {
-  const hasPatterns = !!usePatterns(clientId, name).length;
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: hasPatterns && /*#__PURE__*/_jsx(ToolbarGroup, {
-      className: "wp-block-template-part__block-control-group",
-      children: /*#__PURE__*/_jsx(ToolbarButton, {
-        onClick: openPatternSelectionModal,
-        children: __('Replace')
+  const hasPatterns = useBlockPatterns(clientId, attributes).length;
+  if (!hasPatterns) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(ToolbarGroup, {
+    className: "wp-block-template-part__block-control-group",
+    children: /*#__PURE__*/_jsx(DropdownContentWrapper, {
+      children: /*#__PURE__*/_jsx(Dropdown, {
+        contentClassName: "block-editor-block-settings-menu__popover",
+        focusOnMount: "firstElement",
+        expandOnMobile: true,
+        renderToggle: ({
+          isOpen,
+          onToggle
+        }) => /*#__PURE__*/_jsx(ToolbarButton, {
+          "aria-haspopup": "true",
+          "aria-expanded": isOpen,
+          onClick: onToggle,
+          children: __('Change design')
+        }),
+        renderContent: () => /*#__PURE__*/_jsx(PatternSelection, {
+          clientId: clientId,
+          attributes: attributes,
+          showSearch: false,
+          showTitlesAsTooltip: true
+        })
       })
     })
   });

package/build-module/query/edit/query-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["ToolbarGroup","ToolbarButton","__","usePatterns","jsx","_jsx","Fragment","_Fragment","QueryToolbar","openPatternSelectionModal","name","clientId","hasPatterns","length","children","className","onClick"],"sources":["@wordpress/block-library/src/query/edit/query-toolbar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarGroup, ToolbarButton } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { usePatterns } from '../utils';\n\nexport default function QueryToolbar( {\n\topenPatternSelectionModal,\n\tname,\n\tclientId,\n} ) {\n\tconst hasPatterns = !! usePatterns( clientId, name ).length;\n\n\treturn (\n\t\t<>\n\t\t\t{ hasPatterns && (\n\t\t\t\t<ToolbarGroup className=\"wp-block-template-part__block-control-group\">\n\t\t\t\t\t<ToolbarButton onClick={ openPatternSelectionModal }>\n\t\t\t\t\t\t{ __( 'Replace' ) }\n\t\t\t\t\t</ToolbarButton>\n\t\t\t\t</ToolbarGroup>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,EAAEC,aAAa,QAAQ,uBAAuB;AACnE,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,WAAW,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA;AAEvC,eAAe,SAASC,YAAYA,CAAE;EACrCC,yBAAyB;EACzBC,IAAI;EACJC;AACD,CAAC,EAAG;EACH,MAAMC,WAAW,GAAG,CAAC,CAAET,WAAW,CAAEQ,QAAQ,EAAED,IAAK,CAAC,CAACG,MAAM;EAE3D,oBACCR,IAAA,CAAAE,SAAA;IAAAO,QAAA,EACGF,WAAW,iBACZP,IAAA,CAACL,YAAY;MAACe,SAAS,EAAC,6CAA6C;MAAAD,QAAA,eACpET,IAAA,CAACJ,aAAa;QAACe,OAAO,EAAGP,yBAA2B;QAAAK,QAAA,EACjDZ,EAAE,CAAE,SAAU;MAAC,CACH;IAAC,CACH;EACd,CACA,CAAC;AAEL","ignoreList":[]}
+{"version":3,"names":["ToolbarGroup","ToolbarButton","Dropdown","__experimentalDropdownContentWrapper","DropdownContentWrapper","__","PatternSelection","useBlockPatterns","jsx","_jsx","QueryToolbar","clientId","attributes","hasPatterns","length","className","children","contentClassName","focusOnMount","expandOnMobile","renderToggle","isOpen","onToggle","onClick","renderContent","showSearch","showTitlesAsTooltip"],"sources":["@wordpress/block-library/src/query/edit/query-toolbar.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tToolbarGroup,\n\tToolbarButton,\n\tDropdown,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport PatternSelection, { useBlockPatterns } from './pattern-selection';\n\nexport default function QueryToolbar( { clientId, attributes } ) {\n\tconst hasPatterns = useBlockPatterns( clientId, attributes ).length;\n\tif ( ! hasPatterns ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ToolbarGroup className=\"wp-block-template-part__block-control-group\">\n\t\t\t<DropdownContentWrapper>\n\t\t\t\t<Dropdown\n\t\t\t\t\tcontentClassName=\"block-editor-block-settings-menu__popover\"\n\t\t\t\t\tfocusOnMount=\"firstElement\"\n\t\t\t\t\texpandOnMobile\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Change design' ) }\n\t\t\t\t\t\t</ToolbarButton>\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ () => (\n\t\t\t\t\t\t<PatternSelection\n\t\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\t\t\tshowSearch={ false }\n\t\t\t\t\t\t\tshowTitlesAsTooltip\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</DropdownContentWrapper>\n\t\t</ToolbarGroup>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,YAAY,EACZC,aAAa,EACbC,QAAQ,EACRC,oCAAoC,IAAIC,sBAAsB,QACxD,uBAAuB;AAC9B,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,gBAAgB,IAAIC,gBAAgB,QAAQ,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEzE,eAAe,SAASC,YAAYA,CAAE;EAAEC,QAAQ;EAAEC;AAAW,CAAC,EAAG;EAChE,MAAMC,WAAW,GAAGN,gBAAgB,CAAEI,QAAQ,EAAEC,UAAW,CAAC,CAACE,MAAM;EACnE,IAAK,CAAED,WAAW,EAAG;IACpB,OAAO,IAAI;EACZ;EAEA,oBACCJ,IAAA,CAACT,YAAY;IAACe,SAAS,EAAC,6CAA6C;IAAAC,QAAA,eACpEP,IAAA,CAACL,sBAAsB;MAAAY,QAAA,eACtBP,IAAA,CAACP,QAAQ;QACRe,gBAAgB,EAAC,2CAA2C;QAC5DC,YAAY,EAAC,cAAc;QAC3BC,cAAc;QACdC,YAAY,EAAGA,CAAE;UAAEC,MAAM;UAAEC;QAAS,CAAC,kBACpCb,IAAA,CAACR,aAAa;UACb,iBAAc,MAAM;UACpB,iBAAgBoB,MAAQ;UACxBE,OAAO,EAAGD,QAAU;UAAAN,QAAA,EAElBX,EAAE,CAAE,eAAgB;QAAC,CACT,CACb;QACHmB,aAAa,EAAGA,CAAA,kBACff,IAAA,CAACH,gBAAgB;UAChBK,QAAQ,EAAGA,QAAU;UACrBC,UAAU,EAAGA,UAAY;UACzBa,UAAU,EAAG,KAAO;UACpBC,mBAAmB;QAAA,CACnB;MACC,CACH;IAAC,CACqB;EAAC,CACZ,CAAC;AAEjB","ignoreList":[]}

package/build-module/separator/deprecated.js

@@ -61,7 +61,8 @@ const v1 = {
         color: {
           background: customColor
         }
-      } : undefined
+      } : undefined,
+      tagName: 'hr'
     };
   }
 };

package/build-module/separator/deprecated.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","getColorClassName","useBlockProps","jsx","_jsx","v1","attributes","color","type","customColor","save","backgroundClass","colorClass","className","style","backgroundColor","undefined","migrate","restAttributes","opacity","background"],"sources":["@wordpress/block-library/src/separator/deprecated.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { getColorClassName, useBlockProps } from '@wordpress/block-editor';\n\nconst v1 = {\n\tattributes: {\n\t\tcolor: {\n\t\t\ttype: 'string',\n\t\t},\n\t\tcustomColor: {\n\t\t\ttype: 'string',\n\t\t},\n\t},\n\tsave( { attributes } ) {\n\t\tconst { color, customColor } = attributes;\n\n\t\t// the hr support changing color using border-color, since border-color\n\t\t// is not yet supported in the color palette, we use background-color\n\t\tconst backgroundClass = getColorClassName( 'background-color', color );\n\t\t// the dots styles uses text for the dots, to change those dots color is\n\t\t// using color, not backgroundColor\n\t\tconst colorClass = getColorClassName( 'color', color );\n\n\t\tconst className = clsx( {\n\t\t\t'has-text-color has-background': color || customColor,\n\t\t\t[ backgroundClass ]: backgroundClass,\n\t\t\t[ colorClass ]: colorClass,\n\t\t} );\n\n\t\tconst style = {\n\t\t\tbackgroundColor: backgroundClass ? undefined : customColor,\n\t\t\tcolor: colorClass ? undefined : customColor,\n\t\t};\n\n\t\treturn <hr { ...useBlockProps.save( { className, style } ) } />;\n\t},\n\tmigrate( attributes ) {\n\t\tconst { color, customColor, ...restAttributes } = attributes;\n\t\treturn {\n\t\t\t...restAttributes,\n\t\t\tbackgroundColor: color ? color : undefined,\n\t\t\topacity: 'css',\n\t\t\tstyle: customColor\n\t\t\t\t? { color: { background: customColor } }\n\t\t\t\t: undefined,\n\t\t};\n\t},\n};\n\nexport default [ v1 ];\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3E,MAAMC,EAAE,GAAG;EACVC,UAAU,EAAE;IACXC,KAAK,EAAE;MACNC,IAAI,EAAE;IACP,CAAC;IACDC,WAAW,EAAE;MACZD,IAAI,EAAE;IACP;EACD,CAAC;EACDE,IAAIA,CAAE;IAAEJ;EAAW,CAAC,EAAG;IACtB,MAAM;MAAEC,KAAK;MAAEE;IAAY,CAAC,GAAGH,UAAU;;IAEzC;IACA;IACA,MAAMK,eAAe,GAAGV,iBAAiB,CAAE,kBAAkB,EAAEM,KAAM,CAAC;IACtE;IACA;IACA,MAAMK,UAAU,GAAGX,iBAAiB,CAAE,OAAO,EAAEM,KAAM,CAAC;IAEtD,MAAMM,SAAS,GAAGb,IAAI,CAAE;MACvB,+BAA+B,EAAEO,KAAK,IAAIE,WAAW;MACrD,CAAEE,eAAe,GAAIA,eAAe;MACpC,CAAEC,UAAU,GAAIA;IACjB,CAAE,CAAC;IAEH,MAAME,KAAK,GAAG;MACbC,eAAe,EAAEJ,eAAe,GAAGK,SAAS,GAAGP,WAAW;MAC1DF,KAAK,EAAEK,UAAU,GAAGI,SAAS,GAAGP;IACjC,CAAC;IAED,oBAAOL,IAAA;MAAA,GAASF,aAAa,CAACQ,IAAI,CAAE;QAAEG,SAAS;QAAEC;MAAM,CAAE;IAAC,CAAI,CAAC;EAChE,CAAC;EACDG,OAAOA,CAAEX,UAAU,EAAG;IACrB,MAAM;MAAEC,KAAK;MAAEE,WAAW;MAAE,GAAGS;IAAe,CAAC,GAAGZ,UAAU;IAC5D,OAAO;MACN,GAAGY,cAAc;MACjBH,eAAe,EAAER,KAAK,GAAGA,KAAK,GAAGS,SAAS;MAC1CG,OAAO,EAAE,KAAK;MACdL,KAAK,EAAEL,WAAW,GACf;QAAEF,KAAK,EAAE;UAAEa,UAAU,EAAEX;QAAY;MAAE,CAAC,GACtCO;IACJ,CAAC;EACF;AACD,CAAC;AAED,eAAe,CAAEX,EAAE,CAAE","ignoreList":[]}
+{"version":3,"names":["clsx","getColorClassName","useBlockProps","jsx","_jsx","v1","attributes","color","type","customColor","save","backgroundClass","colorClass","className","style","backgroundColor","undefined","migrate","restAttributes","opacity","background","tagName"],"sources":["@wordpress/block-library/src/separator/deprecated.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { getColorClassName, useBlockProps } from '@wordpress/block-editor';\n\nconst v1 = {\n\tattributes: {\n\t\tcolor: {\n\t\t\ttype: 'string',\n\t\t},\n\t\tcustomColor: {\n\t\t\ttype: 'string',\n\t\t},\n\t},\n\tsave( { attributes } ) {\n\t\tconst { color, customColor } = attributes;\n\n\t\t// the hr support changing color using border-color, since border-color\n\t\t// is not yet supported in the color palette, we use background-color\n\t\tconst backgroundClass = getColorClassName( 'background-color', color );\n\t\t// the dots styles uses text for the dots, to change those dots color is\n\t\t// using color, not backgroundColor\n\t\tconst colorClass = getColorClassName( 'color', color );\n\n\t\tconst className = clsx( {\n\t\t\t'has-text-color has-background': color || customColor,\n\t\t\t[ backgroundClass ]: backgroundClass,\n\t\t\t[ colorClass ]: colorClass,\n\t\t} );\n\n\t\tconst style = {\n\t\t\tbackgroundColor: backgroundClass ? undefined : customColor,\n\t\t\tcolor: colorClass ? undefined : customColor,\n\t\t};\n\n\t\treturn <hr { ...useBlockProps.save( { className, style } ) } />;\n\t},\n\tmigrate( attributes ) {\n\t\tconst { color, customColor, ...restAttributes } = attributes;\n\t\treturn {\n\t\t\t...restAttributes,\n\t\t\tbackgroundColor: color ? color : undefined,\n\t\t\topacity: 'css',\n\t\t\tstyle: customColor\n\t\t\t\t? { color: { background: customColor } }\n\t\t\t\t: undefined,\n\t\t\ttagName: 'hr',\n\t\t};\n\t},\n};\n\nexport default [ v1 ];\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3E,MAAMC,EAAE,GAAG;EACVC,UAAU,EAAE;IACXC,KAAK,EAAE;MACNC,IAAI,EAAE;IACP,CAAC;IACDC,WAAW,EAAE;MACZD,IAAI,EAAE;IACP;EACD,CAAC;EACDE,IAAIA,CAAE;IAAEJ;EAAW,CAAC,EAAG;IACtB,MAAM;MAAEC,KAAK;MAAEE;IAAY,CAAC,GAAGH,UAAU;;IAEzC;IACA;IACA,MAAMK,eAAe,GAAGV,iBAAiB,CAAE,kBAAkB,EAAEM,KAAM,CAAC;IACtE;IACA;IACA,MAAMK,UAAU,GAAGX,iBAAiB,CAAE,OAAO,EAAEM,KAAM,CAAC;IAEtD,MAAMM,SAAS,GAAGb,IAAI,CAAE;MACvB,+BAA+B,EAAEO,KAAK,IAAIE,WAAW;MACrD,CAAEE,eAAe,GAAIA,eAAe;MACpC,CAAEC,UAAU,GAAIA;IACjB,CAAE,CAAC;IAEH,MAAME,KAAK,GAAG;MACbC,eAAe,EAAEJ,eAAe,GAAGK,SAAS,GAAGP,WAAW;MAC1DF,KAAK,EAAEK,UAAU,GAAGI,SAAS,GAAGP;IACjC,CAAC;IAED,oBAAOL,IAAA;MAAA,GAASF,aAAa,CAACQ,IAAI,CAAE;QAAEG,SAAS;QAAEC;MAAM,CAAE;IAAC,CAAI,CAAC;EAChE,CAAC;EACDG,OAAOA,CAAEX,UAAU,EAAG;IACrB,MAAM;MAAEC,KAAK;MAAEE,WAAW;MAAE,GAAGS;IAAe,CAAC,GAAGZ,UAAU;IAC5D,OAAO;MACN,GAAGY,cAAc;MACjBH,eAAe,EAAER,KAAK,GAAGA,KAAK,GAAGS,SAAS;MAC1CG,OAAO,EAAE,KAAK;MACdL,KAAK,EAAEL,WAAW,GACf;QAAEF,KAAK,EAAE;UAAEa,UAAU,EAAEX;QAAY;MAAE,CAAC,GACtCO,SAAS;MACZK,OAAO,EAAE;IACV,CAAC;EACF;AACD,CAAC;AAED,eAAe,CAAEhB,EAAE,CAAE","ignoreList":[]}

package/build-module/separator/edit.js

@@ -6,14 +6,18 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { HorizontalRule } from '@wordpress/components';
-import { useBlockProps, getColorClassName, __experimentalUseColorProps as useColorProps } from '@wordpress/block-editor';
+import { HorizontalRule, SelectControl } from '@wordpress/components';
+import { useBlockProps, getColorClassName, __experimentalUseColorProps as useColorProps, InspectorControls } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import useDeprecatedOpacity from './use-deprecated-opacity';
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const htmlElementMessages = {
+  div: __('The <div> element should only be used if the separator is a design element that should not be announced.')
+};
 export default function SeparatorEdit({
   attributes,
   setAttributes
@@ -21,7 +25,8 @@ export default function SeparatorEdit({
   const {
     backgroundColor,
     opacity,
-    style
+    style,
+    tagName
   } = attributes;
   const colorProps = useColorProps(attributes);
   const currentColor = colorProps?.style?.backgroundColor;
@@ -41,13 +46,33 @@ export default function SeparatorEdit({
     color: currentColor,
     backgroundColor: currentColor
   };
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(HorizontalRule, {
+  const Wrapper = tagName === 'hr' ? HorizontalRule : tagName;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(InspectorControls, {
+      group: "advanced",
+      children: /*#__PURE__*/_jsx(SelectControl, {
+        __nextHasNoMarginBottom: true,
+        __next40pxDefaultSize: true,
+        label: __('HTML element'),
+        options: [{
+          label: __('Default (<hr>)'),
+          value: 'hr'
+        }, {
+          label: '<div>',
+          value: 'div'
+        }],
+        value: tagName,
+        onChange: value => setAttributes({
+          tagName: value
+        }),
+        help: htmlElementMessages[tagName]
+      })
+    }), /*#__PURE__*/_jsx(Wrapper, {
       ...useBlockProps({
         className,
         style: hasCustomColor ? styles : undefined
       })
-    })
+    })]
   });
 }
 //# sourceMappingURL=edit.js.map

package/build-module/separator/edit.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","HorizontalRule","useBlockProps","getColorClassName","__experimentalUseColorProps","useColorProps","useDeprecatedOpacity","jsx","_jsx","Fragment","_Fragment","SeparatorEdit","attributes","setAttributes","backgroundColor","opacity","style","colorProps","currentColor","hasCustomColor","color","background","colorClass","className","styles","children","undefined"],"sources":["@wordpress/block-library/src/separator/edit.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { HorizontalRule } from '@wordpress/components';\nimport {\n\tuseBlockProps,\n\tgetColorClassName,\n\t__experimentalUseColorProps as useColorProps,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport useDeprecatedOpacity from './use-deprecated-opacity';\n\nexport default function SeparatorEdit( { attributes, setAttributes } ) {\n\tconst { backgroundColor, opacity, style } = attributes;\n\tconst colorProps = useColorProps( attributes );\n\tconst currentColor = colorProps?.style?.backgroundColor;\n\tconst hasCustomColor = !! style?.color?.background;\n\n\tuseDeprecatedOpacity( opacity, currentColor, setAttributes );\n\n\t// The dots styles uses text for the dots, to change those dots color is\n\t// using color, not backgroundColor.\n\tconst colorClass = getColorClassName( 'color', backgroundColor );\n\n\tconst className = clsx(\n\t\t{\n\t\t\t'has-text-color': backgroundColor || currentColor,\n\t\t\t[ colorClass ]: colorClass,\n\t\t\t'has-css-opacity': opacity === 'css',\n\t\t\t'has-alpha-channel-opacity': opacity === 'alpha-channel',\n\t\t},\n\t\tcolorProps.className\n\t);\n\n\tconst styles = {\n\t\tcolor: currentColor,\n\t\tbackgroundColor: currentColor,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<HorizontalRule\n\t\t\t\t{ ...useBlockProps( {\n\t\t\t\t\tclassName,\n\t\t\t\t\tstyle: hasCustomColor ? styles : undefined,\n\t\t\t\t} ) }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,cAAc,QAAQ,uBAAuB;AACtD,SACCC,aAAa,EACbC,iBAAiB,EACjBC,2BAA2B,IAAIC,aAAa,QACtC,yBAAyB;;AAEhC;AACA;AACA;AACA,OAAOC,oBAAoB,MAAM,0BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA;AAE5D,eAAe,SAASC,aAAaA,CAAE;EAAEC,UAAU;EAAEC;AAAc,CAAC,EAAG;EACtE,MAAM;IAAEC,eAAe;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAGJ,UAAU;EACtD,MAAMK,UAAU,GAAGZ,aAAa,CAAEO,UAAW,CAAC;EAC9C,MAAMM,YAAY,GAAGD,UAAU,EAAED,KAAK,EAAEF,eAAe;EACvD,MAAMK,cAAc,GAAG,CAAC,CAAEH,KAAK,EAAEI,KAAK,EAAEC,UAAU;EAElDf,oBAAoB,CAAES,OAAO,EAAEG,YAAY,EAAEL,aAAc,CAAC;;EAE5D;EACA;EACA,MAAMS,UAAU,GAAGnB,iBAAiB,CAAE,OAAO,EAAEW,eAAgB,CAAC;EAEhE,MAAMS,SAAS,GAAGvB,IAAI,CACrB;IACC,gBAAgB,EAAEc,eAAe,IAAII,YAAY;IACjD,CAAEI,UAAU,GAAIA,UAAU;IAC1B,iBAAiB,EAAEP,OAAO,KAAK,KAAK;IACpC,2BAA2B,EAAEA,OAAO,KAAK;EAC1C,CAAC,EACDE,UAAU,CAACM,SACZ,CAAC;EAED,MAAMC,MAAM,GAAG;IACdJ,KAAK,EAAEF,YAAY;IACnBJ,eAAe,EAAEI;EAClB,CAAC;EAED,oBACCV,IAAA,CAAAE,SAAA;IAAAe,QAAA,eACCjB,IAAA,CAACP,cAAc;MAAA,GACTC,aAAa,CAAE;QACnBqB,SAAS;QACTP,KAAK,EAAEG,cAAc,GAAGK,MAAM,GAAGE;MAClC,CAAE;IAAC,CACH;EAAC,CACD,CAAC;AAEL","ignoreList":[]}
+{"version":3,"names":["clsx","HorizontalRule","SelectControl","useBlockProps","getColorClassName","__experimentalUseColorProps","useColorProps","InspectorControls","__","useDeprecatedOpacity","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","htmlElementMessages","div","SeparatorEdit","attributes","setAttributes","backgroundColor","opacity","style","tagName","colorProps","currentColor","hasCustomColor","color","background","colorClass","className","styles","Wrapper","children","group","__nextHasNoMarginBottom","__next40pxDefaultSize","label","options","value","onChange","help","undefined"],"sources":["@wordpress/block-library/src/separator/edit.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { HorizontalRule, SelectControl } from '@wordpress/components';\nimport {\n\tuseBlockProps,\n\tgetColorClassName,\n\t__experimentalUseColorProps as useColorProps,\n\tInspectorControls,\n} from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useDeprecatedOpacity from './use-deprecated-opacity';\n\nconst htmlElementMessages = {\n\tdiv: __(\n\t\t'The <div> element should only be used if the separator is a design element that should not be announced.'\n\t),\n};\n\nexport default function SeparatorEdit( { attributes, setAttributes } ) {\n\tconst { backgroundColor, opacity, style, tagName } = attributes;\n\tconst colorProps = useColorProps( attributes );\n\tconst currentColor = colorProps?.style?.backgroundColor;\n\tconst hasCustomColor = !! style?.color?.background;\n\n\tuseDeprecatedOpacity( opacity, currentColor, setAttributes );\n\n\t// The dots styles uses text for the dots, to change those dots color is\n\t// using color, not backgroundColor.\n\tconst colorClass = getColorClassName( 'color', backgroundColor );\n\n\tconst className = clsx(\n\t\t{\n\t\t\t'has-text-color': backgroundColor || currentColor,\n\t\t\t[ colorClass ]: colorClass,\n\t\t\t'has-css-opacity': opacity === 'css',\n\t\t\t'has-alpha-channel-opacity': opacity === 'alpha-channel',\n\t\t},\n\t\tcolorProps.className\n\t);\n\n\tconst styles = {\n\t\tcolor: currentColor,\n\t\tbackgroundColor: currentColor,\n\t};\n\tconst Wrapper = tagName === 'hr' ? HorizontalRule : tagName;\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls group=\"advanced\">\n\t\t\t\t<SelectControl\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tlabel={ __( 'HTML element' ) }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{ label: __( 'Default (<hr>)' ), value: 'hr' },\n\t\t\t\t\t\t{ label: '<div>', value: 'div' },\n\t\t\t\t\t] }\n\t\t\t\t\tvalue={ tagName }\n\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\tsetAttributes( { tagName: value } )\n\t\t\t\t\t}\n\t\t\t\t\thelp={ htmlElementMessages[ tagName ] }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t\t<Wrapper\n\t\t\t\t{ ...useBlockProps( {\n\t\t\t\t\tclassName,\n\t\t\t\t\tstyle: hasCustomColor ? styles : undefined,\n\t\t\t\t} ) }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,cAAc,EAAEC,aAAa,QAAQ,uBAAuB;AACrE,SACCC,aAAa,EACbC,iBAAiB,EACjBC,2BAA2B,IAAIC,aAAa,EAC5CC,iBAAiB,QACX,yBAAyB;AAChC,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,oBAAoB,MAAM,0BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAE5D,MAAMC,mBAAmB,GAAG;EAC3BC,GAAG,EAAET,EAAE,CACN,0GACD;AACD,CAAC;AAED,eAAe,SAASU,aAAaA,CAAE;EAAEC,UAAU;EAAEC;AAAc,CAAC,EAAG;EACtE,MAAM;IAAEC,eAAe;IAAEC,OAAO;IAAEC,KAAK;IAAEC;EAAQ,CAAC,GAAGL,UAAU;EAC/D,MAAMM,UAAU,GAAGnB,aAAa,CAAEa,UAAW,CAAC;EAC9C,MAAMO,YAAY,GAAGD,UAAU,EAAEF,KAAK,EAAEF,eAAe;EACvD,MAAMM,cAAc,GAAG,CAAC,CAAEJ,KAAK,EAAEK,KAAK,EAAEC,UAAU;EAElDpB,oBAAoB,CAAEa,OAAO,EAAEI,YAAY,EAAEN,aAAc,CAAC;;EAE5D;EACA;EACA,MAAMU,UAAU,GAAG1B,iBAAiB,CAAE,OAAO,EAAEiB,eAAgB,CAAC;EAEhE,MAAMU,SAAS,GAAG/B,IAAI,CACrB;IACC,gBAAgB,EAAEqB,eAAe,IAAIK,YAAY;IACjD,CAAEI,UAAU,GAAIA,UAAU;IAC1B,iBAAiB,EAAER,OAAO,KAAK,KAAK;IACpC,2BAA2B,EAAEA,OAAO,KAAK;EAC1C,CAAC,EACDG,UAAU,CAACM,SACZ,CAAC;EAED,MAAMC,MAAM,GAAG;IACdJ,KAAK,EAAEF,YAAY;IACnBL,eAAe,EAAEK;EAClB,CAAC;EACD,MAAMO,OAAO,GAAGT,OAAO,KAAK,IAAI,GAAGvB,cAAc,GAAGuB,OAAO;EAE3D,oBACCT,KAAA,CAAAF,SAAA;IAAAqB,QAAA,gBACCvB,IAAA,CAACJ,iBAAiB;MAAC4B,KAAK,EAAC,UAAU;MAAAD,QAAA,eAClCvB,IAAA,CAACT,aAAa;QACbkC,uBAAuB;QACvBC,qBAAqB;QACrBC,KAAK,EAAG9B,EAAE,CAAE,cAAe,CAAG;QAC9B+B,OAAO,EAAG,CACT;UAAED,KAAK,EAAE9B,EAAE,CAAE,gBAAiB,CAAC;UAAEgC,KAAK,EAAE;QAAK,CAAC,EAC9C;UAAEF,KAAK,EAAE,OAAO;UAAEE,KAAK,EAAE;QAAM,CAAC,CAC9B;QACHA,KAAK,EAAGhB,OAAS;QACjBiB,QAAQ,EAAKD,KAAK,IACjBpB,aAAa,CAAE;UAAEI,OAAO,EAAEgB;QAAM,CAAE,CAClC;QACDE,IAAI,EAAG1B,mBAAmB,CAAEQ,OAAO;MAAI,CACvC;IAAC,CACgB,CAAC,eACpBb,IAAA,CAACsB,OAAO;MAAA,GACF9B,aAAa,CAAE;QACnB4B,SAAS;QACTR,KAAK,EAAEI,cAAc,GAAGK,MAAM,GAAGW;MAClC,CAAE;IAAC,CACH,CAAC;EAAA,CACD,CAAC;AAEL","ignoreList":[]}

package/build-module/separator/index.js

@@ -21,6 +21,11 @@ const metadata = {
     opacity: {
       type: "string",
       "default": "alpha-channel"
+    },
+    tagName: {
+      type: "string",
+      "enum": ["hr", "div"],
+      "default": "hr"
     }
   },
   supports: {