Merge pull request #616 from WordPress/add/button-block

Blocks: add "Button"

blocks/library/button/index.js

@@ -0,0 +1,109 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { registerBlock, query } from 'api';
+import Editable from 'components/editable';
+import IconButton from '../../../editor/components/icon-button';
+
+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/button', {
+	title: wp.i18n.__( 'Button' ),
+
+	icon: 'marker',
+
+	category: 'common',
+
+	attributes: {
+		url: attr( 'a', 'href' ),
+		title: attr( 'a', 'title' ),
+		text: children( 'a' ),
+		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' )
+		}
+	],
+
+	getEditWrapperProps( attributes ) {
+		const { align } = attributes;
+		if ( 'left' === align || 'right' === align || 'center' === align ) {
+			return { 'data-align': align };
+		}
+	},
+
+	edit( { attributes, setAttributes, focus, setFocus } ) {
+		const { text, url, title } = attributes;
+
+		return (
+			<span className="blocks-button" title={ title }>
+				<Editable
+					tagName="span"
+					placeholder={ wp.i18n.__( 'Write some text…' ) }
+					value={ text }
+					onFocus={ setFocus }
+					onChange={ ( value ) => setAttributes( { text: value } ) }
+				/>
+				{ focus &&
+					<form
+						className="editable-format-toolbar__link-modal"
+						onSubmit={ ( event ) => event.preventDefault() }>
+						<input
+							className="editable-format-toolbar__link-input"
+							type="url"
+							required
+							value={ url }
+							onChange={ ( event ) => setAttributes( { url: event.target.value } ) }
+							placeholder={ wp.i18n.__( 'Paste URL or type' ) }
+						/>
+						<IconButton icon="editor-break" type="submit" />
+					</form>
+				}
+			</span>
+		);
+	},
+
+	save( { attributes } ) {
+		const { url, text, title, align = 'none' } = attributes;
+
+		return (
+			<div className={ `align${ align }` }>
+				<a href={ url } title={ title }>
+					{ text }
+				</a>
+			</div>
+		);
+	}
+} );

blocks/library/button/style.scss

@@ -0,0 +1,61 @@
+.blocks-button {
+	font-family: $default-font;
+	display: inline-block;
+	text-decoration: none;
+	font-size: 17px;
+	line-height: 1.5;
+	margin: 0;
+	padding: 6px 14px;
+	cursor: default;
+	border-width: 1px;
+	border-style: solid;
+	border-radius: 2px;
+	white-space: nowrap;
+	box-sizing: border-box;
+	background: $blue-medium;
+	color: $white;
+	border-color: $blue-wordpress;
+	vertical-align: top;
+	position: relative;
+
+	&:hover {
+		color: $white;
+	}
+
+	.editable-format-toolbar__link-modal {
+		top: -1px;
+		left: calc( 100% + 12px );
+	}
+}
+
+.blocks-button__link {
+	position: absolute;
+	right: -32px;
+	top: 5px;
+	color: $dark-gray-500;
+	text-decoration: none;
+
+	&:hover {
+		color: $dark-gray-300;
+	}
+
+	.dashicon {
+		vertical-align: middle;
+	}
+}
+
+.editor-visual-editor__block[data-type="core/button"] {
+	&[data-align="center"] {
+		text-align: center;
+	}
+
+	&[data-align="right"] {
+		text-align: right;
+
+		.editable-format-toolbar__link-modal {
+			top: -1px;
+			left: auto;
+			right: calc( 100% + 12px );
+		}
+	}
+}

blocks/library/index.js

@@ -6,3 +6,4 @@ import './text';
 import './list';
 import './quote';
 import './separator';
+import './button';

post-content.js

@@ -8,6 +8,10 @@ window._wpGutenbergPost = {
 			'<h1>1.0 Is The Loneliest Number</h1>',
 			'<!-- /wp:core/heading -->',
 
+			'<!-- wp:core/button -->',
+			'<div class="aligncenter"><a href="https://github.com/WordPress/gutenberg"><span>Gutenberg on GitHub</span></a></div>',
+			'<!-- /wp:core/button -->',
+
 			'<!-- wp:core/text -->',
 			'<p>I imagine prior to the launch of the iPod, or the iPhone, there were teams saying the same thing: the copy + paste guys are <em>so close</em> to being ready and we know Walt Mossberg is going to ding us for this so let\'s just not ship to the manufacturers in China for just a few more weeks… The Apple teams were probably embarrassed. But <strong>if you\'re not embarrassed when you ship your first version you waited too long</strong>.</p>',
 			'<!-- /wp:core/text -->',