base-js-sw 1.0.7 → 1.0.9

package/components/ImagePicker.js

@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { MediaUpload, MediaUploadCheck } from '@wordpress/blockEditor';
 import { PanelBody, Button } from '@wordpress/components';
 import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
-const { siteDomain } = themeVars; // vars passed from enqueue_backend.php
+const { siteDomain, isBedrock = true } = themeVars;
 import './ImagePicker.scss';
 
 export const ImagePicker = ({
@@ -40,7 +40,12 @@ export const ImagePicker = ({
 			if (imageObject.url.endsWith('.svg')) {
 				resizedImageUrl = imageObject.url;
 			} else {
-				let imageUrlMinusBase = imageObject.url.replace(siteDomain + '/app/uploads', ''); // remove base and directory
+				let pathToReplace = siteDomain + '/app/uploads';
+				if (!isBedrock) {
+					pathToReplace = siteDomain + '/wp-content/uploads';
+				}
+
+				let imageUrlMinusBase = imageObject.url.replace(pathToReplace, ''); // remove base and directory
 				resizedImageUrl = siteDomain + '/' + imageOptionsString + imageUrlMinusBase;
 			}
 		}
@@ -86,6 +91,7 @@ export const ImagePicker = ({
 					setAttributes={setAttributes}
 					imageRef={imageRef}
 					buttonText={buttonText}
+					crop={showCrop ? undefined : false}
 				/>
 			)}
 		</div>
@@ -124,7 +130,7 @@ export const ImagePickerPreview = ({
 	height = 500,
 	crop = true,
 	imageRef = 'imageObject',
-	buttonText = 'Select image'
+	buttonText = 'Select image',
 }) => {
 
 	let componentClass = 'component-image-picker-preview';
@@ -139,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}`;
@@ -156,7 +166,8 @@ export const ImagePickerPreview = ({
 		// Check if the image domain matches the current site's domain
 		if (imageURL.origin === siteURL.origin) {
 			// Same domain: remove base directory
-			let imageUrlMinusBase = imageObject.url.replace(siteDomain + '/app/uploads', '');
+			const baseDir = isBedrock ? '/app/uploads' : '/wp-content/uploads';
+			let imageUrlMinusBase = imageObject.url.replace(siteDomain + baseDir, '');
 
 			if (imageObject.url.endsWith('.svg')) {
 				resizedImageUrl = imageObject.url;
@@ -192,6 +203,7 @@ export const ImagePickerPreview = ({
 						replaceText=''
 						removeText=''
 						imageId={imageObject.id}
+						crop={crop}
 					/>
 				</MediaUploadCheck>
 			) : ( // No image
@@ -200,6 +212,7 @@ export const ImagePickerPreview = ({
 					setAttributes={setAttributes}
 					imageRef={imageRef}
 					buttonText={buttonText}
+					crop={crop}
 				/>
 			)}
 		</div>
@@ -207,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 }) => (
@@ -230,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"
 					>
@@ -242,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
@@ -281,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.7",
+	"version": "1.0.9",
 	"description": "Reusable Gutenberg block components for WordPress projects",
 	"main": "index.js",
 	"author": "Shape Works",