@wordpress/edit-site 6.32.0 → 6.32.1-next.b8c8708f3.0

package/build-module/components/page-patterns/fields.js

@@ -1,90 +1,86 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { __experimentalHStack as HStack } from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
-import { useState, useMemo, useId } from '@wordpress/element';
-import { BlockPreview, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { Icon } from '@wordpress/icons';
-import { parse } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { TEMPLATE_PART_POST_TYPE, PATTERN_SYNC_TYPES, OPERATOR_IS } from '../../utils/constants';
-import { unlock } from '../../lock-unlock';
-import { useAddedBy } from '../page-templates/hooks';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  useGlobalStyle
-} = unlock(blockEditorPrivateApis);
-function PreviewField({
-  item
-}) {
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { __experimentalHStack as HStack } from "@wordpress/components";
+import { __, _x } from "@wordpress/i18n";
+import { useState, useMemo, useId } from "@wordpress/element";
+import {
+  BlockPreview,
+  privateApis as blockEditorPrivateApis
+} from "@wordpress/block-editor";
+import { Icon } from "@wordpress/icons";
+import { parse } from "@wordpress/blocks";
+import {
+  TEMPLATE_PART_POST_TYPE,
+  PATTERN_SYNC_TYPES,
+  OPERATOR_IS
+} from "../../utils/constants";
+import { unlock } from "../../lock-unlock";
+import { useAddedBy } from "../page-templates/hooks";
+const { useGlobalStyle } = unlock(blockEditorPrivateApis);
+function PreviewField({ item }) {
   const descriptionId = useId();
   const description = item.description || item?.excerpt?.raw;
   const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-  const [backgroundColor] = useGlobalStyle('color.background');
+  const [backgroundColor] = useGlobalStyle("color.background");
   const blocks = useMemo(() => {
-    var _item$blocks;
-    return (_item$blocks = item.blocks) !== null && _item$blocks !== void 0 ? _item$blocks : parse(item.content.raw, {
+    return item.blocks ?? parse(item.content.raw, {
       __unstableSkipMigrationLogs: true
     });
   }, [item?.content?.raw, item.blocks]);
   const isEmpty = !blocks?.length;
-  return /*#__PURE__*/_jsxs("div", {
-    className: "page-patterns-preview-field",
-    style: {
-      backgroundColor
-    },
-    "aria-describedby": !!description ? descriptionId : undefined,
-    children: [isEmpty && isTemplatePart && __('Empty template part'), isEmpty && !isTemplatePart && __('Empty pattern'), !isEmpty && /*#__PURE__*/_jsx(BlockPreview.Async, {
-      children: /*#__PURE__*/_jsx(BlockPreview, {
-        blocks: blocks,
-        viewportWidth: item.viewportWidth
-      })
-    }), !!description && /*#__PURE__*/_jsx("div", {
-      hidden: true,
-      id: descriptionId,
-      children: description
-    })]
-  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "page-patterns-preview-field",
+      style: { backgroundColor },
+      "aria-describedby": !!description ? descriptionId : void 0,
+      children: [
+        isEmpty && isTemplatePart && __("Empty template part"),
+        isEmpty && !isTemplatePart && __("Empty pattern"),
+        !isEmpty && /* @__PURE__ */ jsx(BlockPreview.Async, { children: /* @__PURE__ */ jsx(
+          BlockPreview,
+          {
+            blocks,
+            viewportWidth: item.viewportWidth
+          }
+        ) }),
+        !!description && /* @__PURE__ */ jsx("div", { hidden: true, id: descriptionId, children: description })
+      ]
+    }
+  );
 }
-export const previewField = {
-  label: __('Preview'),
-  id: 'preview',
+const previewField = {
+  label: __("Preview"),
+  id: "preview",
   render: PreviewField,
   enableSorting: false
 };
-const SYNC_FILTERS = [{
-  value: PATTERN_SYNC_TYPES.full,
-  label: _x('Synced', 'pattern (singular)'),
-  description: __('Patterns that are kept in sync across the site.')
-}, {
-  value: PATTERN_SYNC_TYPES.unsynced,
-  label: _x('Not synced', 'pattern (singular)'),
-  description: __('Patterns that can be changed freely without affecting the site.')
-}];
-export const patternStatusField = {
-  label: __('Sync status'),
-  id: 'sync-status',
-  render: ({
-    item
-  }) => {
-    const syncStatus = 'wp_pattern_sync_status' in item ? item.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full : PATTERN_SYNC_TYPES.unsynced;
-    // User patterns can have their sync statuses checked directly.
-    // Non-user patterns are all unsynced for the time being.
-    return /*#__PURE__*/_jsx("span", {
-      className: `edit-site-patterns__field-sync-status-${syncStatus}`,
-      children: SYNC_FILTERS.find(({
-        value
-      }) => value === syncStatus).label
-    });
+const SYNC_FILTERS = [
+  {
+    value: PATTERN_SYNC_TYPES.full,
+    label: _x("Synced", "pattern (singular)"),
+    description: __("Patterns that are kept in sync across the site.")
+  },
+  {
+    value: PATTERN_SYNC_TYPES.unsynced,
+    label: _x("Not synced", "pattern (singular)"),
+    description: __(
+      "Patterns that can be changed freely without affecting the site."
+    )
+  }
+];
+const patternStatusField = {
+  label: __("Sync status"),
+  id: "sync-status",
+  render: ({ item }) => {
+    const syncStatus = "wp_pattern_sync_status" in item ? item.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full : PATTERN_SYNC_TYPES.unsynced;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `edit-site-patterns__field-sync-status-${syncStatus}`,
+        children: SYNC_FILTERS.find(({ value }) => value === syncStatus).label
+      }
+    );
   },
   elements: SYNC_FILTERS,
   filterBy: {
@@ -93,47 +89,42 @@ export const patternStatusField = {
   },
   enableSorting: false
 };
-function AuthorField({
-  item
-}) {
+function AuthorField({ item }) {
   const [isImageLoaded, setIsImageLoaded] = useState(false);
-  const {
-    text,
-    icon,
-    imageUrl
-  } = useAddedBy(item.type, item.id);
-  return /*#__PURE__*/_jsxs(HStack, {
-    alignment: "left",
-    spacing: 0,
-    children: [imageUrl && /*#__PURE__*/_jsx("div", {
-      className: clsx('page-templates-author-field__avatar', {
-        'is-loaded': isImageLoaded
-      }),
-      children: /*#__PURE__*/_jsx("img", {
-        onLoad: () => setIsImageLoaded(true),
-        alt: "",
-        src: imageUrl
-      })
-    }), !imageUrl && /*#__PURE__*/_jsx("div", {
-      className: "page-templates-author-field__icon",
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: icon
-      })
-    }), /*#__PURE__*/_jsx("span", {
-      className: "page-templates-author-field__name",
-      children: text
-    })]
-  });
+  const { text, icon, imageUrl } = useAddedBy(item.type, item.id);
+  return /* @__PURE__ */ jsxs(HStack, { alignment: "left", spacing: 0, children: [
+    imageUrl && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx("page-templates-author-field__avatar", {
+          "is-loaded": isImageLoaded
+        }),
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            onLoad: () => setIsImageLoaded(true),
+            alt: "",
+            src: imageUrl
+          }
+        )
+      }
+    ),
+    !imageUrl && /* @__PURE__ */ jsx("div", { className: "page-templates-author-field__icon", children: /* @__PURE__ */ jsx(Icon, { icon }) }),
+    /* @__PURE__ */ jsx("span", { className: "page-templates-author-field__name", children: text })
+  ] });
 }
