Skip to content

Commit af0f869

Browse files
Mario Aguiarravichdev
Mario Aguiar
authored and
ravichdev
committed
Merge pull request #45 from material-components/fix/17-card-image
Fix card image remove
2 parents 349519e + ccb8cc9 commit af0f869

File tree

16 files changed

+424
-186
lines changed

16 files changed

+424
-186
lines changed

‎plugin/assets/src/block-editor/blocks/card/block.json‎

Lines changed: 95 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,96 @@
11
{
2-
"name": "material/card",
3-
"category": "material",
4-
"attributes": {
5-
"contentLayout": {
6-
"type": "string",
7-
"default": "text-under-media"
8-
},
9-
"title": {
10-
"type": "string",
11-
"default": ""
12-
},
13-
"displayTitle": {
14-
"type": "boolean",
15-
"default": true
16-
},
17-
"secondaryText": {
18-
"type": "string",
19-
"default": ""
20-
},
21-
"displaySecondaryText": {
22-
"type": "boolean",
23-
"default": true
24-
},
25-
"imageSourceUrl": {
26-
"type": "string"
27-
},
28-
"isImageEditMode": {
29-
"type": "boolean"
30-
},
31-
"displayImage": {
32-
"type": "boolean",
33-
"default": true
34-
},
35-
"supportingText": {
36-
"type": "string",
37-
"default": ""
38-
},
39-
"displaySupportingText": {
40-
"type": "boolean",
41-
"default": true
42-
},
43-
"primaryActionButtonLabel": {
44-
"type": "string",
45-
"default": ""
46-
},
47-
"primaryActionButtonUrl": {
48-
"type": "string"
49-
},
50-
"primaryActionButtonNewTab": {
51-
"type": "bool",
52-
"default": false
53-
},
54-
"primaryActionButtonNoFollow": {
55-
"type": "bool",
56-
"default": false
57-
},
58-
"secondaryActionButtonLabel": {
59-
"type": "string",
60-
"default": ""
61-
},
62-
"secondaryActionButtonUrl": {
63-
"type": "string"
64-
},
65-
"secondaryActionButtonNewTab": {
66-
"type": "bool",
67-
"default": false
68-
},
69-
"secondaryActionButtonNoFollow": {
70-
"type": "bool",
71-
"default": false
72-
},
73-
"displayActions": {
74-
"type": "boolean",
75-
"default": true
76-
},
77-
"displaySecondaryActionButton": {
78-
"type": "bool",
79-
"default": false
80-
},
81-
"cornerRadius": {
82-
"type": "number"
83-
},
84-
"outlined": {
85-
"type": "boolean",
86-
"default": false
87-
}
88-
},
89-
"supports": {
90-
"align": [ "left", "right" ]
91-
}
92-
}
2+
"name": "material/card",
3+
"category": "material",
4+
"attributes": {
5+
"contentLayout": {
6+
"type": "string",
7+
"default": "text-under-media"
8+
},
9+
"title": {
10+
"type": "string",
11+
"default": ""
12+
},
13+
"displayTitle": {
14+
"type": "boolean",
15+
"default": true
16+
},
17+
"secondaryText": {
18+
"type": "string",
19+
"default": ""
20+
},
21+
"displaySecondaryText": {
22+
"type": "boolean",
23+
"default": true
24+
},
25+
"imageSourceUrl": {
26+
"type": "string"
27+
},
28+
"isImageEditMode": {
29+
"type": "boolean"
30+
},
31+
"displayImage": {
32+
"type": "boolean",
33+
"default": true
34+
},
35+
"supportingText": {
36+
"type": "string",
37+
"default": ""
38+
},
39+
"displaySupportingText": {
40+
"type": "boolean",
41+
"default": true
42+
},
43+
"primaryActionButtonLabel": {
44+
"type": "string",
45+
"default": ""
46+
},
47+
"primaryActionButtonUrl": {
48+
"type": "string"
49+
},
50+
"primaryActionButtonNewTab": {
51+
"type": "bool",
52+
"default": false
53+
},
54+
"primaryActionButtonNoFollow": {
55+
"type": "bool",
56+
"default": false
57+
},
58+
"secondaryActionButtonLabel": {
59+
"type": "string",
60+
"default": ""
61+
},
62+
"secondaryActionButtonUrl": {
63+
"type": "string"
64+
},
65+
"secondaryActionButtonNewTab": {
66+
"type": "bool",
67+
"default": false
68+
},
69+
"secondaryActionButtonNoFollow": {
70+
"type": "bool",
71+
"default": false
72+
},
73+
"displayActions": {
74+
"type": "boolean",
75+
"default": true
76+
},
77+
"displaySecondaryActionButton": {
78+
"type": "bool",
79+
"default": false
80+
},
81+
"cornerRadius": {
82+
"type": "number"
83+
},
84+
"outlined": {
85+
"type": "boolean",
86+
"default": false
87+
},
88+
"imageElement": {
89+
"type": "boolean",
90+
"default": true
91+
}
92+
},
93+
"supports": {
94+
"align": [ "left", "right" ]
95+
}
96+
}

