Add: Bulk export patterns action. (WordPress#58897)

Co-authored-by: jorgefilipecosta <[email protected]> Co-authored-by: oandregal <[email protected]> Co-authored-by: ntsekouras <[email protected]>
faisal-alvi · Feb 16, 2024 · 237865f · 237865f
1 parent 77bdd55
commit 237865f
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
@@ -69,6 +69,7 @@
 		"@wordpress/wordcount": "file:../wordcount",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
+		"client-zip": "^2.4.4",
 		"colord": "^2.9.2",
 		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",

diff --git a/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js b/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { paramCase as kebabCase } from 'change-case';
+import { downloadZip } from 'client-zip';
 
 /**
  * WordPress dependencies
@@ -41,21 +42,51 @@ const { useHistory } = unlock( routerPrivateApis );
 const { CreatePatternModalContents, useDuplicatePatternProps } =
 	unlock( patternsPrivateApis );
 
-export const exportJSONaction = {
-	id: 'export-pattern',
-	label: __( 'Export as JSON' ),
-	isEligible: ( item ) => item.type === PATTERN_TYPES.user,
-	callback: ( [ item ] ) => {
-		const json = {
+function getJsonFromItem( item ) {
+	return JSON.stringify(
+		{
 			__file: item.type,
 			title: item.title || item.name,
 			content: item.patternPost.content.raw,
 			syncStatus: item.patternPost.wp_pattern_sync_status,
-		};
+		},
+		null,
+		2
+	);
+}
+
+export const exportJSONaction = {
+	id: 'export-pattern',
+	label: __( 'Export as JSON' ),
+	supportsBulk: true,
+	isEligible: ( item ) => item.type === PATTERN_TYPES.user,
+	callback: async ( items ) => {
+		if ( items.length === 1 ) {
+			return downloadBlob(
+				`${ kebabCase( items[ 0 ].title || items[ 0 ].name ) }.json`,
+				getJsonFromItem( items[ 0 ] ),
+				'application/json'
+			);
+		}
+		const nameCount = {};
+		const filesToZip = items.map( ( item ) => {
+			const name = kebabCase( item.title || item.name );
+			nameCount[ name ] = ( nameCount[ name ] || 0 ) + 1;
+			return {
+				name: `${
+					name +
+					( nameCount[ name ] > 1
+						? '-' + ( nameCount[ name ] - 1 )
+						: '' )
+				}.json`,
+				lastModified: new Date(),
+				input: getJsonFromItem( item ),
+			};
+		} );
 		return downloadBlob(
-			`${ kebabCase( item.title || item.name ) }.json`,
-			JSON.stringify( json, null, 2 ),
-			'application/json'
+			__( 'patterns-export' ) + '.zip',
+			await downloadZip( filesToZip ).blob(),
+			'application/zip'
 		);
 	},
 };