From 3b9b3050ff0e3101181030a0e887fb929e1b5ef4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Wed, 3 May 2017 12:46:59 +0200
Subject: [PATCH 1/3] Add "Button" block.

---
 blocks/library/button/index.js   | 94 ++++++++++++++++++++++++++++++++
 blocks/library/button/style.scss | 33 +++++++++++
 blocks/library/index.js          |  1 +
 3 files changed, 128 insertions(+)
 create mode 100644 blocks/library/button/index.js
 create mode 100644 blocks/library/button/style.scss

diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js
new file mode 100644
index 00000000000000..5eafd08cfe0547
--- /dev/null
+++ b/blocks/library/button/index.js
@@ -0,0 +1,94 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { registerBlock, query } from 'api';
+import Editable from 'components/editable';
+
+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, title } = attributes;
+
+		return (
+			<a className="blocks-button" title={ title }>
+				<Editable
+					tagName="span"
+					placeholder={ wp.i18n.__( 'Write some text…' ) }
+					value={ text }
+					focus={ focus }
+					onFocus={ setFocus }
+					onChange={ ( value ) => setAttributes( { text: value } ) }
+				/>
+			</a>
+		);
+	},
+
+	save( { attributes } ) {
+		const { url, text, title, align = 'none' } = attributes;
+
+		return (
+			<div className={ `align${ align }` }>
+				<a href={ url } title={ title }>
+					{ text }
+				</a>
+			</div>
+		);
+	}
+} );
diff --git a/blocks/library/button/style.scss b/blocks/library/button/style.scss
new file mode 100644
index 00000000000000..76fb67c1b506d1
--- /dev/null
+++ b/blocks/library/button/style.scss
@@ -0,0 +1,33 @@
+.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;
+
+	&:hover {
+		color: $white;
+	}
+}
+
+.editor-visual-editor__block[data-type="core/button"] {
+	&[data-align="center"] {
+		text-align: center;
+	}
+
+	&[data-align="right"] {
+		text-align: right;
+	}
+}
diff --git a/blocks/library/index.js b/blocks/library/index.js
index 4c2d81d114e105..9a0e2eaa95540c 100644
--- a/blocks/library/index.js
+++ b/blocks/library/index.js
@@ -6,3 +6,4 @@ import './text';
 import './list';
 import './quote';
 import './separator';
+import './button';

From 170a330b9b3602d159088d952ae8b8ec7f343171 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Wed, 3 May 2017 12:47:12 +0200
Subject: [PATCH 2/3] Include "button" example in dummy content.

Render link outside the button.

Allow opening button link externally.

Disable focusing.
---
 blocks/library/button/index.js   | 13 +++++++++----
 blocks/library/button/style.scss | 17 +++++++++++++++++
 post-content.js                  |  4 ++++
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js
index 5eafd08cfe0547..d17a06c7e38c33 100644
--- a/blocks/library/button/index.js
+++ b/blocks/library/button/index.js
@@ -4,6 +4,7 @@
 import './style.scss';
 import { registerBlock, query } from 'api';
 import Editable from 'components/editable';
+import Dashicon from '../../../editor/components/dashicon';
 
 const { attr, children } = query;
 
@@ -64,19 +65,23 @@ registerBlock( 'core/button', {
 	},
 
 	edit( { attributes, setAttributes, focus, setFocus } ) {
-		const { text, title } = attributes;
+		const { text, url, title } = attributes;
 
 		return (
-			<a className="blocks-button" title={ title }>
+			<span className="blocks-button" title={ title }>
 				<Editable
 					tagName="span"
 					placeholder={ wp.i18n.__( 'Write some text…' ) }
 					value={ text }
-					focus={ focus }
 					onFocus={ setFocus }
 					onChange={ ( value ) => setAttributes( { text: value } ) }
 				/>
-			</a>
+				{ focus &&
+					<a className="blocks-button__link" href={ url } target="_blank">
+						<Dashicon icon="external" />
+					</a>
+				}
+			</span>
 		);
 	},
 
diff --git a/blocks/library/button/style.scss b/blocks/library/button/style.scss
index 76fb67c1b506d1..d49db351b0c097 100644
--- a/blocks/library/button/style.scss
+++ b/blocks/library/button/style.scss
@@ -16,12 +16,29 @@
 	color: $white;
 	border-color: $blue-wordpress;
 	vertical-align: top;
+	position: relative;
 
 	&:hover {
 		color: $white;
 	}
 }
 
+.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;
diff --git a/post-content.js b/post-content.js
index bbadbcddb7b804..b0285e4bb022ea 100644
--- a/post-content.js
+++ b/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 -->',

From 3a8e91287789278db809f8558714e20796c1b7bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Wed, 3 May 2017 14:14:43 +0200
Subject: [PATCH 3/3] Display URL input field for changing the button href
 attr.

This uses the default link-modal implemented for Editable,
but displays it all the time.

Positioninig is determined by block alignment.

Position URL input to the left when button is aligned right.
---
 blocks/library/button/index.js   | 18 ++++++++++++++----
 blocks/library/button/style.scss | 11 +++++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js
index d17a06c7e38c33..dfa919c8687651 100644
--- a/blocks/library/button/index.js
+++ b/blocks/library/button/index.js
@@ -4,7 +4,7 @@
 import './style.scss';
 import { registerBlock, query } from 'api';
 import Editable from 'components/editable';
-import Dashicon from '../../../editor/components/dashicon';
+import IconButton from '../../../editor/components/icon-button';
 
 const { attr, children } = query;
 
@@ -77,9 +77,19 @@ registerBlock( 'core/button', {
 					onChange={ ( value ) => setAttributes( { text: value } ) }
 				/>
 				{ focus &&
-					<a className="blocks-button__link" href={ url } target="_blank">
-						<Dashicon icon="external" />
-					</a>
+					<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>
 		);
diff --git a/blocks/library/button/style.scss b/blocks/library/button/style.scss
index d49db351b0c097..9c650594a4bd26 100644
--- a/blocks/library/button/style.scss
+++ b/blocks/library/button/style.scss
@@ -21,6 +21,11 @@
 	&:hover {
 		color: $white;
 	}
+
+	.editable-format-toolbar__link-modal {
+		top: -1px;
+		left: calc( 100% + 12px );
+	}
 }
 
 .blocks-button__link {
@@ -46,5 +51,11 @@
 
 	&[data-align="right"] {
 		text-align: right;
+
+		.editable-format-toolbar__link-modal {
+			top: -1px;
+			left: auto;
+			right: calc( 100% + 12px );
+		}
 	}
 }