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

---
 .../block-library/src/button/edit-settings.js |  11 ++
 packages/block-library/src/button/edit.js     | 156 ++++++++++++++++--
 packages/block-library/src/button/index.js    |   1 +
 packages/block-library/src/buttons/block.json |   5 +
 packages/block-library/src/buttons/edit.js    |  70 ++++++++
 .../block-library/src/buttons/editor.scss     |  31 ++++
 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 +
 .../blocks/__snapshots__/button.test.js.snap  |  13 --
 .../blocks/__snapshots__/buttons.test.js.snap |  21 +++
 .../{button.test.js => buttons.test.js}       |   9 +-
 21 files changed, 447 insertions(+), 30 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
 delete mode 100644 packages/e2e-tests/specs/editor/blocks/__snapshots__/button.test.js.snap
 create mode 100644 packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap
 rename packages/e2e-tests/specs/editor/blocks/{button.test.js => buttons.test.js} (75%)

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 3f00674f85d4d..64294019669e5 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { compact, partial } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -9,6 +10,9 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import {
 	useCallback,
+	useContext,
+	useMemo,
+	useState,
 } from '@wordpress/element';
 import {
 	compose,
@@ -19,17 +23,26 @@ import {
 	RangeControl,
 	TextControl,
 	ToggleControl,
+	Toolbar,
 	withFallbackStyles,
 } from '@wordpress/components';
 import {
 	__experimentalUseGradient,
+	BlockControls,
 	ContrastChecker,
 	InspectorControls,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
 	RichText,
 	URLInput,
+	URLPopover,
 	withColors,
 } from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { ButtonEditSettings } from './edit-settings';
 
 const { getComputedStyle } = window;
 
@@ -72,9 +85,134 @@ function BorderPanel( { borderRadius = '', setAttributes } ) {
 	);
 }
 
