Merge pull request #45 from material-components/fix/17-card-image

Fix card image remove
material-components · Apr 13, 2021 · af0f869 · af0f869
2 parents 349519e + ccb8cc9
commit af0f869
Show file tree

Hide file tree

Showing 16 changed files with 424 additions and 186 deletions.
diff --git a/plugin/assets/src/block-editor/blocks/card/block.json b/plugin/assets/src/block-editor/blocks/card/block.json
@@ -1,92 +1,96 @@
 {
-	"name": "material/card",
-	"category": "material",
-	"attributes": {
-	   "contentLayout": {
-		  "type": "string",
-		  "default": "text-under-media"
-	   },
-	   "title": {
-		  "type": "string",
-		  "default": ""
-	   },
-	   "displayTitle": {
-		  "type": "boolean",
-		  "default": true
-	   },
-	   "secondaryText": {
-		  "type": "string",
-		  "default": ""
-	   },
-	   "displaySecondaryText": {
-		  "type": "boolean",
-		  "default": true
-	   },
-	   "imageSourceUrl": {
-		  "type": "string"
-	   },
-	   "isImageEditMode": {
-		  "type": "boolean"
-	   },
-	   "displayImage": {
-		  "type": "boolean",
-		  "default": true
-	   },
-	   "supportingText": {
-		  "type": "string",
-		  "default": ""
-	   },
-	   "displaySupportingText": {
-		  "type": "boolean",
-		  "default": true
-	   },
-	   "primaryActionButtonLabel": {
-		  "type": "string",
-		  "default": ""
-	   },
-	   "primaryActionButtonUrl": {
-		  "type": "string"
-	   },
-	   "primaryActionButtonNewTab": {
-		  "type": "bool",
-		  "default": false
-	   },
-	   "primaryActionButtonNoFollow": {
-		  "type": "bool",
-		  "default": false
-	   },
-	   "secondaryActionButtonLabel": {
-		  "type": "string",
-		  "default": ""
-	   },
-	   "secondaryActionButtonUrl": {
-		  "type": "string"
-	   },
-	   "secondaryActionButtonNewTab": {
-		  "type": "bool",
-		  "default": false
-	   },
-	   "secondaryActionButtonNoFollow": {
-		  "type": "bool",
-		  "default": false
-	   },
-	   "displayActions": {
-		  "type": "boolean",
-		  "default": true
-	   },
-	   "displaySecondaryActionButton": {
-		  "type": "bool",
-		  "default": false
-	   },
-	   "cornerRadius": {
-		  "type": "number"
-	   },
-	   "outlined": {
-		  "type": "boolean",
-		  "default": false
-	   }
-	},
-	"supports": {
-		"align": [ "left", "right" ]
-	}
- }
+  "name": "material/card",
+  "category": "material",
+  "attributes": {
+    "contentLayout": {
+      "type": "string",
+      "default": "text-under-media"
+    },
+    "title": {
+      "type": "string",
+      "default": ""
+    },
+    "displayTitle": {
+      "type": "boolean",
+      "default": true
+    },
+    "secondaryText": {
+      "type": "string",
+      "default": ""
+    },
+    "displaySecondaryText": {
+      "type": "boolean",
+      "default": true
+    },
+    "imageSourceUrl": {
+      "type": "string"
+    },
+    "isImageEditMode": {
+      "type": "boolean"
+    },
+    "displayImage": {
+      "type": "boolean",
+      "default": true
+    },
+    "supportingText": {
+      "type": "string",
+      "default": ""
+    },
+    "displaySupportingText": {
+      "type": "boolean",
+      "default": true
+    },
+    "primaryActionButtonLabel": {
+      "type": "string",
+      "default": ""
+    },
+    "primaryActionButtonUrl": {
+      "type": "string"
+    },
+    "primaryActionButtonNewTab": {
+      "type": "bool",
+      "default": false
+    },
+    "primaryActionButtonNoFollow": {
+      "type": "bool",
+      "default": false
+    },
+    "secondaryActionButtonLabel": {
+      "type": "string",
+      "default": ""
+    },
+    "secondaryActionButtonUrl": {
+      "type": "string"
+    },
+    "secondaryActionButtonNewTab": {
+      "type": "bool",
+      "default": false
+    },
+    "secondaryActionButtonNoFollow": {
+      "type": "bool",
+      "default": false
+    },
+    "displayActions": {
+      "type": "boolean",
+      "default": true
+    },
+    "displaySecondaryActionButton": {
+      "type": "bool",
+      "default": false
+    },
+    "cornerRadius": {
+      "type": "number"
+    },
+    "outlined": {
+      "type": "boolean",
+      "default": false
+    },
+    "imageElement": {
+      "type": "boolean",
+      "default": true
+    }
+  },
+  "supports": {
+    "align": [ "left", "right" ]
+  }
+}
diff --git a/plugin/assets/src/block-editor/blocks/card/components/card-image.js b/plugin/assets/src/block-editor/blocks/card/components/card-image.js
@@ -51,6 +51,7 @@ const CardImage = ( {
 	cardIndex,
 	setter,
 	isEditMode,
+	imageElement,
 } ) => {
 	const { isFocused } = cardPrimaryProps;
 	const cardImageEditProps = {
@@ -66,6 +67,10 @@ const CardImage = ( {
 		isFocused,
 	};
 
+	const style = ! imageElement
+		? { backgroundImage: `url(${ imageSourceUrl })` }
+		: {};
+
 	return (
 		<>
 			{ isEditMode ? (
@@ -82,8 +87,14 @@ const CardImage = ( {
 								[ `material-design-card-with-${ contentLayout }` ]: contentLayout,
 							}
 						) }
-						style={ { backgroundImage: `url(${ imageSourceUrl })` } }
+						style={ style }
 					>
+						{ imageElement && (
+							<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/horizontal-card-layout.js b/plugin/assets/src/block-editor/blocks/card/components/horizontal-card-layout.js
@@ -78,6 +78,7 @@ const HorizontalCardLayout = ( {
 	displayActions,
 	outlined,
 	cornerRadius,
+	imageElement,
 	setter,
 	isEditMode,
 	isFocused,
@@ -105,6 +106,7 @@ const HorizontalCardLayout = ( {
 		setter,
 		isEditMode,
 		isFocused,
+		imageElement,
 	};
 
 	const styles = {};

diff --git a/plugin/assets/src/block-editor/blocks/card/components/vertical-card-layout.js b/plugin/assets/src/block-editor/blocks/card/components/vertical-card-layout.js
@@ -83,6 +83,7 @@ const VerticalCardLayout = ( {
 	displayActions,
 	outlined,
 	cornerRadius,
+	imageElement,
 	setter,
 	isEditMode,
 	isFocused,
@@ -108,6 +109,7 @@ const VerticalCardLayout = ( {
 		cardIndex,
 		setter,
 		isEditMode,
+		imageElement,
 	};
 
 	const styles = {};

diff --git a/plugin/assets/src/block-editor/blocks/card/deprecated.js b/plugin/assets/src/block-editor/blocks/card/deprecated.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import save from './save';
+import metadata from './block.json';
+
+const { attributes } = metadata;
+
+const deprecated = [
+	{
+		attributes: { ...omit( attributes, [ 'imageElement' ] ) },
+		save,
+		migrate( attr ) {
+			if ( 'undefined' === typeof attr.imageElement ) {
+				attr = {
+					...attr,
+					...{
+						imageElement: true,
+					},
+				};
+			}
+
+			return attr;
+		},
+		isEligible( attr ) {
+			return 'undefined' === typeof attr.imageElement;
+		},
+	},
+];
+
+export default deprecated;
diff --git a/plugin/assets/src/block-editor/blocks/card/edit.js b/plugin/assets/src/block-editor/blocks/card/edit.js
@@ -100,6 +100,7 @@ const Edit = ( { attributes, setAttributes, className } ) => {
 		cornerRadius,
 		setter,
 		isEditMode: true,
+		isFocused: true,
 	};
 
 	const inspectorControlsStylePanelProps = {

diff --git a/plugin/assets/src/block-editor/blocks/card/editor.css b/plugin/assets/src/block-editor/blocks/card/editor.css
@@ -34,11 +34,12 @@
 	}
 }
 
-.material-design-card__media-close-button {
+.edit-post-visual-editor .material-design-card__media-close-button {
+	min-width: 0;
 	padding: 2px !important;
 
 	& .dashicon {
-		margin: 0 !important;
+		margin: 0;
 	}
 }
 

diff --git a/plugin/assets/src/block-editor/blocks/card/index.js b/plugin/assets/src/block-editor/blocks/card/index.js
@@ -22,6 +22,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import deprecated from './deprecated';
 import edit from './edit';
 import save from './save';
 import metadata from './block.json';
@@ -45,4 +46,5 @@ export const settings = {
 	example,
 	edit,
 	save,
+	deprecated,
 };
diff --git a/plugin/assets/src/block-editor/blocks/card/save.js b/plugin/assets/src/block-editor/blocks/card/save.js
@@ -55,6 +55,7 @@ const Save = ( { attributes, className } ) => {
 		displaySecondaryActionButton,
 		outlined,
 		cornerRadius,
+		imageElement,
 	} = attributes;
 
 	const cardProps = {
@@ -81,6 +82,7 @@ const Save = ( { attributes, className } ) => {
 		displaySecondaryActionButton,
 		outlined,
 		cornerRadius,
+		imageElement,
 		setter: () => {},
 		isEditMode: false,
 	};