@wordpress/edit-site 5.13.0 → 5.15.0

package/build/components/page-patterns/grid-item.js

@@ -0,0 +1,218 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _components = require("@wordpress/components");
+
+var _data = require("@wordpress/data");
+
+var _i18n = require("@wordpress/i18n");
+
+var _icons = require("@wordpress/icons");
+
+var _notices = require("@wordpress/notices");
+
+var _reusableBlocks = require("@wordpress/reusable-blocks");
+
+var _renameMenuItem = _interopRequireDefault(require("./rename-menu-item"));
+
+var _duplicateMenuItem = _interopRequireDefault(require("./duplicate-menu-item"));
+
+var _utils = require("./utils");
+
+var _store = require("../../store");
+
+var _link = require("../routes/link");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const templatePartIcons = {
+  header: _icons.header,
+  footer: _icons.footer,
+  uncategorized: _icons.symbolFilled
+};
+
+function GridItem({
+  categoryId,
+  item,
+  ...props
+}) {
+  const descriptionId = (0, _element.useId)();
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = (0, _element.useState)(false);
+  const {
+    removeTemplate
+  } = (0, _data.useDispatch)(_store.store);
+  const {
+    __experimentalDeleteReusableBlock
+  } = (0, _data.useDispatch)(_reusableBlocks.store);
+  const {
+    createErrorNotice,
+    createSuccessNotice
+  } = (0, _data.useDispatch)(_notices.store);
+  const isUserPattern = item.type === _utils.USER_PATTERNS;
+  const isNonUserPattern = item.type === _utils.PATTERNS;
+  const isTemplatePart = item.type === _utils.TEMPLATE_PARTS;
+  const {
+    onClick
+  } = (0, _link.useLink)({
+    postType: item.type,
+    postId: isUserPattern ? item.id : item.name,
+    categoryId,
+    categoryType: item.type
+  });
+  const isEmpty = !item.blocks?.length;
+  const patternClassNames = (0, _classnames.default)('edit-site-patterns__pattern', {
+    'is-placeholder': isEmpty
+  });
+  const previewClassNames = (0, _classnames.default)('edit-site-patterns__preview', {
+    'is-inactive': isNonUserPattern
+  });
+
+  const deletePattern = async () => {
+    try {
+      await __experimentalDeleteReusableBlock(item.id);
+      createSuccessNotice((0, _i18n.sprintf)( // translators: %s: The pattern's title e.g. 'Call to action'.
+      (0, _i18n.__)('"%s" deleted.'), item.title), {
+        type: 'snackbar',
+        id: 'edit-site-patterns-success'
+      });
+    } catch (error) {
+      const errorMessage = error.message && error.code !== 'unknown_error' ? error.message : (0, _i18n.__)('An error occurred while deleting the pattern.');
+      createErrorNotice(errorMessage, {
+        type: 'snackbar',
+        id: 'edit-site-patterns-error'
+      });
+    }
+  };
+
+  const deleteItem = () => isTemplatePart ? removeTemplate(item) : deletePattern(); // Only custom patterns or custom template parts can be renamed or deleted.
+
+
+  const isCustomPattern = isUserPattern || isTemplatePart && item.isCustom;
+  const hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;
+  const ariaDescriptions = [];
+
+  if (isCustomPattern) {
+    // User patterns don't have descriptions, but can be edited and deleted, so include some help text.
+    ariaDescriptions.push((0, _i18n.__)('Press Enter to edit, or Delete to delete the pattern.'));
+  } else if (item.description) {
+    ariaDescriptions.push(item.description);
+  }
+
+  if (isNonUserPattern) {
+    ariaDescriptions.push((0, _i18n.__)('Theme & plugin patterns cannot be edited.'));
+  }
+
+  const itemIcon = templatePartIcons[categoryId] || (item.syncStatus === _utils.SYNC_TYPES.full ? _icons.symbol : undefined);
+  const confirmButtonText = hasThemeFile ? (0, _i18n.__)('Clear') : (0, _i18n.__)('Delete');
+  const confirmPrompt = hasThemeFile ? (0, _i18n.__)('Are you sure you want to clear these customizations?') : (0, _i18n.sprintf)( // translators: %s: The pattern or template part's title e.g. 'Call to action'.
+  (0, _i18n.__)('Are you sure you want to delete "%s"?'), item.title);
+  return (0, _element.createElement)("li", {
+    className: patternClassNames
+  }, (0, _element.createElement)("button", {
+    className: previewClassNames // Even though still incomplete, passing ids helps performance.
+    // @see https://reakit.io/docs/composite/#performance.
+    ,
+    id: `edit-site-patterns-${item.name}`,
+    ...props,
+    onClick: item.type !== _utils.PATTERNS ? onClick : undefined,
+    "aria-disabled": item.type !== _utils.PATTERNS ? 'false' : 'true',
+    "aria-label": item.title,
+    "aria-describedby": ariaDescriptions.length ? ariaDescriptions.map((_, index) => `${descriptionId}-${index}`).join(' ') : undefined
+  }, isEmpty && (0, _i18n.__)('Empty pattern'), !isEmpty && (0, _element.createElement)(_blockEditor.BlockPreview, {
+    blocks: item.blocks
+  })), ariaDescriptions.map((ariaDescription, index) => (0, _element.createElement)("div", {
+    key: index,
+    hidden: true,
+    id: `${descriptionId}-${index}`
+  }, ariaDescription)), (0, _element.createElement)(_components.__experimentalHStack, {
+    className: "edit-site-patterns__footer",
+    justify: "space-between"
+  }, (0, _element.createElement)(_components.__experimentalHStack, {
+    alignment: "center",
+    justify: "left",
+    spacing: 3,
+    className: "edit-site-patterns__pattern-title"
+  }, itemIcon && !isNonUserPattern && (0, _element.createElement)(_components.Tooltip, {
+    position: "top center",
+    text: (0, _i18n.__)('Editing this pattern will also update anywhere it is used')
+  }, (0, _element.createElement)("span", null, (0, _element.createElement)(_icons.Icon, {
+    className: "edit-site-patterns__pattern-icon",
+    icon: itemIcon
+  }))), (0, _element.createElement)(_components.Flex, {
+    as: "span",
+    gap: 0,
+    justify: "left"
+  }, item.type === _utils.PATTERNS ? item.title : (0, _element.createElement)(_components.__experimentalHeading, {
+    level: 5
+  }, (0, _element.createElement)(_components.Button, {
+    variant: "link",
+    onClick: onClick // Required for the grid's roving tab index system.
+    // See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
+    ,
+    tabIndex: "-1"
+  }, item.title)), item.type === _utils.PATTERNS && (0, _element.createElement)(_components.Tooltip, {
+    position: "top center",
+    text: (0, _i18n.__)('This pattern cannot be edited.')
+  }, (0, _element.createElement)("span", {
+    className: "edit-site-patterns__pattern-lock-icon"
+  }, (0, _element.createElement)(_icons.Icon, {
+    icon: _icons.lockSmall,
+    size: 24
+  }))))), (0, _element.createElement)(_components.DropdownMenu, {
+    icon: _icons.moreHorizontal,
+    label: (0, _i18n.__)('Actions'),
+    className: "edit-site-patterns__dropdown",
+    popoverProps: {
+      placement: 'bottom-end'
+    },
+    toggleProps: {
+      className: 'edit-site-patterns__button',
+      isSmall: true,
+      describedBy: (0, _i18n.sprintf)(
+      /* translators: %s: pattern name */
+      (0, _i18n.__)('Action menu for %s pattern'), item.title)
+    }
+  }, ({
+    onClose
+  }) => (0, _element.createElement)(_components.MenuGroup, null, isCustomPattern && !hasThemeFile && (0, _element.createElement)(_renameMenuItem.default, {
+    item: item,
+    onClose: onClose
+  }), (0, _element.createElement)(_duplicateMenuItem.default, {
+    categoryId: categoryId,
+    item: item,
+    onClose: onClose,
+    label: isNonUserPattern ? (0, _i18n.__)('Copy to My patterns') : (0, _i18n.__)('Duplicate')
+  }), isCustomPattern && (0, _element.createElement)(_components.MenuItem, {
+    onClick: () => setIsDeleteDialogOpen(true)
+  }, hasThemeFile ? (0, _i18n.__)('Clear customizations') : (0, _i18n.__)('Delete'))))), isDeleteDialogOpen && (0, _element.createElement)(_components.__experimentalConfirmDialog, {
+    confirmButtonText: confirmButtonText,
+    onConfirm: deleteItem,
+    onCancel: () => setIsDeleteDialogOpen(false)
+  }, confirmPrompt));
+}
+
+var _default = (0, _element.memo)(GridItem);
+
+exports.default = _default;
+//# sourceMappingURL=grid-item.js.map