‎plugin/assets/src/block-editor/blocks/card/components/card-image.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ const CardImage = ( {
5151
cardIndex,
5252
setter,
5353
isEditMode,
54+
imageElement,
5455
} ) => {
5556
const { isFocused } = cardPrimaryProps;
5657
const cardImageEditProps = {
@@ -66,6 +67,10 @@ const CardImage = ( {
6667
isFocused,
6768
};
6869

70+
const style = ! imageElement
71+
? { backgroundImage: `url(${ imageSourceUrl })` }
72+
: {};
73+
6974
return (
7075
<>
7176
{ isEditMode ? (
@@ -82,8 +87,14 @@ const CardImage = ( {
8287
[ `material-design-card-with-${ contentLayout }` ]: contentLayout,
8388
}
8489
) }
85-
style={ { backgroundImage: `url(${ imageSourceUrl })` } }
90+
style={ style }
8691
>
92+
{ imageElement && (
93+
<img
94+
src={ imageSourceUrl }
95+
alt={ cardPrimaryProps.title || '' }
96+
/>
97+
) }
8798
{ contentLayout === 'text-over-media' && (
8899
<div className="mdc-card__media-content">
89100
<CardPrimary { ...cardPrimaryProps } />

‎plugin/assets/src/block-editor/blocks/card/components/horizontal-card-layout.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ const HorizontalCardLayout = ( {
7878
displayActions,
7979
outlined,
8080
cornerRadius,
81+
imageElement,
8182
setter,
8283
isEditMode,
8384
isFocused,
@@ -105,6 +106,7 @@ const HorizontalCardLayout = ( {
105106
setter,
106107
isEditMode,
107108
isFocused,
109+
imageElement,
108110
};
109111

110112
const styles = {};

‎plugin/assets/src/block-editor/blocks/card/components/vertical-card-layout.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ const VerticalCardLayout = ( {
8383
displayActions,
8484
outlined,
8585
cornerRadius,
86+
imageElement,
8687
setter,
8788
isEditMode,
8889
isFocused,
@@ -108,6 +109,7 @@ const VerticalCardLayout = ( {
108109
cardIndex,
109110
setter,
110111
isEditMode,
112+
imageElement,
111113
};
112114

113115
const styles = {};

‎plugin/assets/src/block-editor/blocks/card/deprecated.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/**
2+
* Copyright 2021 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* External dependencies
19+
*/
20+
import { omit } from 'lodash';
21+
22+
/**
23+
* Internal dependencies
24+
*/
25+
import save from './save';
26+
import metadata from './block.json';
27+
28+
const { attributes } = metadata;
29+
30+
const deprecated = [
31+
{
32+
attributes: { ...omit( attributes, [ 'imageElement' ] ) },
33+
save,
34+
migrate( attr ) {
35+
if ( 'undefined' === typeof attr.imageElement ) {
36+
attr = {
37+
...attr,
38+
...{
39+
imageElement: true,
40+
},
41+
};
42+
}
43+
44+
return attr;
45+
},
46+
isEligible( attr ) {
47+
return 'undefined' === typeof attr.imageElement;
48+
},
49+
},
50+
];
51+
52+
export default deprecated;

‎plugin/assets/src/block-editor/blocks/card/edit.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ const Edit = ( { attributes, setAttributes, className } ) => {
100100
cornerRadius,
101101
setter,
102102
isEditMode: true,
103+
isFocused: true,
103104
};
104105

105106
const inspectorControlsStylePanelProps = {

‎plugin/assets/src/block-editor/blocks/card/editor.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,12 @@
3434
}
3535
}
3636

37-
.material-design-card__media-close-button {
37+
.edit-post-visual-editor .material-design-card__media-close-button {
38+
min-width: 0;
3839
padding: 2px !important;
3940

4041
& .dashicon {
41-
margin: 0 !important;
42+
margin: 0;
4243
}
4344
}
4445

‎plugin/assets/src/block-editor/blocks/card/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { __ } from '@wordpress/i18n';
2222
/**
2323
* Internal dependencies
2424
*/
25+
import deprecated from './deprecated';
2526
import edit from './edit';
2627
import save from './save';
2728
import metadata from './block.json';
@@ -45,4 +46,5 @@ export const settings = {
4546
example,
4647
edit,
4748
save,
49+
deprecated,
4850
};

‎plugin/assets/src/block-editor/blocks/card/save.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const Save = ( { attributes, className } ) => {
5555
displaySecondaryActionButton,
5656
outlined,
5757
cornerRadius,
58+
imageElement,
5859
} = attributes;
5960

6061
const cardProps = {
@@ -81,6 +82,7 @@ const Save = ( { attributes, className } ) => {
8182
displaySecondaryActionButton,
8283
outlined,
8384
cornerRadius,
85+
imageElement,
8486
setter: () => {},
8587
isEditMode: false,
8688
};

0 commit comments

Comments
 (0)