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,50 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { registerBlock, query as hpq } from 'api';
+import Editable from 'components/editable';
+
+const { html, query } = hpq;
+
+registerBlock( 'core/quote', {
+	title: wp.i18n.__( 'Quote' ),
+	icon: 'format-quote',
+	category: 'common',
+
+	attributes: {
+		value: ( node ) => query( 'blockquote > p', html() )( node ).join(),
+		citation: html( 'footer' )
+	},
+
+	edit( { attributes, setAttributes } ) {
+		const { value, citation } = attributes;
+
+		return (
+			<blockquote className="blocks-quote">
+				<Editable
+					value={ value }
+					onChange={ ( newValue ) => setAttributes( { value: newValue } ) } />
+				<footer>
+					<Editable
+						value={ citation }
+						onChange={ ( newValue ) => setAttributes( { citation: newValue } ) } />
+				</footer>
+			</blockquote>
+		);
+	},
+
+	save( attributes ) {
+		const { value, citation } = attributes;
+		return (
+			<blockquote>
+				{ value }
+				{ !! citation &&
+					<footer>
+						{ citation }
+					</footer>
+				}
+			</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;
+
+		&:after {
+			content: '— ';
+			position: absolute;
+			left: -1.3em;
+			top: 0;
+		}
+	}
+}

languages/gutenberg.pot

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