Merge 2c2ed68 into 58cf0b3

material-components · Apr 6, 2021 · 0520063 · 0520063
2 parents 58cf0b3 + 2c2ed68
commit 0520063
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 32 deletions.
diff --git a/.github/workflows/lint-tests.yml b/.github/workflows/lint-tests.yml
@@ -56,6 +56,11 @@ jobs:
       - name: Build assets
         run: npm run build:js
 
+      - name: Sleep for 10 seconds
+        uses: jakejarvis/wait-action@master
+        with:
+          time: '10s'
+
       - name: Start docker local env
         run: |
           npm run env:start

diff --git a/plugin/assets/src/block-editor/blocks/card/components/card-image-edit.js b/plugin/assets/src/block-editor/blocks/card/components/card-image-edit.js
@@ -116,8 +116,11 @@ const CardImageEdit = ( {
 									[ `material-design-card-with-${ contentLayout }` ]: contentLayout,
 								}
 							) }
-							style={ { backgroundImage: `url(${ imageSourceUrl })` } }
 						>
+							<img
+								src={ imageSourceUrl }
+								alt={ cardPrimaryProps.title || '' }
+							/>
 							{ contentLayout === 'text-over-media' && (
 								<div className="mdc-card__media-content">
 									<CardPrimary { ...cardPrimaryProps } />

diff --git a/plugin/assets/src/block-editor/blocks/card/components/card-primary.js b/plugin/assets/src/block-editor/blocks/card/components/card-primary.js
@@ -53,7 +53,6 @@ const CardPrimary = ( {
 						value={ title }
 						onChange={ value => setter( 'title', value, cardIndex ) }
 						placeholder={ __( 'Title goes here', 'material-design' ) }
-						place
 					/>
 				) }
 				{ displaySecondaryText && (

diff --git a/plugin/assets/src/block-editor/blocks/common-posts-list/style.css b/plugin/assets/src/block-editor/blocks/common-posts-list/style.css
@@ -78,10 +78,22 @@
 		text-decoration: none !important;
 	}
 	text-decoration: none !important;
-
 }
 
 .mdc-button__comment-count {
 	justify-content: left !important;
 	min-width: 36px !important;
 }
+
+.mdc-card__media {
+
+	& img {
+		bottom: 0;
+		height: 100%;
+		left: 0;
+		object-fit: cover;
+		position: absolute;
+		top: 0;
+		width: 100%;
+	}
+}
diff --git a/plugin/php/templates/partials/card-image.php b/plugin/php/templates/partials/card-image.php
@@ -47,10 +47,8 @@
 
 if ( ! empty( $featured_image ) ) :
 	?>
-	<div
-		class="<?php echo esc_attr( Template::classnames( $class_names ) ); ?>"
-		style="background-image: url(<?php echo esc_url( $featured_image ); ?>)"
-	>
+	<div class="<?php echo esc_attr( Template::classnames( $class_names ) ); ?>">
+		<?php echo get_the_post_thumbnail( get_the_ID(), 'list' === $style ? 'medium' : 'large' ); ?>
 		<?php
 		if ( 'text-over-media' === $layout ) {
 			?>

diff --git a/plugin/tests/js/block-editor/blocks/card/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/card/__snapshots__/edit.test.js.snap
@@ -574,9 +574,13 @@ Object {
             >
               <div
                 class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"
-                style="background-image: url(http://test.loc/test.jpg);"
                 tabindex="0"
-              />
+              >
+                <img
+                  alt="Test title"
+                  src="http://test.loc/test.jpg"
+                />
+              </div>
             </div>
             <div
               class="material-design-card__primary"
@@ -1202,9 +1206,13 @@ Object {
           >
             <div
               class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"
-              style="background-image: url(http://test.loc/test.jpg);"
               tabindex="0"
-            />
+            >
+              <img
+                alt="Test title"
+                src="http://test.loc/test.jpg"
+              />
+            </div>
           </div>
           <div
             class="material-design-card__primary"
@@ -1911,9 +1919,13 @@ Object {
             >
               <div
                 class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"
-                style="background-image: url(http://test.loc/test.jpg);"
                 tabindex="0"
-              />
+              >
+                <img
+                  alt="Test title"
+                  src="http://test.loc/test.jpg"
+                />
+              </div>
             </div>
             <div
               class="material-design-card__primary"
@@ -2539,9 +2551,13 @@ Object {
           >
             <div
               class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"
-              style="background-image: url(http://test.loc/test.jpg);"
               tabindex="0"
-            />
+            >
+              <img
+                alt="Test title"
+                src="http://test.loc/test.jpg"
+              />
+            </div>
           </div>
           <div
             class="material-design-card__primary"
@@ -3248,9 +3264,13 @@ Object {
             >
               <div
                 class="mdc-card__media mdc-card__media--square material-design-card__media material-design-card-with-text-under-media"
-                style="background-image: url(http://test.loc/test.jpg);"
                 tabindex="0"
-              />
+              >
+                <img
+                  alt="Test title"
+                  src="http://test.loc/test.jpg"
+                />
+              </div>
             </div>
             <div
               class="material-design-card__primary"
@@ -3867,9 +3887,13 @@ Object {
           >
             <div
               class="mdc-card__media mdc-card__media--square material-design-card__media material-design-card-with-text-under-media"
-              style="background-image: url(http://test.loc/test.jpg);"
               tabindex="0"
-            />
+            >
+              <img
+                alt="Test title"
+                src="http://test.loc/test.jpg"
+              />
+            </div>
           </div>
           <div
             class="material-design-card__primary"

diff --git a/...n/tests/js/block-editor/blocks/card/components/__snapshots__/card-image-edit.test.js.snap b/...n/tests/js/block-editor/blocks/card/components/__snapshots__/card-image-edit.test.js.snap
@@ -34,9 +34,12 @@ Object {
       >
         <div
           class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
-          style="background-image: url(http://test.loc/test.jpg);"
           tabindex="0"
         >
+          <img
+            alt=""
+            src="http://test.loc/test.jpg"
+          />
           <div
             class="mdc-card__media-content"
           >
@@ -78,9 +81,12 @@ Object {
     >
       <div
         class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
-        style="background-image: url(http://test.loc/test.jpg);"
         tabindex="0"
       >
+        <img
+          alt=""
+          src="http://test.loc/test.jpg"
+        />
         <div
           class="mdc-card__media-content"
         >
@@ -300,9 +306,12 @@ Object {
       >
         <div
           class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
-          style="background-image: url(http://test.loc/test.jpg);"
           tabindex="0"
         >
+          <img
+            alt=""
+            src="http://test.loc/test.jpg"
+          />
           <div
             class="mdc-card__media-content"
           >
@@ -320,9 +329,12 @@ Object {
     >
       <div
         class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
-        style="background-image: url(http://test.loc/test.jpg);"
         tabindex="0"
       >
+        <img
+          alt=""
+          src="http://test.loc/test.jpg"
+        />
         <div
           class="mdc-card__media-content"
         >
@@ -518,9 +530,12 @@ Object {
       >
         <div
           class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
-          style="background-image: url(http://test.loc/test.jpg);"
           tabindex="0"
         >
+          <img
+            alt=""
+            src="http://test.loc/test.jpg"
+          />
           <div
             class="mdc-card__media-content"
           >
@@ -538,9 +553,12 @@ Object {
     >
       <div
         class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
-        style="background-image: url(http://test.loc/test.jpg);"
         tabindex="0"
       >
+        <img
+          alt=""
+          src="http://test.loc/test.jpg"
+        />
         <div
           class="mdc-card__media-content"
         >

diff --git a/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-image.test.js.snap b/plugin/tests/js/block-editor/blocks/card/components/__snapshots__/card-image.test.js.snap
@@ -244,9 +244,12 @@ Object {
       >
         <div
           class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
-          style="background-image: url(http://test.loc/test.jpg);"
           tabindex="0"
         >
+          <img
+            alt=""
+            src="http://test.loc/test.jpg"
+          />
           <div
             class="mdc-card__media-content"
           >
@@ -264,9 +267,12 @@ Object {
     >
       <div
         class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-over-media"
-        style="background-image: url(http://test.loc/test.jpg);"
         tabindex="0"
       >
+        <img
+          alt=""
+          src="http://test.loc/test.jpg"
+        />
         <div
           class="mdc-card__media-content"
         >

diff --git a/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/cards-collection/__snapshots__/edit.test.js.snap
@@ -11194,7 +11194,6 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                         <ForwardRef
                           className="material-design-card__title mdc-typography mdc-typography--headline6"
                           onChange={[Function]}
-                          place={true}
                           placeholder="Title goes here"
                           tagName="h2"
                           value="Title #1 goes here"
@@ -11514,7 +11513,6 @@ exports[`blocks: material/cards-collection: Edit removes one card from the ui is
                         <ForwardRef
                           className="material-design-card__title mdc-typography mdc-typography--headline6"
                           onChange={[Function]}
-                          place={true}
                           placeholder="Title goes here"
                           tagName="h2"
                           value="Title #2 goes here"

diff --git a/plugin/tests/phpunit/php/blocks/class-test-posts-list-block.php b/plugin/tests/phpunit/php/blocks/class-test-posts-list-block.php
@@ -321,7 +321,7 @@ public function test_render_block_hand_picked() {
 		$content                     = $this->clean_content( $content );
 
 		// Assert the article with featured image shows content inside the image container.
-		$this->assertEquals( 1, substr_count( $content, 'style="background-image: url(http://example.org/wp-content/uploads/image.jpg)"><div class="mdc-card__media-content">' ) );
+		$this->assertEquals( 1, substr_count( $content, '<img width="1" height="1" src="http://example.org/wp-content/uploads/image.jpg"' ) );
 
 		// Assert all 4 posts are rendered.
 		$this->assertEquals( 4, substr_count( $content, 'class="single-post-card__title' ) );
@@ -427,7 +427,7 @@ public function test_render_block_recent() {
 		$content                     = $this->clean_content( $content );
 
 		// Assert the article with featured image shows content inside the image container.
-		$this->assertEquals( 1, substr_count( $content, 'style="background-image: url(http://example.org/wp-content/uploads/image.jpg)"><div class="mdc-card__media-content">' ) );
+		$this->assertEquals( 1, substr_count( $content, '<img width="1" height="1" src="http://example.org/wp-content/uploads/image.jpg"' ) );
 
 		// Assert all 5 posts are rendered.
 		$this->assertEquals( 5, substr_count( $content, 'class="single-post-card__title' ) );

diff --git a/theme/assets/css/src/components/post-card.css b/theme/assets/css/src/components/post-card.css
@@ -50,4 +50,16 @@
 	.post-card__subtitle {
 		color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .54);
 	}
+
+	.mdc-card__media {
+
+		& img {
+			bottom: 0;
+			height: 100%;
+			object-fit: cover;
+			position: absolute;
+			top: 0;
+			width: 100%;
+		}
+	}
 }
diff --git a/theme/template-parts/content.php b/theme/template-parts/content.php
@@ -36,7 +36,9 @@
 	<a class="mdc-card__link" href="<?php the_permalink(); ?>">
 		<div class="mdc-card__primary-action post-card__primary-action">
 			<?php if ( has_post_thumbnail() ) : ?>
-				<div class="mdc-card__media mdc-card__media--16-9 post-card__media" style="background-image: url(&quot;<?php echo esc_attr( get_the_post_thumbnail_url() ); ?>&quot;);"></div>
+				<div class="mdc-card__media mdc-card__media--16-9 post-card__media">
+					<?php the_post_thumbnail(); ?>
+				</div>
 			<?php endif; ?>
 			<div class="post-card__primary">
 				<?php if ( is_sticky() ) : ?>