package/build/components/page-patterns/grid-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/page-patterns/grid-item.js"],"names":["templatePartIcons","header","footer","uncategorized","GridItem","categoryId","item","props","descriptionId","isDeleteDialogOpen","setIsDeleteDialogOpen","removeTemplate","editSiteStore","__experimentalDeleteReusableBlock","reusableBlocksStore","createErrorNotice","createSuccessNotice","noticesStore","isUserPattern","type","USER_PATTERNS","isNonUserPattern","PATTERNS","isTemplatePart","TEMPLATE_PARTS","onClick","postType","postId","id","name","categoryType","isEmpty","blocks","length","patternClassNames","previewClassNames","deletePattern","title","error","errorMessage","message","code","deleteItem","isCustomPattern","isCustom","hasThemeFile","templatePart","has_theme_file","ariaDescriptions","push","description","itemIcon","syncStatus","SYNC_TYPES","full","symbol","undefined","confirmButtonText","confirmPrompt","map","_","index","join","ariaDescription","lockSmall","moreHorizontal","placement","className","isSmall","describedBy","onClose"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { BlockPreview } from '@wordpress/block-editor';\nimport {\n\tButton,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n\tTooltip,\n\tFlex,\n} from '@wordpress/components';\nimport { useDispatch } from '@wordpress/data';\nimport { useState, useId, memo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tIcon,\n\theader,\n\tfooter,\n\tsymbolFilled as uncategorized,\n\tsymbol,\n\tmoreHorizontal,\n\tlockSmall,\n} from '@wordpress/icons';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { store as reusableBlocksStore } from '@wordpress/reusable-blocks';\n\n/**\n * Internal dependencies\n */\nimport RenameMenuItem from './rename-menu-item';\nimport DuplicateMenuItem from './duplicate-menu-item';\nimport { PATTERNS, TEMPLATE_PARTS, USER_PATTERNS, SYNC_TYPES } from './utils';\nimport { store as editSiteStore } from '../../store';\nimport { useLink } from '../routes/link';\n\nconst templatePartIcons = { header, footer, uncategorized };\n\nfunction GridItem( { categoryId, item, ...props } ) {\n\tconst descriptionId = useId();\n\tconst [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );\n\n\tconst { removeTemplate } = useDispatch( editSiteStore );\n\tconst { __experimentalDeleteReusableBlock } =\n\t\tuseDispatch( reusableBlocksStore );\n\tconst { createErrorNotice, createSuccessNotice } =\n\t\tuseDispatch( noticesStore );\n\n\tconst isUserPattern = item.type === USER_PATTERNS;\n\tconst isNonUserPattern = item.type === PATTERNS;\n\tconst isTemplatePart = item.type === TEMPLATE_PARTS;\n\n\tconst { onClick } = useLink( {\n\t\tpostType: item.type,\n\t\tpostId: isUserPattern ? item.id : item.name,\n\t\tcategoryId,\n\t\tcategoryType: item.type,\n\t} );\n\n\tconst isEmpty = ! item.blocks?.length;\n\tconst patternClassNames = classnames( 'edit-site-patterns__pattern', {\n\t\t'is-placeholder': isEmpty,\n\t} );\n\tconst previewClassNames = classnames( 'edit-site-patterns__preview', {\n\t\t'is-inactive': isNonUserPattern,\n\t} );\n\n\tconst deletePattern = async () => {\n\t\ttry {\n\t\t\tawait __experimentalDeleteReusableBlock( item.id );\n\t\t\tcreateSuccessNotice(\n\t\t\t\tsprintf(\n\t\t\t\t\t// translators: %s: The pattern's title e.g. 'Call to action'.\n\t\t\t\t\t__( '\"%s\" deleted.' ),\n\t\t\t\t\titem.title\n\t\t\t\t),\n\t\t\t\t{ type: 'snackbar', id: 'edit-site-patterns-success' }\n\t\t\t);\n\t\t} catch ( error ) {\n\t\t\tconst errorMessage =\n\t\t\t\terror.message && error.code !== 'unknown_error'\n\t\t\t\t\t? error.message\n\t\t\t\t\t: __( 'An error occurred while deleting the pattern.' );\n\t\t\tcreateErrorNotice( errorMessage, {\n\t\t\t\ttype: 'snackbar',\n\t\t\t\tid: 'edit-site-patterns-error',\n\t\t\t} );\n\t\t}\n\t};\n\tconst deleteItem = () =>\n\t\tisTemplatePart ? removeTemplate( item ) : deletePattern();\n\n\t// Only custom patterns or custom template parts can be renamed or deleted.\n\tconst isCustomPattern =\n\t\tisUserPattern || ( isTemplatePart && item.isCustom );\n\tconst hasThemeFile = isTemplatePart && item.templatePart.has_theme_file;\n\tconst ariaDescriptions = [];\n\n\tif ( isCustomPattern ) {\n\t\t// User patterns don't have descriptions, but can be edited and deleted, so include some help text.\n\t\tariaDescriptions.push(\n\t\t\t__( 'Press Enter to edit, or Delete to delete the pattern.' )\n\t\t);\n\t} else if ( item.description ) {\n\t\tariaDescriptions.push( item.description );\n\t}\n\n\tif ( isNonUserPattern ) {\n\t\tariaDescriptions.push(\n\t\t\t__( 'Theme & plugin patterns cannot be edited.' )\n\t\t);\n\t}\n\n\tconst itemIcon =\n\t\ttemplatePartIcons[ categoryId ] ||\n\t\t( item.syncStatus === SYNC_TYPES.full ? symbol : undefined );\n\n\tconst confirmButtonText = hasThemeFile ? __( 'Clear' ) : __( 'Delete' );\n\tconst confirmPrompt = hasThemeFile\n\t\t? __( 'Are you sure you want to clear these customizations?' )\n\t\t: sprintf(\n\t\t\t\t// translators: %s: The pattern or template part's title e.g. 'Call to action'.\n\t\t\t\t__( 'Are you sure you want to delete \"%s\"?' ),\n\t\t\t\titem.title\n\t\t  );\n\n\treturn (\n\t\t<li className={ patternClassNames }>\n\t\t\t<button\n\t\t\t\tclassName={ previewClassNames }\n\t\t\t\t// Even though still incomplete, passing ids helps performance.\n\t\t\t\t// @see https://reakit.io/docs/composite/#performance.\n\t\t\t\tid={ `edit-site-patterns-${ item.name }` }\n\t\t\t\t{ ...props }\n\t\t\t\tonClick={ item.type !== PATTERNS ? onClick : undefined }\n\t\t\t\taria-disabled={ item.type !== PATTERNS ? 'false' : 'true' }\n\t\t\t\taria-label={ item.title }\n\t\t\t\taria-describedby={\n\t\t\t\t\tariaDescriptions.length\n\t\t\t\t\t\t? ariaDescriptions\n\t\t\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t\t\t( _, index ) =>\n\t\t\t\t\t\t\t\t\t\t`${ descriptionId }-${ index }`\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t.join( ' ' )\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ isEmpty && __( 'Empty pattern' ) }\n\t\t\t\t{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }\n\t\t\t</button>\n\t\t\t{ ariaDescriptions.map( ( ariaDescription, index ) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={ index }\n\t\t\t\t\thidden\n\t\t\t\t\tid={ `${ descriptionId }-${ index }` }\n\t\t\t\t>\n\t\t\t\t\t{ ariaDescription }\n\t\t\t\t</div>\n\t\t\t) ) }\n\t\t\t<HStack\n\t\t\t\tclassName=\"edit-site-patterns__footer\"\n\t\t\t\tjustify=\"space-between\"\n\t\t\t>\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"center\"\n\t\t\t\t\tjustify=\"left\"\n\t\t\t\t\tspacing={ 3 }\n\t\t\t\t\tclassName=\"edit-site-patterns__pattern-title\"\n\t\t\t\t>\n\t\t\t\t\t{ itemIcon && ! isNonUserPattern && (\n\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\tposition=\"top center\"\n\t\t\t\t\t\t\ttext={ __(\n\t\t\t\t\t\t\t\t'Editing this pattern will also update anywhere it is used'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-patterns__pattern-icon\"\n\t\t\t\t\t\t\t\t\ticon={ itemIcon }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) }\n\t\t\t\t\t<Flex as=\"span\" gap={ 0 } justify=\"left\">\n\t\t\t\t\t\t{ item.type === PATTERNS ? (\n\t\t\t\t\t\t\titem.title\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Heading level={ 5 }>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\t\t\t\t\t// Required for the grid's roving tab index system.\n\t\t\t\t\t\t\t\t\t// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.\n\t\t\t\t\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.title }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ item.type === PATTERNS && (\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tposition=\"top center\"\n\t\t\t\t\t\t\t\ttext={ __( 'This pattern cannot be edited.' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"edit-site-patterns__pattern-lock-icon\">\n\t\t\t\t\t\t\t\t\t<Icon icon={ lockSmall } size={ 24 } />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Flex>\n\t\t\t\t</HStack>\n\t\t\t\t<DropdownMenu\n\t\t\t\t\ticon={ moreHorizontal }\n\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t\tclassName=\"edit-site-patterns__dropdown\"\n\t\t\t\t\tpopoverProps={ { placement: 'bottom-end' } }\n\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\tclassName: 'edit-site-patterns__button',\n\t\t\t\t\t\tisSmall: true,\n\t\t\t\t\t\tdescribedBy: sprintf(\n\t\t\t\t\t\t\t/* translators: %s: pattern name */\n\t\t\t\t\t\t\t__( 'Action menu for %s pattern' ),\n\t\t\t\t\t\t\titem.title\n\t\t\t\t\t\t),\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t{ isCustomPattern && ! hasThemeFile && (\n\t\t\t\t\t\t\t\t<RenameMenuItem\n\t\t\t\t\t\t\t\t\titem={ item }\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\t<DuplicateMenuItem\n\t\t\t\t\t\t\t\tcategoryId={ categoryId }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tisNonUserPattern\n\t\t\t\t\t\t\t\t\t\t? __( 'Copy to My patterns' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Duplicate' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ isCustomPattern && (\n\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tsetIsDeleteDialogOpen( true )\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\t\t{ hasThemeFile\n\t\t\t\t\t\t\t\t\t\t? __( 'Clear customizations' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Delete' ) }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t) }\n\t\t\t\t</DropdownMenu>\n\t\t\t</HStack>\n\n\t\t\t{ isDeleteDialogOpen && (\n\t\t\t\t<ConfirmDialog\n\t\t\t\t\tconfirmButtonText={ confirmButtonText }\n\t\t\t\t\tonConfirm={ deleteItem }\n\t\t\t\t\tonCancel={ () => setIsDeleteDialogOpen( false ) }\n\t\t\t\t>\n\t\t\t\t\t{ confirmPrompt }\n\t\t\t\t</ConfirmDialog>\n\t\t\t) }\n\t\t</li>\n\t);\n}\n\nexport default memo( GridItem );\n"]}

