From 165c2405d6588534161f287910c51b3b36c58c81 Mon Sep 17 00:00:00 2001
From: Zebulan Stanphill <zebulanstanphill@protonmail.com>
Date: Thu, 24 Sep 2020 23:12:48 -0500
Subject: [PATCH 1/5] Buttons block: overhaul alignment/justification controls.

---
 lib/patterns/two-buttons.php                  |  2 +-
 packages/block-library/src/buttons/block.json |  8 +-
 .../buttons/content-justification-dropdown.js | 70 +++++++++++++++
 .../block-library/src/buttons/deprecated.js   | 38 ++++++++
 packages/block-library/src/buttons/edit.js    | 46 ++++++++--
 .../block-library/src/buttons/editor.scss     |  3 +-
 packages/block-library/src/buttons/icons.js   | 37 ++++++++
 packages/block-library/src/buttons/index.js   |  2 +
 packages/block-library/src/buttons/save.js    | 15 +++-
 packages/block-library/src/buttons/style.scss | 86 +++++++++++++------
 .../fixtures/blocks/core__buttons.html        |  4 +-
 .../fixtures/blocks/core__buttons.json        |  7 +-
 .../fixtures/blocks/core__buttons.parsed.json |  9 +-
 .../blocks/core__buttons.serialized.html      |  4 +-
 .../blocks/core__buttons__deprecated-1.html   | 11 +++
 .../blocks/core__buttons__deprecated-1.json   | 33 +++++++
 .../core__buttons__deprecated-1.parsed.json   | 45 ++++++++++
 ...ore__buttons__deprecated-1.serialized.html |  9 ++
 .../adding-patterns.test.js.snap              |  4 +-
 19 files changed, 384 insertions(+), 49 deletions(-)
 create mode 100644 packages/block-library/src/buttons/content-justification-dropdown.js
 create mode 100644 packages/block-library/src/buttons/deprecated.js
 create mode 100644 packages/block-library/src/buttons/icons.js
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__buttons__deprecated-1.html
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__buttons__deprecated-1.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__buttons__deprecated-1.parsed.json
 create mode 100644 packages/e2e-tests/fixtures/blocks/core__buttons__deprecated-1.serialized.html