+function ToolbarMovers( { clientId } ) {
+	const {
+		parentID,
+		isFirst,
+		isLast,
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockIndex,
+				getBlockOrder,
+				getBlockRootClientId,
+			} = select( 'core/block-editor' );
+			const rootClientId = getBlockRootClientId( clientId );
+			const numberOfSiblings = getBlockOrder( rootClientId ).length;
+			const buttonIndex = getBlockIndex( clientId, rootClientId );
+			return {
+				parentID: rootClientId,
+				isFirst: buttonIndex === 0,
+				isLast: buttonIndex === ( numberOfSiblings - 1 ),
+			};
+		},
+		[ clientId ]
+	);
+	const { moveBlocksUp, moveBlocksDown } = useDispatch( 'core/block-editor' );
+	const moveUp = useCallback(
+		partial( moveBlocksUp, [ clientId ], parentID ),
+		[ moveBlocksUp, clientId, parentID ]
+	);
+	const moveDown = useCallback(
+		partial( moveBlocksDown, [ clientId ], parentID ),
+		[ moveBlocksDown, clientId, parentID ]
+	);
+	const toolbarControls = useMemo(
+		() => ( compact( [
+			isFirst ? null : {
+				icon: 'arrow-left-alt2',
+				title: __( 'Move left' ),
+				onClick: moveUp,
+			},
+			isLast ? null : {
+				icon: 'arrow-right-alt2',
+				title: __( 'Move right' ),
+				onClick: moveDown,
+			},
+		] ) ),
+		[ moveUp, moveDown, isFirst, isLast ]
+	);
+
+	return (
+		<BlockControls>
+			<Toolbar controls={ toolbarControls } />
+		</BlockControls>
+	);
+}
+
+const InlineURLPicker = withInstanceId(
+	function( { instanceId, isSelected, url, onChange } ) {
+		const linkId = `wp-block-button__inline-link-${ instanceId }`;
+		return (
+			<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
+			/>
+		);
+	}
+);
+
+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 }
+		/>
+	);
+}
+
 function ButtonEdit( {
 	attributes,
 	backgroundColor,
+	clientId,
 	textColor,
 	setBackgroundColor,
 	setTextColor,
@@ -150,18 +288,10 @@ function ButtonEdit( {
 					borderRadius: borderRadius ? borderRadius + 'px' : undefined,
 				} }
 			/>
-			<URLInput
-				label={ __( 'Link' ) }
-				className="wp-block-button__inline-link"
-				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 }
-				isFullWidth
-				hasBorder
+			<URLPicker
+				url={ url }
+				setAttributes={ setAttributes }
+				isSelected={ isSelected }
 			/>
 			<InspectorControls>
 				<PanelColorGradientSettings
@@ -210,12 +340,12 @@ function ButtonEdit( {
 					/>
 				</PanelBody>
 			</InspectorControls>
+			<ToolbarMovers clientId={ clientId } />
 		</div>
 	);
 }
 
 export default compose( [
-	withInstanceId,
 	withColors( 'backgroundColor', { textColor: 'color' } ),
 	applyFallbackStyles,
 ] )( ButtonEdit );
diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js
index 83a01deff0554..28c2e483ed114 100644
--- a/packages/block-library/src/button/index.js
+++ b/packages/block-library/src/button/index.js
@@ -32,6 +32,7 @@ export const settings = {
 		align: true,
 		alignWide: false,
 	},
+	parent: [ 'core/buttons' ],
 	styles: [
 		{ name: 'fill', label: __( 'Fill' ), isDefault: true },
 		{ name: 'outline', label: __( 'Outline' ) },
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..c27ed31f73ded
--- /dev/null
+++ b/packages/block-library/src/buttons/edit.js
@@ -0,0 +1,70 @@
+/**
+ * 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 };
+const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
+const UI_PARTS = {
+	hasSelectedUI: false,
+	hasFocusedUI: false,
+	hasHoveredUI: false,
+	hasBreadcrumbs: false,
+	hasMovers: false,
+	hasSpacing: false,
+	hasSideInserter: false,
+};
+
+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 }
+					template={ BUTTONS_TEMPLATE }
+					__experimentalUIParts={ UI_PARTS }
+				/>
+			</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..0870e7674095e
--- /dev/null
+++ b/packages/block-library/src/buttons/editor.scss
@@ -0,0 +1,31 @@
+.wp-block-buttons .wp-block.block-editor-block-list__block[data-type="core/button"] {
+	display: inline-block;
+	width: auto;
+}
+
+.wp-block-buttons {
+	div[data-type="core/button"] div[data-block] {
+		display: block;
+	}
+
+	&[data-align="center"] .block-editor-block-list__layout {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
+	&[data-align="right"] .block-editor-block-list__layout {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.block-list-appender {
+		display: inline-block !important;
+		margin: 0;
+	}
+
+	.block-editor-block-list__layout > div:last-child {
+		display: inline-block;
+	}
+}
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 719723db2e13b..80486c92d11e3 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -2,6 +2,7 @@
 @import "./audio/editor.scss";
 @import "./block/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 c9cc4378a5e39..15c200636626d 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';
@@ -111,6 +112,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 d6355fa439c9a..6a0547c9e2de9 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 380d8f86cdf4c..3677373fbeb30 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 -->
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/button.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/button.test.js.snap
deleted file mode 100644
index 82fca76a8fb04..0000000000000
--- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/button.test.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button can jump focus back & forth 1`] = `
-"<!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\" href=\\"https://wordpress.org\\">WordPress</a></div>
-<!-- /wp:button -->"
-`;
-
-exports[`Button has focus on button content 1`] = `
-"<!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">Content</a></div>
-<!-- /wp:button -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap
new file mode 100644
index 0000000000000..8aae5ee57c83c
--- /dev/null
+++ b/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Buttons can jump focus back & forth 1`] = `
+"<!-- wp:buttons -->
+<div class=\\"wp-block-buttons\\"><!-- wp:button -->
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">WordPress</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button -->
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">Button!</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->"
+`;
+
+exports[`Buttons has focus on button content 1`] = `
+"<!-- wp:buttons -->
+<div class=\\"wp-block-buttons\\"><!-- wp:button -->
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">Content</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->"
+`;
diff --git a/packages/e2e-tests/specs/editor/blocks/button.test.js b/packages/e2e-tests/specs/editor/blocks/buttons.test.js
similarity index 75%
rename from packages/e2e-tests/specs/editor/blocks/button.test.js
rename to packages/e2e-tests/specs/editor/blocks/buttons.test.js
index 69343633f4247..5ab4892bc44ca 100644
--- a/packages/e2e-tests/specs/editor/blocks/button.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/buttons.test.js
@@ -7,23 +7,24 @@ import {
 	createNewPost,
 } from '@wordpress/e2e-test-utils';
 
-describe( 'Button', () => {
+describe( 'Buttons', () => {
 	beforeEach( async () => {
 		await createNewPost();
 	} );
 
 	it( 'has focus on button content', async () => {
-		await insertBlock( 'Button' );
+		await insertBlock( 'Buttons' );
 		await page.keyboard.type( 'Content' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
 	it( 'can jump focus back & forth', async () => {
-		await insertBlock( 'Button' );
+		await insertBlock( 'Buttons' );
 		await page.keyboard.type( 'WordPress' );
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.type( 'https://wordpress.org' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( 'Button!' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );

From 483c7c177cebebd9d20aa6e813561e33e3398072 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Thu, 2 Jan 2020 16:39:41 +0000
Subject: [PATCH 2/5] Used LinkControl, Removed logic to insert block right
 away (it is not part of InnerBlocks), removed toolbar movers (they are now
 part of InnerBlocks)

---
 .../block-library/src/button/edit-settings.js |  11 --
 packages/block-library/src/button/edit.js     | 182 +++++-------------
 packages/block-library/src/buttons/edit.js    |  54 +-----
 .../block-library/src/buttons/editor.scss     |   5 +
 packages/block-library/src/buttons/index.js   |   2 +-
 5 files changed, 61 insertions(+), 193 deletions(-)
 delete mode 100644 packages/block-library/src/button/edit-settings.js

diff --git a/packages/block-library/src/button/edit-settings.js b/packages/block-library/src/button/edit-settings.js
deleted file mode 100644
index b7a978fb49432..0000000000000
--- a/packages/block-library/src/button/edit-settings.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * 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 64294019669e5..d1192014f0b35 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { compact, partial } from 'lodash';
+import { escape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -10,39 +10,34 @@ import { compact, partial } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import {
 	useCallback,
-	useContext,
-	useMemo,
-	useState,
 } from '@wordpress/element';
 import {
 	compose,
-	withInstanceId,
 } from '@wordpress/compose';
 import {
 	PanelBody,
 	RangeControl,
 	TextControl,
 	ToggleControl,
-	Toolbar,
 	withFallbackStyles,
 } from '@wordpress/components';
 import {
 	__experimentalUseGradient,
-	BlockControls,
 	ContrastChecker,
 	InspectorControls,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
 	RichText,
-	URLInput,
-	URLPopover,
 	withColors,
+	__experimentalLinkControl as LinkControl,
 } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { ButtonEditSettings } from './edit-settings';
+import {
+	LEFT,
+	RIGHT,
+	UP,
+	DOWN,
+	BACKSPACE,
+	ENTER,
+} from '@wordpress/keycodes';
 
 const { getComputedStyle } = window;
 
@@ -85,134 +80,51 @@ function BorderPanel( { borderRadius = '', setAttributes } ) {
 	);
 }
 
-function ToolbarMovers( { clientId } ) {
-	const {
-		parentID,
-		isFirst,
-		isLast,
-	} = useSelect(
-		( select ) => {
-			const {
-				getBlockIndex,
-				getBlockOrder,
-				getBlockRootClientId,
-			} = select( 'core/block-editor' );
-			const rootClientId = getBlockRootClientId( clientId );
-			const numberOfSiblings = getBlockOrder( rootClientId ).length;
-			const buttonIndex = getBlockIndex( clientId, rootClientId );
-			return {
-				parentID: rootClientId,
-				isFirst: buttonIndex === 0,
-				isLast: buttonIndex === ( numberOfSiblings - 1 ),
-			};
-		},
-		[ clientId ]
-	);
-	const { moveBlocksUp, moveBlocksDown } = useDispatch( 'core/block-editor' );
-	const moveUp = useCallback(
-		partial( moveBlocksUp, [ clientId ], parentID ),
-		[ moveBlocksUp, clientId, parentID ]
-	);
-	const moveDown = useCallback(
-		partial( moveBlocksDown, [ clientId ], parentID ),
-		[ moveBlocksDown, clientId, parentID ]
-	);
-	const toolbarControls = useMemo(
-		() => ( compact( [
-			isFirst ? null : {
-				icon: 'arrow-left-alt2',
-				title: __( 'Move left' ),
-				onClick: moveUp,
-			},
-			isLast ? null : {
-				icon: 'arrow-right-alt2',
-				title: __( 'Move right' ),
-				onClick: moveDown,
-			},
-		] ) ),
-		[ moveUp, moveDown, isFirst, isLast ]
-	);
+const handleLinkControlOnKeyDown = ( event ) => {
+	const { keyCode } = event;
 
-	return (
-		<BlockControls>
-			<Toolbar controls={ toolbarControls } />
-		</BlockControls>
-	);
-}
-
-const InlineURLPicker = withInstanceId(
-	function( { instanceId, isSelected, url, onChange } ) {
-		const linkId = `wp-block-button__inline-link-${ instanceId }`;
-		return (
-			<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
-			/>
-		);
+	if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( keyCode ) > -1 ) {
+		// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
+		event.stopPropagation();
 	}
-);
+};
 
-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>
-	);
-}
+const handleLinkControlOnKeyPress = ( event ) => {
+	event.stopPropagation();
+};
 
-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 }
+function URLPicker( { isSelected, url, title, setAttributes, opensInNewTab, onToggleOpenInNewTab } ) {
+	return isSelected ? (
+		<LinkControl
+			className="wp-block-navigation-link__inline-link-input"
+			onKeyDown={ handleLinkControlOnKeyDown }
+			onKeyPress={ handleLinkControlOnKeyPress }
+			currentLink={ ! url && ! title ? null : { url, title } }
+			onLinkChange={ ( { title: newTitle = '', url: newURL = '' } ) => {
+				setAttributes( {
+					title: escape( newTitle ),
+					url: newURL,
+				} );
+			} }
+			currentSettings={ [
+				{
+					id: 'opensInNewTab',
+					title: __( 'Open in new tab' ),
+					checked: opensInNewTab,
+				},
+			] }
+			onSettingsChange={ ( setting, value ) => {
+				if ( setting === 'opensInNewTab' ) {
+					onToggleOpenInNewTab( value );
+				}
+			} }
 		/>
-	);
+	) : null;
 }
 
 function ButtonEdit( {
 	attributes,
 	backgroundColor,
-	clientId,
 	textColor,
 	setBackgroundColor,
 	setTextColor,
@@ -289,9 +201,12 @@ function ButtonEdit( {
 				} }
 			/>
 			<URLPicker
+				title={ title }
 				url={ url }
 				setAttributes={ setAttributes }
 				isSelected={ isSelected }
+				opensInNewTab={ linkTarget === '_blank' }
+				onToggleOpenInNewTab={ onToggleOpenInNewTab }
 			/>
 			<InspectorControls>
 				<PanelColorGradientSettings
@@ -340,7 +255,6 @@ function ButtonEdit( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<ToolbarMovers clientId={ clientId } />
 		</div>
 	);
 }
diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
index c27ed31f73ded..217698921c16e 100644
--- a/packages/block-library/src/buttons/edit.js
+++ b/packages/block-library/src/buttons/edit.js
@@ -1,68 +1,28 @@
 /**
  * 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 };
 const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
 const UI_PARTS = {
 	hasSelectedUI: false,
-	hasFocusedUI: false,
-	hasHoveredUI: false,
-	hasBreadcrumbs: false,
-	hasMovers: false,
-	hasSpacing: false,
-	hasSideInserter: false,
 };
 
-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 );
+function ButtonsEdit( { className } ) {
 	return (
 		<div className={ className }>
-			<ButtonEditSettings.Provider value={ BUTTON_BLOCK_SETTINGS }>
-				<InnerBlocks
-					allowedBlocks={ ALLOWED_BLOCKS }
-					renderAppender={ renderAppender }
-					template={ BUTTONS_TEMPLATE }
-					__experimentalUIParts={ UI_PARTS }
-				/>
-			</ButtonEditSettings.Provider>
+			<InnerBlocks
+				allowedBlocks={ ALLOWED_BLOCKS }
+				template={ BUTTONS_TEMPLATE }
+				__experimentalUIParts={ UI_PARTS }
+				__experimentalMoverDirection={ 'horizontal' }
+			/>
 		</div>
 	);
 }
diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
index 0870e7674095e..fe8ca07d4ad6b 100644
--- a/packages/block-library/src/buttons/editor.scss
+++ b/packages/block-library/src/buttons/editor.scss
@@ -28,4 +28,9 @@
 	.block-editor-block-list__layout > div:last-child {
 		display: inline-block;
 	}
+
+	.block-editor-button-block-appender {
+		background: none;
+		outline: none;
+	}
 }
diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js
index 6a3ae48b99e56..5bc16c94b1536 100644
--- a/packages/block-library/src/buttons/index.js
+++ b/packages/block-library/src/buttons/index.js
@@ -17,7 +17,7 @@ export { metadata, name };
 
 export const settings = {
 	title: __( 'Buttons' ),
-	description: __( 'Prompt visitors to take action with a  group of button-style links.' ),
+	description: __( 'Prompt visitors to take action with a group of button-style links.' ),
 	icon,
 	keywords: [ __( 'link' ) ],
 	supports: {

From d03c51cb5938f2634016ce4e2151ad9fd5d2e08e Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Thu, 2 Jan 2020 18:34:36 +0000
Subject: [PATCH 3/5] Make UX closer to navigation block

---
 packages/block-library/src/button/edit.js | 49 ++++++++++++++++++++++-
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index d1192014f0b35..fbf2510a06bed 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -10,18 +10,24 @@ import { escape } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import {
 	useCallback,
+	useEffect,
+	useState,
 } from '@wordpress/element';
 import {
 	compose,
 } from '@wordpress/compose';
 import {
+	KeyboardShortcuts,
 	PanelBody,
 	RangeControl,
 	TextControl,
 	ToggleControl,
 	withFallbackStyles,
+	ToolbarButton,
+	ToolbarGroup,
 } from '@wordpress/components';
 import {
+	BlockControls,
 	__experimentalUseGradient,
 	ContrastChecker,
 	InspectorControls,
@@ -37,6 +43,8 @@ import {
 	DOWN,
 	BACKSPACE,
 	ENTER,
+	rawShortcut,
+	displayShortcut,
 } from '@wordpress/keycodes';
 
 const { getComputedStyle } = window;
@@ -94,7 +102,19 @@ const handleLinkControlOnKeyPress = ( event ) => {
 };
 
 function URLPicker( { isSelected, url, title, setAttributes, opensInNewTab, onToggleOpenInNewTab } ) {
-	return isSelected ? (
+	const [ isURLPickerOpen, setIsURLPickerOpen ] = useState( false );
+	useEffect(
+		() => {
+			if ( ! isSelected ) {
+				setIsURLPickerOpen( false );
+			}
+		},
+		[ isSelected ]
+	);
+	const openLinkControl = () => {
+		setIsURLPickerOpen( true );
+	};
+	const linkControl = isURLPickerOpen && (
 		<LinkControl
 			className="wp-block-navigation-link__inline-link-input"
 			onKeyDown={ handleLinkControlOnKeyDown }
@@ -118,8 +138,33 @@ function URLPicker( { isSelected, url, title, setAttributes, opensInNewTab, onTo
 					onToggleOpenInNewTab( value );
 				}
 			} }
+			onClose={ () => {
+				setIsURLPickerOpen( false );
+			} }
 		/>
-	) : null;
+	);
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<KeyboardShortcuts
+						bindGlobal
+						shortcuts={ {
+							[ rawShortcut.primary( 'k' ) ]: openLinkControl,
+						} }
+					/>
+					<ToolbarButton
+						name="link"
+						icon="admin-links"
+						title={ __( 'Link' ) }
+						shortcut={ displayShortcut.primary( 'k' ) }
+						onClick={ openLinkControl }
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+			{ linkControl }
+		</>
+	);
 }
 
 function ButtonEdit( {

From 6d0cfbc231169efdc59a401e5f7708897006ecb6 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Thu, 2 Jan 2020 21:05:22 +0000
Subject: [PATCH 4/5] Update tests

---
 packages/block-library/src/button/edit.js            | 12 ++++++------
 .../editor/blocks/__snapshots__/buttons.test.js.snap |  6 +-----
 .../e2e-tests/specs/editor/blocks/buttons.test.js    |  7 ++++---
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index fbf2510a06bed..927308b6a9d02 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -147,12 +147,6 @@ function URLPicker( { isSelected, url, title, setAttributes, opensInNewTab, onTo
 		<>
 			<BlockControls>
 				<ToolbarGroup>
-					<KeyboardShortcuts
-						bindGlobal
-						shortcuts={ {
-							[ rawShortcut.primary( 'k' ) ]: openLinkControl,
-						} }
-					/>
 					<ToolbarButton
 						name="link"
 						icon="admin-links"
@@ -162,6 +156,12 @@ function URLPicker( { isSelected, url, title, setAttributes, opensInNewTab, onTo
 					/>
 				</ToolbarGroup>
 			</BlockControls>
+			<KeyboardShortcuts
+				bindGlobal
+				shortcuts={ {
+					[ rawShortcut.primary( 'k' ) ]: openLinkControl,
+				} }
+			/>
 			{ linkControl }
 		</>
 	);
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap
index 8aae5ee57c83c..4b27f486f66f1 100644
--- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap
+++ b/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap
@@ -1,13 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Buttons can jump focus back & forth 1`] = `
+exports[`Buttons can jump to the link editor using the keyboard shortcut 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
 <div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">WordPress</a></div>
-<!-- /wp:button -->
-
-<!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">Button!</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
diff --git a/packages/e2e-tests/specs/editor/blocks/buttons.test.js b/packages/e2e-tests/specs/editor/blocks/buttons.test.js
index 5ab4892bc44ca..a7b97bc18a9fa 100644
--- a/packages/e2e-tests/specs/editor/blocks/buttons.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/buttons.test.js
@@ -5,6 +5,7 @@ import {
 	insertBlock,
 	getEditedPostContent,
 	createNewPost,
+	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Buttons', () => {
@@ -19,12 +20,12 @@ describe( 'Buttons', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
-	it( 'can jump focus back & forth', async () => {
+	it( 'can jump to the link editor using the keyboard shortcut', async () => {
 		await insertBlock( 'Buttons' );
 		await page.keyboard.type( 'WordPress' );
-		await page.keyboard.press( 'Tab' );
+		await pressKeyWithModifier( 'primary', 'k' );
+		await page.keyboard.type( 'https://wwww.wordpress.org/' );
 		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Button!' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );

From 9b44f75b5f7f12e987a9efffc7fa7c62f96e8748 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Fri, 3 Jan 2020 11:13:52 +0000
Subject: [PATCH 5/5] Use jsx string for property

---
 packages/block-library/src/buttons/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
index 217698921c16e..390bd687b09e8 100644
--- a/packages/block-library/src/buttons/edit.js
+++ b/packages/block-library/src/buttons/edit.js
@@ -21,7 +21,7 @@ function ButtonsEdit( { className } ) {
 				allowedBlocks={ ALLOWED_BLOCKS }
 				template={ BUTTONS_TEMPLATE }
 				__experimentalUIParts={ UI_PARTS }
-				__experimentalMoverDirection={ 'horizontal' }
+				__experimentalMoverDirection="horizontal"
 			/>
 		</div>
 	);