Buttons: Add variations for vertical layout (#27297)

* Add buttons variations for vertical layout * fix vertical appender styles * remove box-shadow from buttons on focus * regenerate fixtures * move focus styling to Buttons
WordPress · Dec 2, 2020 · 7b45a9d · 7b45a9d
1 parent 6baad89
commit 7b45a9d
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 14 deletions.
diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json
@@ -5,6 +5,10 @@
 	"attributes": {
 		"contentJustification": {
 			"type": "string"
+		},
+		"orientation": {
+			"type": "string",
+			"default": "horizontal"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
@@ -23,18 +23,19 @@ const ALLOWED_BLOCKS = [ buttonBlockName ];
 const BUTTONS_TEMPLATE = [ [ 'core/button' ] ];
 
 function ButtonsEdit( {
-	attributes: { contentJustification },
+	attributes: { contentJustification, orientation },
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `is-content-justification-${ contentJustification }` ]: contentJustification,
+			'is-vertical': orientation === 'vertical',
 		} ),
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
 		template: BUTTONS_TEMPLATE,
-		orientation: 'horizontal',
+		orientation,
 		__experimentalLayout: {
 			type: 'default',
 			alignments: [],

diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
@@ -1,13 +1,30 @@
-.wp-block-buttons > .wp-block {
-	// Override editor auto block margins.
-	margin-left: 0;
-}
-
 .wp-block > .wp-block-buttons {
 	display: flex;
 	flex-wrap: wrap;
 }
 
+.wp-block-buttons {
+	> .wp-block {
+		// Override editor auto block margins.
+		margin-left: 0;
+		margin-top: $button-margin;
+	}
+	> .block-list-appender {
+		display: inline-flex;
+		align-items: center;
+	}
+	&.is-vertical {
+		> .block-list-appender .block-list-appender__toggle {
+			justify-content: flex-start;
+		}
+	}
+	> .wp-block-button {
+		&:focus {
+			box-shadow: none;
+		}
+	}
+}
+
 .wp-block[data-align="center"] > .wp-block-buttons {
 	align-items: center;
 	justify-content: center;
@@ -16,8 +33,3 @@
 .wp-block[data-align="right"] > .wp-block-buttons {
 	justify-content: flex-end;
 }
-
-.wp-block-buttons > .block-list-appender {
-	display: inline-flex;
-	align-items: center;
-}
diff --git a/packages/block-library/src/buttons/index.js b/packages/block-library/src/buttons/index.js
@@ -12,6 +12,7 @@ import transforms from './transforms';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -40,4 +41,5 @@ export const settings = {
 	transforms,
 	edit,
 	save,
+	variations,
 };
diff --git a/packages/block-library/src/buttons/save.js b/packages/block-library/src/buttons/save.js
@@ -8,12 +8,15 @@ import classnames from 'classnames';
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
-export default function save( { attributes: { contentJustification } } ) {
+export default function save( {
+	attributes: { contentJustification, orientation },
+} ) {
 	return (
 		<div
 			{ ...useBlockProps.save( {
 				className: classnames( {
 					[ `is-content-justification-${ contentJustification }` ]: contentJustification,
+					'is-vertical': orientation === 'vertical',
 				} ),
 			} ) }
 		>

diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
@@ -3,6 +3,17 @@
 	flex-direction: row;
 	flex-wrap: wrap;
 
+	&.is-vertical {
+		flex-direction: column;
+		> .wp-block-button {
+			/*rtl:ignore*/
+			margin-right: 0;
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+
 	// Increased specificity to override blocks default margin.
 	> .wp-block-button {
 		display: inline-block;
@@ -18,10 +29,16 @@
 
 	&.is-content-justification-left {
 		justify-content: flex-start;
+		&.is-vertical {
+			align-items: flex-start;
+		}
 	}
 
 	&.is-content-justification-center {
 		justify-content: center;
+		&.is-vertical {
+			align-items: center;
+		}
 	}
 
 	&.is-content-justification-right {
@@ -38,6 +55,10 @@
 				margin-left: 0;
 			}
 		}
+
+		&.is-vertical {
+			align-items: flex-end;
+		}
 	}
 
 	// Kept for backward compatibiity.

diff --git a/packages/block-library/src/buttons/variations.js b/packages/block-library/src/buttons/variations.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const variations = [
+	{
+		name: 'buttons-horizontal',
+		isDefault: true,
+		title: __( 'Horizontal' ),
+		description: __( 'Buttons shown in a row.' ),
+		attributes: { orientation: 'horizontal' },
+		scope: [ 'transform' ],
+	},
+	{
+		name: 'buttons-vertical',
+		title: __( 'Vertical' ),
+		description: __( 'Buttons shown in a column.' ),
+		attributes: { orientation: 'vertical' },
+		scope: [ 'transform' ],
+	},
+];
+
+export default variations;
diff --git a/packages/e2e-tests/fixtures/blocks/core__buttons.json b/packages/e2e-tests/fixtures/blocks/core__buttons.json
@@ -5,6 +5,7 @@
         "isValid": true,
         "attributes": {
             "contentJustification": "center",
+            "orientation": "horizontal",
             "align": "wide"
         },
         "innerBlocks": [

diff --git a/packages/e2e-tests/fixtures/blocks/core_buttons__simple__deprecated.json b/packages/e2e-tests/fixtures/blocks/core_buttons__simple__deprecated.json
@@ -3,7 +3,9 @@
         "clientId": "_clientId_0",
         "name": "core/buttons",
         "isValid": true,
-        "attributes": {},
+        "attributes": {
+            "orientation": "horizontal"
+        },
         "innerBlocks": [
             {
                 "clientId": "_clientId_0",