Blocks: Adding the quote block

blocks/library/index.js

@@ -2,3 +2,4 @@ import './freeform';
 import './image';
 import './text';
 import './list';
+import './quote';

blocks/library/quote/index.js

@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { registerBlock, query as hpq } from 'api';
+import Editable from 'components/editable';
+
+const { parse, html, query } = hpq;
+
+const fromValueToParagraphs = ( value ) => value.map( ( paragraph ) => `<p>${ paragraph }</p>` ).join( '' );
+const fromParagraphsToValue = ( paragraphs ) => parse( paragraphs, query( 'p', html() ) );
+
+registerBlock( 'core/quote', {
+	title: wp.i18n.__( 'Quote' ),
+	icon: 'format-quote',
+	category: 'common',
+
+	attributes: {
+		value: query( 'blockquote > p', html() ),
+		citation: html( 'footer' )
+	},
+
+	edit( { attributes, setAttributes } ) {
+		const { value, citation } = attributes;
+
+		return (
+			<blockquote className="blocks-quote">
+				<Editable
+					value={ fromValueToParagraphs( value ) }
+					onChange={
+						( paragraphs ) => setAttributes( {
+							value: fromParagraphsToValue( paragraphs )
+						} )
+					} />
+				<footer>
+					<Editable
+						value={ citation }
+						onChange={
+							( newValue ) => setAttributes( {
+								citation: newValue
+							} )
+						} />
+				</footer>
+			</blockquote>
+		);
+	},
+
+	save( attributes ) {
+		const { value, citation } = attributes;
+
+		return (
+			<blockquote>
+				{ value.map( ( paragraph, i ) => (
+					<p
+						key={ i }
+						dangerouslySetInnerHTML={ {
+							__html: paragraph
+						} } />
+				) ) }
+				<footer dangerouslySetInnerHTML={ {
+					__html: citation
+				} } />
+			</blockquote>
+		);
+	}
+} );

blocks/library/quote/style.scss

@@ -0,0 +1,24 @@
+.blocks-quote {
+	margin: 0;
+	box-shadow: inset 0px 0px 0px 0px $light-gray-500;
+	transition: all .2s ease;
+	font-size: 20px;
+	border-left: 4px solid $black;
+	padding-left: 1em;
+	font-style: italic;
+
+	footer {
+		color: $dark-gray-100;
+		font-size: 0.9em;
+		font-style: normal;
+		margin-left: 1.3em;
+		position: relative;
+
+		&:before {
+			content: '— ';
+			position: absolute;
+			left: -1.3em;
+			top: 0;
+		}
+	}
+}

languages/gutenberg.pot

@@ -38,6 +38,10 @@ msgstr ""
 msgid "Justify"
 msgstr ""
 
+#: blocks/library/quote/index.js:14
+msgid "Quote"
+msgstr ""
+
 #: blocks/library/text/index.js:10
 msgid "Text"
 msgstr ""