base-js-sw 1.0.10 → 1.0.11

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,301 @@ 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;
+	}
 `;
 
+const getResultStatus = (result) => {
+	return String(
+		result?.status ||
+		result?.post_status ||
+		result?.postStatus ||
+		''
+	).toLowerCase();
+};
+
+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' }) => {
-	// Get the current link object based on linkRef or fallback to an empty object
 	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 [linkedPostStatus, setLinkedPostStatus] = useState({
+		isLoading: false,
+		result: null,
+	});
+
 	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 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(() => {
 		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: localUrl
+					? encodeURI(safeDecodeURI(localUrl))
+					: '',
+				linkTarget: localLinkTarget
+					? '_blank'
+					: undefined,
+				id: localId
+					? localId
+					: undefined,
 			},
 		});
-	}, [localUrl, localId, localLinkTarget]); // Trigger whenever the URL, ID, or target changes
+	}, [localUrl, localId, localLinkTarget]);
+
+	useEffect(() => {
+		const numericPostId = parseInt(localId, 10);
+
+		const hasValidPostId =
+			Number.isInteger(numericPostId) &&
+			numericPostId > 0;
+
+		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 } = 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
+			setLocalId('');
 		}
 
-		// 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: 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,
+								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.11",
 	"description": "Reusable Gutenberg block components for WordPress projects",
 	"main": "index.js",
 	"author": "Shape Works",