diff --git a/lib/patterns/two-buttons.php b/lib/patterns/two-buttons.php
index 90564c4c30487..8cd24997ce20e 100644
--- a/lib/patterns/two-buttons.php
+++ b/lib/patterns/two-buttons.php
@@ -7,7 +7,7 @@
 
 return array(
 	'title'         => __( 'Two buttons', 'gutenberg' ),
-	'content'       => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"borderRadius\":2,\"style\":{\"color\":{\"background\":\"#ba0c49\",\"text\":\"#fffffa\"}}} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:2px;background-color:#ba0c49;color:#fffffa\">" . __( 'Download now', 'gutenberg' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"borderRadius\":2,\"style\":{\"color\":{\"text\":\"#ba0c49\"}},\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color\" style=\"border-radius:2px;color:#ba0c49\">" . __( 'About Cervantes', 'gutenberg' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
+	'content'       => "<!-- wp:buttons {\"contentJustification\":\"center\"} -->\n<div class=\"wp-block-buttons is-content-justification-center\"><!-- wp:button {\"borderRadius\":2,\"style\":{\"color\":{\"background\":\"#ba0c49\",\"text\":\"#fffffa\"}}} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:2px;background-color:#ba0c49;color:#fffffa\">" . __( 'Download now', 'gutenberg' ) . "</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"borderRadius\":2,\"style\":{\"color\":{\"text\":\"#ba0c49\"}},\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color\" style=\"border-radius:2px;color:#ba0c49\">" . __( 'About Cervantes', 'gutenberg' ) . "</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
 	'viewportWidth' => 500,
 	'categories'    => array( 'buttons' ),
 	'description'   => _x( 'Two buttons, one filled and one outlined, side by side.', 'Block pattern description', 'gutenberg' ),
diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json
index a1e4c33c2ed3e..b534316ce8f97 100644
--- a/packages/block-library/src/buttons/block.json
+++ b/packages/block-library/src/buttons/block.json
@@ -2,9 +2,13 @@
 	"apiVersion": 2,
 	"name": "core/buttons",
 	"category": "design",
+	"attributes": {
+		"contentJustification": {
+			"type": "string"
+		}
+	},
 	"supports": {
 		"anchor": true,
-		"align": true,
-		"alignWide": false
+		"align": [ "wide", "full" ]
 	}
 }
diff --git a/packages/block-library/src/buttons/content-justification-dropdown.js b/packages/block-library/src/buttons/content-justification-dropdown.js
new file mode 100644
index 0000000000000..56c9bef7955ba
--- /dev/null
+++ b/packages/block-library/src/buttons/content-justification-dropdown.js
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { DropdownMenu } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { justifyCenterIcon, justifyLeftIcon, justifyRightIcon } from './icons';
+
+const DEFAULT_ALLOWED_VALUES = [ 'left', 'center', 'right' ];
+
+const CONTROLS = {
+	left: {
+		icon: justifyLeftIcon,
+		title: __( 'Justify items left' ),
+	},
+	center: {
+		icon: justifyCenterIcon,
+		title: __( 'Justify items center' ),
+	},
+	right: {
+		icon: justifyRightIcon,
+		title: __( 'Justify items right' ),
+	},
+};
+
+const DEFAULT_ICON = CONTROLS.center.icon;
+
+/**
+ * Dropdown for selecting a content justification option.
+ *
+ * @param {Object}   props                 Component props.
+ * @param {string[]} [props.allowedValues] List of options to include. Default:
+ *                                         ['left', 'center', 'right'].
+ * @param {()=>void} props.onChange        Callback to run when an option is
+ *                                         selected in the dropdown.
+ * @param {Object}   props.toggleProps     Props to pass to the dropdown toggle.
+ * @param {string}   props.value           The current content justification
+ *                                         value.
+ *
+ * @return {WPComponent} The component.
+ */
+export default function ContentJustificationDropdown( {
+	onChange,
+	allowedValues = DEFAULT_ALLOWED_VALUES,
+	toggleProps,
+	value,
+} ) {
+	function applyOrUnset( align ) {
+		return () => onChange( value === align ? undefined : align );
+	}
+
+	return (
+		<DropdownMenu
+			icon={ CONTROLS[ value ]?.icon ?? DEFAULT_ICON }
+			label={ __( 'Change content justification' ) }
+			controls={ allowedValues.map( ( allowedValue ) => {
+				return {
+					...CONTROLS[ allowedValue ],
+					isActive: value === allowedValue,
+					role: 'menuitemradio',
+					onClick: applyOrUnset( allowedValue ),
+				};
+			} ) }
+			toggleProps={ toggleProps }
+		/>
+	);
+}
diff --git a/packages/block-library/src/buttons/deprecated.js b/packages/block-library/src/buttons/deprecated.js
new file mode 100644
index 0000000000000..47d049578ea58
--- /dev/null
+++ b/packages/block-library/src/buttons/deprecated.js
@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+const deprecated = [
+	{
+		supports: {
+			align: [ 'center', 'left', 'right' ],
+			anchor: true,
+		},
+		save() {
+			return (
+				<div>
+					<InnerBlocks.Content />
+				</div>
+			);
+		},
+		isEligible( { align } ) {
+			return align && [ 'center', 'left', 'right' ].includes( align );
+		},
+		migrate( attributes ) {
+			return {
+				...attributes,
+				align: undefined,
+				// Floating Buttons blocks shouldn't have been supported in the
+				// first place. Most users using them probably expected them to
+				// act like content justification controls, so these blocks are
+				// migrated to use content justification.
+				// As for center-aligned Buttons blocks, the content justification
+				// equivalent will create an identical end result in most cases.
+				contentJustification: attributes.align,
+			};
+		},
+	},
+];
+
+export default deprecated;
diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
index 5e1abc01582a0..a77f1bf335fd5 100644
--- a/packages/block-library/src/buttons/edit.js
+++ b/packages/block-library/src/buttons/edit.js
@@ -1,21 +1,36 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import {
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	BlockControls,
 	useBlockProps,
+	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 } from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { name as buttonBlockName } from '../button/';
+import { name as buttonBlockName } from '../button';
+import ContentJustificationDropdown from './content-justification-dropdown';
 
 const ALLOWED_BLOCKS = [ buttonBlockName ];
 const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
 
-function ButtonsEdit() {
-	const blockProps = useBlockProps();
+function ButtonsEdit( {
+	attributes: { contentJustification },
+	setAttributes,
+} ) {
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `is-content-justification-${ contentJustification }` ]: contentJustification,
+		} ),
+	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
 		template: BUTTONS_TEMPLATE,
@@ -25,7 +40,28 @@ function ButtonsEdit() {
 			alignments: [],
 		},
 	} );
