Skip to content

Commit dd069aa

Browse files
ravichdevravichdev
committed
Merge pull request #22 from material-components/fix/564-card-image-remove
Can't remove image from card
2 parents c3e4b17 + b354617 commit dd069aa

File tree

10 files changed

+209
-349
lines changed

10 files changed

+209
-349
lines changed

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

Lines changed: 13 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -56,11 +56,11 @@ const CardImageEdit = ( {
5656
cardPrimaryProps,
5757
cardIndex,
5858
setter,
59+
isFocused,
5960
} ) => {
6061
const [ hasImage, setHasImage ] = useState(
6162
imageSourceUrl !== undefined && imageSourceUrl !== ''
6263
);
63-
const [ isFocused, setIsFocused ] = useState( false );
6464

6565
useEffect( () => {
6666
if ( imageSourceUrl !== undefined && imageSourceUrl !== '' ) {
@@ -90,21 +90,6 @@ const CardImageEdit = ( {
9090
setHasImage( false );
9191
};
9292

93-
/**
94-
* Handle image container on blur event.
95-
*
96-
* @param {Object} event - Event.
97-
*/
98-
const onImageContainerBlur = event => {
99-
const currentTarget = event.currentTarget;
100-
/* istanbul ignore next */
101-
setTimeout( () => {
102-
if ( ! currentTarget.contains( document.activeElement ) ) {
103-
setIsFocused( false );
104-
}
105-
}, 0 );
106-
};
107-
10893
return (
10994
<>
11095
{ ( ! hasImage || isImageEditMode ) && displayImage && (
@@ -120,13 +105,7 @@ const CardImageEdit = ( {
120105
) }
121106
{ hasImage && ! isImageEditMode && imageSourceUrl && (
122107
<>
123-
<div
124-
className={ classnames( 'material-design-card__media-container', {
125-
'material-design-card__media-container-focused': isFocused,
126-
} ) }
127-
onFocus={ () => setIsFocused( true ) }
128-
onBlur={ onImageContainerBlur }
129-
>
108+
<div className="material-design-card__media-container">
130109
<div
131110
tabIndex={ 0 }
132111
className={ classnames(
@@ -145,19 +124,17 @@ const CardImageEdit = ( {
145124
</div>
146125
) }
147126
</div>
148-
<div
149-
className={ classnames( 'material-design-card__media-actions', {
150-
'material-design-card__media-actions-shown': isFocused,
151-
} ) }
152-
>
153-
<Button
154-
className="material-design-card__media-close-button"
155-
icon="no"
156-
showTooltip={ true }
157-
label={ __( 'Remove Card Image', 'material-design' ) }
158-
onClick={ onRemoveImage }
159-
/>
160-
</div>
127+
{ isFocused && (
128+
<div className="material-design-card__media-actions">
129+
<Button
130+
className="material-design-card__media-close-button"
131+
icon="no"
132+
showTooltip={ true }
133+
label={ __( 'Remove Card Image', 'material-design' ) }
134+
onClick={ onRemoveImage }
135+
/>
136+
</div>
137+
) }
161138
</div>
162139
</>
163140
) }

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ const CardImage = ( {
5252
setter,
5353
isEditMode,
5454
} ) => {
55+
const { isFocused } = cardPrimaryProps;
5556
const cardImageEditProps = {
5657
imageSourceUrl,
5758
isImageEditMode,
@@ -62,6 +63,7 @@ const CardImage = ( {
6263
cardIndex,
6364
setter,
6465
isEditMode,
66+
isFocused,
6567
};
6668

6769
return (

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ const HorizontalCardLayout = ( {
104104
cardIndex,
105105
setter,
106106
isEditMode,
107+
isFocused,
107108
};
108109

109110
const styles = {};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ const VerticalCardLayout = ( {
9595
cardIndex,
9696
setter,
9797
isEditMode,
98+
isFocused,
9899
};
99100

100101
const cardImageProps = {

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

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,11 @@
1414
* limitations under the License.
1515
*/
1616

17-
.material-design-card__media-container-focused {
18-
border: 4px rgb(0, 113, 161) solid;
19-
17+
.material-design-card__media-container {
18+
position: relative;
2019
}
2120

2221
.material-design-card__media-actions {
23-
display: none;
2422
position: absolute;
2523
right: 10px;
2624
top: 10px;
@@ -29,16 +27,13 @@
2927
border-radius: 4px;
3028
transition: box-shadow 0.2s ease-out;
3129
height: 27px;
30+
z-index: 10;
3231

33-
> button {
32+
& > button {
3433
height: 25px;
3534
}
3635
}
3736

38-
.material-design-card__media-actions-shown {
39-
display: block !important;
40-
}
41-
4237
.material-design-card__media-close-button {
4338
padding: 2px !important;
4439
}

‎plugin/tests/js/block-editor/blocks/card/__snapshots__/edit.test.js.snap‎

Lines changed: 0 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -577,30 +577,6 @@ Object {
577577
style="background-image: url(http://test.loc/test.jpg);"
578578
tabindex="0"
579579
/>
580-
<div
581-
class="material-design-card__media-actions"
582-
>
583-
<button
584-
aria-label="Remove Card Image"
585-
class="components-button material-design-card__media-close-button has-icon"
586-
type="button"
587-
>
588-
<svg
589-
aria-hidden="true"
590-
class="dashicon dashicons-no"
591-
focusable="false"
592-
height="20"
593-
role="img"
594-
viewBox="0 0 20 20"
595-
width="20"
596-
xmlns="http://www.w3.org/2000/svg"
597-
>
598-
<path
599-
d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
600-
/>
601-
</svg>
602-
</button>
603-
</div>
604580
</div>
605581
<div
606582
class="material-design-card__primary"
@@ -1229,30 +1205,6 @@ Object {
12291205
style="background-image: url(http://test.loc/test.jpg);"
12301206
tabindex="0"
12311207
/>
1232-
<div
1233-
class="material-design-card__media-actions"
1234-
>
1235-
<button
1236-
aria-label="Remove Card Image"
1237-
class="components-button material-design-card__media-close-button has-icon"
1238-
type="button"
1239-
>
1240-
<svg
1241-
aria-hidden="true"
1242-
class="dashicon dashicons-no"
1243-
focusable="false"
1244-
height="20"
1245-
role="img"
1246-
viewBox="0 0 20 20"
1247-
width="20"
1248-
xmlns="http://www.w3.org/2000/svg"
1249-
>
1250-
<path
1251-
d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
1252-
/>
1253-
</svg>
1254-
</button>
1255-
</div>
12561208
</div>
12571209
<div
12581210
class="material-design-card__primary"
@@ -1962,30 +1914,6 @@ Object {
19621914
style="background-image: url(http://test.loc/test.jpg);"
19631915
tabindex="0"
19641916
/>
1965-
<div
1966-
class="material-design-card__media-actions"
1967-
>
1968-
<button
1969-
aria-label="Remove Card Image"
1970-
class="components-button material-design-card__media-close-button has-icon"
1971-
type="button"
1972-
>
1973-
<svg
1974-
aria-hidden="true"
1975-
class="dashicon dashicons-no"
1976-
focusable="false"
1977-
height="20"
1978-
role="img"
1979-
viewBox="0 0 20 20"
1980-
width="20"
1981-
xmlns="http://www.w3.org/2000/svg"
1982-
>
1983-
<path
1984-
d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
1985-
/>
1986-
</svg>
1987-
</button>
1988-
</div>
19891917
</div>
19901918
<div
19911919
class="material-design-card__primary"
@@ -2614,30 +2542,6 @@ Object {
26142542
style="background-image: url(http://test.loc/test.jpg);"
26152543
tabindex="0"
26162544
/>
2617-
<div
2618-
class="material-design-card__media-actions"
2619-
>
2620-
<button
2621-
aria-label="Remove Card Image"
2622-
class="components-button material-design-card__media-close-button has-icon"
2623-
type="button"
2624-
>
2625-
<svg
2626-
aria-hidden="true"
2627-
class="dashicon dashicons-no"
2628-
focusable="false"
2629-
height="20"
2630-
role="img"
2631-
viewBox="0 0 20 20"
2632-
width="20"
2633-
xmlns="http://www.w3.org/2000/svg"
2634-
>
2635-
<path
2636-
d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
2637-
/>
2638-
</svg>
2639-
</button>
2640-
</div>
26412545
</div>
26422546
<div
26432547
class="material-design-card__primary"
@@ -3347,30 +3251,6 @@ Object {
33473251
style="background-image: url(http://test.loc/test.jpg);"
33483252
tabindex="0"
33493253
/>
3350-
<div
3351-
class="material-design-card__media-actions"
3352-
>
3353-
<button
3354-
aria-label="Remove Card Image"
3355-
class="components-button material-design-card__media-close-button has-icon"
3356-
type="button"
3357-
>
3358-
<svg
3359-
aria-hidden="true"
3360-
class="dashicon dashicons-no"
3361-
focusable="false"
3362-
height="20"
3363-
role="img"
3364-
viewBox="0 0 20 20"
3365-
width="20"
3366-
xmlns="http://www.w3.org/2000/svg"
3367-
>
3368-
<path
3369-
d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
3370-
/>
3371-
</svg>
3372-
</button>
3373-
</div>
33743254
</div>
33753255
<div
33763256
class="material-design-card__primary"
@@ -3990,30 +3870,6 @@ Object {
39903870
style="background-image: url(http://test.loc/test.jpg);"
39913871
tabindex="0"
39923872
/>
3993-
<div
3994-
class="material-design-card__media-actions"
3995-
>
3996-
<button
3997-
aria-label="Remove Card Image"
3998-
class="components-button material-design-card__media-close-button has-icon"
3999-
type="button"
4000-
>
4001-
<svg
4002-
aria-hidden="true"
4003-
class="dashicon dashicons-no"
4004-
focusable="false"
4005-
height="20"
4006-
role="img"
4007-
viewBox="0 0 20 20"
4008-
width="20"
4009-
xmlns="http://www.w3.org/2000/svg"
4010-
>
4011-
<path
4012-
d="M12.12 10l3.53 3.53-2.12 2.12L10 12.12l-3.54 3.54-2.12-2.12L7.88 10 4.34 6.46l2.12-2.12L10 7.88l3.54-3.53 2.12 2.12z"
4013-
/>
4014-
</svg>
4015-
</button>
4016-
</div>
40173873
</div>
40183874
<div
40193875
class="material-design-card__primary"

0 commit comments

Comments
 (0)