Buttons block: remove block alignment options.

WordPress · Jun 14, 2020 · 384ca61 · 384ca61
1 parent f15b91c
commit 384ca61
Show file tree

Hide file tree

Showing 14 changed files with 145 additions and 20 deletions.
diff --git 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 {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">Button One</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">Button Two</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
+	'content'       => "<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">Button One</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">Button Two</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
 	'viewportWidth' => 500,
 	'categories'    => array( 'buttons' ),
 );
diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json
@@ -2,8 +2,6 @@
 	"name": "core/buttons",
 	"category": "design",
 	"supports": {
-		"align": true,
-		"alignWide": false,
 		"lightBlockWrapper": true
 	}
 }
diff --git a/packages/block-library/src/buttons/deprecated.js b/packages/block-library/src/buttons/deprecated.js
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+const deprecated = [
+	{
+		supports: {
+			align: true,
+			alignWide: false,
+		},
+		save() {
+			return (
+				<div>
+					<InnerBlocks.Content />
+				</div>
+			);
+		},
+		migrate( attributes ) {
+			return omit( attributes, [ 'align' ] );
+		},
+	},
+];
+
+export default deprecated;
diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js
@@ -25,13 +25,11 @@ const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
 
 function ButtonsEdit( {
 	isSelected,
-	attributes,
 	onDelete,
 	onAddNextButton,
 	shouldDelete,
 	isInnerButtonSelected,
 } ) {
-	const { align } = attributes;
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ maxWidth, setMaxWidth ] = useState( 0 );
 	const shouldRenderFooterAppender = isSelected || isInnerButtonSelected;
@@ -69,7 +67,6 @@ function ButtonsEdit( {
 					shouldRenderFooterAppender && renderFooterAppender.current
 				}
 				__experimentalMoverDirection="horizontal"
-				horizontalAlignment={ align }
 				onDeleteBlock={ shouldDelete ? onDelete : undefined }
 				onAddBlock={ onAddNextButton }
 				parentWidth={ maxWidth }

diff --git 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';
@@ -23,6 +24,7 @@ export const settings = {
 	),
 	icon,
 	keywords: [ __( 'link' ) ],
+	deprecated,
 	transforms,
 	edit,
 	save,

diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.html b/packages/e2e-tests/fixtures/blocks/core__buttons.html
@@ -1,11 +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>
+	<div class="wp-block-button"><a class="wp-block-button__link">first</a></div>
 	<!-- /wp:button -->
 
 	<!-- wp:button -->
-	<div class="wp-block-button"><a class="wp-block-button__link">My button 2</a></div>
+	<div class="wp-block-button"><a class="wp-block-button__link">second</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
@@ -10,20 +10,20 @@
                 "name": "core/button",
                 "isValid": true,
                 "attributes": {
-                    "text": "My button 1"
+                    "text": "first"
                 },
                 "innerBlocks": [],
-                "originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">My button 1</a></div>"
+                "originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">first</a></div>"
             },
             {
                 "clientId": "_clientId_1",
                 "name": "core/button",
                 "isValid": true,
                 "attributes": {
-                    "text": "My button 2"
+                    "text": "second"
                 },
                 "innerBlocks": [],
-                "originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">My button 2</a></div>"
+                "originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">second</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
@@ -7,18 +7,18 @@
                 "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",
+                "innerHTML": "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">first</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"
+                    "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">first</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",
+                "innerHTML": "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">second</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"
+                    "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">second</a></div>\n\t"
                 ]
             }
         ],

diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.serialized.html b/packages/e2e-tests/fixtures/blocks/core__buttons.serialized.html
@@ -1,9 +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>
+<div class="wp-block-button"><a class="wp-block-button__link">first</a></div>
 <!-- /wp:button -->
 
 <!-- wp:button -->
-<div class="wp-block-button"><a class="wp-block-button__link">My button 2</a></div>
+<div class="wp-block-button"><a class="wp-block-button__link">second</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated.html b/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated.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">first</a></div>
+	<!-- /wp:button -->
+
+	<!-- wp:button -->
+	<div class="wp-block-button"><a class="wp-block-button__link">second</a></div>
+	<!-- /wp:button -->
+</div>
+<!-- /wp:buttons -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated.json
@@ -0,0 +1,33 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/buttons",
+        "isValid": true,
+        "attributes": {
+            "className": "aligncenter"
+        },
+        "innerBlocks": [
+            {
+                "clientId": "_clientId_0",
+                "name": "core/button",
+                "isValid": true,
+                "attributes": {
+                    "text": "first"
+                },
+                "innerBlocks": [],
+                "originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">first</a></div>"
+            },
+            {
+                "clientId": "_clientId_1",
+                "name": "core/button",
+                "isValid": true,
+                "attributes": {
+                    "text": "second"
+                },
+                "innerBlocks": [],
+                "originalContent": "<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">second</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.parsed.json b/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated.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\">first</a></div>\n\t",
+                "innerContent": [
+                    "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">first</a></div>\n\t"
+                ]
+            },
+            {
+                "blockName": "core/button",
+                "attrs": {},
+                "innerBlocks": [],
+                "innerHTML": "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">second</a></div>\n\t",
+                "innerContent": [
+                    "\n\t<div class=\"wp-block-button\"><a class=\"wp-block-button__link\">second</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.serialized.html b/packages/e2e-tests/fixtures/blocks/core__buttons__deprecated.serialized.html
@@ -0,0 +1,9 @@
+<!-- wp:buttons {"className":"aligncenter"} -->
+<div class="wp-block-buttons aligncenter"><!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link">first</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button -->
+<div class="wp-block-button"><a class="wp-block-button__link">second</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
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`adding blocks should insert a block pattern 1`] = `
-"<!-- wp:buttons {\\"align\\":\\"center\\"} -->
-<div class=\\"wp-block-buttons aligncenter\\"><!-- wp:button {\\"borderRadius\\":0,\\"backgroundColor\\":\\"very-dark-gray\\"} -->
+"<!-- wp:buttons -->
+<div class=\\"wp-block-buttons\\"><!-- wp:button {\\"borderRadius\\":0,\\"backgroundColor\\":\\"very-dark-gray\\"} -->
 <div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link has-very-dark-gray-background-color has-background no-border-radius\\">Button One</a></div>
 <!-- /wp:button -->