@wordpress/block-library 7.14.0 → 7.14.1

package/build/post-date/edit.js

@@ -54,8 +54,14 @@ function PostDateEdit(_ref) {
     className: (0, _classnames.default)({
       [`has-text-align-${textAlign}`]: textAlign
     })
-  });
-  const timeRef = (0, _element.useRef)();
+  }); // Use internal state instead of a ref to make sure that the component
+  // re-renders when the popover's anchor updates.
+
+  const [popoverAnchor, setPopoverAnchor] = (0, _element.useState)(null); // Memoize popoverProps to avoid returning a new object every time.
+
+  const popoverProps = (0, _element.useMemo)(() => ({
+    anchor: popoverAnchor
+  }), [popoverAnchor]);
   const isDescendentOfQueryLoop = Number.isFinite(queryId);
   const dateSettings = (0, _date.getSettings)();
   const [siteFormat = dateSettings.formats.date] = (0, _coreData.useEntityProp)('root', 'site', 'date_format');
@@ -64,7 +70,7 @@ function PostDateEdit(_ref) {
   const postType = (0, _data.useSelect)(select => postTypeSlug ? select(_coreData.store).getPostType(postTypeSlug) : null, [postTypeSlug]);
   let postDate = date ? (0, _element.createElement)("time", {
     dateTime: (0, _date.dateI18n)('c', date),
-    ref: timeRef
+    ref: setPopoverAnchor
   }, (0, _date.dateI18n)(format || siteFormat, date)) : (0, _i18n.__)('Post Date');
 
   if (isLink && date) {
@@ -84,9 +90,7 @@ function PostDateEdit(_ref) {
       });
     }
   }), date && !isDescendentOfQueryLoop && (0, _element.createElement)(_components.ToolbarGroup, null, (0, _element.createElement)(_components.Dropdown, {
-    popoverProps: {
-      anchorRef: timeRef.current
-    },
+    popoverProps: popoverProps,
     renderContent: _ref2 => {
       let {
         onClose

package/build/post-date/edit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/post-date/edit.js"],"names":["PostDateEdit","attributes","textAlign","format","isLink","displayType","context","postId","postType","postTypeSlug","queryId","setAttributes","blockProps","className","timeRef","isDescendentOfQueryLoop","Number","isFinite","dateSettings","siteFormat","formats","date","siteTimeFormat","time","setDate","select","coreStore","getPostType","postDate","event","preventDefault","nextAlign","anchorRef","current","onClose","is12HourFormat","isOpen","onToggle","openOnArrowDown","keyCode","DOWN","edit","nextFormat","labels","singular_name","toLowerCase","value","test"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useEntityProp, store as coreStore } from '@wordpress/core-data';\nimport { useRef } from '@wordpress/element';\nimport { dateI18n, getSettings as getDateSettings } from '@wordpress/date';\nimport {\n\tAlignmentControl,\n\tBlockControls,\n\tInspectorControls,\n\tuseBlockProps,\n\t__experimentalDateFormatPicker as DateFormatPicker,\n\t__experimentalPublishDateTimePicker as PublishDateTimePicker,\n} from '@wordpress/block-editor';\nimport {\n\tDropdown,\n\tToolbarGroup,\n\tToolbarButton,\n\tToggleControl,\n\tPanelBody,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { edit } from '@wordpress/icons';\nimport { DOWN } from '@wordpress/keycodes';\nimport { useSelect } from '@wordpress/data';\n\nexport default function PostDateEdit( {\n\tattributes: { textAlign, format, isLink, displayType },\n\tcontext: { postId, postType: postTypeSlug, queryId },\n\tsetAttributes,\n} ) {\n\tconst blockProps = useBlockProps( {\n\t\tclassName: classnames( {\n\t\t\t[ `has-text-align-${ textAlign }` ]: textAlign,\n\t\t} ),\n\t} );\n\tconst timeRef = useRef();\n\tconst isDescendentOfQueryLoop = Number.isFinite( queryId );\n\tconst dateSettings = getDateSettings();\n\tconst [ siteFormat = dateSettings.formats.date ] = useEntityProp(\n\t\t'root',\n\t\t'site',\n\t\t'date_format'\n\t);\n\tconst [ siteTimeFormat = dateSettings.formats.time ] = useEntityProp(\n\t\t'root',\n\t\t'site',\n\t\t'time_format'\n\t);\n\tconst [ date, setDate ] = useEntityProp(\n\t\t'postType',\n\t\tpostTypeSlug,\n\t\tdisplayType,\n\t\tpostId\n\t);\n\n\tconst postType = useSelect(\n\t\t( select ) =>\n\t\t\tpostTypeSlug\n\t\t\t\t? select( coreStore ).getPostType( postTypeSlug )\n\t\t\t\t: null,\n\t\t[ postTypeSlug ]\n\t);\n\n\tlet postDate = date ? (\n\t\t<time dateTime={ dateI18n( 'c', date ) } ref={ timeRef }>\n\t\t\t{ dateI18n( format || siteFormat, date ) }\n\t\t</time>\n\t) : (\n\t\t__( 'Post Date' )\n\t);\n\n\tif ( isLink && date ) {\n\t\tpostDate = (\n\t\t\t<a\n\t\t\t\thref=\"#post-date-pseudo-link\"\n\t\t\t\tonClick={ ( event ) => event.preventDefault() }\n\t\t\t>\n\t\t\t\t{ postDate }\n\t\t\t</a>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls group=\"block\">\n\t\t\t\t<AlignmentControl\n\t\t\t\t\tvalue={ textAlign }\n\t\t\t\t\tonChange={ ( nextAlign ) => {\n\t\t\t\t\t\tsetAttributes( { textAlign: nextAlign } );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t{ date && ! isDescendentOfQueryLoop && (\n\t\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tpopoverProps={ { anchorRef: timeRef.current } }\n\t\t\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<PublishDateTimePicker\n\t\t\t\t\t\t\t\t\tcurrentDate={ date }\n\t\t\t\t\t\t\t\t\tonChange={ setDate }\n\t\t\t\t\t\t\t\t\tis12Hour={ is12HourFormat(\n\t\t\t\t\t\t\t\t\t\tsiteTimeFormat\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\t\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\t\t\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\t\t\ticon={ edit }\n\t\t\t\t\t\t\t\t\t\ttitle={ __( 'Change Date' ) }\n\t\t\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolbarGroup>\n\t\t\t\t) }\n\t\t\t</BlockControls>\n\n\t\t\t<InspectorControls>\n\t\t\t\t<PanelBody title={ __( 'Settings' ) }>\n\t\t\t\t\t<DateFormatPicker\n\t\t\t\t\t\tformat={ format }\n\t\t\t\t\t\tdefaultFormat={ siteFormat }\n\t\t\t\t\t\tonChange={ ( nextFormat ) =>\n\t\t\t\t\t\t\tsetAttributes( { format: nextFormat } )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tpostType?.labels.singular_name\n\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: %s: Name of the post type e.g: \"post\".\n\t\t\t\t\t\t\t\t\t\t__( 'Link to %s' ),\n\t\t\t\t\t\t\t\t\t\tpostType.labels.singular_name.toLowerCase()\n\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t: __( 'Link to post' )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonChange={ () => setAttributes( { isLink: ! isLink } ) }\n\t\t\t\t\t\tchecked={ isLink }\n\t\t\t\t\t/>\n\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Display last modified date' ) }\n\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tdisplayType: value ? 'modified' : 'date',\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tchecked={ displayType === 'modified' }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t</InspectorControls>\n\n\t\t\t<div { ...blockProps }>{ postDate }</div>\n\t\t</>\n\t);\n}\n\nexport function is12HourFormat( format ) {\n\t// To know if the time format is a 12 hour time, look for any of the 12 hour\n\t// format characters: 'a', 'A', 'g', and 'h'. The character must be\n\t// unescaped, i.e. not preceded by a '\\'. Coincidentally, 'aAgh' is how I\n\t// feel when working with regular expressions.\n\t// https://www.php.net/manual/en/datetime.format.php\n\treturn /(?:^|[^\\\\])[aAgh]/.test( format );\n}\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/post-date/edit.js"],"names":["PostDateEdit","attributes","textAlign","format","isLink","displayType","context","postId","postType","postTypeSlug","queryId","setAttributes","blockProps","className","popoverAnchor","setPopoverAnchor","popoverProps","anchor","isDescendentOfQueryLoop","Number","isFinite","dateSettings","siteFormat","formats","date","siteTimeFormat","time","setDate","select","coreStore","getPostType","postDate","event","preventDefault","nextAlign","onClose","is12HourFormat","isOpen","onToggle","openOnArrowDown","keyCode","DOWN","edit","nextFormat","labels","singular_name","toLowerCase","value","test"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useEntityProp, store as coreStore } from '@wordpress/core-data';\nimport { useMemo, useState } from '@wordpress/element';\nimport { dateI18n, getSettings as getDateSettings } from '@wordpress/date';\nimport {\n\tAlignmentControl,\n\tBlockControls,\n\tInspectorControls,\n\tuseBlockProps,\n\t__experimentalDateFormatPicker as DateFormatPicker,\n\t__experimentalPublishDateTimePicker as PublishDateTimePicker,\n} from '@wordpress/block-editor';\nimport {\n\tDropdown,\n\tToolbarGroup,\n\tToolbarButton,\n\tToggleControl,\n\tPanelBody,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { edit } from '@wordpress/icons';\nimport { DOWN } from '@wordpress/keycodes';\nimport { useSelect } from '@wordpress/data';\n\nexport default function PostDateEdit( {\n\tattributes: { textAlign, format, isLink, displayType },\n\tcontext: { postId, postType: postTypeSlug, queryId },\n\tsetAttributes,\n} ) {\n\tconst blockProps = useBlockProps( {\n\t\tclassName: classnames( {\n\t\t\t[ `has-text-align-${ textAlign }` ]: textAlign,\n\t\t} ),\n\t} );\n\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\t// Memoize popoverProps to avoid returning a new object every time.\n\tconst popoverProps = useMemo(\n\t\t() => ( { anchor: popoverAnchor } ),\n\t\t[ popoverAnchor ]\n\t);\n\n\tconst isDescendentOfQueryLoop = Number.isFinite( queryId );\n\tconst dateSettings = getDateSettings();\n\tconst [ siteFormat = dateSettings.formats.date ] = useEntityProp(\n\t\t'root',\n\t\t'site',\n\t\t'date_format'\n\t);\n\tconst [ siteTimeFormat = dateSettings.formats.time ] = useEntityProp(\n\t\t'root',\n\t\t'site',\n\t\t'time_format'\n\t);\n\tconst [ date, setDate ] = useEntityProp(\n\t\t'postType',\n\t\tpostTypeSlug,\n\t\tdisplayType,\n\t\tpostId\n\t);\n\n\tconst postType = useSelect(\n\t\t( select ) =>\n\t\t\tpostTypeSlug\n\t\t\t\t? select( coreStore ).getPostType( postTypeSlug )\n\t\t\t\t: null,\n\t\t[ postTypeSlug ]\n\t);\n\n\tlet postDate = date ? (\n\t\t<time dateTime={ dateI18n( 'c', date ) } ref={ setPopoverAnchor }>\n\t\t\t{ dateI18n( format || siteFormat, date ) }\n\t\t</time>\n\t) : (\n\t\t__( 'Post Date' )\n\t);\n\n\tif ( isLink && date ) {\n\t\tpostDate = (\n\t\t\t<a\n\t\t\t\thref=\"#post-date-pseudo-link\"\n\t\t\t\tonClick={ ( event ) => event.preventDefault() }\n\t\t\t>\n\t\t\t\t{ postDate }\n\t\t\t</a>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls group=\"block\">\n\t\t\t\t<AlignmentControl\n\t\t\t\t\tvalue={ textAlign }\n\t\t\t\t\tonChange={ ( nextAlign ) => {\n\t\t\t\t\t\tsetAttributes( { textAlign: nextAlign } );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t{ date && ! isDescendentOfQueryLoop && (\n\t\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<PublishDateTimePicker\n\t\t\t\t\t\t\t\t\tcurrentDate={ date }\n\t\t\t\t\t\t\t\t\tonChange={ setDate }\n\t\t\t\t\t\t\t\t\tis12Hour={ is12HourFormat(\n\t\t\t\t\t\t\t\t\t\tsiteTimeFormat\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\t\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\t\t\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\t\t\ticon={ edit }\n\t\t\t\t\t\t\t\t\t\ttitle={ __( 'Change Date' ) }\n\t\t\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolbarGroup>\n\t\t\t\t) }\n\t\t\t</BlockControls>\n\n\t\t\t<InspectorControls>\n\t\t\t\t<PanelBody title={ __( 'Settings' ) }>\n\t\t\t\t\t<DateFormatPicker\n\t\t\t\t\t\tformat={ format }\n\t\t\t\t\t\tdefaultFormat={ siteFormat }\n\t\t\t\t\t\tonChange={ ( nextFormat ) =>\n\t\t\t\t\t\t\tsetAttributes( { format: nextFormat } )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tpostType?.labels.singular_name\n\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: %s: Name of the post type e.g: \"post\".\n\t\t\t\t\t\t\t\t\t\t__( 'Link to %s' ),\n\t\t\t\t\t\t\t\t\t\tpostType.labels.singular_name.toLowerCase()\n\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t: __( 'Link to post' )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonChange={ () => setAttributes( { isLink: ! isLink } ) }\n\t\t\t\t\t\tchecked={ isLink }\n\t\t\t\t\t/>\n\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Display last modified date' ) }\n\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tdisplayType: value ? 'modified' : 'date',\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tchecked={ displayType === 'modified' }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t</InspectorControls>\n\n\t\t\t<div { ...blockProps }>{ postDate }</div>\n\t\t</>\n\t);\n}\n\nexport function is12HourFormat( format ) {\n\t// To know if the time format is a 12 hour time, look for any of the 12 hour\n\t// format characters: 'a', 'A', 'g', and 'h'. The character must be\n\t// unescaped, i.e. not preceded by a '\\'. Coincidentally, 'aAgh' is how I\n\t// feel when working with regular expressions.\n\t// https://www.php.net/manual/en/datetime.format.php\n\treturn /(?:^|[^\\\\])[aAgh]/.test( format );\n}\n"]}

package/build/query/edit/index.js

@@ -5,7 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.QueryContent = QueryContent;
 exports.default = void 0;
 
 var _element = require("@wordpress/element");
@@ -14,24 +13,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _data = require("@wordpress/data");
 
-var _blocks = require("@wordpress/blocks");
-
-var _compose = require("@wordpress/compose");
-
 var _blockEditor = require("@wordpress/block-editor");
 
 var _components = require("@wordpress/components");
 
 var _i18n = require("@wordpress/i18n");
 
-var _queryToolbar = _interopRequireDefault(require("./query-toolbar"));
-
-var _inspectorControls = _interopRequireDefault(require("./inspector-controls"));
+var _queryContent = _interopRequireDefault(require("./query-content"));
 
 var _queryPlaceholder = _interopRequireDefault(require("./query-placeholder"));
 
-var _constants = require("../constants");
-
 var _utils = require("../utils");
 
 /**
@@ -41,211 +32,33 @@ var _utils = require("../utils");
 /**
  * Internal dependencies
  */
-const TEMPLATE = [['core/post-template']];
-
-function QueryContent(_ref) {
-  let {
-    attributes,
-    setAttributes,
-    openPatternSelectionModal,
-    name,
-    clientId
-  } = _ref;
-  const {
-    queryId,
-    query,
-    displayLayout,
-    tagName: TagName = 'div',
-    layout = {}
-  } = attributes;
-  const {
-    __unstableMarkNextChangeAsNotPersistent
-  } = (0, _data.useDispatch)(_blockEditor.store);
-  const instanceId = (0, _compose.useInstanceId)(QueryContent);
-  const {
-    themeSupportsLayout
-  } = (0, _data.useSelect)(select => {
-    var _getSettings;
-
-    const {
-      getSettings
-    } = select(_blockEditor.store);
-    return {
-      themeSupportsLayout: (_getSettings = getSettings()) === null || _getSettings === void 0 ? void 0 : _getSettings.supportsLayout
-    };
-  }, []);
-  const defaultLayout = (0, _blockEditor.useSetting)('layout') || {};
-  const usedLayout = !!layout && layout.inherit ? defaultLayout : layout;
-  const blockProps = (0, _blockEditor.useBlockProps)();
-  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)(blockProps, {
-    template: TEMPLATE,
-    __experimentalLayout: themeSupportsLayout ? usedLayout : undefined
-  });
-  const {
-    postsPerPage
-  } = (0, _data.useSelect)(select => {
-    const {
-      getSettings
-    } = select(_blockEditor.store);
-    return {
-      postsPerPage: +getSettings().postsPerPage || _constants.DEFAULTS_POSTS_PER_PAGE
-    };
-  }, []); // There are some effects running where some initialization logic is
-  // happening and setting some values to some attributes (ex. queryId).
-  // These updates can cause an `undo trap` where undoing will result in
-  // resetting again, so we need to mark these changes as not persistent
-  // with `__unstableMarkNextChangeAsNotPersistent`.
-  // Changes in query property (which is an object) need to be in the same callback,
-  // because updates are batched after the render and changes in different query properties
-  // would cause to override previous wanted changes.
-
-  (0, _element.useEffect)(() => {
-    const newQuery = {};
-
-    if (!query.perPage && postsPerPage) {
-      newQuery.perPage = postsPerPage;
-    }
-
-    if (!!Object.keys(newQuery).length) {
-      __unstableMarkNextChangeAsNotPersistent();
-
-      updateQuery(newQuery);
-    }
-  }, [query.perPage]); // We need this for multi-query block pagination.
-  // Query parameters for each block are scoped to their ID.
-
-  (0, _element.useEffect)(() => {
-    if (!Number.isFinite(queryId)) {
-      __unstableMarkNextChangeAsNotPersistent();
-
-      setAttributes({
-        queryId: instanceId
-      });
-    }
-  }, [queryId, instanceId]);
-
-  const updateQuery = newQuery => setAttributes({
-    query: { ...query,
-      ...newQuery
-    }
-  });
-
-  const updateDisplayLayout = newDisplayLayout => setAttributes({
-    displayLayout: { ...displayLayout,
-      ...newDisplayLayout
-    }
-  });
-
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_inspectorControls.default, {
-    attributes: attributes,
-    setQuery: updateQuery,
-    setDisplayLayout: updateDisplayLayout
-  }), (0, _element.createElement)(_blockEditor.BlockControls, null, (0, _element.createElement)(_queryToolbar.default, {
-    name: name,
-    clientId: clientId,
-    attributes: attributes,
-    setQuery: updateQuery,
-    setDisplayLayout: updateDisplayLayout,
-    openPatternSelectionModal: openPatternSelectionModal
-  })), (0, _element.createElement)(_blockEditor.InspectorControls, {
-    __experimentalGroup: "advanced"
-  }, (0, _element.createElement)(_components.SelectControl, {
-    label: (0, _i18n.__)('HTML element'),
-    options: [{
-      label: (0, _i18n.__)('Default (<div>)'),
-      value: 'div'
-    }, {
-      label: '<main>',
-      value: 'main'
-    }, {
-      label: '<section>',
-      value: 'section'
-    }, {
-      label: '<aside>',
-      value: 'aside'
-    }],
-    value: TagName,
-    onChange: value => setAttributes({
-      tagName: value
-    })
-  })), (0, _element.createElement)(TagName, innerBlocksProps));
-}
-
-function QueryPatternSetup(_ref2) {
-  var _blockType$icon;
-
-  let {
-    attributes,
-    clientId,
-    name,
-    openPatternSelectionModal,
-    setAttributes
-  } = _ref2;
-  const [isStartingBlank, setIsStartingBlank] = (0, _element.useState)(false);
-  const blockProps = (0, _blockEditor.useBlockProps)();
-  const {
-    blockType,
-    allVariations,
-    hasPatterns
-  } = (0, _data.useSelect)(select => {
-    const {
-      getBlockVariations,
-      getBlockType
-    } = select(_blocks.store);
-    const {
-      getBlockRootClientId,
-      __experimentalGetPatternsByBlockTypes
-    } = select(_blockEditor.store);
-    const rootClientId = getBlockRootClientId(clientId);
-    return {
-      blockType: getBlockType(name),
-      allVariations: getBlockVariations(name),
-      hasPatterns: !!__experimentalGetPatternsByBlockTypes(name, rootClientId).length
-    };
-  }, [name, clientId]);
-  const matchingVariation = (0, _blockEditor.__experimentalGetMatchingVariation)(attributes, allVariations);
-  const icon = (matchingVariation === null || matchingVariation === void 0 ? void 0 : matchingVariation.icon) || (blockType === null || blockType === void 0 ? void 0 : (_blockType$icon = blockType.icon) === null || _blockType$icon === void 0 ? void 0 : _blockType$icon.src);
-  const label = (matchingVariation === null || matchingVariation === void 0 ? void 0 : matchingVariation.title) || (blockType === null || blockType === void 0 ? void 0 : blockType.title);
-
-  if (isStartingBlank) {
-    return (0, _element.createElement)(_queryPlaceholder.default, {
-      clientId: clientId,
-      name: name,
-      attributes: attributes,
-      setAttributes: setAttributes,
-      icon: icon,
-      label: label
-    });
-  }
-
-  return (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_components.Placeholder, {
-    icon: icon,
-    label: label,
-    instructions: (0, _i18n.__)('Choose a pattern for the query loop or start blank.')
-  }, !!hasPatterns && (0, _element.createElement)(_components.Button, {
-    variant: "primary",
-    onClick: openPatternSelectionModal
-  }, (0, _i18n.__)('Choose')), (0, _element.createElement)(_components.Button, {
-    variant: "secondary",
-    onClick: () => {
-      setIsStartingBlank(true);
-    }
-  }, (0, _i18n.__)('Start blank'))));
-}
-
 const QueryEdit = props => {
   const {
     clientId,
-    name,
     attributes
   } = props;
   const [isPatternSelectionModalOpen, setIsPatternSelectionModalOpen] = (0, _element.useState)(false);
+  const hasInnerBlocks = (0, _data.useSelect)(select => !!select(_blockEditor.store).getBlocks(clientId).length, [clientId]);
+  const Component = hasInnerBlocks ? _queryContent.default : _queryPlaceholder.default;
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(Component, (0, _extends2.default)({}, props, {
+    openPatternSelectionModal: () => setIsPatternSelectionModalOpen(true)
+  })), isPatternSelectionModalOpen && (0, _element.createElement)(PatternSelectionModal, {
+    clientId: clientId,
+    attributes: attributes,
+    setIsPatternSelectionModalOpen: setIsPatternSelectionModalOpen
+  }));
+};
+
+function PatternSelectionModal(_ref) {
+  let {
+    clientId,
+    attributes,
+    setIsPatternSelectionModalOpen
+  } = _ref;
   const {
     replaceBlock,
     selectBlock
   } = (0, _data.useDispatch)(_blockEditor.store);
-  const hasInnerBlocks = (0, _data.useSelect)(select => !!select(_blockEditor.store).getBlocks(clientId).length, [clientId]);
-  const Component = hasInnerBlocks ? QueryContent : QueryPatternSetup;
 
   const onBlockPatternSelect = blocks => {
     const {
@@ -264,9 +77,8 @@ const QueryEdit = props => {
   const blockPreviewContext = (0, _element.useMemo)(() => ({
     previewPostType: attributes.query.postType
   }), [attributes.query.postType]);
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(Component, (0, _extends2.default)({}, props, {
-    openPatternSelectionModal: () => setIsPatternSelectionModalOpen(true)
-  })), isPatternSelectionModalOpen && (0, _element.createElement)(_components.Modal, {
+  const blockNameForPatterns = (0, _utils.useBlockNameForPatterns)(clientId, attributes);
+  return (0, _element.createElement)(_components.Modal, {
     className: "block-editor-query-pattern__selection-modal",
     title: (0, _i18n.__)('Choose a pattern'),
     closeLabel: (0, _i18n.__)('Cancel'),
@@ -274,11 +86,11 @@ const QueryEdit = props => {
   }, (0, _element.createElement)(_blockEditor.BlockContextProvider, {
     value: blockPreviewContext
   }, (0, _element.createElement)(_blockEditor.__experimentalBlockPatternSetup, {
-    blockName: name,
+    blockName: blockNameForPatterns,
     clientId: clientId,
     onBlockPatternSelect: onBlockPatternSelect
-  }))));
-};
+  })));
+}
 
 var _default = QueryEdit;
 exports.default = _default;

package/build/query/edit/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/query/edit/index.js"],"names":["TEMPLATE","QueryContent","attributes","setAttributes","openPatternSelectionModal","name","clientId","queryId","query","displayLayout","tagName","TagName","layout","__unstableMarkNextChangeAsNotPersistent","blockEditorStore","instanceId","themeSupportsLayout","select","getSettings","supportsLayout","defaultLayout","usedLayout","inherit","blockProps","innerBlocksProps","template","__experimentalLayout","undefined","postsPerPage","DEFAULTS_POSTS_PER_PAGE","newQuery","perPage","Object","keys","length","updateQuery","Number","isFinite","updateDisplayLayout","newDisplayLayout","label","value","QueryPatternSetup","isStartingBlank","setIsStartingBlank","blockType","allVariations","hasPatterns","getBlockVariations","getBlockType","blocksStore","getBlockRootClientId","__experimentalGetPatternsByBlockTypes","rootClientId","matchingVariation","icon","src","title","QueryEdit","props","isPatternSelectionModalOpen","setIsPatternSelectionModalOpen","replaceBlock","selectBlock","hasInnerBlocks","getBlocks","Component","onBlockPatternSelect","blocks","newBlocks","queryClientIds","blockPreviewContext","previewPostType","postType"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, useEffect, useMemo } from '@wordpress/element';\nimport {\n\tBlockControls,\n\tBlockContextProvider,\n\tInspectorControls,\n\tuseBlockProps,\n\tuseSetting,\n\tstore as blockEditorStore,\n\tuseInnerBlocksProps,\n\t__experimentalGetMatchingVariation as getMatchingVariation,\n\t__experimentalBlockPatternSetup as BlockPatternSetup,\n} from '@wordpress/block-editor';\nimport {\n\tButton,\n\tSelectControl,\n\tPlaceholder,\n\tModal,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport QueryToolbar from './query-toolbar';\nimport QueryInspectorControls from './inspector-controls';\nimport QueryPlaceholder from './query-placeholder';\nimport { DEFAULTS_POSTS_PER_PAGE } from '../constants';\nimport { getTransformedBlocksFromPattern } from '../utils';\n\nconst TEMPLATE = [ [ 'core/post-template' ] ];\nexport function QueryContent( {\n\tattributes,\n\tsetAttributes,\n\topenPatternSelectionModal,\n\tname,\n\tclientId,\n} ) {\n\tconst {\n\t\tqueryId,\n\t\tquery,\n\t\tdisplayLayout,\n\t\ttagName: TagName = 'div',\n\t\tlayout = {},\n\t} = attributes;\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst instanceId = useInstanceId( QueryContent );\n\tconst { themeSupportsLayout } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn { themeSupportsLayout: getSettings()?.supportsLayout };\n\t}, [] );\n\tconst defaultLayout = useSetting( 'layout' ) || {};\n\tconst usedLayout = !! layout && layout.inherit ? defaultLayout : layout;\n\tconst blockProps = useBlockProps();\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: TEMPLATE,\n\t\t__experimentalLayout: themeSupportsLayout ? usedLayout : undefined,\n\t} );\n\tconst { postsPerPage } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn {\n\t\t\tpostsPerPage:\n\t\t\t\t+getSettings().postsPerPage || DEFAULTS_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\tuseEffect( () => {\n\t\tconst newQuery = {};\n\t\tif ( ! query.perPage && postsPerPage ) {\n\t\t\tnewQuery.perPage = postsPerPage;\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}, [ query.perPage ] );\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}, [ queryId, instanceId ] );\n\tconst updateQuery = ( newQuery ) =>\n\t\tsetAttributes( { query: { ...query, ...newQuery } } );\n\tconst updateDisplayLayout = ( newDisplayLayout ) =>\n\t\tsetAttributes( {\n\t\t\tdisplayLayout: { ...displayLayout, ...newDisplayLayout },\n\t\t} );\n\treturn (\n\t\t<>\n\t\t\t<QueryInspectorControls\n\t\t\t\tattributes={ attributes }\n\t\t\t\tsetQuery={ updateQuery }\n\t\t\t\tsetDisplayLayout={ updateDisplayLayout }\n\t\t\t/>\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\tsetDisplayLayout={ updateDisplayLayout }\n\t\t\t\t\topenPatternSelectionModal={ openPatternSelectionModal }\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\t\t\t<InspectorControls __experimentalGroup=\"advanced\">\n\t\t\t\t<SelectControl\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/>\n\t\t\t</InspectorControls>\n\t\t\t<TagName { ...innerBlocksProps } />\n\t\t</>\n\t);\n}\n\nfunction QueryPatternSetup( {\n\tattributes,\n\tclientId,\n\tname,\n\topenPatternSelectionModal,\n\tsetAttributes,\n} ) {\n\tconst [ isStartingBlank, setIsStartingBlank ] = useState( false );\n\tconst blockProps = useBlockProps();\n\n\tconst { blockType, allVariations, hasPatterns } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockVariations, getBlockType } = select( blocksStore );\n\t\t\tconst {\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\t__experimentalGetPatternsByBlockTypes,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst rootClientId = getBlockRootClientId( clientId );\n\n\t\t\treturn {\n\t\t\t\tblockType: getBlockType( name ),\n\t\t\t\tallVariations: getBlockVariations( name ),\n\t\t\t\thasPatterns: !! __experimentalGetPatternsByBlockTypes(\n\t\t\t\t\tname,\n\t\t\t\t\trootClientId\n\t\t\t\t).length,\n\t\t\t};\n\t\t},\n\t\t[ name, clientId ]\n\t);\n\n\tconst matchingVariation = getMatchingVariation( attributes, allVariations );\n\tconst icon = matchingVariation?.icon || blockType?.icon?.src;\n\tconst label = matchingVariation?.title || blockType?.title;\n\tif ( isStartingBlank ) {\n\t\treturn (\n\t\t\t<QueryPlaceholder\n\t\t\t\tclientId={ clientId }\n\t\t\t\tname={ name }\n\t\t\t\tattributes={ attributes }\n\t\t\t\tsetAttributes={ setAttributes }\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\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\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\nconst QueryEdit = ( props ) => {\n\tconst { clientId, name, attributes } = props;\n\tconst [ isPatternSelectionModalOpen, setIsPatternSelectionModalOpen ] =\n\t\tuseState( false );\n\tconst { replaceBlock, selectBlock } = useDispatch( blockEditorStore );\n\tconst hasInnerBlocks = useSelect(\n\t\t( select ) =>\n\t\t\t!! select( blockEditorStore ).getBlocks( clientId ).length,\n\t\t[ clientId ]\n\t);\n\tconst Component = hasInnerBlocks ? QueryContent : QueryPatternSetup;\n\tconst onBlockPatternSelect = ( 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\t// When we preview Query Loop blocks we should prefer the current\n\t// block's postType, which is passed through block context.\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\treturn (\n\t\t<>\n\t\t\t<Component\n\t\t\t\t{ ...props }\n\t\t\t\topenPatternSelectionModal={ () =>\n\t\t\t\t\tsetIsPatternSelectionModalOpen( true )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ isPatternSelectionModalOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tclassName=\"block-editor-query-pattern__selection-modal\"\n\t\t\t\t\ttitle={ __( 'Choose a pattern' ) }\n\t\t\t\t\tcloseLabel={ __( 'Cancel' ) }\n\t\t\t\t\tonRequestClose={ () =>\n\t\t\t\t\t\tsetIsPatternSelectionModalOpen( false )\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<BlockContextProvider value={ blockPreviewContext }>\n\t\t\t\t\t\t<BlockPatternSetup\n\t\t\t\t\t\t\tblockName={ name }\n\t\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\t\tonBlockPatternSelect={ onBlockPatternSelect }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</BlockContextProvider>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nexport default QueryEdit;\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/query/edit/index.js"],"names":["QueryEdit","props","clientId","attributes","isPatternSelectionModalOpen","setIsPatternSelectionModalOpen","hasInnerBlocks","select","blockEditorStore","getBlocks","length","Component","QueryContent","QueryPlaceholder","PatternSelectionModal","replaceBlock","selectBlock","onBlockPatternSelect","blocks","newBlocks","queryClientIds","blockPreviewContext","previewPostType","query","postType","blockNameForPatterns"],"mappings":";;;;;;;;;AAIA;;;;AADA;;AAEA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AAlBA;AACA;AACA;;AAWA;AACA;AACA;AAQA,MAAMA,SAAS,GAAKC,KAAF,IAAa;AAC9B,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAA2BF,KAAjC;AACA,QAAM,CAAEG,2BAAF,EAA+BC,8BAA/B,IACL,uBAAU,KAAV,CADD;AAEA,QAAMC,cAAc,GAAG,qBACpBC,MAAF,IACC,CAAC,CAAEA,MAAM,CAAEC,kBAAF,CAAN,CAA2BC,SAA3B,CAAsCP,QAAtC,EAAiDQ,MAF/B,EAGtB,CAAER,QAAF,CAHsB,CAAvB;AAKA,QAAMS,SAAS,GAAGL,cAAc,GAAGM,qBAAH,GAAkBC,yBAAlD;AACA,SACC,qDACC,4BAAC,SAAD,6BACMZ,KADN;AAEC,IAAA,yBAAyB,EAAG,MAC3BI,8BAA8B,CAAE,IAAF;AAHhC,KADD,EAOGD,2BAA2B,IAC5B,4BAAC,qBAAD;AACC,IAAA,QAAQ,EAAGF,QADZ;AAEC,IAAA,UAAU,EAAGC,UAFd;AAGC,IAAA,8BAA8B,EAC7BE;AAJF,IARF,CADD;AAmBA,CA7BD;;AA+BA,SAASS,qBAAT,OAII;AAAA,MAJ4B;AAC/BZ,IAAAA,QAD+B;AAE/BC,IAAAA,UAF+B;AAG/BE,IAAAA;AAH+B,GAI5B;AACH,QAAM;AAAEU,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAAgC,uBAAaR,kBAAb,CAAtC;;AACA,QAAMS,oBAAoB,GAAKC,MAAF,IAAc;AAC1C,UAAM;AAAEC,MAAAA,SAAF;AAAaC,MAAAA;AAAb,QAAgC,4CACrCF,MADqC,EAErCf,UAFqC,CAAtC;AAIAY,IAAAA,YAAY,CAAEb,QAAF,EAAYiB,SAAZ,CAAZ;;AACA,QAAKC,cAAc,CAAE,CAAF,CAAnB,EAA2B;AAC1BJ,MAAAA,WAAW,CAAEI,cAAc,CAAE,CAAF,CAAhB,CAAX;AACA;AACD,GATD,CAFG,CAYH;AACA;;;AACA,QAAMC,mBAAmB,GAAG,sBAC3B,OAAQ;AACPC,IAAAA,eAAe,EAAEnB,UAAU,CAACoB,KAAX,CAAiBC;AAD3B,GAAR,CAD2B,EAI3B,CAAErB,UAAU,CAACoB,KAAX,CAAiBC,QAAnB,CAJ2B,CAA5B;AAMA,QAAMC,oBAAoB,GAAG,oCAC5BvB,QAD4B,EAE5BC,UAF4B,CAA7B;AAIA,SACC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,KAAK,EAAG,cAAI,kBAAJ,CAFT;AAGC,IAAA,UAAU,EAAG,cAAI,QAAJ,CAHd;AAIC,IAAA,cAAc,EAAG,MAAME,8BAA8B,CAAE,KAAF;AAJtD,KAMC,4BAAC,iCAAD;AAAsB,IAAA,KAAK,EAAGgB;AAA9B,KACC,4BAAC,4CAAD;AACC,IAAA,SAAS,EAAGI,oBADb;AAEC,IAAA,QAAQ,EAAGvB,QAFZ;AAGC,IAAA,oBAAoB,EAAGe;AAHxB,IADD,CAND,CADD;AAgBA;;eAEcjB,S","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useState, useMemo } from '@wordpress/element';\nimport {\n\tBlockContextProvider,\n\tstore as blockEditorStore,\n\t__experimentalBlockPatternSetup as BlockPatternSetup,\n} from '@wordpress/block-editor';\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport QueryContent from './query-content';\nimport QueryPlaceholder from './query-placeholder';\nimport {\n\tuseBlockNameForPatterns,\n\tgetTransformedBlocksFromPattern,\n} from '../utils';\n\nconst QueryEdit = ( props ) => {\n\tconst { clientId, attributes } = props;\n\tconst [ isPatternSelectionModalOpen, setIsPatternSelectionModalOpen ] =\n\t\tuseState( false );\n\tconst hasInnerBlocks = useSelect(\n\t\t( select ) =>\n\t\t\t!! select( blockEditorStore ).getBlocks( clientId ).length,\n\t\t[ clientId ]\n\t);\n\tconst Component = hasInnerBlocks ? QueryContent : QueryPlaceholder;\n\treturn (\n\t\t<>\n\t\t\t<Component\n\t\t\t\t{ ...props }\n\t\t\t\topenPatternSelectionModal={ () =>\n\t\t\t\t\tsetIsPatternSelectionModalOpen( true )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ isPatternSelectionModalOpen && (\n\t\t\t\t<PatternSelectionModal\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tsetIsPatternSelectionModalOpen={\n\t\t\t\t\t\tsetIsPatternSelectionModalOpen\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nfunction PatternSelectionModal( {\n\tclientId,\n\tattributes,\n\tsetIsPatternSelectionModalOpen,\n} ) {\n\tconst { replaceBlock, selectBlock } = useDispatch( blockEditorStore );\n\tconst onBlockPatternSelect = ( 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\t// When we preview Query Loop blocks we should prefer the current\n\t// block's postType, which is passed through block context.\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 blockNameForPatterns = useBlockNameForPatterns(\n\t\tclientId,\n\t\tattributes\n\t);\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"block-editor-query-pattern__selection-modal\"\n\t\t\ttitle={ __( 'Choose a pattern' ) }\n\t\t\tcloseLabel={ __( 'Cancel' ) }\n\t\t\tonRequestClose={ () => setIsPatternSelectionModalOpen( false ) }\n\t\t>\n\t\t\t<BlockContextProvider value={ blockPreviewContext }>\n\t\t\t\t<BlockPatternSetup\n\t\t\t\t\tblockName={ blockNameForPatterns }\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tonBlockPatternSelect={ onBlockPatternSelect }\n\t\t\t\t/>\n\t\t\t</BlockContextProvider>\n\t\t</Modal>\n\t);\n}\n\nexport default QueryEdit;\n"]}

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

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = QueryContent;
+
+var _element = require("@wordpress/element");
+
+var _data = require("@wordpress/data");
+
+var _compose = require("@wordpress/compose");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _queryToolbar = _interopRequireDefault(require("./query-toolbar"));
+
+var _inspectorControls = _interopRequireDefault(require("./inspector-controls"));
+
+var _constants = require("../constants");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const TEMPLATE = [['core/post-template']];
+
+function QueryContent(_ref) {
+  let {
+    attributes,
+    setAttributes,
+    openPatternSelectionModal,
+    name,
+    clientId
+  } = _ref;
+  const {
+    queryId,
+    query,
+    displayLayout,
+    tagName: TagName = 'div',
+    layout = {}
+  } = attributes;
+  const {
+    __unstableMarkNextChangeAsNotPersistent
+  } = (0, _data.useDispatch)(_blockEditor.store);
+  const instanceId = (0, _compose.useInstanceId)(QueryContent);
+  const {
+    themeSupportsLayout
+  } = (0, _data.useSelect)(select => {
+    var _getSettings;
+
+    const {
+      getSettings
+    } = select(_blockEditor.store);
+    return {
+      themeSupportsLayout: (_getSettings = getSettings()) === null || _getSettings === void 0 ? void 0 : _getSettings.supportsLayout
+    };
+  }, []);
+  const defaultLayout = (0, _blockEditor.useSetting)('layout') || {};
+  const usedLayout = !(layout !== null && layout !== void 0 && layout.type) ? { ...defaultLayout,
+    ...layout,
+    type: 'default'
+  } : { ...defaultLayout,
+    ...layout
+  };
+  const blockProps = (0, _blockEditor.useBlockProps)();
+  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)(blockProps, {
+    template: TEMPLATE,
+    __experimentalLayout: themeSupportsLayout ? usedLayout : undefined
+  });
+  const {
+    postsPerPage
+  } = (0, _data.useSelect)(select => {
+    const {
+      getSettings
+    } = select(_blockEditor.store);
+    return {
+      postsPerPage: +getSettings().postsPerPage || _constants.DEFAULTS_POSTS_PER_PAGE
+    };
+  }, []); // There are some effects running where some initialization logic is
+  // happening and setting some values to some attributes (ex. queryId).
+  // These updates can cause an `undo trap` where undoing will result in
+  // resetting again, so we need to mark these changes as not persistent
+  // with `__unstableMarkNextChangeAsNotPersistent`.
+  // Changes in query property (which is an object) need to be in the same callback,
+  // because updates are batched after the render and changes in different query properties
+  // would cause to override previous wanted changes.
+
+  (0, _element.useEffect)(() => {
+    const newQuery = {};
+
+    if (!query.perPage && postsPerPage) {
+      newQuery.perPage = postsPerPage;
+    }
+
+    if (!!Object.keys(newQuery).length) {
+      __unstableMarkNextChangeAsNotPersistent();
+
+      updateQuery(newQuery);
+    }
+  }, [query.perPage]); // We need this for multi-query block pagination.
+  // Query parameters for each block are scoped to their ID.
+
+  (0, _element.useEffect)(() => {
+    if (!Number.isFinite(queryId)) {
+      __unstableMarkNextChangeAsNotPersistent();
+
+      setAttributes({
+        queryId: instanceId
+      });
+    }
+  }, [queryId, instanceId]);
+
+  const updateQuery = newQuery => setAttributes({
+    query: { ...query,
+      ...newQuery
+    }
+  });
+
+  const updateDisplayLayout = newDisplayLayout => setAttributes({
+    displayLayout: { ...displayLayout,
+      ...newDisplayLayout
+    }
+  });
+
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_inspectorControls.default, {
+    attributes: attributes,
+    setQuery: updateQuery,
+    setDisplayLayout: updateDisplayLayout
+  }), (0, _element.createElement)(_blockEditor.BlockControls, null, (0, _element.createElement)(_queryToolbar.default, {
+    name: name,
+    clientId: clientId,
+    attributes: attributes,
+    setQuery: updateQuery,
+    setDisplayLayout: updateDisplayLayout,
+    openPatternSelectionModal: openPatternSelectionModal
+  })), (0, _element.createElement)(_blockEditor.InspectorControls, {
+    __experimentalGroup: "advanced"
+  }, (0, _element.createElement)(_components.SelectControl, {
+    label: (0, _i18n.__)('HTML element'),
+    options: [{
+      label: (0, _i18n.__)('Default (<div>)'),
+      value: 'div'
+    }, {
+      label: '<main>',
+      value: 'main'
+    }, {
+      label: '<section>',
+      value: 'section'
+    }, {
+      label: '<aside>',
+      value: 'aside'
+    }],
+    value: TagName,
+    onChange: value => setAttributes({
+      tagName: value
+    })
+  })), (0, _element.createElement)(TagName, innerBlocksProps));
+}
+//# sourceMappingURL=query-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/query/edit/query-content.js"],"names":["TEMPLATE","QueryContent","attributes","setAttributes","openPatternSelectionModal","name","clientId","queryId","query","displayLayout","tagName","TagName","layout","__unstableMarkNextChangeAsNotPersistent","blockEditorStore","instanceId","themeSupportsLayout","select","getSettings","supportsLayout","defaultLayout","usedLayout","type","blockProps","innerBlocksProps","template","__experimentalLayout","undefined","postsPerPage","DEFAULTS_POSTS_PER_PAGE","newQuery","perPage","Object","keys","length","updateQuery","Number","isFinite","updateDisplayLayout","newDisplayLayout","label","value"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect } from '@wordpress/element';\nimport {\n\tBlockControls,\n\tInspectorControls,\n\tuseBlockProps,\n\tuseSetting,\n\tstore as blockEditorStore,\n\tuseInnerBlocksProps,\n} from '@wordpress/block-editor';\nimport { SelectControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport QueryToolbar from './query-toolbar';\nimport QueryInspectorControls from './inspector-controls';\nimport { DEFAULTS_POSTS_PER_PAGE } from '../constants';\n\nconst TEMPLATE = [ [ 'core/post-template' ] ];\nexport default function QueryContent( {\n\tattributes,\n\tsetAttributes,\n\topenPatternSelectionModal,\n\tname,\n\tclientId,\n} ) {\n\tconst {\n\t\tqueryId,\n\t\tquery,\n\t\tdisplayLayout,\n\t\ttagName: TagName = 'div',\n\t\tlayout = {},\n\t} = attributes;\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst instanceId = useInstanceId( QueryContent );\n\tconst { themeSupportsLayout } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn { themeSupportsLayout: getSettings()?.supportsLayout };\n\t}, [] );\n\tconst defaultLayout = useSetting( 'layout' ) || {};\n\tconst usedLayout = ! layout?.type\n\t\t? { ...defaultLayout, ...layout, type: 'default' }\n\t\t: { ...defaultLayout, ...layout };\n\tconst blockProps = useBlockProps();\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: TEMPLATE,\n\t\t__experimentalLayout: themeSupportsLayout ? usedLayout : undefined,\n\t} );\n\tconst { postsPerPage } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn {\n\t\t\tpostsPerPage:\n\t\t\t\t+getSettings().postsPerPage || DEFAULTS_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\tuseEffect( () => {\n\t\tconst newQuery = {};\n\t\tif ( ! query.perPage && postsPerPage ) {\n\t\t\tnewQuery.perPage = postsPerPage;\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}, [ query.perPage ] );\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}, [ queryId, instanceId ] );\n\tconst updateQuery = ( newQuery ) =>\n\t\tsetAttributes( { query: { ...query, ...newQuery } } );\n\tconst updateDisplayLayout = ( newDisplayLayout ) =>\n\t\tsetAttributes( {\n\t\t\tdisplayLayout: { ...displayLayout, ...newDisplayLayout },\n\t\t} );\n\treturn (\n\t\t<>\n\t\t\t<QueryInspectorControls\n\t\t\t\tattributes={ attributes }\n\t\t\t\tsetQuery={ updateQuery }\n\t\t\t\tsetDisplayLayout={ updateDisplayLayout }\n\t\t\t/>\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\tsetDisplayLayout={ updateDisplayLayout }\n\t\t\t\t\topenPatternSelectionModal={ openPatternSelectionModal }\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\t\t\t<InspectorControls __experimentalGroup=\"advanced\">\n\t\t\t\t<SelectControl\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/>\n\t\t\t</InspectorControls>\n\t\t\t<TagName { ...innerBlocksProps } />\n\t\t</>\n\t);\n}\n"]}