base-js-sw 1.0.9 → 1.0.11

package/components/LinkPicker.js

@@ -1,65 +1,365 @@
 import { __experimentalLinkControl as LinkControl } from '@wordpress/blockEditor';
+import { Icon } from '@wordpress/components';
+import { external, update } from '@wordpress/icons';
 import { safeDecodeURI } from '@wordpress/url';
 import { useState, useEffect } from 'react';
-import './LinkPicker.scss';
+
+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%;
+		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;
+		font-size: 13px;
+		line-height: 1.4;
+		width: 100%;
+	}
+
+	.base-js-link-picker__status svg {
+		flex: 0 0 auto;
+		color: inherit;
+		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);
 
-	// Effect to update attributes when the local state changes
+	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 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) => {
-		console.log(updatedValue)
-		const { url, opensInNewTab, id, kind } = updatedValue;
+		const { url, opensInNewTab, id } = updatedValue;
 
-		// Update ID or URL depending on whether it's an internal post or an external link/anchor
-		if (kind === 'post-type' && id) {
-			// Internal post, use ID
+		const nextUrl = url || '';
+		const isPostSelection = Boolean(id);
+
+		if (isPostSelection) {
 			setLocalId(id);
-			setLocalUrl(url);
+			setLocalUrl(nextUrl);
 		} else {
-			// External or anchor link, use URL
-			setLocalUrl(url);
-			setLocalId(''); // Clear the ID since we are using the URL
+			setLocalUrl(nextUrl);
+			setLocalId('');
 		}
 
-		// 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={() => {
+						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">
+					<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>
+					)}
+
+					{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.9",
+	"version": "1.0.11",
 	"description": "Reusable Gutenberg block components for WordPress projects",
 	"main": "index.js",
 	"author": "Shape Works",