first commit

wp-content/plugins/canvas/layouts/admin-list/utils/export.js

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+const {
+	kebabCase,
+} = window.lodash;
+
+/**
+ * WordPress dependencies
+ */
+const {
+	apiFetch,
+} = wp;
+
+/**
+ * Internal dependencies
+ */
+import { download } from './file';
+
+/**
+ * Export a layout block as a JSON file.
+ *
+ * @param {number} id
+ */
+async function exportLayoutBlock( id ) {
+	const postType = await apiFetch( { path: `/wp/v2/types/canvas_layout` } );
+	const post = await apiFetch( { path: `/wp/v2/${ postType.rest_base }/${ id }?context=edit` } );
+	const title = post.title.raw;
+	const content = post.content.raw;
+	const fileContent = JSON.stringify( {
+		__file: 'canvas_layout',
+		title,
+		content,
+	}, null, 2 );
+	const fileName = kebabCase( title ) + '.json';
+
+	download( fileName, fileContent, 'application/json' );
+}
+
+export default exportLayoutBlock;

wp-content/plugins/canvas/layouts/admin-list/utils/file.js

@@ -0,0 +1,41 @@
+/**
+ * Downloads a file.
+ *
+ * @param {string} fileName    File Name.
+ * @param {string} content     File Content.
+ * @param {string} contentType File mime type.
+ */
+export function download( fileName, content, contentType ) {
+	const file = new window.Blob( [ content ], { type: contentType } );
+
+	// IE11 can't use the click to download technique
+	// we use a specific IE11 technique instead.
+	if ( window.navigator.msSaveOrOpenBlob ) {
+		window.navigator.msSaveOrOpenBlob( file, fileName );
+	} else {
+		const a = document.createElement( 'a' );
+		a.href = URL.createObjectURL( file );
+		a.download = fileName;
+
+		a.style.display = 'none';
+		document.body.appendChild( a );
+		a.click();
+		document.body.removeChild( a );
+	}
+}
+
+/**
+ * Reads the textual content of the given file.
+ *
+ * @param  {File} file        File.
+ * @return {Promise<string>}  Content of the file.
+ */
+export function readTextFile( file ) {
+	const reader = new window.FileReader();
+	return new Promise( ( resolve ) => {
+		reader.onload = function() {
+			resolve( reader.result );
+		};
+		reader.readAsText( file );
+	} );
+}

wp-content/plugins/canvas/layouts/admin-list/utils/import.js

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+const {
+	isString,
+} = window.lodash;
+
+/**
+ * WordPress dependencies
+ */
+const {
+	apiFetch,
+} = wp;
+
+/**
+ * Internal dependencies
+ */
+import { readTextFile } from './file';
+
+/**
+ * Import a layout block from a JSON file.
+ *
+ * @param {File}     file File.
+ * @return {Promise} Promise returning the imported layout block.
+ */
+async function importLayoutBlock( file ) {
+	const fileContent = await readTextFile( file );
+	let parsedContent;
+	try {
+		parsedContent = JSON.parse( fileContent );
+	} catch ( e ) {
+		throw new Error( 'Invalid JSON file' );
+	}
+	if (
+		parsedContent.__file !== 'canvas_layout' ||
+		! parsedContent.title ||
+		! parsedContent.content ||
+		! isString( parsedContent.title ) ||
+		! isString( parsedContent.content )
+	) {
+		throw new Error( 'Invalid Canvas Layout JSON file' );
+	}
+	const postType = await apiFetch( { path: `/wp/v2/types/canvas_layout` } );
+	const layoutBlock = await apiFetch( {
+		path: `/wp/v2/${ postType.rest_base }`,
+		data: {
+			title: parsedContent.title,
+			content: parsedContent.content,
+			status: 'publish',
+		},
+		method: 'POST',
+	} );
+
+	return layoutBlock;
+}
+
+export default importLayoutBlock;