Merge pull request #379 from WordPress/add/image-block

Implement image block

editor/blocks/image/index.js

@@ -0,0 +1,49 @@
+const { attr, html } = wp.blocks.query;
+const Editable = wp.blocks.Editable;
+
+wp.blocks.registerBlock( 'core/image', {
+	title: wp.i18n.__( 'Image' ),
+
+	icon: 'format-image',
+
+	category: 'common',
+
+	attributes: {
+		url: attr( 'img', 'src' ),
+		alt: attr( 'img', 'alt' ),
+		caption: html( 'figcaption' )
+	},
+
+	edit( { attributes, isSelected, setAttributes } ) {
+		const { url, alt, caption } = attributes;
+
+		return (
+			<figure>
+				<img src={ url } alt={ alt } />
+				{ caption || isSelected ? (
+					<Editable
+						tagName="figcaption"
+						placeholder={ wp.i18n.__( 'Write caption…' ) }
+						value={ caption }
+						onChange={ ( value ) => setAttributes( { caption: value } ) } />
+				) : null }
+			</figure>
+		);
+	},
+
+	save( { attributes } ) {
+		const { url, alt, caption } = attributes;
+		const img = <img src={ url } alt={ alt } />;
+
+		if ( ! caption ) {
+			return img;
+		}
+
+		return (
+			<figure>
+				{ img }
+				<figcaption dangerouslySetInnerHTML={ { __html: caption } } />
+			</figure>
+		);
+	}
+} );

editor/blocks/index.js

@@ -1,4 +1,5 @@
 import './freeform';
+import './image';
 import './text';
 import './list';
 

editor/modes/visual-editor/block.js

@@ -71,6 +71,7 @@ function VisualEditorBlock( props ) {
 					} ) ) } />
 			) : null }
 			<BlockEdit
+				isSelected={ isSelected }
 				attributes={ block.attributes }
 				setAttributes={ setAttributes } />
 		</div>

languages/gutenberg.pot

@@ -7,6 +7,14 @@ msgstr ""
 msgid "Freeform"
 msgstr ""
 
+#: editor/blocks/image/index.js:26
+msgid "Write caption…"
+msgstr ""
+
+#: editor/blocks/image/index.js:5
+msgid "Image"
+msgstr ""
+
 #: editor/blocks/list/index.js:5
 msgid "List"
 msgstr ""