Merge pull request #607 from WordPress/add/547-pullquote

Pullquote Block

blocks/library/index.js

@@ -7,3 +7,4 @@ import './list';
 import './quote';
 import './separator';
 import './button';
+import './pullquote';

blocks/library/pullquote/index.js

@@ -0,0 +1,70 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { registerBlock, query as hpq } from 'api';
+import Editable from 'components/editable';
+
+const { children, query } = hpq;
+
+registerBlock( 'core/pullquote', {
+	title: wp.i18n.__( 'Pullquote' ),
+	icon: 'format-quote',
+	category: 'common',
+
+	attributes: {
+		value: query( 'blockquote > p', children() ),
+		citation: children( 'footer' ),
+	},
+
+	edit( { attributes, setAttributes, focus, setFocus } ) {
+		const { value, citation } = attributes;
+
+		return (
+			<blockquote className="blocks-pullquote">
+				<Editable
+					value={ value || wp.i18n.__( 'Write Quote…' ) }
+					onChange={
+						( nextValue ) => setAttributes( {
+							value: nextValue
+						} )
+					}
+					focus={ focus && focus.editable === 'value' ? focus : null }
+					onFocus={ () => setFocus( { editable: 'value' } ) }
+				/>
+				{ ( citation || !! focus ) && (
+					<footer>
+						<Editable
+							tagName="footer"
+							value={ citation || wp.i18n.__( 'Write caption…' ) }
+							onChange={
+								( nextCitation ) => setAttributes( {
+									citation: nextCitation
+								} )
+							}
+							focus={ focus && focus.editable === 'citation' ? focus : null }
+							onFocus={ () => setFocus( { editable: 'citation' } ) }
+							inline
+						/>
+					</footer>
+				) }
+			</blockquote>
+		);
+	},
+
+	save( { attributes } ) {
+		const { value, citation } = attributes;
+
+		return (
+			<blockquote className="blocks-pullquote">
+				{ value && value.map( ( paragraph, i ) => (
+					<p key={ i }>{ paragraph }</p>
+				) ) }
+
+				{ citation && citation.length > 0 && (
+					<footer>{ citation }</footer>
+				) }
+			</blockquote>
+		);
+	}
+} );

blocks/library/pullquote/style.scss

@@ -0,0 +1,23 @@
+.blocks-pullquote {
+	color: $light-gray-900;
+	padding: 2em;
+	text-align: center;
+
+	footer {
+		color: $dark-gray-900;
+		position: relative;
+	}
+
+	footer p {
+		font-size: 16px;
+		font-family: $default-font;
+	}
+}
+
+.editor-visual-editor .blocks-pullquote {
+	& > .blocks-editable p {
+		font-family: $default-font;
+		font-size: 48px;
+		font-weight: 900;
+	}
+}