package/build/components/{page-library → page-patterns}/grid.js

@@ -9,41 +9,28 @@ exports.default = Grid;
 
 var _element = require("@wordpress/element");
 
-var _components = require("@wordpress/components");
-
 var _gridItem = _interopRequireDefault(require("./grid-item"));
 
-/**
- * WordPress dependencies
- */
-
 /**
  * Internal dependencies
  */
 function Grid({
   categoryId,
-  label,
-  icon,
-  items
+  items,
+  ...props
 }) {
-  const composite = (0, _components.__unstableUseCompositeState)({
-    orientation: 'vertical'
-  });
-
   if (!items?.length) {
     return null;
   }
 
-  return (0, _element.createElement)(_components.__unstableComposite, { ...composite,
+  return (0, _element.createElement)("ul", {
     role: "listbox",
-    className: "edit-site-library__grid",
-    "aria-label": label
+    className: "edit-site-patterns__grid",
+    ...props
   }, items.map(item => (0, _element.createElement)(_gridItem.default, {
     key: item.name,
-    icon: icon,
     item: item,
-    categoryId: categoryId,
-    composite: composite
+    categoryId: categoryId
   })));
 }
 //# sourceMappingURL=grid.js.map

package/build/components/page-patterns/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/page-patterns/grid.js"],"names":["Grid","categoryId","items","props","length","map","item","name"],"mappings":";;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGe,SAASA,IAAT,CAAe;AAAEC,EAAAA,UAAF;AAAcC,EAAAA,KAAd;AAAqB,KAAGC;AAAxB,CAAf,EAAiD;AAC/D,MAAK,CAAED,KAAK,EAAEE,MAAd,EAAuB;AACtB,WAAO,IAAP;AACA;;AAED,SACC;AAAI,IAAA,IAAI,EAAC,SAAT;AAAmB,IAAA,SAAS,EAAC,0BAA7B;AAAA,OAA6DD;AAA7D,KACGD,KAAK,CAACG,GAAN,CAAaC,IAAF,IACZ,4BAAC,iBAAD;AACC,IAAA,GAAG,EAAGA,IAAI,CAACC,IADZ;AAEC,IAAA,IAAI,EAAGD,IAFR;AAGC,IAAA,UAAU,EAAGL;AAHd,IADC,CADH,CADD;AAWA","sourcesContent":["/**\n * Internal dependencies\n */\nimport GridItem from './grid-item';\n\nexport default function Grid( { categoryId, items, ...props } ) {\n\tif ( ! items?.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ul role=\"listbox\" className=\"edit-site-patterns__grid\" { ...props }>\n\t\t\t{ items.map( ( item ) => (\n\t\t\t\t<GridItem\n\t\t\t\t\tkey={ item.name }\n\t\t\t\t\titem={ item }\n\t\t\t\t\tcategoryId={ categoryId }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n"]}

package/build/components/page-patterns/header.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PatternsHeader;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _editor = require("@wordpress/editor");
+
+var _data = require("@wordpress/data");
+
+var _usePatternCategories = _interopRequireDefault(require("../sidebar-navigation-screen-patterns/use-pattern-categories"));
+
+var _utils = require("./utils");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function PatternsHeader({
+  categoryId,
+  type,
+  titleId,
+  descriptionId
+}) {
+  const {
+    patternCategories
+  } = (0, _usePatternCategories.default)();
+  const templatePartAreas = (0, _data.useSelect)(select => select(_editor.store).__experimentalGetDefaultTemplatePartAreas(), []);
+  let title, description;
+
+  if (categoryId === _utils.USER_PATTERN_CATEGORY && type === _utils.USER_PATTERNS) {
+    title = (0, _i18n.__)('My Patterns');
+    description = '';
+  } else if (type === _utils.TEMPLATE_PARTS) {
+    const templatePartArea = templatePartAreas.find(area => area.area === categoryId);
+    title = templatePartArea?.label;
+    description = templatePartArea?.description;
+  } else if (type === _utils.PATTERNS) {
+    const patternCategory = patternCategories.find(category => category.name === categoryId);
+    title = patternCategory?.label;
+    description = patternCategory?.description;
+  }
+
+  if (!title) return null;
+  return (0, _element.createElement)(_components.__experimentalVStack, {
+    className: "edit-site-patterns__section-header"
+  }, (0, _element.createElement)(_components.__experimentalHeading, {
+    as: "h2",
+    level: 4,
+    id: titleId
+  }, title), description ? (0, _element.createElement)(_components.__experimentalText, {
+    variant: "muted",
+    as: "p",
+    id: descriptionId
+  }, description) : null);
+}
+//# sourceMappingURL=header.js.map

package/build/components/page-patterns/header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/page-patterns/header.js"],"names":["PatternsHeader","categoryId","type","titleId","descriptionId","patternCategories","templatePartAreas","select","editorStore","__experimentalGetDefaultTemplatePartAreas","title","description","USER_PATTERN_CATEGORY","USER_PATTERNS","TEMPLATE_PARTS","templatePartArea","find","area","label","PATTERNS","patternCategory","category","name"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AAhBA;AACA;AACA;;AAUA;AACA;AACA;AASe,SAASA,cAAT,CAAyB;AACvCC,EAAAA,UADuC;AAEvCC,EAAAA,IAFuC;AAGvCC,EAAAA,OAHuC;AAIvCC,EAAAA;AAJuC,CAAzB,EAKX;AACH,QAAM;AAAEC,IAAAA;AAAF,MAAwB,oCAA9B;AACA,QAAMC,iBAAiB,GAAG,qBACvBC,MAAF,IACCA,MAAM,CAAEC,aAAF,CAAN,CAAsBC,yCAAtB,EAFwB,EAGzB,EAHyB,CAA1B;AAMA,MAAIC,KAAJ,EAAWC,WAAX;;AACA,MAAKV,UAAU,KAAKW,4BAAf,IAAwCV,IAAI,KAAKW,oBAAtD,EAAsE;AACrEH,IAAAA,KAAK,GAAG,cAAI,aAAJ,CAAR;AACAC,IAAAA,WAAW,GAAG,EAAd;AACA,GAHD,MAGO,IAAKT,IAAI,KAAKY,qBAAd,EAA+B;AACrC,UAAMC,gBAAgB,GAAGT,iBAAiB,CAACU,IAAlB,CACtBC,IAAF,IAAYA,IAAI,CAACA,IAAL,KAAchB,UADF,CAAzB;AAGAS,IAAAA,KAAK,GAAGK,gBAAgB,EAAEG,KAA1B;AACAP,IAAAA,WAAW,GAAGI,gBAAgB,EAAEJ,WAAhC;AACA,GANM,MAMA,IAAKT,IAAI,KAAKiB,eAAd,EAAyB;AAC/B,UAAMC,eAAe,GAAGf,iBAAiB,CAACW,IAAlB,CACrBK,QAAF,IAAgBA,QAAQ,CAACC,IAAT,KAAkBrB,UADX,CAAxB;AAGAS,IAAAA,KAAK,GAAGU,eAAe,EAAEF,KAAzB;AACAP,IAAAA,WAAW,GAAGS,eAAe,EAAET,WAA/B;AACA;;AAED,MAAK,CAAED,KAAP,EAAe,OAAO,IAAP;AAEf,SACC,4BAAC,gCAAD;AAAQ,IAAA,SAAS,EAAC;AAAlB,KACC,4BAAC,iCAAD;AAAS,IAAA,EAAE,EAAC,IAAZ;AAAiB,IAAA,KAAK,EAAG,CAAzB;AAA6B,IAAA,EAAE,EAAGP;AAAlC,KACGO,KADH,CADD,EAIGC,WAAW,GACZ,4BAAC,8BAAD;AAAM,IAAA,OAAO,EAAC,OAAd;AAAsB,IAAA,EAAE,EAAC,GAAzB;AAA6B,IAAA,EAAE,EAAGP;AAAlC,KACGO,WADH,CADY,GAIT,IARL,CADD;AAYA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { store as editorStore } from '@wordpress/editor';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';\nimport {\n\tUSER_PATTERN_CATEGORY,\n\tUSER_PATTERNS,\n\tTEMPLATE_PARTS,\n\tPATTERNS,\n} from './utils';\n\nexport default function PatternsHeader( {\n\tcategoryId,\n\ttype,\n\ttitleId,\n\tdescriptionId,\n} ) {\n\tconst { patternCategories } = usePatternCategories();\n\tconst templatePartAreas = useSelect(\n\t\t( select ) =>\n\t\t\tselect( editorStore ).__experimentalGetDefaultTemplatePartAreas(),\n\t\t[]\n\t);\n\n\tlet title, description;\n\tif ( categoryId === USER_PATTERN_CATEGORY && type === USER_PATTERNS ) {\n\t\ttitle = __( 'My Patterns' );\n\t\tdescription = '';\n\t} else if ( type === TEMPLATE_PARTS ) {\n\t\tconst templatePartArea = templatePartAreas.find(\n\t\t\t( area ) => area.area === categoryId\n\t\t);\n\t\ttitle = templatePartArea?.label;\n\t\tdescription = templatePartArea?.description;\n\t} else if ( type === PATTERNS ) {\n\t\tconst patternCategory = patternCategories.find(\n\t\t\t( category ) => category.name === categoryId\n\t\t);\n\t\ttitle = patternCategory?.label;\n\t\tdescription = patternCategory?.description;\n\t}\n\n\tif ( ! title ) return null;\n\n\treturn (\n\t\t<VStack className=\"edit-site-patterns__section-header\">\n\t\t\t<Heading as=\"h2\" level={ 4 } id={ titleId }>\n\t\t\t\t{ title }\n\t\t\t</Heading>\n\t\t\t{ description ? (\n\t\t\t\t<Text variant=\"muted\" as=\"p\" id={ descriptionId }>\n\t\t\t\t\t{ description }\n\t\t\t\t</Text>\n\t\t\t) : null }\n\t\t</VStack>\n\t);\n}\n"]}

