Rename new CSS class to is-image-fill-element

WordPress · Sep 4, 2024 · 311f447 · 311f447
1 parent f11a6b3
commit 311f447
Show file tree

Hide file tree

Showing 15 changed files with 21 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":"0.56","y":"0.57"}} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-v8"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:56% 57%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:56% 57%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} -->
 <p>My Content</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:media-text -->
diff --git a/...blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html b/...blocks/core__media-text__deprecated-v7-image-fill-no-focal-point-selected.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-v8"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></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/...ocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html b/...ocks/core__media-text__deprecated-v7-image-fill-with-focal-point-selected.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-v8"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:84% 84%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:84% 84%"/></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/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 @@
 <!-- wp:media-text {"mediaType":"image","imageFill":true} -->
-<div class="wp-block-media-text is-stacked-on-mobile is-image-fill-v8"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<div class="wp-block-media-text is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></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/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 @@
 <!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true} -->
-<div class="wp-block-media-text alignwide is-image-fill-v8 is-stacked-on-mobile">
+<div class="wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile">
 	<figure class="wp-block-media-text__media">
 		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k="
 			alt="My alt text" style="object-position:50% 50%"/></figure>

diff --git a/...egration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json b/...egration/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.parsed.json
@@ -20,9 +20,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill-v8 is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:50% 50%\"/></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:50% 50%\"/></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-media-text alignwide is-image-fill-v8 is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:50% 50%\"/></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+			"\n<div class=\"wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:50% 50%\"/></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
 			null,
 			"\n\t</div>\n</div>\n"
 		]

diff --git a/...tion/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html b/...tion/fixtures/blocks/core__media-text__image-fill-no-focal-point-selected.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-v8"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:50% 50%"/></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/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 @@
 <!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
-<div class="wp-block-media-text alignwide is-image-fill-v8 is-stacked-on-mobile">
+<div class="wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile">
 	<figure class="wp-block-media-text__media">
 		<img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k="
 			alt="My alt text" style="object-position:84% 84%" /></figure>

diff --git a/...ration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json b/...ration/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.parsed.json
@@ -24,9 +24,9 @@
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill-v8 is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:84% 84%\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:84% 84%\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t\n\t</div>\n</div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-media-text alignwide is-image-fill-v8 is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:84% 84%\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
+			"\n<div class=\"wp-block-media-text alignwide is-image-fill-element is-stacked-on-mobile\">\n\t<figure class=\"wp-block-media-text__media\">\n\t\t<img src=\"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=\"\n\t\t\talt=\"My alt text\" style=\"object-position:84% 84%\" /></figure>\n\t<div class=\"wp-block-media-text__content\">\n\t\t",
 			null,
 			"\n\t</div>\n</div>\n"
 		]

diff --git a/...on/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html b/...on/fixtures/blocks/core__media-text__image-fill-with-focal-point-selected.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:media-text {"align":"wide","mediaType":"image","imageFill":true,"focalPoint":{"x":0.84,"y":0.84}} -->
-<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-v8"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:84% 84%"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
+<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill-element"><figure class="wp-block-media-text__media"><img src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" alt="My alt text" style="object-position:84% 84%"/></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 -->