-	return <div { ...innerBlocksProps } />;
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarItem>
+						{ ( toggleProps ) => (
+							<ContentJustificationDropdown
+								toggleProps={ toggleProps }
+								value={ contentJustification }
+								onChange={ ( updatedValue ) => {
+									setAttributes( {
+										contentJustification: updatedValue,
+									} );
+								} }
+							/>
+						) }
+					</ToolbarItem>
+				</ToolbarGroup>
+			</BlockControls>
+			<div { ...innerBlocksProps } />
+		</>
+	);
 }
 
 export default ButtonsEdit;
diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
index 121ba5f5af5cf..d10bedb1318ec 100644
--- a/packages/block-library/src/buttons/editor.scss
+++ b/packages/block-library/src/buttons/editor.scss
@@ -16,5 +16,6 @@
 }
 
 .wp-block-buttons > .block-list-appender {
-	display: inline-block;
+	display: inline-flex;
+	align-items: center;
 }
diff --git a/packages/block-library/src/buttons/icons.js b/packages/block-library/src/buttons/icons.js
new file mode 100644
index 0000000000000..b18ef92f2a306
--- /dev/null
+++ b/packages/block-library/src/buttons/icons.js
@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export const justifyLeftIcon = (
+	<SVG
+		width="20"
+		height="20"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+	>
+		<Path d="M11 16v-3h10v-2H11V8l-4 4 4 4zM5 4H3v16h2V4z" />
+	</SVG>
+);
+
+export const justifyCenterIcon = (
+	<SVG
+		width="20"
+		height="20"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+	>
+		<Path d="M5 8v3H1v2h4v3l4-4-4-4zm14 8v-3h4v-2h-4V8l-4 4 4 4zM13 4h-2v16h2V4z" />
+	</SVG>
+);
+
+export const justifyRightIcon = (
+	<SVG
+		width="20"
+		height="20"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+	>
+		<Path d="M13 8v3H3v2h10v3l4-4-4-4zm8-4h-2v16h2V4z" />
+	</SVG>
+);
diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js
index a9070759325a2..81653d1e12d68 100644
--- a/packages/block-library/src/buttons/index.js
+++ b/packages/block-library/src/buttons/index.js
@@ -7,6 +7,7 @@ import { button as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import deprecated from './deprecated';
 import transforms from './transforms';
 import edit from './edit';
 import metadata from './block.json';
@@ -35,6 +36,7 @@ export const settings = {
 			},
 		],
 	},
+	deprecated,
 	transforms,
 	edit,
 	save,
diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js
index 000acdcd4a605..5c64fc110e0d5 100644
--- a/packages/block-library/src/buttons/save.js
+++ b/packages/block-library/src/buttons/save.js
@@ -1,11 +1,22 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-export default function save() {
+export default function save( { attributes: { contentJustification } } ) {
 	return (
-		<div { ...useBlockProps.save() }>
+		<div
+			{ ...useBlockProps.save( {
+				className: classnames( {
+					[ `is-content-justification-${ contentJustification }` ]: contentJustification,
+				} ),
+			} ) }
+		>
 			<InnerBlocks.Content />
 		</div>
 	);
diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
index 45a0d6aed21b1..324e3e3c5addd 100644
--- a/packages/block-library/src/buttons/style.scss
+++ b/packages/block-library/src/buttons/style.scss
@@ -1,37 +1,69 @@
-// Increased specificity to override blocks default margin.
-.wp-block-buttons .wp-block-button {
-	display: inline-block;
-	margin-right: 0.5em;
-	margin-bottom: 0.5em;
+.wp-block-buttons {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
 
-	&:last-child {
-		margin-right: 0;
+	// Increased specificity to override blocks default margin.
+	> .wp-block-button {
+		display: inline-block;
+		/*rtl:ignore*/
+		margin-right: 0.5em;
+		margin-bottom: 0.5em;
+
+		&:last-child {
+			/*rtl:ignore*/
+			margin-right: 0;
+		}
 	}
-}
 
-.wp-block-buttons.alignright .wp-block-button {
-	/*rtl:ignore*/
-	margin-right: 0;
-	/*rtl:ignore*/
-	margin-left: 0.5em;
+	&.is-content-justification-left {
+		justify-content: flex-start;
+	}
 
-	&:first-child {
-		margin-left: 0;
+	&.is-content-justification-center {
+		justify-content: center;
 	}
-}
 
-.wp-block-buttons.alignleft .wp-block-button {
-	/*rtl:ignore*/
-	margin-left: 0;
-	/*rtl:ignore*/
-	margin-right: 0.5em;
+	&.is-content-justification-right {
+		justify-content: flex-end;
 
-	&:last-child {
-		margin-right: 0;
+		> .wp-block-button {
+			/*rtl:ignore*/
+			margin-left: 0.5em;
+			/*rtl:ignore*/
+			margin-right: 0;
+
+			&:first-child {
+				/*rtl:ignore*/
+				margin-left: 0;
+			}
+		}
 	}
-}
 
-.wp-block-button.aligncenter, // This is to support the legacy Button block.
-.wp-block-buttons.aligncenter {
-	text-align: center;
+	// Kept for backward compatibiity.
+	&.aligncenter {
+		text-align: center;
+	}
+	&.alignleft .wp-block-button {
+		/*rtl:ignore*/
+		margin-left: 0;
+		/*rtl:ignore*/
+		margin-right: 0.5em;
+
+		&:last-child {
+			/*rtl:ignore*/
+			margin-right: 0;
+		}
+	}
+	&.alignright .wp-block-button {
+		/*rtl:ignore*/
+		margin-right: 0;
+		/*rtl:ignore*/
+		margin-left: 0.5em;
+
+		&:first-child {
+			/*rtl:ignore*/
+			margin-left: 0;
+		}
+	}
 }
diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.html b/packages/e2e-tests/fixtures/blocks/core__buttons.html
index e70af7acc72ad..c6cc0e3bf76c2 100644
--- a/packages/e2e-tests/fixtures/blocks/core__buttons.html
+++ b/packages/e2e-tests/fixtures/blocks/core__buttons.html
@@ -1,5 +1,5 @@
-<!-- wp:buttons -->
-<div class="wp-block-buttons">
+<!-- wp:buttons {"align":"wide","contentJustification":"center"} -->
+<div class="wp-block-buttons alignwide is-content-justification-center">
 	<!-- wp:button -->
 	<div class="wp-block-button"><a class="wp-block-button__link">My button 1</a></div>
 	<!-- /wp:button -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.json b/packages/e2e-tests/fixtures/blocks/core__buttons.json
index 044daeb82101a..29df40b187fd3 100644
--- a/packages/e2e-tests/fixtures/blocks/core__buttons.json
+++ b/packages/e2e-tests/fixtures/blocks/core__buttons.json
@@ -3,7 +3,10 @@
         "clientId": "_clientId_0",
         "name": "core/buttons",
         "isValid": true,
-        "attributes": {},
+        "attributes": {
+            "contentJustification": "center",
+            "align": "wide"
+        },
         "innerBlocks": [
             {
                 "clientId": "_clientId_0",
@@ -26,6 +29,6 @@
                 "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>"
+        "originalContent": "<div class=\"wp-block-buttons alignwide is-content-justification-center\">\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
index b96b1f50db1fc..06f7ac796e189 100644
--- a/packages/e2e-tests/fixtures/blocks/core__buttons.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__buttons.parsed.json
@@ -1,7 +1,10 @@
 [
     {
         "blockName": "core/buttons",
-        "attrs": {},
+        "attrs": {
+            "align": "wide",
+            "contentJustification": "center"
+        },
         "innerBlocks": [
             {
                 "blockName": "core/button",
@@ -22,9 +25,9 @@
                 ]
             }
         ],
-        "innerHTML": "\n<div class=\"wp-block-buttons\">\n\t\n\n\t\n</div>\n",
+        "innerHTML": "\n<div class=\"wp-block-buttons alignwide is-content-justification-center\">\n\t\n\n\t\n</div>\n",
         "innerContent": [
-            "\n<div class=\"wp-block-buttons\">\n\t",
+            "\n<div class=\"wp-block-buttons alignwide is-content-justification-center\">\n\t",
             null,
             "\n\n\t",
             null,
diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.serialized.html b/packages/e2e-tests/fixtures/blocks/core__buttons.serialized.html
index baf0a0226c066..34141befc4da2 100644
--- a/packages/e2e-tests/fixtures/blocks/core__buttons.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__buttons.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button -->
+<!-- wp:buttons {"contentJustification":"center","align":"wide"} -->
+<div class="wp-block-buttons alignwide is-content-justification-center"><!-- wp:button -->
 <div class="wp-block-button"><a class="wp-block-button__link">My button 1</a></div>
 <!-- /wp:button -->
 
diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated-1.html b/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated-1.html
new file mode 100644
index 0000000000000..29411d5421587
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated-1.html
@@ -0,0 +1,11 @@
+<!-- wp:buttons {"align":"center"} -->
+<div class="wp-block-buttons aligncenter">
+	<!-- 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__deprecated-1.json b/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated-1.json
new file mode 100644
index 0000000000000..12acc3c2acca8
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated-1.json
@@ -0,0 +1,33 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/buttons",
+        "isValid": true,
+        "attributes": {
+            "contentJustification": "center"
+        },
+        "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 aligncenter\">\n\t\n\n\t\n</div>"
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated-1.parsed.json b/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated-1.parsed.json
new file mode 100644
index 0000000000000..6e9acab313242
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated-1.parsed.json
@@ -0,0 +1,45 @@
+[
+    {
+        "blockName": "core/buttons",
+        "attrs": {
+            "align": "center"
+        },
+        "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 aligncenter\">\n\t\n\n\t\n</div>\n",
+        "innerContent": [
+            "\n<div class=\"wp-block-buttons aligncenter\">\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__deprecated-1.serialized.html b/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated-1.serialized.html
new file mode 100644
index 0000000000000..b311167cbfed0
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated-1.serialized.html
@@ -0,0 +1,9 @@
+<!-- wp:buttons {"contentJustification":"center"} -->
+<div class="wp-block-buttons is-content-justification-center"><!-- 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/various/__snapshots__/adding-patterns.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap
index bf3dee614c9c7..d3894f3030d37 100644
--- a/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap
+++ b/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`adding patterns should insert a block pattern 1`] = `
-"<!-- wp:buttons {\\"align\\":\\"center\\"} -->
-<div class=\\"wp-block-buttons aligncenter\\"><!-- wp:button {\\"borderRadius\\":2,\\"style\\":{\\"color\\":{\\"background\\":\\"#ba0c49\\",\\"text\\":\\"#fffffa\\"}}} -->
+"<!-- wp:buttons {\\"contentJustification\\":\\"center\\"} -->
+<div class=\\"wp-block-buttons is-content-justification-center\\"><!-- wp:button {\\"borderRadius\\":2,\\"style\\":{\\"color\\":{\\"background\\":\\"#ba0c49\\",\\"text\\":\\"#fffffa\\"}}} -->
 <div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link has-text-color has-background\\" style=\\"border-radius:2px;background-color:#ba0c49;color:#fffffa\\">Download now</a></div>
 <!-- /wp:button -->
 

From b7bf3c1658792925dc7c5b51ea43d952d5bb2f2a Mon Sep 17 00:00:00 2001
From: Zebulan Stanphill <zebulanstanphill@protonmail.com>
Date: Thu, 8 Oct 2020 20:06:47 -0500
Subject: [PATCH 2/5] Make icon names consistent with CSS terminology.

---
 .../src/buttons/content-justification-dropdown.js    | 12 ++++++++----
 packages/block-library/src/buttons/icons.js          |  6 +++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/buttons/content-justification-dropdown.js b/packages/block-library/src/buttons/content-justification-dropdown.js
index 56c9bef7955ba..fac7893d694c0 100644
--- a/packages/block-library/src/buttons/content-justification-dropdown.js
+++ b/packages/block-library/src/buttons/content-justification-dropdown.js
@@ -7,21 +7,25 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { justifyCenterIcon, justifyLeftIcon, justifyRightIcon } from './icons';
+import {
+	contentJustificationCenterIcon,
+	contentJustificationLeftIcon,
+	contentJustificationRightIcon,
+} from './icons';
 
 const DEFAULT_ALLOWED_VALUES = [ 'left', 'center', 'right' ];
 
 const CONTROLS = {
 	left: {
-		icon: justifyLeftIcon,
+		icon: contentJustificationLeftIcon,
 		title: __( 'Justify items left' ),
 	},
 	center: {
-		icon: justifyCenterIcon,
+		icon: contentJustificationCenterIcon,
 		title: __( 'Justify items center' ),
 	},
 	right: {
-		icon: justifyRightIcon,
+		icon: contentJustificationRightIcon,
 		title: __( 'Justify items right' ),
 	},
 };
diff --git a/packages/block-library/src/buttons/icons.js b/packages/block-library/src/buttons/icons.js
index b18ef92f2a306..38378b3afaa32 100644
--- a/packages/block-library/src/buttons/icons.js
+++ b/packages/block-library/src/buttons/icons.js
@@ -3,7 +3,7 @@
  */
 import { Path, SVG } from '@wordpress/components';
 
-export const justifyLeftIcon = (
+export const contentJustificationLeftIcon = (
 	<SVG
 		width="20"
 		height="20"
@@ -14,7 +14,7 @@ export const justifyLeftIcon = (
 	</SVG>
 );
 
-export const justifyCenterIcon = (
+export const contentJustificationCenterIcon = (
 	<SVG
 		width="20"
 		height="20"
@@ -25,7 +25,7 @@ export const justifyCenterIcon = (
 	</SVG>
 );
 
-export const justifyRightIcon = (
+export const contentJustificationRightIcon = (
 	<SVG
 		width="20"
 		height="20"

From 0e25493d804463e33b0e502a5dd126d20294e2ab Mon Sep 17 00:00:00 2001
From: Zebulan Stanphill <zebulanstanphill@protonmail.com>
Date: Thu, 8 Oct 2020 20:12:45 -0500
Subject: [PATCH 3/5] Move onClick function inline.

---
 .../src/buttons/content-justification-dropdown.js        | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/buttons/content-justification-dropdown.js b/packages/block-library/src/buttons/content-justification-dropdown.js
index fac7893d694c0..8437340fbfc42 100644
--- a/packages/block-library/src/buttons/content-justification-dropdown.js
+++ b/packages/block-library/src/buttons/content-justification-dropdown.js
@@ -52,10 +52,6 @@ export default function ContentJustificationDropdown( {
 	toggleProps,
 	value,
 } ) {
-	function applyOrUnset( align ) {
-		return () => onChange( value === align ? undefined : align );
-	}
-
 	return (
 		<DropdownMenu
 			icon={ CONTROLS[ value ]?.icon ?? DEFAULT_ICON }
@@ -65,7 +61,10 @@ export default function ContentJustificationDropdown( {
 					...CONTROLS[ allowedValue ],
 					isActive: value === allowedValue,
 					role: 'menuitemradio',
-					onClick: applyOrUnset( allowedValue ),
+					onClick: () =>
+						onChange(
+							value === allowedValue ? undefined : allowedValue
+						),
 				};
 			} ) }
 			toggleProps={ toggleProps }

From b77c411db447c7a724d6c691d119fb10b12b7202 Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Sat, 17 Oct 2020 06:14:01 +0200
Subject: [PATCH 4/5] Mobile - Buttons block - Support content justification
 and ContentJustificationDropdown (#26166)

---
 .../block-library/src/buttons/edit.native.js  | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js
index 7c35a762935c9..b190907b7b1ee 100644
--- a/packages/block-library/src/buttons/edit.native.js
+++ b/packages/block-library/src/buttons/edit.native.js
@@ -7,25 +7,28 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { BlockControls, InnerBlocks } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import { useResizeObserver } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useEffect, useRef } from '@wordpress/element';
+import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { name as buttonBlockName } from '../button/';
 import styles from './editor.scss';
+import ContentJustificationDropdown from './content-justification-dropdown';
 
 const ALLOWED_BLOCKS = [ buttonBlockName ];
 const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
 
 export default function ButtonsEdit( {
-	attributes: { align },
+	attributes: { contentJustification },
 	clientId,
 	isSelected,
+	setAttributes,
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ maxWidth, setMaxWidth ] = useState( 0 );
@@ -85,6 +88,12 @@ export default function ButtonsEdit( {
 		selectBlock( insertedBlock.clientId );
 	}, 200 );
 
+	function onChangeContentJustification( updatedValue ) {
+		setAttributes( {
+			contentJustification: updatedValue,
+		} );
+	}
+
 	const renderFooterAppender = useRef( () => (
 		<View style={ styles.appenderContainer }>
 			<InnerBlocks.ButtonBlockAppender
@@ -98,6 +107,19 @@ export default function ButtonsEdit( {
 
 	return (
 		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarItem>
+						{ ( toggleProps ) => (
+							<ContentJustificationDropdown
+								toggleProps={ toggleProps }
+								value={ contentJustification }
+								onChange={ onChangeContentJustification }
+							/>
+						) }
+					</ToolbarItem>
+				</ToolbarGroup>
+			</BlockControls>
 			{ resizeObserver }
 			<InnerBlocks
 				allowedBlocks={ ALLOWED_BLOCKS }
@@ -106,7 +128,7 @@ export default function ButtonsEdit( {
 					shouldRenderFooterAppender && renderFooterAppender.current
 				}
 				orientation="horizontal"
-				horizontalAlignment={ align }
+				horizontalAlignment={ contentJustification }
 				onDeleteBlock={
 					shouldDelete ? () => removeBlock( clientId ) : undefined
 				}

From 4fb29cb99b42492bf095ede7f05397c759829675 Mon Sep 17 00:00:00 2001
From: Zebulan Stanphill <zebulanstanphill@protonmail.com>
Date: Tue, 27 Oct 2020 16:32:28 -0500
Subject: [PATCH 5/5] Fix control title inconsistency.

---
 .../src/buttons/content-justification-dropdown.js           | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/buttons/content-justification-dropdown.js b/packages/block-library/src/buttons/content-justification-dropdown.js
index 8437340fbfc42..10c02c5524bfa 100644
--- a/packages/block-library/src/buttons/content-justification-dropdown.js
+++ b/packages/block-library/src/buttons/content-justification-dropdown.js
@@ -18,15 +18,15 @@ const DEFAULT_ALLOWED_VALUES = [ 'left', 'center', 'right' ];
 const CONTROLS = {
 	left: {
 		icon: contentJustificationLeftIcon,
-		title: __( 'Justify items left' ),
+		title: __( 'Justify content left' ),
 	},
 	center: {
 		icon: contentJustificationCenterIcon,
-		title: __( 'Justify items center' ),
+		title: __( 'Justify content center' ),
 	},
 	right: {
 		icon: contentJustificationRightIcon,
-		title: __( 'Justify items right' ),
+		title: __( 'Justify content right' ),
 	},
 };