package/build/components/{page-library → page-patterns}/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = PageLibrary;
+exports.default = PagePatterns;
 
 var _element = require("@wordpress/element");
 
@@ -21,7 +21,7 @@ var _page = _interopRequireDefault(require("../page"));
 
 var _patternsList = _interopRequireDefault(require("./patterns-list"));
 
-var _useLibrarySettings = _interopRequireDefault(require("./use-library-settings"));
+var _usePatternSettings = _interopRequireDefault(require("./use-pattern-settings"));
 
 var _lockUnlock = require("../../lock-unlock");
 
@@ -36,24 +36,26 @@ const {
   ExperimentalBlockEditorProvider
 } = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
 
-function PageLibrary() {
+function PagePatterns() {
   const {
     categoryType,
     categoryId
   } = (0, _url.getQueryArgs)(window.location.href);
   const type = categoryType || _utils.DEFAULT_TYPE;
   const category = categoryId || _utils.DEFAULT_CATEGORY;
-  const settings = (0, _useLibrarySettings.default)(); // Wrap everything in a block editor provider.
+  const settings = (0, _usePatternSettings.default)(); // 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 (0, _element.createElement)(ExperimentalBlockEditorProvider, {
     settings: settings
   }, (0, _element.createElement)(_page.default, {
-    className: "edit-site-library",
-    title: (0, _i18n.__)('Library content'),
+    className: "edit-site-patterns",
+    title: (0, _i18n.__)('Patterns content'),
     hideTitleFromUI: true
-  }, (0, _element.createElement)(_patternsList.default, {
+  }, (0, _element.createElement)(_patternsList.default // Reset the states when switching between categories and types.
+  , {
+    key: `${type}-${category}`,
     type: type,
     categoryId: category
   })));

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/page-patterns/index.js"],"names":["ExperimentalBlockEditorProvider","blockEditorPrivateApis","PagePatterns","categoryType","categoryId","window","location","href","type","DEFAULT_TYPE","category","DEFAULT_CATEGORY","settings"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAdA;AACA;AACA;;AAKA;AACA;AACA;AAOA,MAAM;AAAEA,EAAAA;AAAF,IAAsC,wBAAQC,wBAAR,CAA5C;;AAEe,SAASC,YAAT,GAAwB;AACtC,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAA+B,uBAAcC,MAAM,CAACC,QAAP,CAAgBC,IAA9B,CAArC;AACA,QAAMC,IAAI,GAAGL,YAAY,IAAIM,mBAA7B;AACA,QAAMC,QAAQ,GAAGN,UAAU,IAAIO,uBAA/B;AACA,QAAMC,QAAQ,GAAG,kCAAjB,CAJsC,CAMtC;AACA;AACA;;AACA,SACC,4BAAC,+BAAD;AAAiC,IAAA,QAAQ,EAAGA;AAA5C,KACC,4BAAC,aAAD;AACC,IAAA,SAAS,EAAC,oBADX;AAEC,IAAA,KAAK,EAAG,cAAI,kBAAJ,CAFT;AAGC,IAAA,eAAe;AAHhB,KAKC,4BAAC,qBAAD,CACC;AADD;AAEC,IAAA,GAAG,EAAI,GAAGJ,IAAM,IAAIE,QAAU,EAF/B;AAGC,IAAA,IAAI,EAAGF,IAHR;AAIC,IAAA,UAAU,EAAGE;AAJd,IALD,CADD,CADD;AAgBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { getQueryArgs } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport { DEFAULT_CATEGORY, DEFAULT_TYPE } from './utils';\nimport Page from '../page';\nimport PatternsList from './patterns-list';\nimport usePatternSettings from './use-pattern-settings';\nimport { unlock } from '../../lock-unlock';\n\nconst { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );\n\nexport default function PagePatterns() {\n\tconst { categoryType, categoryId } = getQueryArgs( window.location.href );\n\tconst type = categoryType || DEFAULT_TYPE;\n\tconst category = categoryId || DEFAULT_CATEGORY;\n\tconst settings = usePatternSettings();\n\n\t// Wrap everything in a block editor provider.\n\t// This ensures 'styles' that are needed for the previews are synced\n\t// from the site editor store to the block editor store.\n\treturn (\n\t\t<ExperimentalBlockEditorProvider settings={ settings }>\n\t\t\t<Page\n\t\t\t\tclassName=\"edit-site-patterns\"\n\t\t\t\ttitle={ __( 'Patterns content' ) }\n\t\t\t\thideTitleFromUI\n\t\t\t>\n\t\t\t\t<PatternsList\n\t\t\t\t\t// Reset the states when switching between categories and types.\n\t\t\t\t\tkey={ `${ type }-${ category }` }\n\t\t\t\t\ttype={ type }\n\t\t\t\t\tcategoryId={ category }\n\t\t\t\t/>\n\t\t\t</Page>\n\t\t</ExperimentalBlockEditorProvider>\n\t);\n}\n"]}

