diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index 78b2c131870dc3..1c06e0d53e9435 100644 --- 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 index ccf77324a8ce88..60be2bdc3c87e7 100644 --- 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,6 +127,7 @@ class MediaTextEdit extends Component { mediaPosition, mediaType, mediaWidth, + verticalAlignment, } = attributes; const temporaryMediaWidth = this.state.mediaWidth; const classNames = classnames( className, { @@ -133,6 +135,7 @@ class MediaTextEdit extends Component { '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 = ( +
{ this.renderMediaArea() } diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss index 84f26a696f6d70..4f6b2055db6d12 100644 --- 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 index 6809ba48ad4355..9dd26fdb4b7af1 100644 --- 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: () => {, @@ -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 index a2c8ed63752213..dc1a045c93bb14 100644 --- 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 new file mode 100644 index 00000000000000..639735b4c05795 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.html @@ -0,0 +1,12 @@ + +
+
My alt text
+
+ +

My content

+ +
+
+ \ No newline at end of file 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 new file mode 100644 index 00000000000000..c32892010cc7f8 --- /dev/null +++ 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": "

My content

" + } + ], + "originalContent": "
\n\t
\n\t
\n\t\t\n\t
\n
" + } +] 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 new file mode 100644 index 00000000000000..95b8f5d3ec074e --- /dev/null +++ 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

My content

\n\t\t", + "innerContent": [ + "\n\t\t

My content

\n\t\t" + ] + } + ], + "innerHTML": "\n
\n\t
\n\t
\n\t\t\n\t
\n
\n", + "innerContent": [ + "\n
\n\t
\n\t
\n\t\t", + null, + "\n\t
\n
\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 new file mode 100644 index 00000000000000..a3bd89af190251 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__media-text__vertical-align-bottom.serialized.html @@ -0,0 +1,5 @@ + +
My alt text
+

My content

+
+