Add: Stack on mobile option on Media & Text block.

WordPress · Oct 23, 2018 · 4ad725c · 4ad725c
1 parent 1232f8f
commit 4ad725c
Show file tree

Hide file tree

Showing 12 changed files with 134 additions and 17 deletions.
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
@@ -15,7 +15,7 @@ import {
 	withColors,
 } from '@wordpress/editor';
 import { Component, Fragment } from '@wordpress/element';
-import { Toolbar } from '@wordpress/components';
+import { PanelBody, ToggleControl, Toolbar } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -108,12 +108,13 @@ class MediaTextEdit extends Component {
 			setAttributes,
 			setBackgroundColor,
 		} = this.props;
-		const { mediaPosition, mediaWidth } = attributes;
+		const { mediaPosition, mediaWidth, isStackedOnMobile } = 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,
 		} );
 		const widthString = `${ temporaryMediaWidth || mediaWidth }%`;
 		const style = {
@@ -139,6 +140,15 @@ class MediaTextEdit extends Component {
 		return (
 			<Fragment>
 				<InspectorControls>
+					<PanelBody title={ __( 'Media & Text Settings' ) }>
+						<ToggleControl
+							label={ __( 'Stack on mobile' ) }
+							checked={ isStackedOnMobile }
+							onChange={ () => setAttributes( {
+								isStackedOnMobile: ! isStackedOnMobile,
+							} ) }
+						/>
+					</PanelBody>
 					<PanelColorSettings
 						title={ __( 'Color Settings' ) }
 						initialOpen={ false }

diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
@@ -1,12 +1,10 @@
-.wp-block-media-text,
-.wp-block-media-text.aligncenter {
+.wp-block-media-text {
 	grid-template-areas:
 		"media-text-media media-text-content"
 		"resizer resizer";
 }
 
-.wp-block-media-text.has-media-on-the-right,
-.wp-block-media-text.has-media-on-the-right.aligncenter {
+.wp-block-media-text.has-media-on-the-right {
 	grid-template-areas:
 		"media-text-content media-text-media"
 		"resizer resizer";
@@ -51,8 +49,17 @@ figure.block-library-media-text__media-container {
 	display: none;
 }
 
-.wp-block-media-text.is-selected {
+.wp-block-media-text.is-selected:not(.is-stacked-on-mobile) {
 	.editor-media-container__resizer .components-resizable-box__handle {
 		display: block;
 	}
 }
+
+@include break-small {
+	.wp-block-media-text.is-selected.is-stacked-on-mobile {
+		.editor-media-container__resizer .components-resizable-box__handle {
+			display: block;
+		}
+	}
+}
+
diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
@@ -69,6 +69,10 @@ export const settings = {
 			type: 'number',
 			default: 50,
 		},
+		isStackedOnMobile: {
+			type: 'boolean',
+			default: false,
+		},
 	},
 
 	supports: {
@@ -81,6 +85,7 @@ export const settings = {
 		const {
 			backgroundColor,
 			customBackgroundColor,
+			isStackedOnMobile,
 			mediaAlt,
 			mediaPosition,
 			mediaType,
@@ -96,6 +101,7 @@ export const settings = {
 		const className = classnames( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			[ backgroundClass ]: backgroundClass,
+			'is-stacked-on-mobile': isStackedOnMobile,
 		} );
 
 		let gridTemplateColumns;

diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
@@ -1,14 +1,14 @@
-.wp-block-media-text,
-.wp-block-media-text.aligncenter {
+.wp-block-media-text {
 	display: grid;
 }
 
 .wp-block-media-text {
 	grid-template-rows: auto;
-	grid-template-areas: "media-text-media media-text-content";
 	align-items: center;
+	grid-template-areas: "media-text-media media-text-content";
 	grid-template-columns: 50% auto;
 	.has-media-on-the-right {
+		grid-template-areas: "media-text-content media-text-media";
 		grid-template-columns: auto 50%;
 	}
 }
@@ -23,13 +23,25 @@
 	grid-area: media-text-content;
 	padding: 0 8% 0 8%;
 }
-.wp-block-media-text.has-media-on-the-right {
-	grid-template-areas: "media-text-content media-text-media";
-}
 
 .wp-block-media-text > figure > img,
 .wp-block-media-text > figure > video {
 	max-width: unset;
 	width: 100%;
 	margin-bottom: -6px;
 }
+
+@media (max-width: #{ ($break-small) }) {
+	.wp-block-media-text.is-stacked-on-mobile {
+		grid-template-columns: 100% !important;
+		grid-template-areas:
+			"media-text-media"
+			"media-text-content";
+	}
+
+	.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right {
+		grid-template-areas:
+			"media-text-content"
+			"media-text-media";
+	}
+}
diff --git a/test/integration/full-content/fixtures/core__media-text.json b/test/integration/full-content/fixtures/core__media-text.json
@@ -10,7 +10,8 @@
             "mediaId": 17985,
             "mediaUrl": "http://localhost/wp-content/uploads/2018/09/1600px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg",
             "mediaType": "image",
-            "mediaWidth": 50
+            "mediaWidth": 50,
+            "isStackedOnMobile": false
         },
         "innerBlocks": [
             {

diff --git a/test/integration/full-content/fixtures/core__media-text__image-alt-no-align.json b/test/integration/full-content/fixtures/core__media-text__image-alt-no-align.json
@@ -10,7 +10,8 @@
             "mediaId": 17985,
             "mediaUrl": "http://localhost/wp-content/uploads/2018/09/1600px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg",
             "mediaType": "image",
-            "mediaWidth": 50
+            "mediaWidth": 50,
+            "isStackedOnMobile": false
         },
         "innerBlocks": [
             {

diff --git a/test/integration/full-content/fixtures/core__media-text__is-stacked-on-mobile.html b/test/integration/full-content/fixtures/core__media-text__is-stacked-on-mobile.html
@@ -0,0 +1,12 @@
+<!-- wp:media-text {"mediaId":17897,"mediaType":"video", "isStackedOnMobile": true} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile">
+	<figure class="wp-block-media-text__media">
+		<video controls src="http://localhost/wp-content/uploads/2018/09/Jul-26-2018-11-34-54.mp4"></video>
+	</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/test/integration/full-content/fixtures/core__media-text__is-stacked-on-mobile.json b/test/integration/full-content/fixtures/core__media-text__is-stacked-on-mobile.json
@@ -0,0 +1,33 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/media-text",
+        "isValid": true,
+        "attributes": {
+            "align": "wide",
+            "mediaAlt": "",
+            "mediaPosition": "left",
+            "mediaId": 17897,
+            "mediaUrl": "http://localhost/wp-content/uploads/2018/09/Jul-26-2018-11-34-54.mp4",
+            "mediaType": "video",
+            "mediaWidth": 50,
+            "isStackedOnMobile": true
+        },
+        "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-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<video controls src=\"http://localhost/wp-content/uploads/2018/09/Jul-26-2018-11-34-54.mp4\"></video>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>"
+    }
+]
diff --git a/test/integration/full-content/fixtures/core__media-text__is-stacked-on-mobile.parsed.json b/test/integration/full-content/fixtures/core__media-text__is-stacked-on-mobile.parsed.json
@@ -0,0 +1,28 @@
+[
+    {
+        "blockName": "core/media-text",
+        "attrs": {
+            "mediaId": 17897,
+            "mediaType": "video",
+            "isStackedOnMobile": true
+        },
+        "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"
+            }
+        ],
+        "innerHTML": "\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<video controls src=\"http://localhost/wp-content/uploads/2018/09/Jul-26-2018-11-34-54.mp4\"></video>\n\t</figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n"
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n"
+    }
+]
diff --git a/.../integration/full-content/fixtures/core__media-text__is-stacked-on-mobile.serialized.html b/.../integration/full-content/fixtures/core__media-text__is-stacked-on-mobile.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:media-text {"mediaId":17897,"mediaType":"video","isStackedOnMobile":true} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><video controls src="http://localhost/wp-content/uploads/2018/09/Jul-26-2018-11-34-54.mp4"></video></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/test/integration/full-content/fixtures/core__media-text__media-right-custom-width.json b/test/integration/full-content/fixtures/core__media-text__media-right-custom-width.json
@@ -10,7 +10,8 @@
             "mediaId": 17897,
             "mediaUrl": "http://localhost/wp-content/uploads/2018/09/Jul-26-2018-11-34-54.mp4",
             "mediaType": "video",
-            "mediaWidth": 41
+            "mediaWidth": 41,
+            "isStackedOnMobile": false
         },
         "innerBlocks": [
             {

diff --git a/test/integration/full-content/fixtures/core__media-text__video.json b/test/integration/full-content/fixtures/core__media-text__video.json
@@ -10,7 +10,8 @@
             "mediaId": 17897,
             "mediaUrl": "http://localhost/wp-content/uploads/2018/09/Jul-26-2018-11-34-54.mp4",
             "mediaType": "video",
-            "mediaWidth": 50
+            "mediaWidth": 50,
+            "isStackedOnMobile": false
         },
         "innerBlocks": [
             {