diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 4b223247230cf..a946a499b26f2 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -243,7 +243,7 @@ function MediaTextEdit( { 'is-selected': isSelected, 'is-stacked-on-mobile': isStackedOnMobile, [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, - 'is-image-fill-v8': imageFill, + 'is-image-fill-element': imageFill, } ); const widthString = `${ temporaryMediaWidth || mediaWidth }%`; const gridTemplateColumns = diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss index f00c0e16ceb3e..639ceaed8ea99 100644 --- a/packages/block-library/src/media-text/editor.scss +++ b/packages/block-library/src/media-text/editor.scss @@ -28,8 +28,8 @@ .wp-block-media-text.is-image-fill .editor-media-container__resizer, .wp-block-media-text.is-image-fill .components-placeholder.has-illustration, -.wp-block-media-text.is-image-fill-v8 .editor-media-container__resizer, -.wp-block-media-text.is-image-fill-v8 .components-placeholder.has-illustration { +.wp-block-media-text.is-image-fill-element .editor-media-container__resizer, +.wp-block-media-text.is-image-fill-element .components-placeholder.has-illustration { // The resizer sets an inline height but for the image fill we set it to full height. height: 100% !important; } diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index 95e72549b088c..b65137b150ba5 100644 --- a/packages/block-library/src/media-text/index.php +++ b/packages/block-library/src/media-text/index.php @@ -42,9 +42,9 @@ function render_block_core_media_text( $attributes, $content ) { while ( $block_tag_processor->next_tag( $block_query ) ) { if ( $image_fill ) { - // The markup below uses v8+ of the block, so adjust classes accordingly. + // The markup below does not work with the deprecated `is-image-fill` class. $block_tag_processor->remove_class( 'is-image-fill' ); - $block_tag_processor->add_class( 'is-image-fill-v8' ); + $block_tag_processor->add_class( 'is-image-fill-element' ); } } diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js index 67ff00028150b..3e660d94e789e 100644 --- a/packages/block-library/src/media-text/save.js +++ b/packages/block-library/src/media-text/save.js @@ -76,7 +76,7 @@ export default function save( { attributes } ) { 'has-media-on-the-right': 'right' === mediaPosition, 'is-stacked-on-mobile': isStackedOnMobile, [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, - 'is-image-fill-v8': imageFill, + 'is-image-fill-element': imageFill, } ); let gridTemplateColumns; diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss index 63c382d140751..0f7a34f05548c 100644 --- a/packages/block-library/src/media-text/style.scss +++ b/packages/block-library/src/media-text/style.scss @@ -105,18 +105,18 @@ } /* Image fill for versions 8 and onwards */ -.wp-block-media-text.is-image-fill-v8 > .wp-block-media-text__media { +.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media { position: relative; height: 100%; min-height: 250px; } -.wp-block-media-text.is-image-fill-v8 > .wp-block-media-text__media > a { +.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media > a { display: block; height: 100%; } -.wp-block-media-text.is-image-fill-v8 > .wp-block-media-text__media img { +.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img { position: absolute; width: 100%; height: 100%; diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html index 7ca7dd9ba0883..8c88b8b67795d 100644 --- a/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v5.serialized.html @@ -1,5 +1,5 @@ -
My alt text
+
My alt text

My Content

diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html index 69db2f58da9d5..b9d5e14f90277 100644 --- a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html @@ -1,5 +1,5 @@ -
My alt text
+
My alt text

My Content

diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html index daaa77e67ada0..4b001f4f27c8a 100644 --- a/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html @@ -1,5 +1,5 @@ -
My alt text
+
My alt text

My Content

diff --git a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html index 04873b7ba4a4b..b44ebe1c4ee89 100644 --- a/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html +++ b/test/integration/fixtures/blocks/core__media-text__deprecated-v7.serialized.html @@ -1,5 +1,5 @@ -
My alt text
+
My alt text

My Content

diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html index 6b70a71d6217c..30667e0dd24dc 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.html @@ -1,5 +1,5 @@ -
+
My alt text
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json index 696d43c8ae1ea..674b3724af8e8 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json @@ -20,9 +20,9 @@ ] } ], - "innerHTML": "\n
\n\t
\n\t\t
\n\t
\n\t\t\n\t
\n
\n", + "innerHTML": "\n
\n\t
\n\t\t
\n\t
\n\t\t\n\t
\n
\n", "innerContent": [ - "\n
\n\t
\n\t\t
\n\t
\n\t\t", + "\n
\n\t
\n\t\t
\n\t
\n\t\t", null, "\n\t
\n
\n" ] diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html index 69db2f58da9d5..b9d5e14f90277 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html @@ -1,5 +1,5 @@ -
My alt text
+
My alt text

My Content

diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html index 347c66792adef..60e2cc7be572d 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.html @@ -1,5 +1,5 @@ -
+
My alt text
diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json index 3b252ade57b46..92bd57443a1c3 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json @@ -24,9 +24,9 @@ ] } ], - "innerHTML": "\n
\n\t
\n\t\t
\n\t
\n\t\t\n\t
\n
\n", + "innerHTML": "\n
\n\t
\n\t\t
\n\t
\n\t\t\n\t
\n
\n", "innerContent": [ - "\n
\n\t
\n\t\t
\n\t
\n\t\t", + "\n
\n\t
\n\t\t
\n\t
\n\t\t", null, "\n\t
\n
\n" ] diff --git a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html index daaa77e67ada0..4b001f4f27c8a 100644 --- a/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html +++ b/test/integration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html @@ -1,5 +1,5 @@ -
My alt text
+
My alt text

My Content