Add empty state to images block (#41165)
* Add svgs * Add image place holder * Refactor components * Fix styles * Add changelog * Remove comment * Add text translation * Remove line
This commit is contained in:
Fernando Marichal
GitHub
parent
ba43dce533
commit
fd8a5604ba
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Add empty state to images block #41165
|
||||
|
|
@ -25,6 +25,7 @@ import { useEntityProp } from '@wordpress/core-data';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import { ProductEditorBlockEditProps } from '../../../types';
|
||||
import { PlaceHolder } from './place-holder';
|
||||
|
||||
type UploadImage = {
|
||||
id?: number;
|
||||
|
|
@ -193,6 +194,11 @@ export function Edit( {
|
|||
}
|
||||
}
|
||||
|
||||
const isImageGalleryVisible =
|
||||
propertyValue !== null &&
|
||||
Array.isArray( propertyValue ) &&
|
||||
propertyValue.length > 0;
|
||||
|
||||
return (
|
||||
<div { ...blockProps }>
|
||||
<div className="woocommerce-product-form__image-drop-zone">
|
||||
|
|
@ -236,7 +242,7 @@ export function Edit( {
|
|||
/>
|
||||
) }
|
||||
</div>
|
||||
{ propertyValue !== null && propertyValue !== undefined && (
|
||||
{ isImageGalleryVisible ? (
|
||||
<ImageGallery
|
||||
allowDragging={ false }
|
||||
onDragStart={ handleDragStart }
|
||||
|
|
@ -263,6 +269,8 @@ export function Edit( {
|
|||
/>
|
||||
) ) }
|
||||
</ImageGallery>
|
||||
) : (
|
||||
<PlaceHolder />
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "./place-holder/style.scss";
|
||||
|
||||
.wp-block-woocommerce-product-images-field {
|
||||
.woocommerce-media-uploader {
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { createElement } from '@wordpress/element';
|
||||
|
||||
export function CloseUp( { ...props }: React.SVGProps< SVGSVGElement > ) {
|
||||
return (
|
||||
<svg
|
||||
{ ...props }
|
||||
width="59"
|
||||
height="80"
|
||||
viewBox="0 0 59 80"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M54.0218 14.4803C43.085 14.4803 36.7511 16.3926 33.1392 20.6507C35.477 12.41 39.7967 6.22334 47.6879 0.620117C38.3366 1.82746 32.9086 5.38063 30.2796 10.4653C27.6506 5.38468 22.2226 1.83152 12.8713 0.620117C20.7625 6.22334 25.0822 12.4059 27.42 20.6507C23.8081 16.3926 17.4742 14.4803 6.53735 14.4803C19.5733 20.6021 24.5604 25.5287 28.8073 34.357H31.7478C35.9947 25.5287 40.9858 20.6021 54.0178 14.4803H54.0218Z"
|
||||
fill="#DDDDDD"
|
||||
/>
|
||||
<path
|
||||
d="M38.9992 110.617C43.241 109.045 58.7943 105.593 58.7943 90.5271C58.7943 81.5787 50.7013 74.8288 41.5135 73.2623C45.6013 71.9266 51.5706 65.9793 51.5706 59.3065C51.5706 50.7098 43.7912 47.28 37.4313 45.9498C37.4313 43.9875 44.5009 33.8628 44.5009 33.8628H15.276C15.276 33.8628 22.3456 43.9875 22.3456 45.9498C15.9802 47.2855 8.20633 50.7098 8.20633 59.3065C8.20633 65.9793 14.1757 71.9266 18.2634 73.2623C9.07009 74.8343 0.982605 81.5841 0.982605 90.5271C0.982605 105.599 16.5359 109.051 20.7777 110.617C10.7206 111.557 5.69205 115.482 4.91081 118.62H54.8716C54.0849 115.482 49.0563 111.557 39.0047 110.617H38.9992Z"
|
||||
fill="#F0F0F0"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { createElement } from '@wordpress/element';
|
||||
|
||||
export function FrontSide( { ...props }: React.SVGProps< SVGSVGElement > ) {
|
||||
return (
|
||||
<svg
|
||||
{ ...props }
|
||||
width="32"
|
||||
height="65"
|
||||
viewBox="0 0 32 65"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M29.1535 7.61841C23.142 7.61841 19.6604 8.66953 17.6751 11.0101C18.9601 6.48043 21.3345 3.07988 25.672 0C20.5319 0.663632 17.5484 2.61667 16.1033 5.4115C14.6582 2.6189 11.6747 0.665859 6.53464 0C10.8721 3.07988 13.2465 6.47821 14.5315 11.0101C12.5462 8.66953 9.06465 7.61841 3.0531 7.61841C10.2185 10.9833 12.9597 13.6913 15.2941 18.5438H16.9103C19.2447 13.6913 21.9881 10.9833 29.1513 7.61841H29.1535Z"
|
||||
fill="#DDDDDD"
|
||||
/>
|
||||
<path
|
||||
d="M20.8963 60.4609C23.2279 59.5968 31.7769 57.6994 31.7769 49.4182C31.7769 44.4995 27.3285 40.7894 22.2783 39.9284C24.5252 39.1942 27.8063 35.9252 27.8063 32.2574C27.8063 27.5321 23.5303 25.6469 20.0344 24.9157C20.0344 23.8371 23.9204 18.272 23.9204 18.272H7.85652C7.85652 18.272 11.7425 23.8371 11.7425 24.9157C8.24361 25.6499 3.97061 27.5321 3.97061 32.2574C3.97061 35.9252 7.25172 39.1942 9.4986 39.9284C4.44538 40.7925 0 44.5026 0 49.4182C0 57.7025 8.54904 59.5998 10.8806 60.4609C5.3526 60.9775 2.5886 63.1347 2.15918 64.8598H29.6207C29.1883 63.1347 26.4243 60.9775 20.8993 60.4609H20.8963Z"
|
||||
fill="#F0F0F0"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { createElement } from '@wordpress/element';
|
||||
|
||||
export function LifestyleScene( {
|
||||
...props
|
||||
}: React.SVGProps< SVGSVGElement > ) {
|
||||
return (
|
||||
<svg
|
||||
{ ...props }
|
||||
width="118"
|
||||
height="77"
|
||||
viewBox="0 0 118 77"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="118" height="77" fill="white" />
|
||||
<path
|
||||
d="M72.0248 20.5848C66.0397 20.5848 62.5735 21.6313 60.597 23.9615C61.8763 19.4519 64.2402 16.0663 68.5586 13C63.4412 13.6607 60.4708 15.6051 59.0321 18.3876C57.5934 15.6074 54.623 13.6629 49.5056 13C53.824 16.0663 56.1879 19.4496 57.4672 23.9615C55.4906 21.6313 52.0245 20.5848 46.0394 20.5848C53.1732 23.9349 55.9023 26.6309 58.2264 31.4621H59.8356C62.1596 26.6309 64.891 23.9349 72.0225 20.5848H72.0248Z"
|
||||
fill="#E0E0E0"
|
||||
/>
|
||||
<path
|
||||
d="M63.8041 73.1943C66.1254 72.334 74.6367 70.445 74.6367 62.2003C74.6367 57.3033 70.2079 53.6096 65.18 52.7523C67.417 52.0214 70.6836 48.7668 70.6836 45.1152C70.6836 40.4107 66.4265 38.5338 62.946 37.8059C62.946 36.732 66.8148 31.1914 66.8148 31.1914H50.8218C50.8218 31.1914 54.6906 36.732 54.6906 37.8059C51.2072 38.5368 46.953 40.4107 46.953 45.1152C46.953 48.7668 50.2197 52.0214 52.4567 52.7523C47.4257 53.6126 42.9999 57.3064 42.9999 62.2003C42.9999 70.448 51.5113 72.337 53.8326 73.1943C48.3289 73.7087 45.5771 75.8563 45.1496 77.5739H72.4901C72.0595 75.8563 69.3077 73.7087 63.8071 73.1943H63.8041Z"
|
||||
fill="#F0F0F0"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M41.1884 77.8602C39.7296 75.1315 38.8029 71.0481 38.8029 66.4848C38.8029 61.9215 39.7296 57.8381 41.1884 55.1094H30.5839C32.0427 57.8381 32.9693 61.9215 32.9693 66.4848C32.9693 71.0481 32.0427 75.1315 30.5839 77.8602H41.1884Z"
|
||||
fill="#F0F0F0"
|
||||
/>
|
||||
<path
|
||||
d="M35.8259 32.3584H30.0536L16 55.5332H31.058H40.5939H55.6518L41.5982 32.3584H35.8259Z"
|
||||
fill="#E0E0E0"
|
||||
/>
|
||||
<path
|
||||
d="M50.9764 47.8242H20.6754L16 55.5332L50.9764 47.8242Z"
|
||||
fill="#F0F0F0"
|
||||
/>
|
||||
<path
|
||||
d="M46.301 40.1118H25.3508L20.6754 47.8242L46.301 40.1118Z"
|
||||
fill="#F0F0F0"
|
||||
/>
|
||||
<path
|
||||
d="M41.598 32.3584H30.0535L25.3506 40.1119L41.598 32.3584Z"
|
||||
fill="#F0F0F0"
|
||||
/>
|
||||
<path
|
||||
d="M77.5858 59H96.2531L95.155 77.6673H78.6838L77.5858 59Z"
|
||||
fill="#F0F0F0"
|
||||
/>
|
||||
<path
|
||||
d="M88.6696 53.9424C88.6696 56.1976 86.9196 58.0258 86.9196 58.0258C86.9196 58.0258 85.1695 56.1976 85.1695 53.9424C85.1695 51.6871 86.9196 49.8589 86.9196 49.8589C86.9196 49.8589 88.6696 51.6871 88.6696 53.9424Z"
|
||||
fill="#E0E0E0"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M95.9589 64H77.8798L77.5857 59H96.253L95.9589 64Z"
|
||||
fill="#E0E0E0"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { createElement } from '@wordpress/element';
|
||||
|
||||
export function Variants( { ...props }: React.SVGProps< SVGSVGElement > ) {
|
||||
return (
|
||||
<svg
|
||||
{ ...props }
|
||||
width="62"
|
||||
height="65"
|
||||
viewBox="0 0 62 65"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M59.3177 7.59526C53.3245 7.59526 49.8535 8.64319 47.8742 10.9766C49.1553 6.46075 51.5225 3.07052 55.8468 0C50.7224 0.661616 47.7479 2.60872 46.3072 5.39506C44.8665 2.61094 41.8921 0.663836 36.7676 0C41.0919 3.07052 43.4591 6.45853 44.7402 10.9766C42.7609 8.64319 39.29 7.59526 33.2967 7.59526C40.4403 10.95 43.1732 13.6497 45.5004 18.4875H47.1118C49.4391 13.6497 52.1741 10.95 59.3155 7.59526H59.3177Z"
|
||||
fill="#E0E0E0"
|
||||
/>
|
||||
<path
|
||||
d="M51.1522 60.2087C53.4766 59.3472 61.9997 57.4556 61.9997 49.1995C61.9997 44.2958 57.5648 40.597 52.53 39.7386C54.77 39.0066 58.0411 35.7476 58.0411 32.0909C58.0411 27.38 53.7781 25.5004 50.2929 24.7715C50.2929 23.6962 54.167 18.1479 54.167 18.1479H38.152C38.152 18.1479 42.0261 23.6962 42.0261 24.7715C38.5379 25.5035 34.2779 27.38 34.2779 32.0909C34.2779 35.7476 37.5491 39.0066 39.7891 39.7386C34.7513 40.6 30.3194 44.2989 30.3194 49.1995C30.3194 57.4587 38.8424 59.3502 41.1669 60.2087C35.6557 60.7238 32.9001 62.8744 32.472 64.5943H59.8501C59.4189 62.8744 56.6633 60.7238 51.1552 60.2087H51.1522Z"
|
||||
fill="#F0F0F0"
|
||||
/>
|
||||
<path
|
||||
d="M18.2238 61.2964C20.1078 60.597 27.012 59.0606 27.012 52.3534C27.012 48.3704 23.4192 45.3665 19.3387 44.6672C21.1518 44.0744 23.8026 41.4257 23.8026 38.4551C23.8026 34.6297 20.3494 33.1022 17.5256 32.5094C17.5256 31.6369 20.6641 27.1299 20.6641 27.1299H7.69128C7.69128 27.1299 10.8298 31.6369 10.8298 32.5094C8.0038 33.1022 4.55279 34.6297 4.55279 38.4551C4.55279 41.4235 7.20367 44.0721 9.01672 44.6672C4.93624 45.3665 1.34338 48.3704 1.34338 52.3534C1.34338 59.0606 8.24761 60.597 10.1316 61.2964C5.66767 61.716 3.43571 63.4633 3.08773 64.8598H25.2677C24.9197 63.4633 22.6877 61.716 18.2238 61.2964Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M14.705 29.1672C16.3668 19.7341 14.7486 11.8172 9.57432 9.5886C4.55918 7.42903 1.86622 9.95303 2.88996 12.0076C4.11785 14.4701 7.87058 12.5775 11.1745 15.6654C14.2667 18.5553 14.3478 29.5136 14.3478 29.5136L14.7066 29.1657L14.705 29.1672Z"
|
||||
fill="#E0E0E0"
|
||||
/>
|
||||
<path
|
||||
d="M14.6523 26.841C14.6523 26.841 15.8096 19.2256 20.5681 15.9277C25.274 12.6659 29.9139 14.515 30.085 16.3566C30.2561 18.1983 28.9967 19.398 25.1884 19.398C19.4888 19.398 17.078 21.8845 15.0996 26.928C14.5457 28.3407 14.6523 26.841 14.6523 26.841Z"
|
||||
fill="#E0E0E0"
|
||||
/>
|
||||
<path
|
||||
d="M15.4498 29.3576C15.4498 29.3576 14.2925 21.7422 9.534 18.4443C4.82808 15.1825 0.18821 17.0316 0.0170856 18.8732C-0.154039 20.7149 0.91774 22.0421 6.06198 21.9146C11.532 21.7781 14.1213 29.6156 14.1213 29.6156L15.4498 29.3591V29.3576Z"
|
||||
fill="#E0E0E0"
|
||||
/>
|
||||
<path
|
||||
d="M18.2243 61.2964C20.1082 60.597 27.0125 59.0606 27.0125 52.3534C27.0125 48.3704 23.4196 45.3665 19.3391 44.6672C21.1522 44.0744 23.803 41.4257 23.803 38.4551C23.803 34.6297 20.3498 33.1022 17.5261 32.5094C17.5261 31.6369 20.6646 27.1299 20.6646 27.1299H7.69171C7.69171 27.1299 10.8302 31.6369 10.8302 32.5094C8.00423 33.1022 4.55322 34.6297 4.55322 38.4551C4.55322 41.4235 7.20409 44.0721 9.01714 44.6672C4.93667 45.3665 1.34381 48.3704 1.34381 52.3534C1.34381 59.0606 8.24804 60.597 10.132 61.2964C5.6681 61.716 3.43614 63.4633 3.08816 64.8598H25.2681C24.9201 63.4633 22.6882 61.716 18.2243 61.2964Z"
|
||||
fill="#F0F0F0"
|
||||
/>
|
||||
<path
|
||||
d="M14.1795 49.7139C9.43406 49.7139 5.83677 48.8391 2.8889 48.1064C1.92696 49.3053 1.34625 50.7485 1.34625 52.3514C1.34625 53.8035 1.66985 55.0112 2.19737 56.0214C5.63507 57.1892 8.91762 57.7709 14.1817 57.7709C19.4457 57.7709 22.7283 57.1892 26.166 56.0214C26.6913 55.0112 27.0171 53.8012 27.0171 52.3514C27.0171 50.7485 26.4342 49.3053 25.4745 48.1064C22.5266 48.8391 18.9293 49.7139 14.1839 49.7139H14.1795Z"
|
||||
fill="#E0E0E0"
|
||||
/>
|
||||
<path
|
||||
d="M23.4906 40.2536C23.6901 39.6786 23.8053 39.0747 23.8053 38.4575C23.8053 37.4695 23.5726 36.6347 23.1825 35.9287C21.7307 36.597 17.9162 37.5894 14.1793 37.5894C10.4424 37.5894 6.62788 36.597 5.17611 35.9287C4.78601 36.6347 4.55328 37.4673 4.55328 38.4575C4.55328 39.0769 4.66854 39.6808 4.86802 40.2536C7.2906 41.1417 10.735 41.8566 14.1793 41.8566C17.6237 41.8566 21.0658 41.1417 23.4906 40.2536Z"
|
||||
fill="#E0E0E0"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './place-holder';
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { createElement } from '@wordpress/element';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { FrontSide } from './imgs/front-side';
|
||||
import { CloseUp } from './imgs/close-up';
|
||||
import { Variants } from './imgs/variants';
|
||||
import { LifestyleScene } from './imgs/lifestyle-scene';
|
||||
|
||||
export function PlaceHolder() {
|
||||
const placeHolderImages = [
|
||||
{
|
||||
id: 'front-side',
|
||||
image: <FrontSide />,
|
||||
text: __( 'Front side', 'woocommerce' ),
|
||||
},
|
||||
{
|
||||
id: 'close-up',
|
||||
image: <CloseUp />,
|
||||
text: __( 'Close-up', 'woocommerce' ),
|
||||
},
|
||||
{
|
||||
id: 'variants',
|
||||
image: <Variants />,
|
||||
text: __( 'Variants', 'woocommerce' ),
|
||||
},
|
||||
{
|
||||
id: 'lifestyle-scene',
|
||||
image: <LifestyleScene />,
|
||||
text: __( 'Lifestyle scene', 'woocommerce' ),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="woocommerce-image-placeholder__wrapper">
|
||||
{ placeHolderImages.map( ( { id, image, text } ) => {
|
||||
return (
|
||||
<div
|
||||
key={ id }
|
||||
className="woocommerce-image-placeholder__item"
|
||||
>
|
||||
{ image }
|
||||
<p>{ text }</p>
|
||||
</div>
|
||||
);
|
||||
} ) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
.woocommerce-image-placeholder {
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: $gap-largest;
|
||||
}
|
||||
&__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
padding: $gap;
|
||||
border-radius: 2px;
|
||||
border: 1px dashed #CCCCCC;
|
||||
margin-right: $gap-small;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
margin-bottom: $gap;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: #949494;
|
||||
}
|
||||
}
|
||||
@media ( max-width: 535px ) {
|
||||
&__item {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media ( min-width: 536px) and ( max-width: 700px ) {
|
||||
&__item {
|
||||
display: none;
|
||||
&:nth-child( -n+3 ) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue