base-js-sw 1.0.8 → 1.0.10

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/components/LinkPicker.js

@@ -1,7 +1,51 @@
 import { __experimentalLinkControl as LinkControl } from '@wordpress/blockEditor';
+import { Icon, Tooltip } from '@wordpress/components';
+import { external, update } from '@wordpress/icons';
 import { safeDecodeURI } from '@wordpress/url';
 import { useState, useEffect } from 'react';
-import './LinkPicker.scss';
+
+const linkPickerStyles = `
+	.base-js-link-picker {
+		width: 100%;
+		max-width: 100%;
+		min-width: 0;
+		overflow-x: hidden;
+	}
+
+	.base-js-link-picker .block-editor-link-control {
+		width: 100%;
+		max-width: 100% !important;
+		min-width: 0 !important;
+	}
+
+	.base-js-link-picker .block-editor-link-control__search-input {
+		margin: 0 !important;
+		min-width: 0 !important;
+	}
+
+	.base-js-link-picker .components-input-control__container {
+		width: 90% !important;
+		max-width: 100%;
+	}
+
+	.base-js-link-picker__status {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin-top: 12px;
+		color: #757575;
+		cursor: help;
+		font-size: 13px;
+		line-height: 1.4;
+	}
+
+	.base-js-link-picker__status svg {
+		flex: 0 0 auto;
+		color: inherit;
+		fill: currentColor;
+		stroke: currentColor;
+	}
+`;
 
 export const LinkPicker = ({ setAttributes, at, linkRef = 'link' }) => {
 	// Get the current link object based on linkRef or fallback to an empty object
@@ -13,6 +57,12 @@ export const LinkPicker = ({ setAttributes, at, linkRef = 'link' }) => {
 	const [localUrl, setLocalUrl] = useState(url || '');
 	const [localId, setLocalId] = useState(id || '');
 	const [localLinkTarget, setLocalLinkTarget] = useState(opensInNewTab);
+	const isInternalPost = Boolean(localId);
+	const hasLinkData = Boolean(localUrl || localId);
+	const statusLabel = isInternalPost ? 'Dynamic WordPress link' : 'External link';
+	const statusTooltip = isInternalPost
+		? 'This is a dynamic link to a page within the website. If the page’s URL changes it will update automatically'
+		: 'This is a static link and does not auto-update.';
 
 	// Effect to update attributes when the local state changes
 	useEffect(() => {
@@ -26,40 +76,60 @@ export const LinkPicker = ({ setAttributes, at, linkRef = 'link' }) => {
 	}, [localUrl, localId, localLinkTarget]); // Trigger whenever the URL, ID, or target changes
 
 	const handleLinkChange = (updatedValue) => {
-		console.log(updatedValue)
-		const { url, opensInNewTab, id, kind } = updatedValue;
+		const { url, opensInNewTab, id } = updatedValue;
+		const nextUrl = url || '';
+		const isPostSelection = Boolean(id);
 
 		// Update ID or URL depending on whether it's an internal post or an external link/anchor
-		if (kind === 'post-type' && id) {
+		if (isPostSelection) {
 			// Internal post, use ID
 			setLocalId(id);
-			setLocalUrl(url);
+			setLocalUrl(nextUrl);
 		} else {
 			// External or anchor link, use URL
-			setLocalUrl(url);
+			setLocalUrl(nextUrl);
 			setLocalId(''); // Clear the ID since we are using the URL
 		}
 
 		// Update the new tab option
-		setLocalLinkTarget(opensInNewTab);
+		setLocalLinkTarget(Boolean(opensInNewTab));
 	};
 
 	return (
-		<LinkControl
-			value={{ url: localUrl, opensInNewTab: localLinkTarget, id: localId }}
-			onChange={(updatedValue) => {
-				handleLinkChange(updatedValue);
-			}}
-			onBlur={() => {
-				// Save on blur to ensure the value is saved when clicking away
-				setAttributes({
-					[linkRef]: {
-						url: localId ? '' : localUrl ? encodeURI(safeDecodeURI(localUrl)) : '',
-						linkTarget: localLinkTarget ? '_blank' : undefined,
-						id: localId ? localId : undefined,
-					},
-				});
-			}}
-		/>
+		<div className="base-js-link-picker">
+			<style>{linkPickerStyles}</style>
+			<div className="base-js-link-picker__control">
+				<LinkControl
+					value={{ url: localUrl, opensInNewTab: localLinkTarget, id: localId }}
+					onChange={(updatedValue) => {
+						handleLinkChange(updatedValue);
+					}}
+					onBlur={() => {
+						// Save on blur to ensure the value is saved when clicking away
+						setAttributes({
+							[linkRef]: {
+								url: localId ? '' : localUrl ? encodeURI(safeDecodeURI(localUrl)) : '',
+								linkTarget: localLinkTarget ? '_blank' : undefined,
+								id: localId ? localId : undefined,
+							},
+						});
+					}}
+				/>
+			</div>
+			{hasLinkData && (
+				<div className="base-js-link-picker__status-wrapper">
+					<Tooltip text={statusTooltip}>
+						<div
+							className="base-js-link-picker__status"
+							tabIndex={0}
+							aria-label={statusTooltip}
+						>
+							<Icon icon={isInternalPost ? update : external} size={18} />
+							<span>{statusLabel}</span>
+						</div>
+					</Tooltip>
+				</div>
+			)}
+		</div>
 	);
 };

package/package.json

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