base-js-sw 1.0.10 → 1.0.12

package/components/LinkPicker.js

@@ -1,9 +1,29 @@
 import { __experimentalLinkControl as LinkControl } from '@wordpress/blockEditor';
-import { Icon, Tooltip } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
 import { external, update } from '@wordpress/icons';
 import { safeDecodeURI } from '@wordpress/url';
 import { useState, useEffect } from 'react';
 
+const linkedPostStatusCache = {};
+
+const STATUSES = [
+	'draft',
+	'private',
+	'trash',
+	'pending',
+	'future',
+	'auto-draft',
+];
+
+const STATUS_MESSAGES = {
+	draft: 'Post is a draft.',
+	private: 'Post is private.',
+	trash: 'Post is in the trash.',
+	pending: 'Post is pending review.',
+	future: 'Post is scheduled.',
+	'auto-draft': 'Post is an auto draft.',
+};
+
 const linkPickerStyles = `
 	.base-js-link-picker {
 		width: 100%;
@@ -34,9 +54,9 @@ const linkPickerStyles = `
 		gap: 8px;
 		margin-top: 12px;
 		color: #757575;
-		cursor: help;
 		font-size: 13px;
 		line-height: 1.4;
+		width: 100%;
 	}
 
 	.base-js-link-picker__status svg {
@@ -45,91 +65,391 @@ const linkPickerStyles = `
 		fill: currentColor;
 		stroke: currentColor;
 	}
+
+	.base-js-link-picker__status-detail {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin-top: 8px;
+		width: 100%;
+	}
+
+	.base-js-link-picker__status-detail .components-badge {
+		max-width: 100%;
+		width: 100%;
+	}
+
+	.base-js-link-picker__status-detail .base-js-link-picker__broken-link {
+		max-width: 100%;
+		width: 100%;
+	}
+
+	.base-js-link-picker__broken-link .components-badge {
+		max-width: 100%;
+		width: 100%;
+	}
+
+	.base-js-link-picker__status-loading {
+		margin-top: 8px;
+		font-size: 13px;
+		line-height: 1.4;
+		color: #757575;
+	}
 `;
 
-export const LinkPicker = ({ setAttributes, at, linkRef = 'link' }) => {
-	// Get the current link object based on linkRef or fallback to an empty object
+const getResultStatus = (result) => {
+	return String(
+		result?.status ||
+		result?.post_status ||
+		result?.postStatus ||
+		''
+	).toLowerCase();
+};
+
+const getPostId = (value) => {
+	if (typeof value === 'number') {
+		return Number.isInteger(value) && value > 0 ? value : '';
+	}
+
+	if (typeof value !== 'string') {
+		return '';
+	}
+
+	const trimmedValue = value.trim();
+
+	if (!/^\d+$/.test(trimmedValue)) {
+		return '';
+	}
+
+	const numericValue = Number(trimmedValue);
+
+	return Number.isSafeInteger(numericValue) && numericValue > 0
+		? numericValue
+		: '';
+};
+
+const isDirectUrlValue = ({ id, kind, type, url }) => {
+	const normalizedKind = String(kind || '').toLowerCase();
+	const normalizedType = String(type || '').toLowerCase();
+
+	return (
+		normalizedKind === 'url' ||
+		normalizedType === 'url' ||
+		(typeof id === 'string' && id === url)
+	);
+};
+
+const getLinkedPostStatusMessage = (result) => {
+	const status = getResultStatus(result);
+
+	if (STATUS_MESSAGES[status]) {
+		return STATUS_MESSAGES[status];
+	}
+
+	if (result?.message) {
+		return result.message;
+	}
+
+	return 'Linked post needs review.';
+};
+
+const BrokenLinkBadge = ({ message }) => {
+	return (
+		<div className="base-js-link-picker__broken-link">
+			<span className="components-badge is-warning has-icon">
+				<span className="components-badge__flex-wrapper">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						width="16"
+						height="16"
+						fill="currentColor"
+						className="components-badge__icon"
+						aria-hidden="true"
+						focusable="false"
+					>
+						<path
+							fillRule="evenodd"
+							clipRule="evenodd"
+							d="M5.5 12a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0ZM12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 12v-1.5h1.5V16h-1.5Zm0-8v5h1.5V8h-1.5Z"
+						/>
+					</svg>
+
+					<span className="components-badge__content">
+						{message}
+					</span>
+				</span>
+			</span>
+		</div>
+	);
+};
+
+export const LinkPicker = ({
+	setAttributes,
+	at,
+	linkRef = 'link'
+}) => {
+
 	const linkObj = at[linkRef] || {};
-	const { url, linkTarget, id } = linkObj;
-	const opensInNewTab = linkTarget === '_blank';
-
-	// Local state to track temporary URL, ID, and link target
-	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
+
+	const {
+		url,
+		linkTarget,
+		id
+	} = linkObj;
+
+	const opensInNewTab =
+		linkTarget === '_blank';
+
+	const initialPostId =
+		getPostId(id);
+
+	const [localUrl, setLocalUrl] =
+		useState(url || '');
+
+	const [localId, setLocalId] =
+		useState(initialPostId);
+
+	const [localLinkTarget, setLocalLinkTarget] =
+		useState(opensInNewTab);
+
+	const [linkedPostStatus, setLinkedPostStatus] =
+		useState({
+			isLoading: false,
+			result: null,
+		});
+
+	const postId =
+		getPostId(localId);
+
+	const isInternalPost =
+		Boolean(postId);
+
+	const hasLinkData =
+		Boolean(localUrl || postId);
+
+	const statusLabel =
+		isInternalPost
+			? 'Dynamic WordPress link'
+			: 'External link';
+
+	const currentStatus =
+		linkedPostStatus.result
+			? getResultStatus(linkedPostStatus.result)
+			: '';
+
+	const brokenLinkMessage =
+		linkedPostStatus.result
+			? getLinkedPostStatusMessage(linkedPostStatus.result)
+			: '';
+
+	const shouldShowBrokenLinkStatus =
+		isInternalPost
+		&& linkedPostStatus.result
+		&& STATUSES.includes(currentStatus);
+
 	useEffect(() => {
+
+		const numericPostId =
+			getPostId(localId);
+
+		const hasValidPostId =
+			Boolean(numericPostId);
+
+		if (!hasValidPostId) {
+
+			setLinkedPostStatus({
+				isLoading: false,
+				result: null,
+			});
+
+			return;
+
+		}
+
+		if (linkedPostStatusCache[numericPostId]) {
+
+			setLinkedPostStatus({
+				isLoading: false,
+				result: linkedPostStatusCache[numericPostId],
+			});
+
+			return;
+
+		}
+
+		const apiFetch =
+			window.wp?.apiFetch;
+
+		if (!apiFetch) {
+
+			setLinkedPostStatus({
+				isLoading: false,
+				result: {
+					status: 'draft',
+					message: 'Could not check this post.',
+				},
+			});
+
+			return;
+
+		}
+
+		let isMounted = true;
+
+		setLinkedPostStatus({
+			isLoading: true,
+			result: null,
+		});
+
+		apiFetch({
+			path: `/theme/v1/linked-post-validator/post/${numericPostId}`,
+		})
+			.then((result) => {
+
+				if (!isMounted) {
+					return;
+				}
+
+				linkedPostStatusCache[numericPostId] =
+					result;
+
+				setLinkedPostStatus({
+					isLoading: false,
+					result,
+				});
+
+			})
+			.catch(() => {
+
+				if (!isMounted) {
+					return;
+				}
+
+				const errorResult = {
+					status: 'draft',
+					message: 'Could not check this post.',
+				};
+
+				setLinkedPostStatus({
+					isLoading: false,
+					result: errorResult,
+				});
+
+			});
+
+		return () => {
+			isMounted = false;
+		};
+
+	}, [localId]);
+
+	const handleLinkChange = (updatedValue = {}) => {
+
+		const {
+			url,
+			opensInNewTab,
+			id,
+			kind,
+			type,
+		} = updatedValue;
+
+		const nextUrl =
+			url || '';
+
+		/**
+		 * When manually typing,
+		 * Gutenberg keeps previous selected id.
+		 *
+		 * Manual typing has no kind/type.
+		 */
+		const isManualInput =
+			!kind
+			&& !type;
+
+		const nextPostId =
+			isManualInput
+				? undefined
+				: getPostId(id);
+
+		setLocalUrl(nextUrl);
+
+		setLocalId(
+			nextPostId || ''
+		);
+
+		setLocalLinkTarget(
+			Boolean(opensInNewTab)
+		);
+
 		setAttributes({
 			[linkRef]: {
-				url: localUrl ? encodeURI(safeDecodeURI(localUrl)) : '', // Ensure proper encoding for the URL if no ID
-				linkTarget: localLinkTarget ? '_blank' : undefined,
-				id: localId ? localId : undefined, // Set ID if available, else undefined
+				url: nextUrl
+					? encodeURI(safeDecodeURI(nextUrl))
+					: '',
+				linkTarget: opensInNewTab
+					? '_blank'
+					: undefined,
+				id: nextPostId || undefined,
 			},
 		});
-	}, [localUrl, localId, localLinkTarget]); // Trigger whenever the URL, ID, or target changes
-
-	const handleLinkChange = (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 (isPostSelection) {
-			// Internal post, use ID
-			setLocalId(id);
-			setLocalUrl(nextUrl);
-		} else {
-			// External or anchor link, use URL
-			setLocalUrl(nextUrl);
-			setLocalId(''); // Clear the ID since we are using the URL
-		}
 
-		// Update the new tab option
-		setLocalLinkTarget(Boolean(opensInNewTab));
 	};
 
 	return (
 		<div className="base-js-link-picker">
+
 			<style>{linkPickerStyles}</style>
+
 			<div className="base-js-link-picker__control">
+
 				<LinkControl
-					value={{ url: localUrl, opensInNewTab: localLinkTarget, id: localId }}
+					value={{
+						url: localUrl,
+						opensInNewTab: localLinkTarget,
+						id: postId || undefined,
+					}}
 					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 className="base-js-link-picker__status">
+
+						<Icon
+							icon={isInternalPost ? update : external}
+							size={18}
+						/>
+
+						<span>{statusLabel}</span>
+
+					</div>
+
+					{isInternalPost && linkedPostStatus.isLoading && (
+						<div className="base-js-link-picker__status-loading">
+							Checking linked post status…
 						</div>
-					</Tooltip>
+					)}
+
+					{shouldShowBrokenLinkStatus && (
+						<div className="base-js-link-picker__status-detail">
+
+							<BrokenLinkBadge
+								message={brokenLinkMessage}
+							/>
+
+						</div>
+					)}
+
 				</div>
 			)}
+
 		</div>
 	);
-};
+
+};

package/package.json

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