Merge 714b0cd into 299793e

material-components · Aug 2, 2022 · 26433af · 26433af
2 parents 299793e + 714b0cd
commit 26433af
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 23 deletions.
diff --git a/plugin/assets/images/placeholder-image-card.png b/plugin/assets/images/placeholder-image-card.png
diff --git a/plugin/assets/src/block-editor/blocks/card-image/edit.js b/plugin/assets/src/block-editor/blocks/card-image/edit.js
@@ -20,48 +20,82 @@
 /**
  * WordPress dependencies
  */
+// eslint-disable-next-line import/no-unresolved
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useBlockProps } from '@wordpress/block-editor';
-import ServerSideRender from '@wordpress/server-side-render';
 
 /**
  * Internal dependencies
  */
-import { name } from './block.json';
+import { useSelect } from '@wordpress/data';
+import { getConfig } from '../../utils';
+
+function getMediaSourceUrlBySizeSlug( media, slug ) {
+	return (
+		media?.media_details?.sizes?.[ slug ]?.source_url || media?.source_url
+	);
+}
 
 /**
  * Edit.
  *
  * @param {Object}                                         props
  * @param {{postType:string,postId:number,queryId:number}} props.context
- * @param {Object}                                         props.attributes
  * @return {JSX.Element} Block edit.
  */
-const Edit = ( { context, attributes } ) => {
-	const urlQueryArgs = {
-		materialParamContext: [],
-	};
-	// Server side rendering doesn't support passing context yet. This hack adds context as url param to later manually parse in php.
-	for ( const key in context ) {
-		urlQueryArgs.materialParamContext[ key ] = context[ key ];
-	}
+const Edit = ( { context } ) => {
+	const { postId, postType: postTypeSlug } = context;
 
 	const preventAnchorLink = e => {
 		e.preventDefault();
 		return false;
 	};
 
+	const fallbackImage = getConfig( 'fallBackImageCard' );
+	const [ featuredImage ] = useEntityProp(
+		'postType',
+		postTypeSlug,
+		'featured_media',
+		postId
+	);
+
+	const { media } = useSelect(
+		select => {
+			const { getMedia } = select( coreStore );
+			return {
+				media:
+					featuredImage &&
+					getMedia( featuredImage, {
+						context: 'view',
+					} ),
+			};
+		},
+		[ featuredImage, postTypeSlug ]
+	);
+
+	const [ , , fullTitle ] = useEntityProp(
+		'postType',
+		postTypeSlug,
+		'title',
+		postId
+	);
+	const imageUrl = getMediaSourceUrlBySizeSlug( media, 'post-thumbnail' );
+
 	return (
-		<>
-			{ /* Prevent anchor click coming from SSR. */ }
-			{ /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */ }
-			<div { ...useBlockProps() } onClick={ preventAnchorLink }>
-				<ServerSideRender
-					block={ name }
-					urlQueryArgs={ urlQueryArgs }
-					attributes={ attributes }
+		<div { ...useBlockProps() }>
+			{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
+			<a href="#" onClick={ preventAnchorLink }>
+				<img
+					className="mdc-image-list__image"
+					src={ imageUrl || fallbackImage }
+					alt={ media?.alt_text }
+				/>
+				<div
+					className="mdc-image-list__supporting"
+					dangerouslySetInnerHTML={ { __html: fullTitle?.rendered } }
 				/>
-			</div>
-		</>
+			</a>
+		</div>
 	);
 };
 

diff --git a/plugin/php/class-block-types.php b/plugin/php/class-block-types.php
@@ -245,6 +245,7 @@ public function enqueue_block_editor_assets() {
 			'postTypes'                 => $post_types,
 			'doesRequireBackCompatList' => version_compare( get_bloginfo( 'version' ), '5.8', '<' ),
 			'canUseQueryLoop'           => version_compare( '5.8', get_bloginfo( 'version' ), '<=' ),
+			'fallBackImageCard'         => $this->plugin->asset_url( 'assets/images/placeholder-image-card.png' ),
 		];
 
 		if ( Helpers::is_current_user_admin_or_editor_with_manage_options() ) {

diff --git a/plugin/php/class-plugin.php b/plugin/php/class-plugin.php
@@ -32,7 +32,6 @@
 use MaterialDesign\Plugin\Rest\Design_Assets_REST_Controller;
 use MaterialDesign\Plugin\Rest\Posts_REST_Controller;
 use MaterialDesign\Plugin\Rest\Onboarding_REST_Controller;
-use MaterialDesign\Plugin\Rest\Reset_Card_Style_Controller;
 use MaterialDesign\Plugin\Rest\Reset_Card_Style_Rest_Controller;
 
 /**

diff --git a/plugin/php/template-parts/blocks/image-card-query.php b/plugin/php/template-parts/blocks/image-card-query.php
@@ -28,7 +28,8 @@
 if ( has_post_thumbnail( $post_id_image_card ) ) {
 	$thumbnail = get_the_post_thumbnail_url( $post_id_image_card );
 } else {
-	$thumbnail = get_template_directory_uri() . '/assets/images/placeholder.png';
+	global $material_design_plugin;
+	$thumbnail = $material_design_plugin->asset_url( 'assets/images/placeholder-image-card.png' );
 }
 $wrapper_attributes = get_block_wrapper_attributes();
 ?>