From e37add68125e9e28f31af73a63e6b9f93e6384dd Mon Sep 17 00:00:00 2001
From: iseulde <ella@iseulde.com>
Date: Wed, 4 Oct 2017 16:30:29 +0200
Subject: [PATCH 1/3] Paste caption shortcode

---
 blocks/api/raw-handling/index.js              | 131 ++++++++++--------
 .../api/raw-handling/shortcode-converter.js   |  73 ++++++++++
 blocks/library/image/index.js                 |  35 ++++-
 lib/client-assets.php                         |   2 +-
 test/unit/setup-wp-aliases.js                 |   7 +-
 5 files changed, 191 insertions(+), 57 deletions(-)
 create mode 100644 blocks/api/raw-handling/shortcode-converter.js

diff --git a/blocks/api/raw-handling/index.js b/blocks/api/raw-handling/index.js
index d4d42e3790095..1c28130ff05d1 100644
--- a/blocks/api/raw-handling/index.js
+++ b/blocks/api/raw-handling/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { find, get } from 'lodash';
+import showdown from 'showdown';
 
 /**
  * Internal dependencies
@@ -22,7 +23,7 @@ import blockquoteNormaliser from './blockquote-normaliser';
 import tableNormaliser from './table-normaliser';
 import inlineContentConverter from './inline-content-converter';
 import { deepFilterHTML, isInvalidInline, isNotWhitelisted, isPlain, isInline } from './utils';
-import showdown from 'showdown';
+import shortcodeConverter from './shortcode-converter';
 
 /**
  * Converts an HTML string to known blocks. Strips everything else.
@@ -33,13 +34,17 @@ import showdown from 'showdown';
  * @return {Array|String}                     A list of blocks or a string, depending on the `inline` option.
  */
 export default function rawHandler( { HTML, plainText = '', inline = null } ) {
+	// First of all, strip any meta tags.
 	HTML = HTML.replace( /<meta[^>]+>/, '' );
 
-	// Block delimiters detected.
+	// If we detect block delimiters, parse entirely as blocks.
 	if ( ! inline && HTML.indexOf( '<!-- wp:' ) !== -1 ) {
 		return parseWithGrammar( HTML );
 	}
 
+	// If there is a plain text version, the HTML version has no formatting,
+	// and there is at least a double line break,
+	// parse any Markdown inside the plain text.
 	if ( plainText && isPlain( HTML ) && plainText.indexOf( '\n\n' ) !== -1 ) {
 		const converter = new showdown.Converter();
 
@@ -47,75 +52,93 @@ export default function rawHandler( { HTML, plainText = '', inline = null } ) {
 		converter.setOption( 'tables', true );
 
 		HTML = converter.makeHtml( plainText );
-	} else {
-		// Context dependent filters. Needs to run before we remove nodes.
-		HTML = deepFilterHTML( HTML, [
-			msListConverter,
-		] );
 	}
 
-	HTML = deepFilterHTML( HTML, [
-		listMerger,
-		imageCorrector,
-		// Add semantic formatting before attributes are stripped.
-		formattingTransformer,
-		stripAttributes,
-		commentRemover,
-		createUnwrapper( ( node ) => isNotWhitelisted( node ) || ( inline && ! isInline( node ) ) ),
-		blockquoteNormaliser,
-		tableNormaliser,
-		inlineContentConverter,
-	] );
-
-	// Inline paste.
+	// Return filtered HTML if it's inline paste or all content is inline.
 	if ( inline || ( inline === null && isInlineContent( HTML ) ) ) {
+		HTML = deepFilterHTML( HTML, [
+			// Add semantic formatting before attributes are stripped.
+			formattingTransformer,
+			stripAttributes,
+			commentRemover,
+			createUnwrapper( ( node ) => ! isInline( node ) ),
+		] );
+
 		// Allows us to ask for this information when we get a report.
 		window.console.log( 'Processed inline HTML:\n\n', HTML );
 
 		return HTML;
 	}
 
-	HTML = deepFilterHTML( HTML, [
-		createUnwrapper( isInvalidInline ),
-	] );
+	// Before we parse any HTML, extract shorcodes so they don't get messed up.
+	return shortcodeConverter( HTML ).reduce( ( accu, piece ) => {
+		// Already a block from shortcode.
+		if ( typeof piece !== 'string' ) {
+			return [ ...accu, piece ];
+		}
 
-	HTML = normaliseBlocks( HTML );
+		// Context dependent filters. Needs to run before we remove nodes.
+		piece = deepFilterHTML( piece, [
+			msListConverter,
+		] );
 
-	// Allows us to ask for this information when we get a report.
-	window.console.log( 'Processed HTML piece:\n\n', HTML );
+		piece = deepFilterHTML( piece, [
+			listMerger,
+			imageCorrector,
+			// Add semantic formatting before attributes are stripped.
+			formattingTransformer,
+			stripAttributes,
+			commentRemover,
+			createUnwrapper( isNotWhitelisted ),
+			blockquoteNormaliser,
+			tableNormaliser,
+			inlineContentConverter,
+		] );
 
-	const doc = document.implementation.createHTMLDocument( '' );
+		piece = deepFilterHTML( piece, [
+			createUnwrapper( isInvalidInline ),
+		] );
 
-	doc.body.innerHTML = HTML;
+		piece = normaliseBlocks( piece );
 
-	return Array.from( doc.body.children ).map( ( node ) => {
-		const block = getBlockTypes().reduce( ( acc, blockType ) => {
-			if ( acc ) {
-				return acc;
-			}
+		// Allows us to ask for this information when we get a report.
+		window.console.log( 'Processed HTML piece:\n\n', piece );
 
-			const transformsFrom = get( blockType, 'transforms.from', [] );
-			const transform = find( transformsFrom, ( { type } ) => type === 'raw' );
+		const doc = document.implementation.createHTMLDocument( '' );
 
-			if ( ! transform || ! transform.isMatch( node ) ) {
-				return acc;
-			}
+		doc.body.innerHTML = piece;
 
-			return createBlock(
-				blockType.name,
-				getBlockAttributes(
-					blockType,
-					node.outerHTML
-				)
-			);
-		}, null );
-
-		if ( block ) {
-			return block;
-		}
+		const blocks = Array.from( doc.body.children ).map( ( node ) => {
+			const block = getBlockTypes().reduce( ( acc, blockType ) => {
+				if ( acc ) {
+					return acc;
+				}
 
-		return createBlock( getUnknownTypeHandlerName(), {
-			content: node.outerHTML,
+				const transformsFrom = get( blockType, 'transforms.from', [] );
+				const transform = find( transformsFrom, ( { type } ) => type === 'raw' );
+
+				if ( ! transform || ! transform.isMatch( node ) ) {
+					return acc;
+				}
+
+				return createBlock(
+					blockType.name,
+					getBlockAttributes(
+						blockType,
+						node.outerHTML
+					)
+				);
+			}, null );
+
+			if ( block ) {
+				return block;
+			}
+
+			return createBlock( getUnknownTypeHandlerName(), {
+				content: node.outerHTML,
+			} );
 		} );
-	} );
+
+		return [ ...accu, ...blocks ];
+	}, [] );
 }
diff --git a/blocks/api/raw-handling/shortcode-converter.js b/blocks/api/raw-handling/shortcode-converter.js
new file mode 100644
index 0000000000000..31e1517de252a
--- /dev/null
+++ b/blocks/api/raw-handling/shortcode-converter.js
@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import { find, get, dropRight, last } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { createBlock } from '../factory';
+import { getBlockTypes } from '../registration';
+import { getBlockAttributes } from '../parser';
+
+/**
+ * Browser dependencies
+ */
+const { shortcode } = window.wp;
+
+export default function( HTML ) {
+	// Get all matches. These are *not* ordered.
+	const matches = getBlockTypes().reduce( ( acc, blockType ) => {
+		const transformsFrom = get( blockType, 'transforms.from', [] );
+		const transform = find( transformsFrom, ( { type } ) => type === 'shortcode' );
+
+		if ( ! transform ) {
+			return acc;
+		}
+
+		let match;
+		let lastIndex = 0;
+
+		while ( ( match = shortcode.next( transform.tag, HTML, lastIndex ) ) ) {
+			lastIndex = match.index + match.content.length;
+
+			const block = createBlock(
+				blockType.name,
+				getBlockAttributes(
+					{
+						...blockType,
+						attributes: transform.content,
+					},
+					match.shortcode.content,
+					transform.attributes( match.shortcode.attrs ),
+				)
+			);
+
+			acc[ match.index ] = { block, lastIndex };
+		}
+
+		return acc;
+	}, {} );
+
+	let negativeI = 0;
+
+	// Sort the matches and return an array of text pieces and blocks.
+	return Object.keys( matches ).sort().reduce( ( acc, index ) => {
+		const match = matches[ index ];
+
+		acc = [
+			// Add all pieces except the last text piece.
+			...dropRight( acc ),
+			// Add the start of the last text piece.
+			last( acc ).slice( 0, index - negativeI ),
+			// Add the block.
+			match.block,
+			// Add the rest of the last text piece.
+			last( acc ).slice( match.lastIndex - negativeI ),
+		];
+
+		negativeI = match.lastIndex;
+
+		return acc;
+	}, [ HTML ] );
+}
diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
index 31b2a3199da04..a412e6323991c 100644
--- a/blocks/library/image/index.js
+++ b/blocks/library/image/index.js
@@ -12,7 +12,7 @@ import './editor.scss';
 import { registerBlockType, source, createBlock } from '../../api';
 import ImageBlock from './block';
 
-const { attr, children } = source;
+const { attr, children, text } = source;
 
 registerBlockType( 'core/image', {
 	title: __( 'Image' ),
@@ -79,6 +79,39 @@ registerBlockType( 'core/image', {
 						} ) );
 				},
 			},
+			{
+				type: 'shortcode',
+				tag: 'caption',
+				content: {
+					url: {
+						type: 'string',
+						source: attr( 'img', 'src' ),
+					},
+					alt: {
+						type: 'string',
+						source: attr( 'img', 'alt' ),
+					},
+					caption: {
+						type: 'array',
+						// To do: needs to support HTML.
+						source: text(),
+					},
+					href: {
+						type: 'string',
+						source: attr( 'a', 'href' ),
+					},
+					id: {
+						type: 'number',
+					},
+					align: {
+						type: 'string',
+					},
+				},
+				attributes: ( { named } ) => ( {
+					id: parseInt( named.id.replace( 'attachment_', '' ), 10 ),
+					align: named.align.replace( 'align', '' ),
+				} ),
+			},
 		],
 	},
 
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 69c8900f4a742..bf63d64d154e6 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -135,7 +135,7 @@ function gutenberg_register_scripts_and_styles() {
 	wp_register_script(
 		'wp-blocks',
 		gutenberg_url( 'blocks/build/index.js' ),
-		array( 'wp-element', 'wp-components', 'wp-utils', 'wp-i18n', 'tinymce-latest', 'tinymce-latest-lists', 'tinymce-latest-paste', 'tinymce-latest-table', 'media-views', 'media-models' ),
+		array( 'wp-element', 'wp-components', 'wp-utils', 'wp-i18n', 'tinymce-latest', 'tinymce-latest-lists', 'tinymce-latest-paste', 'tinymce-latest-table', 'media-views', 'media-models', 'shortcode' ),
 		filemtime( gutenberg_dir_path() . 'blocks/build/index.js' )
 	);
 	wp_add_inline_script(
diff --git a/test/unit/setup-wp-aliases.js b/test/unit/setup-wp-aliases.js
index 5035345469b87..122792006ce0e 100644
--- a/test/unit/setup-wp-aliases.js
+++ b/test/unit/setup-wp-aliases.js
@@ -1,5 +1,10 @@
 // Set up `wp.*` aliases.  Handled by Webpack outside of the test build.
-global.wp = {};
+global.wp = {
+	shortcode: {
+		next: () => {},
+	},
+};
+
 [
 	'element',
 	'i18n',

From d3156dc98ec37ea2ed96028a6f0b59ef6ecd6848 Mon Sep 17 00:00:00 2001
From: iseulde <ella@iseulde.com>
Date: Wed, 4 Oct 2017 21:59:01 +0200
Subject: [PATCH 2/3] Paste gallery shortcode

---
 blocks/library/gallery/block.js         | 23 ++++++-
 blocks/library/gallery/gallery-image.js | 86 +++++++++++++++----------
 blocks/library/gallery/index.js         | 53 +++++++++++++--
 3 files changed, 124 insertions(+), 38 deletions(-)

diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js
index 270f7ed742d31..dd7e2da3c5663 100644
--- a/blocks/library/gallery/block.js
+++ b/blocks/library/gallery/block.js
@@ -48,6 +48,7 @@ class GalleryBlock extends Component {
 		this.toggleImageCrop = this.toggleImageCrop.bind( this );
 		this.uploadFromFiles = this.uploadFromFiles.bind( this );
 		this.onRemoveImage = this.onRemoveImage.bind( this );
+		this.setImageAttributes = this.setImageAttributes.bind( this );
 
 		this.state = {
 			selectedImage: null,
@@ -94,6 +95,21 @@ class GalleryBlock extends Component {
 		mediaUpload( event.target.files, this.props.setAttributes, isGallery );
 	}
 
+	setImageAttributes( index, attributes ) {
+		const { attributes: { images }, setAttributes } = this.props;
+
+		setAttributes( {
+			images: [
+				...images.slice( 0, index ),
+				{
+					...images[ index ],
+					...attributes,
+				},
+				...images.slice( index + 1 ),
+			],
+		} );
+	}
+
 	render() {
 		const { attributes, focus, className } = this.props;
 		const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes;
@@ -204,10 +220,15 @@ class GalleryBlock extends Component {
 			),
 			<div key="gallery" className={ `${ className } align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>
 				{ images.map( ( img, index ) => (
-					<GalleryImage key={ img.url } img={ img }
+					<GalleryImage
+						key={ img.id || img.url }
+						url={ img.url }
+						alt={ img.alt }
+						id={ img.id }
 						isSelected={ this.state.selectedImage === index }
 						onRemove={ this.onRemoveImage( index ) }
 						onClick={ this.onSelectImage( index ) }
+						setAttributes={ ( attrs ) => this.setImageAttributes( index, attrs ) }
 					/>
 				) ) }
 			</div>,
diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
index 5c700509c25b9..6ce5315ded44e 100644
--- a/blocks/library/gallery/gallery-image.js
+++ b/blocks/library/gallery/gallery-image.js
@@ -6,41 +6,61 @@ import classnames from 'classnames';
 /**
  * WordPress Dependencies
  */
-import { IconButton } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { IconButton, withAPIData, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function GalleryImage( props ) {
-	let href = null;
-	switch ( props.linkTo ) {
-		case 'media':
-			href = props.img.url;
-			break;
-		case 'attachment':
-			href = props.img.link;
-			break;
+class GalleryImage extends Component {
+	componentWillReceiveProps( { image } ) {
+		if ( image && image.data && ! this.props.url ) {
+			this.props.setAttributes( {
+				url: image.data.source_url,
+				alt: image.data.alt_text,
+			} );
+		}
 	}
 
-	const image = <img src={ props.img.url } alt={ props.img.alt } data-id={ props.img.id } />;
-	const className = classnames( 'blocks-gallery-image', {
-		'is-selected': props.isSelected,
-	} );
-
-	// Disable reason: Each block can be selected by clicking on it and we should keep the same saved markup
-	/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
-	return (
-		<figure className={ className } onClick={ props.onClick }>
-			{ props.isSelected &&
-				<div className="blocks-gallery-image__inline-menu">
-					<IconButton
-						icon="no-alt"
-						onClick={ props.onRemove }
-						className="blocks-gallery-image__remove"
-						label={ __( 'Remove Image' ) }
-					/>
-				</div>
-			}
-			{ href ? <a href={ href }>{ image }</a> : image }
-		</figure>
-	);
-	/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+	render() {
+		const { url, alt, id, linkTo, link, isSelected, onClick, onRemove } = this.props;
+
+		let href;
+
+		switch ( linkTo ) {
+			case 'media':
+				href = url;
+				break;
+			case 'attachment':
+				href = link;
+				break;
+		}
+
+		const img = url ? <img src={ url } alt={ alt } data-id={ id } /> : <Spinner />;
+
+		const className = classnames( 'blocks-gallery-image', {
+			'is-selected': isSelected,
+		} );
+
+		// Disable reason: Each block can be selected by clicking on it and we should keep the same saved markup
+		/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+		return (
+			<figure className={ className } onClick={ onClick }>
+				{ isSelected &&
+					<div className="blocks-gallery-image__inline-menu">
+						<IconButton
+							icon="no-alt"
+							onClick={ onRemove }
+							className="blocks-gallery-image__remove"
+							label={ __( 'Remove Image' ) }
+						/>
+					</div>
+				}
+				{ href ? <a href={ href }>{ img }</a> : img }
+			</figure>
+		);
+		/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
+	}
 }
+
+export default withAPIData( ( { id } ) => ( {
+	image: id ? `/wp/v2/media/${ id }` : {},
+} ) )( GalleryImage );
diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index b736e591c8160..30de852581317 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -9,7 +9,6 @@ import { __ } from '@wordpress/i18n';
 import './editor.scss';
 import './style.scss';
 import { registerBlockType, source } from '../../api';
-import GalleryImage from './gallery-image';
 import { default as GalleryBlock, defaultColumnsNumber } from './block';
 
 const { query, attr } = source;
@@ -47,6 +46,35 @@ registerBlockType( 'core/gallery', {
 		},
 	},
 
+	transforms: {
+		from: [
+			{
+				type: 'shortcode',
+				tag: 'gallery',
+				content: {
+					images: {
+						type: 'array',
+						default: [],
+					},
+					columns: {
+						type: 'number',
+					},
+					linkTo: {
+						type: 'string',
+						default: 'attachment',
+					},
+				},
+				attributes: ( { named } ) => ( {
+					linkTo: named.link === 'file' ? 'media' : named.link,
+					columns: parseInt( named.columns, 10 ) || 3,
+					images: named.ids.split( ',' ).map( ( id ) => ( {
+						id: parseInt( id, 10 ),
+					} ) ),
+				} ),
+			},
+		],
+	},
+
 	getEditWrapperProps( attributes ) {
 		const { align } = attributes;
 		if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) {
@@ -60,9 +88,26 @@ registerBlockType( 'core/gallery', {
 		const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes;
 		return (
 			<div className={ `align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` } >
-				{ images.map( ( img ) => (
-					<GalleryImage key={ img.url } img={ img } linkTo={ linkTo } />
-				) ) }
+				{ images.map( ( image ) => {
+					let href;
+
+					switch ( linkTo ) {
+						case 'media':
+							href = image.url;
+							break;
+						case 'attachment':
+							href = image.link;
+							break;
+					}
+
+					const img = <img src={ image.url } alt={ image.alt } data-id={ image.id } />;
+
+					return (
+						<figure key={ image.id || image.url } className="blocks-gallery-image">
+							{ href ? <a href={ href }>{ img }</a> : img }
+						</figure>
+					);
+				} ) }
 			</div>
 		);
 	},

From 2eeeec3c6e473ff24c9e5b9d0ef2527b2ff35ea3 Mon Sep 17 00:00:00 2001
From: iseulde <ella@iseulde.com>
Date: Wed, 4 Oct 2017 22:44:38 +0200
Subject: [PATCH 3/3] Simpler transform API

---
 .../api/raw-handling/shortcode-converter.js   | 11 +++++---
 blocks/library/gallery/index.js               | 26 ++++++++++++-------
 blocks/library/image/index.js                 | 16 ++++++++----
 3 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/blocks/api/raw-handling/shortcode-converter.js b/blocks/api/raw-handling/shortcode-converter.js
index 31e1517de252a..0b429b8063dce 100644
--- a/blocks/api/raw-handling/shortcode-converter.js
+++ b/blocks/api/raw-handling/shortcode-converter.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, get, dropRight, last } from 'lodash';
+import { find, get, dropRight, last, mapValues, pickBy } from 'lodash';
 
 /**
  * Internal dependencies
@@ -31,15 +31,20 @@ export default function( HTML ) {
 		while ( ( match = shortcode.next( transform.tag, HTML, lastIndex ) ) ) {
 			lastIndex = match.index + match.content.length;
 
+			const attributes = mapValues(
+				pickBy( transform.attributes, ( schema ) => schema.shortcode ),
+				( schema ) => schema.shortcode( match.shortcode.attrs ),
+			);
+
 			const block = createBlock(
 				blockType.name,
 				getBlockAttributes(
 					{
 						...blockType,
-						attributes: transform.content,
+						attributes: transform.attributes,
 					},
 					match.shortcode.content,
-					transform.attributes( match.shortcode.attrs ),
+					attributes,
 				)
 			);
 
diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index 30de852581317..2c7aa8c4e38e3 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -51,26 +51,32 @@ registerBlockType( 'core/gallery', {
 			{
 				type: 'shortcode',
 				tag: 'gallery',
-				content: {
+				attributes: {
 					images: {
 						type: 'array',
-						default: [],
+						shortcode: ( { named: { ids } } ) => {
+							if ( ! ids ) {
+								return [];
+							}
+
+							return ids.split( ',' ).map( ( id ) => ( {
+								id: parseInt( id, 10 ),
+							} ) );
+						},
 					},
 					columns: {
 						type: 'number',
+						shortcode: ( { named: { columns = '3' } } ) => {
+							return parseInt( columns, 10 );
+						},
 					},
 					linkTo: {
 						type: 'string',
-						default: 'attachment',
+						shortcode: ( { named: { link = 'attachment' } } ) => {
+							return link === 'file' ? 'media' : link;
+						},
 					},
 				},
-				attributes: ( { named } ) => ( {
-					linkTo: named.link === 'file' ? 'media' : named.link,
-					columns: parseInt( named.columns, 10 ) || 3,
-					images: named.ids.split( ',' ).map( ( id ) => ( {
-						id: parseInt( id, 10 ),
-					} ) ),
-				} ),
 			},
 		],
 	},
diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js
index a412e6323991c..1ff78cf092958 100644
--- a/blocks/library/image/index.js
+++ b/blocks/library/image/index.js
@@ -82,7 +82,7 @@ registerBlockType( 'core/image', {
 			{
 				type: 'shortcode',
 				tag: 'caption',
-				content: {
+				attributes: {
 					url: {
 						type: 'string',
 						source: attr( 'img', 'src' ),
@@ -102,15 +102,21 @@ registerBlockType( 'core/image', {
 					},
 					id: {
 						type: 'number',
+						shortcode: ( { named: { id } } ) => {
+							if ( ! id ) {
+								return;
+							}
+
+							return parseInt( id.replace( 'attachment_', '' ), 10 );
+						},
 					},
 					align: {
 						type: 'string',
+						shortcode: ( { named: { align = 'alignnone' } } ) => {
+							return align.replace( 'align', '' );
+						},
 					},
 				},
-				attributes: ( { named } ) => ( {
-					id: parseInt( named.id.replace( 'attachment_', '' ), 10 ),
-					align: named.align.replace( 'align', '' ),
-				} ),
 			},
 		],
 	},