package/build/components/{page-library → page-patterns}/no-patterns.js

@@ -14,7 +14,7 @@ var _i18n = require("@wordpress/i18n");
  */
 function NoPatterns() {
   return (0, _element.createElement)("div", {
-    className: "edit-site-library__no-results"
+    className: "edit-site-patterns__no-results"
   }, (0, _i18n.__)('No patterns found.'));
 }
 //# sourceMappingURL=no-patterns.js.map

package/build/components/page-patterns/no-patterns.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/page-patterns/no-patterns.js"],"names":["NoPatterns"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGe,SAASA,UAAT,GAAsB;AACpC,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,cAAI,oBAAJ,CADH,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nexport default function NoPatterns() {\n\treturn (\n\t\t<div className=\"edit-site-patterns__no-results\">\n\t\t\t{ __( 'No patterns found.' ) }\n\t\t</div>\n\t);\n}\n"]}

package/build/components/page-patterns/pagination.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Pagination;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+/**
+ * WordPress dependencies
+ */
+function Pagination({
+  currentPage,
+  numPages,
+  changePage,
+  totalItems
+}) {
+  return (0, _element.createElement)(_components.__experimentalHStack, {
+    expanded: false,
+    spacing: 3,
+    justify: "flex-start",
+    className: "edit-site-patterns__grid-pagination"
+  }, (0, _element.createElement)(_components.__experimentalText, {
+    variant: "muted"
+  }, // translators: %s: Total number of patterns.
+  (0, _i18n.sprintf)( // translators: %s: Total number of patterns.
+  (0, _i18n._n)('%s item', '%s items', totalItems), totalItems)), (0, _element.createElement)(_components.__experimentalHStack, {
+    expanded: false,
+    spacing: 1
+  }, (0, _element.createElement)(_components.Button, {
+    variant: "tertiary",
+    onClick: () => changePage(1),
+    disabled: currentPage === 1,
+    "aria-label": (0, _i18n.__)('First page')
+  }, "\xAB"), (0, _element.createElement)(_components.Button, {
+    variant: "tertiary",
+    onClick: () => changePage(currentPage - 1),
+    disabled: currentPage === 1,
+    "aria-label": (0, _i18n.__)('Previous page')
+  }, "\u2039")), (0, _element.createElement)(_components.__experimentalText, {
+    variant: "muted"
+  }, (0, _i18n.sprintf)( // translators: %1$s: Current page number, %2$s: Total number of pages.
+  (0, _i18n._x)('%1$s of %2$s', 'paging'), currentPage, numPages)), (0, _element.createElement)(_components.__experimentalHStack, {
+    expanded: false,
+    spacing: 1
+  }, (0, _element.createElement)(_components.Button, {
+    variant: "tertiary",
+    onClick: () => changePage(currentPage + 1),
+    disabled: currentPage === numPages,
+    "aria-label": (0, _i18n.__)('Next page')
+  }, "\u203A"), (0, _element.createElement)(_components.Button, {
+    variant: "tertiary",
+    onClick: () => changePage(numPages),
+    disabled: currentPage === numPages,
+    "aria-label": (0, _i18n.__)('Last page')
+  }, "\xBB")));
+}
+//# sourceMappingURL=pagination.js.map

