base-js-sw 1.0.8 → 1.0.9

package/components/ImagePicker.js

@@ -91,6 +91,7 @@ export const ImagePicker = ({
 					setAttributes={setAttributes}
 					imageRef={imageRef}
 					buttonText={buttonText}
+					crop={showCrop ? undefined : false}
 				/>
 			)}
 		</div>
@@ -144,9 +145,13 @@ export const ImagePickerPreview = ({
 		imageElementWrapperClass = blockClass + '__image-wrapper';
 	}
 
-	let imagecrop = crop ? '1' : '0';
-	if (imageObject.crop) {
-		imagecrop = imageObject.crop.replace(/\s+/g, '-');
+	let imagecrop;
+	if (crop === false) {
+		imagecrop = '0';
+	} else if (typeof imageObject.crop === 'string' && imageObject.crop !== '') {
+		imagecrop = imageObject.crop === '0' ? '0' : imageObject.crop.replace(/\s+/g, '-');
+	} else {
+		imagecrop = '1';
 	}
 
 	let imageOptionsString = `images/width=${width},height=${height},crop=${imagecrop}`;
@@ -198,6 +203,7 @@ export const ImagePickerPreview = ({
 						replaceText=''
 						removeText=''
 						imageId={imageObject.id}
+						crop={crop}
 					/>
 				</MediaUploadCheck>
 			) : ( // No image
@@ -206,6 +212,7 @@ export const ImagePickerPreview = ({
 					setAttributes={setAttributes}
 					imageRef={imageRef}
 					buttonText={buttonText}
+					crop={crop}
 				/>
 			)}
 		</div>
@@ -213,11 +220,11 @@ export const ImagePickerPreview = ({
 };
 
 // ============= Image Controls (appear over image within editor)
-export const EditImageButtons = ({ componentClass, setAttributes, replaceText, removeText, imageRef, imageId }) => {
+export const EditImageButtons = ({ componentClass, setAttributes, replaceText, removeText, imageRef, imageId, crop }) => {
 	return (
 		<MediaUpload
 			title={'Icon'}
-			onSelect={(media) => updateImageAttr(setAttributes, media, imageRef)}
+			onSelect={(media) => updateImageAttr(setAttributes, media, imageRef, crop)}
 			allowedTypes={['image']}
 			value={imageId}
 			render={({ open }) => (
@@ -236,7 +243,7 @@ export const EditImageButtons = ({ componentClass, setAttributes, replaceText, r
 						className={componentClass + "__edit-button"}
 						isDestructive
 						onClick={(media) => {
-							updateImageAttr(setAttributes, false, imageRef)
+							updateImageAttr(setAttributes, false, imageRef, crop)
 						}}
 						icon="remove"
 					>
@@ -248,10 +255,7 @@ export const EditImageButtons = ({ componentClass, setAttributes, replaceText, r
 	)
 }
 
-export const UploadImageButton = ({ componentClass, setAttributes, imageRef, buttonText }) => {
-
-
-
+export const UploadImageButton = ({ componentClass, setAttributes, imageRef, buttonText, crop }) => {
 	return (
 		<MediaUploadCheck>
 			<MediaUpload
@@ -287,20 +291,25 @@ const updateImageAttr = (
 	setAttributes,
 	media = false,
 	imageRef,
+	crop = 'center center'
 ) => {
-
 	imageRef ??= 'imageObject';
 
-	let newImageUrl = media ? media.sizes.full.url : ''
+	let newImageUrl = media ? (media.sizes?.full?.url || media.url) : '';
 
+	let newImage = {
+		id: media ? media.id : 0,
+		url: newImageUrl,
+		alt: media ? media.alt : '',
+	};
+
+	if (crop === false) {
+		newImage.crop = '0';
+	} else {
+		newImage.crop = typeof crop === 'string' ? crop : 'center center';
+	}
 
 	setAttributes({
-		[imageRef]: {
-			id: media.id,
-			url: newImageUrl,
-			alt: media.alt,
-			crop: 'center center'
-		},
+		[imageRef]: newImage,
 	});
 };
-

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "base-js-sw",
-	"version": "1.0.8",
+	"version": "1.0.9",
 	"description": "Reusable Gutenberg block components for WordPress projects",
 	"main": "index.js",
 	"author": "Shape Works",