-export const templatePartAuthorField = {
-  label: __('Author'),
-  id: 'author',
-  getValue: ({
-    item
-  }) => item.author_text,
+const templatePartAuthorField = {
+  label: __("Author"),
+  id: "author",
+  getValue: ({ item }) => item.author_text,
   render: AuthorField,
   filterBy: {
     isPrimary: true
   }
 };
-//# sourceMappingURL=fields.js.map
+export {
+  patternStatusField,
+  previewField,
+  templatePartAuthorField
+};
+//# sourceMappingURL=fields.js.map

package/build-module/components/page-patterns/fields.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["clsx","__experimentalHStack","HStack","__","_x","useState","useMemo","useId","BlockPreview","privateApis","blockEditorPrivateApis","Icon","parse","TEMPLATE_PART_POST_TYPE","PATTERN_SYNC_TYPES","OPERATOR_IS","unlock","useAddedBy","jsx","_jsx","jsxs","_jsxs","useGlobalStyle","PreviewField","item","descriptionId","description","excerpt","raw","isTemplatePart","type","backgroundColor","blocks","_item$blocks","content","__unstableSkipMigrationLogs","isEmpty","length","className","style","undefined","children","Async","viewportWidth","hidden","id","previewField","label","render","enableSorting","SYNC_FILTERS","value","full","unsynced","patternStatusField","syncStatus","wp_pattern_sync_status","find","elements","filterBy","operators","isPrimary","AuthorField","isImageLoaded","setIsImageLoaded","text","icon","imageUrl","alignment","spacing","onLoad","alt","src","templatePartAuthorField","getValue","author_text"],"sources":["@wordpress/edit-site/src/components/page-patterns/fields.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useState, useMemo, useId } from '@wordpress/element';\nimport {\n\tBlockPreview,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { Icon } from '@wordpress/icons';\nimport { parse } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport {\n\tTEMPLATE_PART_POST_TYPE,\n\tPATTERN_SYNC_TYPES,\n\tOPERATOR_IS,\n} from '../../utils/constants';\nimport { unlock } from '../../lock-unlock';\nimport { useAddedBy } from '../page-templates/hooks';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction PreviewField( { item } ) {\n\tconst descriptionId = useId();\n\tconst description = item.description || item?.excerpt?.raw;\n\tconst isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst blocks = useMemo( () => {\n\t\treturn (\n\t\t\titem.blocks ??\n\t\t\tparse( item.content.raw, {\n\t\t\t\t__unstableSkipMigrationLogs: true,\n\t\t\t} )\n\t\t);\n\t}, [ item?.content?.raw, item.blocks ] );\n\tconst isEmpty = ! blocks?.length;\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"page-patterns-preview-field\"\n\t\t\tstyle={ { backgroundColor } }\n\t\t\taria-describedby={ !! description ? descriptionId : undefined }\n\t\t>\n\t\t\t{ isEmpty && isTemplatePart && __( 'Empty template part' ) }\n\t\t\t{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }\n\t\t\t{ ! isEmpty && (\n\t\t\t\t<BlockPreview.Async>\n\t\t\t\t\t<BlockPreview\n\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\tviewportWidth={ item.viewportWidth }\n\t\t\t\t\t/>\n\t\t\t\t</BlockPreview.Async>\n\t\t\t) }\n\t\t\t{ !! description && (\n\t\t\t\t<div hidden id={ descriptionId }>\n\t\t\t\t\t{ description }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport const previewField = {\n\tlabel: __( 'Preview' ),\n\tid: 'preview',\n\trender: PreviewField,\n\tenableSorting: false,\n};\n\nconst SYNC_FILTERS = [\n\t{\n\t\tvalue: PATTERN_SYNC_TYPES.full,\n\t\tlabel: _x( 'Synced', 'pattern (singular)' ),\n\t\tdescription: __( 'Patterns that are kept in sync across the site.' ),\n\t},\n\t{\n\t\tvalue: PATTERN_SYNC_TYPES.unsynced,\n\t\tlabel: _x( 'Not synced', 'pattern (singular)' ),\n\t\tdescription: __(\n\t\t\t'Patterns that can be changed freely without affecting the site.'\n\t\t),\n\t},\n];\n\nexport const patternStatusField = {\n\tlabel: __( 'Sync status' ),\n\tid: 'sync-status',\n\trender: ( { item } ) => {\n\t\tconst syncStatus =\n\t\t\t'wp_pattern_sync_status' in item\n\t\t\t\t? item.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full\n\t\t\t\t: PATTERN_SYNC_TYPES.unsynced;\n\t\t// User patterns can have their sync statuses checked directly.\n\t\t// Non-user patterns are all unsynced for the time being.\n\t\treturn (\n\t\t\t<span\n\t\t\t\tclassName={ `edit-site-patterns__field-sync-status-${ syncStatus }` }\n\t\t\t>\n\t\t\t\t{\n\t\t\t\t\tSYNC_FILTERS.find( ( { value } ) => value === syncStatus )\n\t\t\t\t\t\t.label\n\t\t\t\t}\n\t\t\t</span>\n\t\t);\n\t},\n\telements: SYNC_FILTERS,\n\tfilterBy: {\n\t\toperators: [ OPERATOR_IS ],\n\t\tisPrimary: true,\n\t},\n\tenableSorting: false,\n};\n\nfunction AuthorField( { item } ) {\n\tconst [ isImageLoaded, setIsImageLoaded ] = useState( false );\n\tconst { text, icon, imageUrl } = useAddedBy( item.type, item.id );\n\n\treturn (\n\t\t<HStack alignment=\"left\" spacing={ 0 }>\n\t\t\t{ imageUrl && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx( 'page-templates-author-field__avatar', {\n\t\t\t\t\t\t'is-loaded': isImageLoaded,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<img\n\t\t\t\t\t\tonLoad={ () => setIsImageLoaded( true ) }\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tsrc={ imageUrl }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ ! imageUrl && (\n\t\t\t\t<div className=\"page-templates-author-field__icon\">\n\t\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<span className=\"page-templates-author-field__name\">{ text }</span>\n\t\t</HStack>\n\t);\n}\n\nexport const templatePartAuthorField = {\n\tlabel: __( 'Author' ),\n\tid: 'author',\n\tgetValue: ( { item } ) => item.author_text,\n\trender: AuthorField,\n\tfilterBy: {\n\t\tisPrimary: true,\n\t},\n};\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/components/page-patterns/fields.js"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useState, useMemo, useId } from '@wordpress/element';\nimport {\n\tBlockPreview,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { Icon } from '@wordpress/icons';\nimport { parse } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport {\n\tTEMPLATE_PART_POST_TYPE,\n\tPATTERN_SYNC_TYPES,\n\tOPERATOR_IS,\n} from '../../utils/constants';\nimport { unlock } from '../../lock-unlock';\nimport { useAddedBy } from '../page-templates/hooks';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nfunction PreviewField( { item } ) {\n\tconst descriptionId = useId();\n\tconst description = item.description || item?.excerpt?.raw;\n\tconst isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;\n\tconst [ backgroundColor ] = useGlobalStyle( 'color.background' );\n\tconst blocks = useMemo( () => {\n\t\treturn (\n\t\t\titem.blocks ??\n\t\t\tparse( item.content.raw, {\n\t\t\t\t__unstableSkipMigrationLogs: true,\n\t\t\t} )\n\t\t);\n\t}, [ item?.content?.raw, item.blocks ] );\n\tconst isEmpty = ! blocks?.length;\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"page-patterns-preview-field\"\n\t\t\tstyle={ { backgroundColor } }\n\t\t\taria-describedby={ !! description ? descriptionId : undefined }\n\t\t>\n\t\t\t{ isEmpty && isTemplatePart && __( 'Empty template part' ) }\n\t\t\t{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }\n\t\t\t{ ! isEmpty && (\n\t\t\t\t<BlockPreview.Async>\n\t\t\t\t\t<BlockPreview\n\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\tviewportWidth={ item.viewportWidth }\n\t\t\t\t\t/>\n\t\t\t\t</BlockPreview.Async>\n\t\t\t) }\n\t\t\t{ !! description && (\n\t\t\t\t<div hidden id={ descriptionId }>\n\t\t\t\t\t{ description }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport const previewField = {\n\tlabel: __( 'Preview' ),\n\tid: 'preview',\n\trender: PreviewField,\n\tenableSorting: false,\n};\n\nconst SYNC_FILTERS = [\n\t{\n\t\tvalue: PATTERN_SYNC_TYPES.full,\n\t\tlabel: _x( 'Synced', 'pattern (singular)' ),\n\t\tdescription: __( 'Patterns that are kept in sync across the site.' ),\n\t},\n\t{\n\t\tvalue: PATTERN_SYNC_TYPES.unsynced,\n\t\tlabel: _x( 'Not synced', 'pattern (singular)' ),\n\t\tdescription: __(\n\t\t\t'Patterns that can be changed freely without affecting the site.'\n\t\t),\n\t},\n];\n\nexport const patternStatusField = {\n\tlabel: __( 'Sync status' ),\n\tid: 'sync-status',\n\trender: ( { item } ) => {\n\t\tconst syncStatus =\n\t\t\t'wp_pattern_sync_status' in item\n\t\t\t\t? item.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full\n\t\t\t\t: PATTERN_SYNC_TYPES.unsynced;\n\t\t// User patterns can have their sync statuses checked directly.\n\t\t// Non-user patterns are all unsynced for the time being.\n\t\treturn (\n\t\t\t<span\n\t\t\t\tclassName={ `edit-site-patterns__field-sync-status-${ syncStatus }` }\n\t\t\t>\n\t\t\t\t{\n\t\t\t\t\tSYNC_FILTERS.find( ( { value } ) => value === syncStatus )\n\t\t\t\t\t\t.label\n\t\t\t\t}\n\t\t\t</span>\n\t\t);\n\t},\n\telements: SYNC_FILTERS,\n\tfilterBy: {\n\t\toperators: [ OPERATOR_IS ],\n\t\tisPrimary: true,\n\t},\n\tenableSorting: false,\n};\n\nfunction AuthorField( { item } ) {\n\tconst [ isImageLoaded, setIsImageLoaded ] = useState( false );\n\tconst { text, icon, imageUrl } = useAddedBy( item.type, item.id );\n\n\treturn (\n\t\t<HStack alignment=\"left\" spacing={ 0 }>\n\t\t\t{ imageUrl && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ clsx( 'page-templates-author-field__avatar', {\n\t\t\t\t\t\t'is-loaded': isImageLoaded,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<img\n\t\t\t\t\t\tonLoad={ () => setIsImageLoaded( true ) }\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tsrc={ imageUrl }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ ! imageUrl && (\n\t\t\t\t<div className=\"page-templates-author-field__icon\">\n\t\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<span className=\"page-templates-author-field__name\">{ text }</span>\n\t\t</HStack>\n\t);\n}\n\nexport const templatePartAuthorField = {\n\tlabel: __( 'Author' ),\n\tid: 'author',\n\tgetValue: ( { item } ) => item.author_text,\n\trender: AuthorField,\n\tfilterBy: {\n\t\tisPrimary: true,\n\t},\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/components/page-patterns/index.js

@@ -1,102 +1,128 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useState, useMemo, useId, useEffect } from '@wordpress/element';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
-import { usePrevious } from '@wordpress/compose';
-import { useEntityRecords } from '@wordpress/core-data';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import Page from '../page';
-import { LAYOUT_GRID, LAYOUT_TABLE, PATTERN_TYPES, TEMPLATE_PART_POST_TYPE, PATTERN_DEFAULT_CATEGORY } from '../../utils/constants';
-import usePatternSettings from './use-pattern-settings';
-import { unlock } from '../../lock-unlock';
-import usePatterns, { useAugmentPatternsWithPermissions } from './use-patterns';
-import PatternsHeader from './header';
-import { useEditPostAction } from '../dataviews-actions';
-import { patternStatusField, previewField, templatePartAuthorField } from './fields';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  ExperimentalBlockEditorProvider
-} = unlock(blockEditorPrivateApis);
-const {
-  usePostActions,
-  patternTitleField
-} = unlock(editorPrivateApis);
-const {
-  useLocation,
-  useHistory
-} = unlock(routerPrivateApis);
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Page } from "@wordpress/admin-ui";
+import { __ } from "@wordpress/i18n";
+import { useMemo } from "@wordpress/element";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { DataViews, filterSortAndPaginate } from "@wordpress/dataviews";
+import { useEntityRecords, store as coreStore } from "@wordpress/core-data";
+import { privateApis as editorPrivateApis } from "@wordpress/editor";
+import { privateApis as routerPrivateApis } from "@wordpress/router";
+import { useView } from "@wordpress/views";
+import { useSelect } from "@wordpress/data";
+import {
+  LAYOUT_GRID,
+  LAYOUT_TABLE,
+  PATTERN_TYPES,
+  TEMPLATE_PART_POST_TYPE,
+  PATTERN_DEFAULT_CATEGORY
+} from "../../utils/constants";
+import usePatternSettings from "./use-pattern-settings";
+import { unlock } from "../../lock-unlock";
+import usePatterns, { useAugmentPatternsWithPermissions } from "./use-patterns";
+import PatternsActions from "./actions";
+import { useEditPostAction } from "../dataviews-actions";
+import {
+  patternStatusField,
+  previewField,
+  templatePartAuthorField
+} from "./fields";
+import { addQueryArgs } from "@wordpress/url";
+import usePatternCategories from "../sidebar-navigation-screen-patterns/use-pattern-categories";
+import { Button } from "@wordpress/components";
+const { ExperimentalBlockEditorProvider } = unlock(blockEditorPrivateApis);
+const { usePostActions, patternTitleField } = unlock(editorPrivateApis);
+const { useLocation, useHistory } = unlock(routerPrivateApis);
 const EMPTY_ARRAY = [];
 const defaultLayouts = {
   [LAYOUT_TABLE]: {
     layout: {
       styles: {
         author: {
-          width: '1%'
+          width: "1%"
         }
       }
     }
   },
   [LAYOUT_GRID]: {
     layout: {
-      badgeFields: ['sync-status']
+      badgeFields: ["sync-status"]
     }
   }
 };
 const DEFAULT_VIEW = {
   type: LAYOUT_GRID,
-  search: '',
-  page: 1,
   perPage: 20,
-  titleField: 'title',
-  mediaField: 'preview',
-  fields: ['sync-status'],
+  titleField: "title",
+  mediaField: "preview",
+  fields: ["sync-status"],
   filters: [],
   ...defaultLayouts[LAYOUT_GRID]
 };
