Media & Text Block: Add vertical alignment options (#13989)

* Add vertical alignment functionality to the media and text block * Remove duplicate styles * Add fixture for vertical alignment test * Add entry to changelog
WordPress · Apr 3, 2019 · 5aed6ae · 5aed6ae
1 parent 5d6527d
commit 5aed6ae
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 5 deletions.
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## 2.5.0 (Unreleased)
 
 - Add vertical alignment controls to Columns Block ([#13899](https://github.com/WordPress/gutenberg/pull/13899/)).
+- Add vertical alignment controls to Media & Text Block ([#13989](https://github.com/WordPress/gutenberg/pull/13989)).
 - Add `wide` and `full` alignments to Archives block ([#14533](https://github.com/WordPress/gutenberg/pull/14533)).
 - Add `wide` and `full` alignments to Categories block ([#14533](https://github.com/WordPress/gutenberg/pull/14533)).
 - Add all alignment options to RSS block ([#14533](https://github.com/WordPress/gutenberg/pull/14533)).

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
@@ -10,6 +10,7 @@ import { get } from 'lodash';
 import { __, _x } from '@wordpress/i18n';
 import {
 	BlockControls,
+	BlockVerticalAlignmentToolbar,
 	InnerBlocks,
 	InspectorControls,
 	PanelColorSettings,
@@ -126,13 +127,15 @@ class MediaTextEdit extends Component {
 			mediaPosition,
 			mediaType,
 			mediaWidth,
+			verticalAlignment,
 		} = attributes;
 		const temporaryMediaWidth = this.state.mediaWidth;
 		const classNames = classnames( className, {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'is-selected': isSelected,
 			[ backgroundColor.class ]: backgroundColor.class,
 			'is-stacked-on-mobile': isStackedOnMobile,
+			[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		} );
 		const widthString = `${ temporaryMediaWidth || mediaWidth }%`;
 		const style = {
@@ -158,6 +161,9 @@ class MediaTextEdit extends Component {
 		const onMediaAltChange = ( newMediaAlt ) => {
 			setAttributes( { mediaAlt: newMediaAlt } );
 		};
+		const onVerticalAlignmentChange = ( alignment ) => {
+			setAttributes( { verticalAlignment: alignment } );
+		};
 		const mediaTextGeneralSettings = (
 			<PanelBody title={ __( 'Media & Text Settings' ) }>
 				<ToggleControl
@@ -196,6 +202,10 @@ class MediaTextEdit extends Component {
 					<Toolbar
 						controls={ toolbarControls }
 					/>
+					<BlockVerticalAlignmentToolbar
+						onChange={ onVerticalAlignmentChange }
+						value={ verticalAlignment }
+					/>
 				</BlockControls>
 				<div className={ classNames } style={ style } >
 					{ this.renderMediaArea() }

diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
@@ -2,6 +2,7 @@
 	grid-template-areas:
 		"media-text-media media-text-content"
 		"resizer resizer";
+	align-items: center;
 }
 
 .wp-block-media-text.has-media-on-the-right {
@@ -16,7 +17,6 @@
 
 .wp-block-media-text .editor-media-container__resizer {
 	grid-area: media-text-media;
-	align-self: center;
 	// The resizer sets a inline width but as we are using a grid layout,
 	// we set the width on container.
 	width: 100% !important;
@@ -62,4 +62,3 @@ figure.block-library-media-text__media-container {
 		}
 	}
 }
-
diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
@@ -66,6 +66,9 @@ const blockAttributes = {
 		type: 'boolean',
 		default: false,
 	},
+	verticalAlignment: {
+		type: 'string',
+	},
 };
 
 export const settings = {
@@ -156,6 +159,7 @@ export const settings = {
 			mediaUrl,
 			mediaWidth,
 			mediaId,
+			verticalAlignment,
 		} = attributes;
 		const mediaTypeRenders = {
 			image: () => <img src={ mediaUrl } alt={ mediaAlt } className={ ( mediaId && mediaType === 'image' ) ? `wp-image-${ mediaId }` : null } />,
@@ -166,6 +170,7 @@ export const settings = {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			[ backgroundClass ]: backgroundClass,
 			'is-stacked-on-mobile': isStackedOnMobile,
+			[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		} );
 
 		let gridTemplateColumns;

diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
@@ -1,8 +1,6 @@
-.wp-block-media-text {
-	display: grid;
-}
 
 .wp-block-media-text {
+	display: grid;
 	grid-template-rows: auto;
 	align-items: center;
 	grid-template-areas: "media-text-media media-text-content";
@@ -13,6 +11,18 @@
 	}
 }
 
+.wp-block-media-text.is-vertically-aligned-top {
+	align-items: start;
+}
+
+.wp-block-media-text.is-vertically-aligned-center {
+	align-items: center;
+}
+
+.wp-block-media-text.is-vertically-aligned-bottom {
+	align-items: end;
+}
+
 .wp-block-media-text .wp-block-media-text__media {
 	grid-area: media-text-media;
 	margin: 0;

diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.html b/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.html
@@ -0,0 +1,12 @@
+<!-- wp:media-text {"mediaId":11,"mediaType":"image","verticalAlignment":"bottom"} -->
+<div class="wp-block-media-text alignwide is-vertically-aligned-bottom">
+	<figure class="wp-block-media-text__media"><img
+			src="http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg" alt="My alt text"
+			class="wp-image-11" /></figure>
+	<div class="wp-block-media-text__content">
+		<!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+		<p class="has-large-font-size">My content</p>
+		<!-- /wp:paragraph -->
+	</div>
+</div>
+<!-- /wp:media-text -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.json b/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.json
@@ -0,0 +1,34 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/media-text",
+        "isValid": true,
+        "attributes": {
+            "align": "wide",
+            "mediaAlt": "My alt text",
+            "mediaPosition": "left",
+            "mediaId": 11,
+            "mediaUrl": "http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg",
+            "mediaType": "image",
+            "mediaWidth": 50,
+            "isStackedOnMobile": false,
+            "verticalAlignment": "bottom"
+        },
+        "innerBlocks": [
+            {
+                "clientId": "_clientId_0",
+                "name": "core/paragraph",
+                "isValid": true,
+                "attributes": {
+                    "content": "My content",
+                    "dropCap": false,
+                    "placeholder": "Content…",
+                    "fontSize": "large"
+                },
+                "innerBlocks": [],
+                "originalContent": "<p class=\"has-large-font-size\">My content</p>"
+            }
+        ],
+        "originalContent": "<div class=\"wp-block-media-text alignwide is-vertically-aligned-bottom\">\n\t<figure class=\"wp-block-media-text__media\"><img\n\t\t\tsrc=\"http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg\" alt=\"My alt text\"\n\t\t\tclass=\"wp-image-11\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>"
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.parsed.json b/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.parsed.json
@@ -0,0 +1,30 @@
+[
+    {
+        "blockName": "core/media-text",
+        "attrs": {
+            "mediaId": 11,
+            "mediaType": "image",
+            "verticalAlignment": "bottom"
+        },
+        "innerBlocks": [
+            {
+                "blockName": "core/paragraph",
+                "attrs": {
+                    "placeholder": "Content…",
+                    "fontSize": "large"
+                },
+                "innerBlocks": [],
+                "innerHTML": "\n\t\t<p class=\"has-large-font-size\">My content</p>\n\t\t",
+                "innerContent": [
+                    "\n\t\t<p class=\"has-large-font-size\">My content</p>\n\t\t"
+                ]
+            }
+        ],
+        "innerHTML": "\n<div class=\"wp-block-media-text alignwide is-vertically-aligned-bottom\">\n\t<figure class=\"wp-block-media-text__media\"><img\n\t\t\tsrc=\"http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg\" alt=\"My alt text\"\n\t\t\tclass=\"wp-image-11\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+        "innerContent": [
+            "\n<div class=\"wp-block-media-text alignwide is-vertically-aligned-bottom\">\n\t<figure class=\"wp-block-media-text__media\"><img\n\t\t\tsrc=\"http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg\" alt=\"My alt text\"\n\t\t\tclass=\"wp-image-11\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+            null,
+            "\n\t</div>\n</div>\n"
+        ]
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.serialized.html b/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:media-text {"mediaId":11,"mediaType":"image","verticalAlignment":"bottom"} -->
+<div class="wp-block-media-text alignwide is-vertically-aligned-bottom"><figure class="wp-block-media-text__media"><img src="http://localhost:8888/wp-content/uploads/2019/03/Dzts-v2X0AMxju_-1024x1024.jpg" alt="My alt text" class="wp-image-11"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<p class="has-large-font-size">My content</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->