package/build/components/page-patterns/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/page-patterns/pagination.js"],"names":["Pagination","currentPage","numPages","changePage","totalItems"],"mappings":";;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;AAQe,SAASA,UAAT,CAAqB;AACnCC,EAAAA,WADmC;AAEnCC,EAAAA,QAFmC;AAGnCC,EAAAA,UAHmC;AAInCC,EAAAA;AAJmC,CAArB,EAKX;AACH,SACC,4BAAC,gCAAD;AACC,IAAA,QAAQ,EAAG,KADZ;AAEC,IAAA,OAAO,EAAG,CAFX;AAGC,IAAA,OAAO,EAAC,YAHT;AAIC,IAAA,SAAS,EAAC;AAJX,KAMC,4BAAC,8BAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAEE;AACA,sBACC;AACA,gBAAI,SAAJ,EAAe,UAAf,EAA2BA,UAA3B,CAFD,EAGCA,UAHD,CAHF,CAND,EAgBC,4BAAC,gCAAD;AAAQ,IAAA,QAAQ,EAAG,KAAnB;AAA2B,IAAA,OAAO,EAAG;AAArC,KACC,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,UADT;AAEC,IAAA,OAAO,EAAG,MAAMD,UAAU,CAAE,CAAF,CAF3B;AAGC,IAAA,QAAQ,EAAGF,WAAW,KAAK,CAH5B;AAIC,kBAAa,cAAI,YAAJ;AAJd,YADD,EASC,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,UADT;AAEC,IAAA,OAAO,EAAG,MAAME,UAAU,CAAEF,WAAW,GAAG,CAAhB,CAF3B;AAGC,IAAA,QAAQ,EAAGA,WAAW,KAAK,CAH5B;AAIC,kBAAa,cAAI,eAAJ;AAJd,cATD,CAhBD,EAkCC,4BAAC,8BAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KACG,oBACD;AACA,gBAAI,cAAJ,EAAoB,QAApB,CAFC,EAGDA,WAHC,EAIDC,QAJC,CADH,CAlCD,EA0CC,4BAAC,gCAAD;AAAQ,IAAA,QAAQ,EAAG,KAAnB;AAA2B,IAAA,OAAO,EAAG;AAArC,KACC,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,UADT;AAEC,IAAA,OAAO,EAAG,MAAMC,UAAU,CAAEF,WAAW,GAAG,CAAhB,CAF3B;AAGC,IAAA,QAAQ,EAAGA,WAAW,KAAKC,QAH5B;AAIC,kBAAa,cAAI,WAAJ;AAJd,cADD,EASC,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,UADT;AAEC,IAAA,OAAO,EAAG,MAAMC,UAAU,CAAED,QAAF,CAF3B;AAGC,IAAA,QAAQ,EAAGD,WAAW,KAAKC,QAH5B;AAIC,kBAAa,cAAI,WAAJ;AAJd,YATD,CA1CD,CADD;AA+DA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\tButton,\n} from '@wordpress/components';\nimport { __, _x, _n, sprintf } from '@wordpress/i18n';\n\nexport default function Pagination( {\n\tcurrentPage,\n\tnumPages,\n\tchangePage,\n\ttotalItems,\n} ) {\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tspacing={ 3 }\n\t\t\tjustify=\"flex-start\"\n\t\t\tclassName=\"edit-site-patterns__grid-pagination\"\n\t\t>\n\t\t\t<Text variant=\"muted\">\n\t\t\t\t{\n\t\t\t\t\t// translators: %s: Total number of patterns.\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t// translators: %s: Total number of patterns.\n\t\t\t\t\t\t_n( '%s item', '%s items', totalItems ),\n\t\t\t\t\t\ttotalItems\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t</Text>\n\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ () => changePage( 1 ) }\n\t\t\t\t\tdisabled={ currentPage === 1 }\n\t\t\t\t\taria-label={ __( 'First page' ) }\n\t\t\t\t>\n\t\t\t\t\t«\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ () => changePage( currentPage - 1 ) }\n\t\t\t\t\tdisabled={ currentPage === 1 }\n\t\t\t\t\taria-label={ __( 'Previous page' ) }\n\t\t\t\t>\n\t\t\t\t\t‹\n\t\t\t\t</Button>\n\t\t\t</HStack>\n\t\t\t<Text variant=\"muted\">\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: %1$s: Current page number, %2$s: Total number of pages.\n\t\t\t\t\t_x( '%1$s of %2$s', 'paging' ),\n\t\t\t\t\tcurrentPage,\n\t\t\t\t\tnumPages\n\t\t\t\t) }\n\t\t\t</Text>\n\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ () => changePage( currentPage + 1 ) }\n\t\t\t\t\tdisabled={ currentPage === numPages }\n\t\t\t\t\taria-label={ __( 'Next page' ) }\n\t\t\t\t>\n\t\t\t\t\t›\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ () => changePage( numPages ) }\n\t\t\t\t\tdisabled={ currentPage === numPages }\n\t\t\t\t\taria-label={ __( 'Last page' ) }\n\t\t\t\t>\n\t\t\t\t\t»\n\t\t\t\t</Button>\n\t\t\t</HStack>\n\t\t</HStack>\n\t);\n}\n"]}