From 50429bfb87338971dd6201367b46db6ecf0d9474 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Thu, 5 Sep 2019 22:45:35 +0100
Subject: [PATCH] Add: Buttons block

---
 .../block-alignment-toolbar/index.js          |   1 +
 .../test/__snapshots__/index.js.snap          |   1 +
 .../block-library/src/button/edit-settings.js |  11 ++
 packages/block-library/src/button/edit.js     | 108 ++++++++++++++----
 packages/block-library/src/buttons/block.json |   5 +
 packages/block-library/src/buttons/edit.js    |  58 ++++++++++
 .../block-library/src/buttons/editor.scss     |  80 +++++++++++++
 packages/block-library/src/buttons/icon.js    |   8 ++
 packages/block-library/src/buttons/index.js   |  29 +++++
 packages/block-library/src/buttons/save.js    |  12 ++
 packages/block-library/src/buttons/style.scss |   7 ++
 packages/block-library/src/editor.scss        |   1 +
 packages/block-library/src/index.js           |   2 +
 packages/block-library/src/style.scss         |   1 +
 .../e2e-tests/fixtures/block-transforms.js    |   6 +
 .../fixtures/blocks/core__buttons.html        |  11 ++
 .../fixtures/blocks/core__buttons.json        |  31 +++++
 .../fixtures/blocks/core__buttons.parsed.json |  43 +++++++
 .../blocks/core__buttons.serialized.html      |   9 ++
 19 files changed, 402 insertions(+), 22 deletions(-)
 create mode 100644 packages/block-library/src/button/edit-settings.js
 create mode 100644 packages/block-library/src/buttons/block.json
 create mode 100644 packages/block-library/src/buttons/edit.js
 create mode 100644 packages/block-library/src/buttons/editor.scss
 create mode 100644 packages/block-library/src/buttons/icon.js
 create mode 100644 packages/block-library/src/buttons/index.js
 create mode 100644 packages/block-library/src/buttons/save.js
 create mode 100644 packages/block-library/src/buttons/style.scss
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__buttons.html
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__buttons.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__buttons.parsed.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__buttons.serialized.html

diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js
index e766504f0d9f4..53f003a2c34cc 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/index.js
+++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js
@@ -52,6 +52,7 @@ export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CON
 
 	return (
 		<Toolbar
+			className="block-editor-block-alignment-toolbar"
 			isCollapsed={ isCollapsed }
 			icon={ activeAlignmentControl ? activeAlignmentControl.icon : defaultAlignmentControl.icon }
 			label={ __( 'Change alignment' ) }
diff --git a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
index e35af5e597210..cc3ba6daed5fc 100644
--- a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
+++ b/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap
@@ -2,6 +2,7 @@
 
 exports[`BlockAlignmentToolbar should match snapshot 1`] = `
 <Toolbar
+  className="block-editor-block-alignment-toolbar"
   controls={
     Array [
       Object {
diff --git a/packages/block-library/src/button/edit-settings.js b/packages/block-library/src/button/edit-settings.js
new file mode 100644
index 0000000000000..b7a978fb49432
--- /dev/null
+++ b/packages/block-library/src/button/edit-settings.js
@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createContext,
+} from '@wordpress/element';
+
+const ButtonEditSettings = createContext( {
+	urlInPopover: false,
+} );
+export { ButtonEditSettings };
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index bda8c539905e1..ccd256fe8cad1 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -10,6 +10,8 @@ import { __ } from '@wordpress/i18n';
 import {
 	Component,
 	useCallback,
+	useContext,
+	useState,
 } from '@wordpress/element';
 import {
 	compose,
@@ -24,6 +26,7 @@ import {
 	withFallbackStyles,
 } from '@wordpress/components';
 import {
+	URLPopover,
 	URLInput,
 	RichText,
 	ContrastChecker,
@@ -32,6 +35,11 @@ import {
 	PanelColorSettings,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { ButtonEditSettings } from './edit-settings';
+
 const { getComputedStyle } = window;
 
 const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
@@ -72,6 +80,79 @@ function BorderPanel( { borderRadius = '', setAttributes } ) {
 		</PanelBody>
 	);
 }
+const InlineURLPicker = withInstanceId(
+	function( { instanceId, isSelected, url, onChange } ) {
+		const linkId = `wp-block-button__inline-link-${ instanceId }`;
+		return (
+			<BaseControl
+				label={ __( 'Link' ) }
+				className="wp-block-button__inline-link"
+				id={ linkId }>
+				<URLInput
+					className="wp-block-button__inline-link-input"
+					value={ url }
+					/* eslint-disable jsx-a11y/no-autofocus */
+					// Disable Reason: The rule is meant to prevent enabling auto-focus, not disabling it.
+					autoFocus={ false }
+					/* eslint-enable jsx-a11y/no-autofocus */
+					onChange={ onChange }
+					disableSuggestions={ ! isSelected }
+					id={ linkId }
+					isFullWidth
+					hasBorder
+				/>
+			</BaseControl>
+		);
+	}
+);
+
+function PopoverURLPicker( { url, onChange } ) {
+	const [ urlInput, setUrlInput ] = useState( url || '' );
+	const [ isPopoverEnable, setIsPopoverEnable ] = useState( true );
+	const onSubmit = useCallback(
+		() => {
+			onChange( urlInput );
+			setIsPopoverEnable( false );
+		},
+		[ urlInput, onChange ]
+	);
+	if ( ! isPopoverEnable ) {
+		return null;
+	}
+	return (
+		<URLPopover focusOnMount={ false }>
+			<URLPopover.LinkEditor
+				className="editor-format-toolbar__link-container-content block-editor-format-toolbar__link-container-content"
+				value={ urlInput }
+				onChangeInputValue={ setUrlInput }
+				onSubmit={ onSubmit }
+			/>
+		</URLPopover>
+	);
+}
+
+function URLPicker( { isSelected, url, setAttributes } ) {
+	const onChange = useCallback(
+		( value ) => setAttributes( { url: value } ),
+		[ setAttributes ]
+	);
+	const { urlInPopover } = useContext( ButtonEditSettings );
+	if ( urlInPopover ) {
+		return isSelected ? (
+			<PopoverURLPicker
+				url={ url }
+				onChange={ onChange }
+			/>
+		) : null;
+	}
+	return (
+		<InlineURLPicker
+			url={ url }
+			isSelected={ isSelected }
+			onChange={ onChange }
+		/>
+	);
+}
 
 class ButtonEdit extends Component {
 	constructor() {
@@ -121,7 +202,6 @@ class ButtonEdit extends Component {
 			fallbackTextColor,
 			setAttributes,
 			className,
-			instanceId,
 			isSelected,
 		} = this.props;
 
@@ -135,8 +215,6 @@ class ButtonEdit extends Component {
 			url,
 		} = attributes;
 
-		const linkId = `wp-block-button__inline-link-${ instanceId }`;
-
 		return (
 			<div className={ className } title={ title } ref={ this.bindRef }>
 				<RichText
@@ -159,24 +237,11 @@ class ButtonEdit extends Component {
 						borderRadius: borderRadius ? borderRadius + 'px' : undefined,
 					} }
 				/>
-				<BaseControl
-					label={ __( 'Link' ) }
-					className="wp-block-button__inline-link"
-					id={ linkId }>
-					<URLInput
-						className="wp-block-button__inline-link-input"
-						value={ url }
-						/* eslint-disable jsx-a11y/no-autofocus */
-						// Disable Reason: The rule is meant to prevent enabling auto-focus, not disabling it.
-						autoFocus={ false }
-						/* eslint-enable jsx-a11y/no-autofocus */
-						onChange={ ( value ) => setAttributes( { url: value } ) }
-						disableSuggestions={ ! isSelected }
-						id={ linkId }
-						isFullWidth
-						hasBorder
-					/>
-				</BaseControl>
+				<URLPicker
+					url={ url }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+				/>
 				<InspectorControls>
 					<PanelColorSettings
 						title={ __( 'Color Settings' ) }
@@ -228,7 +293,6 @@ class ButtonEdit extends Component {
 }
 
 export default compose( [
-	withInstanceId,
 	withColors( 'backgroundColor', { textColor: 'color' } ),
 	applyFallbackStyles,
 ] )( ButtonEdit );
diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json
new file mode 100644
index 0000000000000..c6fd753dba932
--- /dev/null
+++ b/packages/block-library/src/buttons/block.json
@@ -0,0 +1,5 @@
+{
+	"name": "core/buttons",
+	"category": "layout",
+	"attributes": {}
+}
diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
new file mode 100644
index 0000000000000..5691c32aea5ff
--- /dev/null
+++ b/packages/block-library/src/buttons/edit.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { IconButton } from '@wordpress/components';
+import { InnerBlocks } from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
+import { useCallback } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { name as buttonBlockName } from '../button/';
+import { ButtonEditSettings } from '../button/edit-settings';
+
+const ALLOWED_BLOCKS = [ buttonBlockName ];
+const BUTTON_BLOCK_SETTINGS = { urlInPopover: true };
+
+function useInsertButton( clientId ) {
+	const { insertBlock } = useDispatch( 'core/block-editor' );
+	const insertButton = useCallback(
+		() => {
+			const buttonBlock = createBlock( buttonBlockName );
+			insertBlock( buttonBlock, undefined, clientId );
+		},
+		[ insertBlock, clientId ]
+	);
+	return useCallback(
+		() => {
+			return (
+				<IconButton
+					icon="insert"
+					label={ __( 'Add button' ) }
+					labelPosition="bottom"
+					onClick={ insertButton }
+				/>
+			);
+		},
+		[ insertButton ]
+	);
+}
+
+function ButtonsEdit( { clientId, className } ) {
+	const renderAppender = useInsertButton( clientId );
+	return (
+		<div className={ className }>
+			<ButtonEditSettings.Provider value={ BUTTON_BLOCK_SETTINGS }>
+				<InnerBlocks
+					allowedBlocks={ ALLOWED_BLOCKS }
+					renderAppender={ renderAppender }
+				/>
+			</ButtonEditSettings.Provider>
+		</div>
+	);
+}
+
+export default ButtonsEdit;
diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
new file mode 100644
index 0000000000000..4a0863abed14d
--- /dev/null
+++ b/packages/block-library/src/buttons/editor.scss
@@ -0,0 +1,80 @@
+.wp-block-buttons .block-editor-block-list__block[data-type="core/button"] {
+	display: inline-block;
+}
+
+
+.wp-block-buttons {
+	// 1. Reset margins on immediate innerblocks container.
+	> .block-editor-inner-blocks > .block-editor-block-list__layout {
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	// 2. Remove paddings on subsequent immediate children.
+	> .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
+		width: auto;
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	// 3. Remove margins on subsequent Edit container.
+	> .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit {
+		margin-left: 0;
+		margin-right: 0;
+	}
+
+	// 4. Hide the block outlines.
+	> .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit::before {
+		content: none;
+	}
+
+	// 5. Remove vertical margins on subsequent block container.
+	> .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit > [data-block] {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
+	// Hide the breadcrumb.
+	// Hide the mover.
+	.block-editor-block-list__breadcrumb,
+	.block-editor-block-mover.block-editor-block-mover { // Needs specificity.
+		display: none;
+	}
+
+	.block-editor-inserter {
+		display: none;
+	}
+
+	.block-editor-block-list__block[data-type="core/button"] .block-editor-block-alignment-toolbar {
+		display: none;
+	}
+
+	.wp-block-button .wp-block-button__link {
+		margin-top: 0;
+	}
+}
+
+.block-editor-block-list__block[data-type="core/buttons"] {
+	div[data-type="core/button"] div[data-block] {
+		display: block;
+	}
+
+	.block-editor-block-list__layout {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	&[data-align="center"] .block-editor-block-list__layout {
+		justify-content: center;
+	}
+
+	&[data-align="right"] .block-editor-block-list__layout {
+		justify-content: flex-end;
+	}
+
+	.block-list-appender {
+		display: inline-block !important;
+		margin: 0;
+	}
+}
diff --git a/packages/block-library/src/buttons/icon.js b/packages/block-library/src/buttons/icon.js
new file mode 100644
index 0000000000000..6e18a60a648fe
--- /dev/null
+++ b/packages/block-library/src/buttons/icon.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { G, Path, SVG } from '@wordpress/components';
+
+export default (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M19 6H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H5V8h14v8z" /></G></SVG>
+);
diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js
new file mode 100644
index 0000000000000..6a3ae48b99e56
--- /dev/null
+++ b/packages/block-library/src/buttons/index.js
@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import icon from './icon';
+import metadata from './block.json';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Buttons' ),
+	description: __( 'Prompt visitors to take action with a  group of button-style links.' ),
+	icon,
+	keywords: [ __( 'link' ) ],
+	supports: {
+		align: true,
+		alignWide: false,
+	},
+	edit,
+	save,
+};
diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js
new file mode 100644
index 0000000000000..91cb804231d05
--- /dev/null
+++ b/packages/block-library/src/buttons/save.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function save() {
+	return (
+		<div>
+			<InnerBlocks.Content />
+		</div>
+	);
+}
diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
new file mode 100644
index 0000000000000..47fb245ec0024
--- /dev/null
+++ b/packages/block-library/src/buttons/style.scss
@@ -0,0 +1,7 @@
+.wp-block-buttons .wp-block-button {
+	display: inline-block;
+	margin: $grid-size-small;
+}
+.wp-block-buttons.aligncenter {
+	text-align: center;
+}
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 7e8652b23a3bf..11a5cffdbf8b0 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -1,6 +1,7 @@
 @import "./archives/editor.scss";
 @import "./audio/editor.scss";
 @import "./button/editor.scss";
+@import "./buttons/editor.scss";
 @import "./categories/editor.scss";
 @import "./code/editor.scss";
 @import "./columns/editor.scss";
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index 67d460b4b4b40..a2a1d01d88dc7 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -23,6 +23,7 @@ import * as quote from './quote';
 import * as gallery from './gallery';
 import * as archives from './archives';
 import * as audio from './audio';
+import * as buttons from './buttons';
 import * as button from './button';
 import * as calendar from './calendar';
 import * as categories from './categories';
@@ -105,6 +106,7 @@ export const registerCoreBlocks = () => {
 		archives,
 		audio,
 		button,
+		buttons,
 		calendar,
 		categories,
 		code,
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index fd78fcc3b18d1..7105d0788de2b 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -1,5 +1,6 @@
 @import "./audio/style.scss";
 @import "./button/style.scss";
+@import "./buttons/style.scss";
 @import "./calendar/style.scss";
 @import "./categories/style.scss";
 @import "./columns/style.scss";
diff --git a/packages/e2e-tests/fixtures/block-transforms.js b/packages/e2e-tests/fixtures/block-transforms.js
index 1cfd913292dff..40c9817455946 100644
--- a/packages/e2e-tests/fixtures/block-transforms.js
+++ b/packages/e2e-tests/fixtures/block-transforms.js
@@ -30,6 +30,12 @@ export const EXPECTED_TRANSFORMS = {
 			'Group',
 		],
 	},
+	core__buttons: {
+		originalBlock: 'Buttons',
+		availableTransforms: [
+			'Group',
+		],
+	},
 	core__calendar: {
 		originalBlock: 'Calendar',
 		availableTransforms: [
diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.html b/packages/e2e-tests/fixtures/blocks/core__buttons.html
new file mode 100644
index 0000000000000..e70af7acc72ad
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__buttons.html
@@ -0,0 +1,11 @@
+<!-- wp:buttons -->
+<div class="wp-block-buttons">
+	<!-- wp:button -->
+	<div class="wp-block-button"><a class="wp-block-button__link">My button 1</a></div>
+	<!-- /wp:button -->
+
+	<!-- wp:button -->
+	<div class="wp-block-button"><a class="wp-block-button__link">My button 2</a></div>
+	<!-- /wp:button -->
+</div>
+<!-- /wp:buttons -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.json b/packages/e2e-tests/fixtures/blocks/core__buttons.json
new file mode 100644
index 0000000000000..044daeb82101a
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__buttons.json
@@ -0,0 +1,31 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/buttons",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [
+            {
+                "clientId": "_clientId_0",
+                "name": "core/button",
+                "isValid": true,
+                "attributes": {
+                    "text": "My button 1"
+                },
+                "innerBlocks": [],
+                "originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">My button 1</a></div>"
+            },
+            {
+                "clientId": "_clientId_1",
+                "name": "core/button",
+                "isValid": true,
+                "attributes": {
+                    "text": "My button 2"
+                },
+                "innerBlocks": [],
+                "originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">My button 2</a></div>"
+            }
+        ],
+        "originalContent": "<div class=\"wp-block-buttons\">\n\t\n\n\t\n</div>"
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.parsed.json b/packages/e2e-tests/fixtures/blocks/core__buttons.parsed.json
new file mode 100644
index 0000000000000..b96b1f50db1fc
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__buttons.parsed.json
@@ -0,0 +1,43 @@
+[
+    {
+        "blockName": "core/buttons",
+        "attrs": {},
+        "innerBlocks": [
+            {
+                "blockName": "core/button",
+                "attrs": {},
+                "innerBlocks": [],
+                "innerHTML": "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">My button 1</a></div>\n\t",
+                "innerContent": [
+                    "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">My button 1</a></div>\n\t"
+                ]
+            },
+            {
+                "blockName": "core/button",
+                "attrs": {},
+                "innerBlocks": [],
+                "innerHTML": "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">My button 2</a></div>\n\t",
+                "innerContent": [
+                    "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">My button 2</a></div>\n\t"
+                ]
+            }
+        ],
+        "innerHTML": "\n<div class=\"wp-block-buttons\">\n\t\n\n\t\n</div>\n",
+        "innerContent": [
+            "\n<div class=\"wp-block-buttons\">\n\t",
+            null,
+            "\n\n\t",
+            null,
+            "\n</div>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.serialized.html b/packages/e2e-tests/fixtures/blocks/core__buttons.serialized.html
new file mode 100644
index 0000000000000..baf0a0226c066
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__buttons.serialized.html
@@ -0,0 +1,9 @@
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link">My button 1</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link">My button 2</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->