Add transforms to and from core Image block

src/index.js

@@ -15,11 +15,13 @@ import edit from './edit';
 import save from './save';
 import { PRESETS, DEFAULT_PRESET, isValidPresetSlug } from './presets';
 import { FilterPanel } from './inspector';
+import { transforms } from './transforms';
 
 registerBlockType( metadata.name, {
     ...metadata,
     edit,
     save,
+    transforms,
 } );
 
 /**

src/transforms.js

@@ -0,0 +1,84 @@
+/**
+ * Block transforms for the Filtered Image block.
+ *
+ * - "To" core Image: copies image attributes, drops filter and intensity.
+ * - "From" core Image: copies image attributes, sets filter="normal",
+ *   intensity=100.
+ *
+ * @package ImageFilters
+ */
+
+import { DEFAULT_PRESET } from './presets';
+
+const IMAGE_ATTR_MAP = {
+    id: 'imageId',
+    url: 'imageUrl',
+    alt: 'imageAlt',
+    caption: 'caption',
+    width: 'width',
+    height: 'height',
+    href: 'linkUrl',
+};
+
+/**
+ * Maps a core/image-shaped attribute object to a Filtered Image
+ * attribute object.
+ *
+ * @param {Object} source
+ * @return {Object}
+ */
+function fromImageAttrs( source ) {
+    const out = {
+        filter: DEFAULT_PRESET,
+        intensity: 100,
+        imageId: 0,
+        imageUrl: '',
+        imageAlt: '',
+        width: undefined,
+        height: undefined,
+        linkUrl: '',
+        caption: '',
+    };
+    for ( const [ coreKey, ourKey ] of Object.entries( IMAGE_ATTR_MAP ) ) {
+        if ( source[ coreKey ] !== undefined ) {
+            out[ ourKey ] = source[ coreKey ];
+        }
+    }
+    return out;
+}
+
+/**
+ * Maps a Filtered Image attribute object back to a core/image-shaped
+ * attribute object.
+ *
+ * @param {Object} source
+ * @return {Object}
+ */
+function toImageAttrs( source ) {
+    const out = {};
+    for ( const [ coreKey, ourKey ] of Object.entries( IMAGE_ATTR_MAP ) ) {
+        if ( source[ ourKey ] !== undefined ) {
+            out[ coreKey ] = source[ ourKey ];
+        }
+    }
+    return out;
+}
+
+export const transforms = {
+    to: [
+        {
+            type: 'block',
+            blocks: [ 'core/image' ],
+            transform: ( attributes ) => toImageAttrs( attributes ),
+        },
+    ],
+    from: [
+        {
+            type: 'block',
+            blocks: [ 'core/image' ],
+            transform: ( attributes ) => fromImageAttrs( attributes ),
+        },
+    ],
+};
+
+export default transforms;