diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 8187d51c7e4b8c..718b1a09c836e0 100644 --- 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 ( + + setAttributes( { + isStackedOnMobile: ! isStackedOnMobile, + } ) } + /> + figure > img, .wp-block-media-text > figure > video { @@ -33,3 +30,18 @@ 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 index a4f26e4c9a5c57..2b892048ecdde3 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 d8f8ffa431fa66..548f2dbd28f18d 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 00000000000000..0aa403f6c3017a --- /dev/null +++ b/test/integration/full-content/fixtures/core__media-text__is-stacked-on-mobile.html @@ -0,0 +1,12 @@ + +
+
+ +
+
+ +

My Content

+ +
+
+ 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 00000000000000..85d29db70eaf74 --- /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
" + } +] 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 new file mode 100644 index 00000000000000..ae97bce2009945 --- /dev/null +++ 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

My Content

\n\t\t" + } + ], + "innerHTML": "\n
\n\t
\n\t\t\n\t
\n\t
\n\t\t\n\t
\n
\n" + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n" + } +] diff --git a/test/integration/full-content/fixtures/core__media-text__is-stacked-on-mobile.serialized.html b/test/integration/full-content/fixtures/core__media-text__is-stacked-on-mobile.serialized.html new file mode 100644 index 00000000000000..b9a82b9d842cc5 --- /dev/null +++ b/test/integration/full-content/fixtures/core__media-text__is-stacked-on-mobile.serialized.html @@ -0,0 +1,5 @@ + +
+

My Content

+
+ 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 index 7fadb222f20e54..42d3a5ab16bce4 100644 --- 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 index 4296ee2ae4bb68..427195d751016d 100644 --- 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": [ {