diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index dc54cae74484f..ca932f9b8115d 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -18,9 +18,9 @@ import { Component, Fragment } from '@wordpress/element';
import {
PanelBody,
TextareaControl,
+ ToggleControl,
Toolbar,
} from '@wordpress/components';
-
/**
* Internal dependencies
*/
@@ -112,12 +112,19 @@ class MediaTextEdit extends Component {
setAttributes,
setBackgroundColor,
} = this.props;
- const { mediaAlt, mediaPosition, mediaType, mediaWidth } = attributes;
+ const {
+ isStackedOnMobile,
+ mediaAlt,
+ mediaPosition,
+ mediaType,
+ mediaWidth,
+ } = 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 = {
@@ -143,14 +150,21 @@ class MediaTextEdit extends Component {
const onMediaAltChange = ( newMediaAlt ) => {
setAttributes( { mediaAlt: newMediaAlt } );
};
- const mediaTextGeneralSettings = mediaType === 'image' && (
+ const mediaTextGeneralSettings = (
- setAttributes( {
+ isStackedOnMobile: ! isStackedOnMobile,
+ } ) }
+ />
+ { mediaType === 'image' && (
+ /> ) }
);
return (
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index a703667375135..bff309d348306 100644
--- 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
index 14a3a3281f093..6130c7a4a2db0 100644
--- a/packages/block-library/src/media-text/index.js
+++ b/packages/block-library/src/media-text/index.js
@@ -70,6 +70,10 @@ export const settings = {
type: 'number',
default: 50,
},
+ isStackedOnMobile: {
+ type: 'boolean',
+ default: false,
+ },
},
supports: {
@@ -82,6 +86,7 @@ export const settings = {
const {
backgroundColor,
customBackgroundColor,
+ isStackedOnMobile,
mediaAlt,
mediaPosition,
mediaType,
@@ -97,6 +102,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
index 01e788315e8be..b6a87cb6cd066 100644
--- 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,9 +23,6 @@
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 {
@@ -33,3 +30,25 @@
width: 100%;
vertical-align: middle;
}
+
+/*
+* Here we here not able to use a mobile first CSS approach.
+* Custom widths are set using inline styles, and on mobile,
+* we need 100% width, so we use important to overwrite the inline style.
+* If the style were set on mobile first, on desktop styles,
+* we would have no way of setting the style again to the inline style.
+*/
+@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
index a4f26e4c9a5c5..2b892048ecdde 100644
--- 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
index d8f8ffa431fa6..548f2dbd28f18 100644
--- 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
new file mode 100644
index 0000000000000..0aa403f6c3017
--- /dev/null
+++ b/test/integration/full-content/fixtures/core__media-text__is-stacked-on-mobile.html
@@ -0,0 +1,12 @@
+
+
+
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
new file mode 100644
index 0000000000000..85d29db70eaf7
--- /dev/null
+++ 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": "My Content
"
+ }
+ ],
+ "originalContent": "\n\t
\n\t\t\n\t\n\t
\n\t\t\n\t
\n
My Content
\n\t\t"
+ }
+ ],
+ "innerHTML": "\n\n\t
\n\t\t\n\t\n\t
\n\t\t\n\t
\n