-export default function DataviewsPatterns() {
-  const {
-    query: {
-      postType = 'wp_block',
-      categoryId: categoryIdFromURL
-    }
-  } = useLocation();
+function usePagePatternsHeader(type, categoryId) {
+  const { patternCategories } = usePatternCategories();
+  const templatePartAreas = useSelect(
+    (select) => select(coreStore).getCurrentTheme()?.default_template_part_areas || [],
+    []
+  );
+  let title, description, patternCategory;
+  if (type === TEMPLATE_PART_POST_TYPE) {
+    const templatePartArea = templatePartAreas.find(
+      (area) => area.area === categoryId
+    );
+    title = templatePartArea?.label || __("All Template Parts");
+    description = templatePartArea?.description || __("Includes every template part defined for any area.");
+  } else if (type === PATTERN_TYPES.user && !!categoryId) {
+    patternCategory = patternCategories.find(
+      (category) => category.name === categoryId
+    );
+    title = patternCategory?.label;
+    description = patternCategory?.description;
+  }
+  return { title, description };
+}
+function DataviewsPatterns() {
+  const { path, query } = useLocation();
+  const { postType = "wp_block", categoryId: categoryIdFromURL } = query;
   const history = useHistory();
   const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY;
-  const [view, setView] = useState(DEFAULT_VIEW);
-  const previousCategoryId = usePrevious(categoryId);
-  const previousPostType = usePrevious(postType);
-  const viewSyncStatus = view.filters?.find(({
-    field
-  }) => field === 'sync-status')?.value;
-  const {
-    patterns,
-    isResolving
-  } = usePatterns(postType, categoryId, {
+  const { view, updateView, isModified, resetToDefault } = useView({
+    kind: "postType",
+    name: postType,
+    slug: categoryId,
+    defaultView: DEFAULT_VIEW,
+    queryParams: {
+      page: Number(query.pageNumber ?? 1),
+      search: query.search
+    },
+    onChangeQueryParams: (params) => {
+      history.navigate(
+        addQueryArgs(path, {
+          ...query,
+          pageNumber: params.page,
+          search: params.search
+        })
+      );
+    }
+  });
+  const viewSyncStatus = view.filters?.find(
+    ({ field }) => field === "sync-status"
+  )?.value;
+  const { patterns, isResolving } = usePatterns(postType, categoryId, {
     search: view.search,
     syncStatus: viewSyncStatus
   });
-  const {
-    records
-  } = useEntityRecords('postType', TEMPLATE_PART_POST_TYPE, {
+  const { records } = useEntityRecords("postType", TEMPLATE_PART_POST_TYPE, {
     per_page: -1
   });
   const authors = useMemo(() => {
     if (!records) {
       return EMPTY_ARRAY;
     }
-    const authorsSet = new Set();
-    records.forEach(template => {
+    const authorsSet = /* @__PURE__ */ new Set();
+    records.forEach((template) => {
       authorsSet.add(template.author_text);
     });
-    return Array.from(authorsSet).map(author => ({
+    return Array.from(authorsSet).map((author) => ({
       value: author,
       label: author
     }));
@@ -113,25 +139,8 @@ export default function DataviewsPatterns() {
     }
     return _fields;
   }, [postType, authors]);
-
-  // Reset the page number when the category changes.
-  useEffect(() => {
-    if (previousCategoryId !== categoryId || previousPostType !== postType) {
-      setView(prevView => ({
-        ...prevView,
-        page: 1
-      }));
-    }
-  }, [categoryId, previousCategoryId, previousPostType, postType]);
-  const {
-    data,
-    paginationInfo
-  } = useMemo(() => {
-    // Search is managed server-side as well as filters for patterns.
-    // However, the author filter in template parts is done client-side.
-    const viewWithoutFilters = {
-      ...view
-    };
+  const { data, paginationInfo } = useMemo(() => {
+    const viewWithoutFilters = { ...view };
     delete viewWithoutFilters.search;
     if (postType !== TEMPLATE_PART_POST_TYPE) {
       viewWithoutFilters.filters = [];
@@ -141,11 +150,11 @@ export default function DataviewsPatterns() {
   const dataWithPermissions = useAugmentPatternsWithPermissions(data);
   const templatePartActions = usePostActions({
     postType: TEMPLATE_PART_POST_TYPE,
-    context: 'list'
+    context: "list"
   });
   const patternActions = usePostActions({
     postType: PATTERN_TYPES.user,
-    context: 'list'
+    context: "list"
   });
   const editAction = useEditPostAction();
   const actions = useMemo(() => {
@@ -154,41 +163,56 @@ export default function DataviewsPatterns() {
     }
     return [editAction, ...patternActions].filter(Boolean);
   }, [editAction, postType, templatePartActions, patternActions]);
-  const id = useId();
   const settings = usePatternSettings();
-  // Wrap everything in a block editor provider.
-  // This ensures 'styles' that are needed for the previews are synced
-  // from the site editor store to the block editor store.
-  return /*#__PURE__*/_jsx(ExperimentalBlockEditorProvider, {
-    settings: settings,
-    children: /*#__PURE__*/_jsxs(Page, {
-      title: __('Patterns content'),
+  const { title, description } = usePagePatternsHeader(
+    postType,
+    categoryId
+  );
+  return /* @__PURE__ */ jsx(ExperimentalBlockEditorProvider, { settings, children: /* @__PURE__ */ jsx(
+    Page,
+    {
       className: "edit-site-page-patterns-dataviews",
-      hideTitleFromUI: true,
-      children: [/*#__PURE__*/_jsx(PatternsHeader, {
-        categoryId: categoryId,
-        type: postType,
-        titleId: `${id}-title`,
-        descriptionId: `${id}-description`
-      }), /*#__PURE__*/_jsx(DataViews, {
-        paginationInfo: paginationInfo,
-        fields: fields,
-        actions: actions,
-        data: dataWithPermissions || EMPTY_ARRAY,
-        getItemId: item => {
-          var _item$name;
-          return (_item$name = item.name) !== null && _item$name !== void 0 ? _item$name : item.id;
-        },
-        isLoading: isResolving,
-        isItemClickable: item => item.type !== PATTERN_TYPES.theme,
-        onClickItem: item => {
-          history.navigate(`/${item.type}/${[PATTERN_TYPES.user, TEMPLATE_PART_POST_TYPE].includes(item.type) ? item.id : item.name}?canvas=edit`);
+      title,
+      subTitle: description,
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        isModified && /* @__PURE__ */ jsx(
+          Button,
+          {
+            __next40pxDefaultSize: true,
+            onClick: resetToDefault,
+            children: __("Reset view")
+          }
+        ),
+        /* @__PURE__ */ jsx(PatternsActions, {})
+      ] }),
+      children: /* @__PURE__ */ jsx(
+        DataViews,
+        {
+          paginationInfo,
+          fields,
+          actions,
+          data: dataWithPermissions || EMPTY_ARRAY,
+          getItemId: (item) => item.name ?? item.id,
+          isLoading: isResolving,
+          isItemClickable: (item) => item.type !== PATTERN_TYPES.theme,
+          onClickItem: (item) => {
+            history.navigate(
+              `/${item.type}/${[
+                PATTERN_TYPES.user,
+                TEMPLATE_PART_POST_TYPE
+              ].includes(item.type) ? item.id : item.name}?canvas=edit`
+            );
+          },
+          view,
+          onChangeView: updateView,
+          defaultLayouts
         },
-        view: view,
-        onChangeView: setView,
-        defaultLayouts: defaultLayouts
-      }, categoryId + postType)]
-    })
-  });
+        categoryId + postType
+      )
+    }
+  ) });
 }
-//# sourceMappingURL=index.js.map
+export {
+  DataviewsPatterns as default
+};
+//# sourceMappingURL=index.js.map