Skip to content

Commit 6538982

Browse files
ravichdevravichdev
committed
Merge branch 'develop' into feature/543-build
2 parents 2bbef93 + dd069aa commit 6538982

File tree

10 files changed

+215
-349
lines changed

10 files changed

+215
-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(
@@ -148,19 +127,17 @@ const CardImageEdit = ( {
148127
</div>
149128
) }
150129
</div>
151-
<div
152-
className={ classnames( 'material-design-card__media-actions', {
153-
'material-design-card__media-actions-shown': isFocused,
154-
} ) }
155-
>
156-
<Button
157-
className="material-design-card__media-close-button"
158-
icon="no"
159-
showTooltip={ true }
160-
label={ __( 'Remove Card Image', 'material-design' ) }
161-
onClick={ onRemoveImage }
162-
/>
163-
</div>
130+
{ isFocused && (
131+
<div className="material-design-card__media-actions">
132+
<Button
133+
className="material-design-card__media-close-button"
134+
icon="no"
135+
showTooltip={ true }
136+
label={ __( 'Remove Card Image', 'material-design' ) }
137+
onClick={ onRemoveImage }
138+
/>
139+
</div>
140+
) }
164141
</div>
165142
</>
166143
) }

‎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
@@ -581,30 +581,6 @@ Object {
581581
src="http://test.loc/test.jpg"
582582
/>
583583
</div>
584-
<div
585-
class="material-design-card__media-actions"
586-
>
587-
<button
588-
aria-label="Remove Card Image"
589-
class="components-button material-design-card__media-close-button has-icon"
590-
type="button"
591-
>
592-
<svg
593-
aria-hidden="true"
594-
class="dashicon dashicons-no"
595-
focusable="false"
596-
height="20"
597-
role="img"
598-
viewBox="0 0 20 20"
599-
width="20"
600-
xmlns="http://www.w3.org/2000/svg"
601-
>
602-
<path
603-
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"
604-
/>
605-
</svg>
606-
</button>
607-
</div>
608584
</div>
609585
<div
610586
class="material-design-card__primary"
@@ -1237,30 +1213,6 @@ Object {
12371213
src="http://test.loc/test.jpg"
12381214
/>
12391215
</div>
1240-
<div
1241-
class="material-design-card__media-actions"
1242-
>
1243-
<button
1244-
aria-label="Remove Card Image"
1245-
class="components-button material-design-card__media-close-button has-icon"
1246-
type="button"
1247-
>
1248-
<svg
1249-
aria-hidden="true"
1250-
class="dashicon dashicons-no"
1251-
focusable="false"
1252-
height="20"
1253-
role="img"
1254-
viewBox="0 0 20 20"
1255-
width="20"
1256-
xmlns="http://www.w3.org/2000/svg"
1257-
>
1258-
<path
1259-
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"
1260-
/>
1261-
</svg>
1262-
</button>
1263-
</div>
12641216
</div>
12651217
<div
12661218
class="material-design-card__primary"
@@ -1974,30 +1926,6 @@ Object {
19741926
src="http://test.loc/test.jpg"
19751927
/>
19761928
</div>
1977-
<div
1978-
class="material-design-card__media-actions"
1979-
>
1980-
<button
1981-
aria-label="Remove Card Image"
1982-
class="components-button material-design-card__media-close-button has-icon"
1983-
type="button"
1984-
>
1985-
<svg
1986-
aria-hidden="true"
1987-
class="dashicon dashicons-no"
1988-
focusable="false"
1989-
height="20"
1990-
role="img"
1991-
viewBox="0 0 20 20"
1992-
width="20"
1993-
xmlns="http://www.w3.org/2000/svg"
1994-
>
1995-
<path
1996-
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"
1997-
/>
1998-
</svg>
1999-
</button>
2000-
</div>
20011929
</div>
20021930
<div
20031931
class="material-design-card__primary"
@@ -2630,30 +2558,6 @@ Object {
26302558
src="http://test.loc/test.jpg"
26312559
/>
26322560
</div>
2633-
<div
2634-
class="material-design-card__media-actions"
2635-
>
2636-
<button
2637-
aria-label="Remove Card Image"
2638-
class="components-button material-design-card__media-close-button has-icon"
2639-
type="button"
2640-
>
2641-
<svg
2642-
aria-hidden="true"
2643-
class="dashicon dashicons-no"
2644-
focusable="false"
2645-
height="20"
2646-
role="img"
2647-
viewBox="0 0 20 20"
2648-
width="20"
2649-
xmlns="http://www.w3.org/2000/svg"
2650-
>
2651-
<path
2652-
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"
2653-
/>
2654-
</svg>
2655-
</button>
2656-
</div>
26572561
</div>
26582562
<div
26592563
class="material-design-card__primary"
@@ -3367,30 +3271,6 @@ Object {
33673271
src="http://test.loc/test.jpg"
33683272
/>
33693273
</div>
3370-
<div
3371-
class="material-design-card__media-actions"
3372-
>
3373-
<button
3374-
aria-label="Remove Card Image"
3375-
class="components-button material-design-card__media-close-button has-icon"
3376-
type="button"
3377-
>
3378-
<svg
3379-
aria-hidden="true"
3380-
class="dashicon dashicons-no"
3381-
focusable="false"
3382-
height="20"
3383-
role="img"
3384-
viewBox="0 0 20 20"
3385-
width="20"
3386-
xmlns="http://www.w3.org/2000/svg"
3387-
>
3388-
<path
3389-
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"
3390-
/>
3391-
</svg>
3392-
</button>
3393-
</div>
33943274
</div>
33953275
<div
33963276
class="material-design-card__primary"
@@ -4014,30 +3894,6 @@ Object {
40143894
src="http://test.loc/test.jpg"
40153895
/>
40163896
</div>
4017-
<div
4018-
class="material-design-card__media-actions"
4019-
>
4020-
<button
4021-
aria-label="Remove Card Image"
4022-
class="components-button material-design-card__media-close-button has-icon"
4023-
type="button"
4024-
>
4025-
<svg
4026-
aria-hidden="true"
4027-
class="dashicon dashicons-no"
4028-
focusable="false"
4029-
height="20"
4030-
role="img"
4031-
viewBox="0 0 20 20"
4032-
width="20"
4033-
xmlns="http://www.w3.org/2000/svg"
4034-
>
4035-
<path
4036-
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"
4037-
/>
4038-
</svg>
4039-
</button>
4040-
</div>
40413897
</div>
40423898
<div
40433899
class="material-design-card__primary"

0 commit comments

Comments
 (0)