Implement image alignment controls

blocks/library/image/index.js

@@ -1,11 +1,26 @@
 /**
  * Internal dependencies
  */
+import './style.scss';
 import { registerBlock, query } from 'api';
 import Editable from 'components/editable';
 
 const { attr, children } = query;
 
+/**
+ * Returns an attribute setter with behavior that if the target value is
+ * already the assigned attribute value, it will be set to undefined.
+ *
+ * @param  {string}   align Alignment value
+ * @return {Function}       Attribute setter
+ */
+function applyOrUnset( align ) {
+	return ( attributes, setAttributes ) => {
+		const nextAlign = attributes.align === align ? undefined : align;
+		setAttributes( { align: nextAlign } );
+	};
+}
+
 registerBlock( 'core/image', {
 	title: wp.i18n.__( 'Image' ),
 
@@ -16,14 +31,49 @@ registerBlock( 'core/image', {
 	attributes: {
 		url: attr( 'img', 'src' ),
 		alt: attr( 'img', 'alt' ),
-		caption: children( 'figcaption' )
+		caption: children( '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' )
+		}
+	],
+
+	getEditWrapperProps( attributes ) {
+		const { align } = attributes;
+		if ( 'left' === align || 'right' === align ) {
+			return { 'data-align': align };
+		}
 	},
 
 	edit( { attributes, setAttributes, focus, setFocus } ) {
 		const { url, alt, caption } = attributes;
 
 		return (
-			<figure>
+			<figure className="blocks-image">
 				<img src={ url } alt={ alt } />
 				{ caption || !! focus ? (
 					<Editable
@@ -39,8 +89,8 @@ registerBlock( 'core/image', {
 	},
 
 	save( { attributes } ) {
-		const { url, alt, caption } = attributes;
-		const img = <img src={ url } alt={ alt } />;
+		const { url, alt, caption, align = 'none' } = attributes;
+		const img = <img src={ url } alt={ alt } className={ `align${ align }` } />;
 
 		if ( ! caption ) {
 			return img;

blocks/library/image/style.scss

@@ -0,0 +1,26 @@
+.editor-visual-editor__block[data-type="core/image"] {
+	&[data-align="left"],
+	&[data-align="right"] {
+		// Without z-index, won't be clickable as "above" adjacent content
+		z-index: 10;
+		max-width: 370px;
+	}
+
+	&[data-align="left"] {
+		float: left;
+		margin-right: 15px;
+	}
+
+	&[data-align="right"] {
+		float: right;
+		margin-left: 15px;
+	}
+}
+
+.blocks-image {
+	margin: 0;
+
+	img {
+		display: block;
+	}
+}

editor/modes/visual-editor/block.js

@@ -133,6 +133,12 @@ class VisualEditorBlock extends wp.element.Component {
 
 		const { onSelect, onStartTyping, onHover, onMouseLeave, onFocus, onInsertAfter } = this.props;
 
+		// Determine whether the block has props to apply to the wrapper
+		let wrapperProps;
+		if ( settings.getEditWrapperProps ) {
+			wrapperProps = settings.getEditWrapperProps( block.attributes );
+		}
+
 		// Disable reason: Each block can receive focus but must be able to contain
 		// block children. Tab keyboard navigation enabled by tabIndex assignment.
 
@@ -148,6 +154,8 @@ class VisualEditorBlock extends wp.element.Component {
 				onMouseMove={ this.maybeHover }
 				onMouseLeave={ onMouseLeave }
 				className={ className }
+				data-type={ block.blockType }
+				{ ...wrapperProps }
 			>
 				{ ( ( isSelected && ! isTyping ) || isHovered ) && <BlockMover uid={ block.uid } /> }
 				{ isSelected && ! isTyping &&

languages/gutenberg.pot

@@ -8,7 +8,7 @@ msgid "Embed"
 msgstr ""
 
 #: blocks/library/embed/index.js:31
-#: blocks/library/image/index.js:31
+#: blocks/library/image/index.js:81
 msgid "Write caption…"
 msgstr ""
 
@@ -24,29 +24,36 @@ msgstr ""
 msgid "Heading %s"
 msgstr ""
 
-#: blocks/library/image/index.js:10
+#: blocks/library/image/index.js:25
 msgid "Image"
 msgstr ""
 
-#: blocks/library/list/index.js:11
-msgid "List"
-msgstr ""
-
+#: blocks/library/image/index.js:41
 #: blocks/library/list/index.js:25
 #: blocks/library/text/index.js:23
 msgid "Align left"
 msgstr ""
 
+#: blocks/library/image/index.js:47
 #: blocks/library/list/index.js:33
 #: blocks/library/text/index.js:31
 msgid "Align center"
 msgstr ""
 
+#: blocks/library/image/index.js:53
 #: blocks/library/list/index.js:41
 #: blocks/library/text/index.js:39
 msgid "Align right"
 msgstr ""
 
+#: blocks/library/image/index.js:59
+msgid "No alignment"
+msgstr ""
+
+#: blocks/library/list/index.js:11
+msgid "List"
+msgstr ""
+
 #: blocks/library/list/index.js:49
 msgid "Justify"
 msgstr ""