Implement image alignment controls

Author: aduth

blocks/library/image/index.js

@@ -6,6 +6,22 @@ import Editable from 'components/editable';
 
 const { attr, html } = query;
 
+function Image( { url, alt, align } ) {
+	let className;
+	if ( align ) {
+		className = `align${ align }`;
+	}
+
+	return <img src={ url } alt={ alt } className={ className } />;
+}
+
+function applyOrUnset( align ) {
+	return ( attributes, setAttributes ) => {
+		const nextAlign = attributes.align === align ? undefined : align;
+		setAttributes( { align: nextAlign } );
+	};
+}
+
 registerBlock( 'core/image', {
 	title: wp.i18n.__( 'Image' ),
 
@@ -16,15 +32,43 @@ registerBlock( 'core/image', {
 	attributes: {
 		url: attr( 'img', 'src' ),
 		alt: attr( 'img', 'alt' ),
-		caption: html( 'figcaption' )
+		caption: html( 'figcaption' ),
+		align: ( node ) => ( node.className.match( /\balign(\S+)/ ) || [] )[ 1 ]
 	},
 
+	controls: [
+		{
+			icon: 'align-left',
+			title: wp.i18n.__( 'Align left' ),
+			isActive: ( { align } ) => 'left' === align,
+			onClick: applyOrUnset( 'left' )
+		},
+		{
+			icon: 'align-center',
+			title: wp.i18n.__( 'Align center' ),
+			isActive: ( { align } ) => 'center' === align,
+			onClick: applyOrUnset( 'center' )
+		},
+		{
+			icon: 'align-right',
+			title: wp.i18n.__( 'Align right' ),
+			isActive: ( { align } ) => 'right' === align,
+			onClick: applyOrUnset( 'right' )
+		},
+		{
+			icon: 'align-none',
+			title: wp.i18n.__( 'No alignment' ),
+			isActive: ( { align } ) => ! align || 'none' === align,
+			onClick: applyOrUnset( 'none' )
+		}
+	],
+
 	edit( { attributes, isSelected, setAttributes } ) {
-		const { url, alt, caption } = attributes;
+		const { url, alt, align, caption } = attributes;
 
 		return (
 			<figure>
-				<img src={ url } alt={ alt } />
+				<Image url={ url } alt={ alt } align={ align } />
 				{ caption || isSelected ? (
 					<Editable
 						tagName="figcaption"
@@ -37,8 +81,8 @@ registerBlock( 'core/image', {
 	},
 
 	save( { attributes } ) {
-		const { url, alt, caption } = attributes;
-		const img = <img src={ url } alt={ alt } />;
+		const { url, alt, align, caption } = attributes;
+		const img = <Image url={ url } alt={ alt } align={ align } />;
 
 		if ( ! caption ) {
 			return img;

languages/gutenberg.pot

@@ -7,33 +7,40 @@ msgstr ""
 msgid "Freeform"
 msgstr ""
 
-#: blocks/library/image/index.js:10
+#: blocks/library/image/index.js:26
 msgid "Image"
 msgstr ""
 
-#: blocks/library/image/index.js:31
-msgid "Write caption…"
-msgstr ""
-
-#: blocks/library/list/index.js:11
-msgid "List"
-msgstr ""
-
+#: blocks/library/image/index.js:42
 #: blocks/library/list/index.js:25
 #: blocks/library/text/index.js:24
 msgid "Align left"
 msgstr ""
 
+#: blocks/library/image/index.js:48
 #: blocks/library/list/index.js:33
 #: blocks/library/text/index.js:32
 msgid "Align center"
 msgstr ""
 
+#: blocks/library/image/index.js:54
 #: blocks/library/list/index.js:41
 #: blocks/library/text/index.js:40
 msgid "Align right"
 msgstr ""
 
+#: blocks/library/image/index.js:60
+msgid "No alignment"
+msgstr ""
+
+#: blocks/library/image/index.js:75
+msgid "Write caption…"
+msgstr ""
+
+#: blocks/library/list/index.js:11
+msgid "List"
+msgstr ""
+
 #: blocks/library/list/index.js:49
 msgid "Justify"
 msgstr ""