Prevent clicking Related Post links in the editor.

assets/js/blocks/related-posts/Edit.js

@@ -1,109 +1,125 @@
 /**
  * WordPress dependencies.
  */
+import apiFetch from '@wordpress/api-fetch';
 import { AlignmentToolbar, BlockControls, InspectorControls } from '@wordpress/block-editor';
 import { PanelBody, Placeholder, Spinner, QueryControls } from '@wordpress/components';
-import { Fragment, Component, RawHTML } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+import { Fragment, RawHTML, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { store as noticeStore } from '@wordpress/notices';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
- * Edit component
+ * Related Posts block edit component.
+ *
+ * @param {object} props Component props.
+ * @param {object} props.attributes Block attributes.
+ * @param {string} props.className Additional CSS class(es).
+ * @param {object} props.context Block context,
+ * @param {Function} props.setAttributes Attribute setter.
+ * @returns {Function} Component element.
  */
-class Edit extends Component {
+const RelatedPostsEdit = ({ attributes, className, context, setAttributes }) => {
+	const { alignment, number } = attributes;
+	const { createWarningNotice } = useDispatch(noticeStore);
+	const instanceId = useInstanceId(RelatedPostsEdit);
+	const [posts, setPosts] = useState(false);
+
 	/**
-	 * Setup class
-	 *
-	 * @param {object} props Component properties
+	 * Related posts, limited by the selected number.
 	 */
-	constructor(props) {
-		super(props);
-
-		this.state = {
-			posts: false,
-		};
-	}
+	const displayPosts = posts.length > number ? posts.slice(0, number) : posts;
 
 	/**
-	 * Load preview data
+	 * Initialize block.
 	 */
-	componentDidMount() {
+	const handleInit = () => {
 		const urlArgs = {
 			number: 100,
 		};
 
-		// Use 0 if in the Widgets Screen
-		const { context: { postId = 0 } = {} } = this.props;
+		const { postId = 0 } = context;
 
-		wp.apiFetch({
+		apiFetch({
 			path: addQueryArgs(`/wp/v2/posts/${postId}/related`, urlArgs),
 		})
 			.then((posts) => {
-				this.setState({ posts });
+				setPosts(posts);
 			})
 			.catch(() => {
-				this.setState({ posts: false });
+				setPosts(false);
 			});
-	}
+	};
+
+	/**
+	 * Show a notice when redirect is prevented.
+	 *
+	 * @param {Event} event Click event.
+	 * @returns {void}
+	 */
+	const showRedirectionPreventedNotice = (event) => {
+		event.preventDefault();
 
-	render() {
-		const {
-			attributes: { alignment, number },
-			setAttributes,
-			className,
-		} = this.props;
-		const { posts } = this.state;
+		createWarningNotice(__('Links are disabled in the editor.'), {
+			id: `elasticpress/related-posts/redirection-prevented/${instanceId}`,
+			type: 'snackbar',
+		});
+	};
 
-		const displayPosts = posts.length > number ? posts.slice(0, number) : posts;
+	/**
+	 * Effects.
+	 */
+	useEffect(handleInit, [context]);
 
-		return (
-			<Fragment>
-				<BlockControls>
-					<AlignmentToolbar
-						value={alignment}
-						onChange={(newValue) => setAttributes({ alignment: newValue })}
+	return (
+		<Fragment>
+			<BlockControls>
+				<AlignmentToolbar
+					value={alignment}
+					onChange={(newValue) => setAttributes({ alignment: newValue })}
+				/>
+			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={__('Related Post Settings', 'elasticpress')}>
+					<QueryControls
+						numberOfItems={number}
+						onNumberOfItemsChange={(value) => setAttributes({ number: value })}
 					/>
-				</BlockControls>
-				<InspectorControls>
-					<PanelBody title={__('Related Post Settings', 'elasticpress')}>
-						<QueryControls
-							numberOfItems={number}
-							onNumberOfItemsChange={(value) => setAttributes({ number: value })}
-						/>
-					</PanelBody>
-				</InspectorControls>
+				</PanelBody>
+			</InspectorControls>
 
-				<div className={className}>
-					{displayPosts === false || displayPosts.length === 0 ? (
-						<Placeholder icon="admin-post" label={__('Related Posts', 'elasticpress')}>
-							{posts === false ? (
-								<Spinner />
-							) : (
-								__('No related posts yet.', 'elasticpress')
-							)}
-						</Placeholder>
-					) : (
-						<ul style={{ textAlign: alignment }}>
-							{displayPosts.map((post) => {
-								const titleTrimmed = post.title.rendered.trim();
-								return (
-									<li key={post.id}>
-										<a href={post.link}>
-											{titleTrimmed ? (
-												<RawHTML>{titleTrimmed}</RawHTML>
-											) : (
-												__('(Untitled)', 'elasticpress')
-											)}
-										</a>
-									</li>
-								);
-							})}
-						</ul>
-					)}
-				</div>
-			</Fragment>
-		);
-	}
-}
+			<div className={className}>
+				{displayPosts === false || displayPosts.length === 0 ? (
+					<Placeholder icon="admin-post" label={__('Related Posts', 'elasticpress')}>
+						{posts === false ? (
+							<Spinner />
+						) : (
+							__('No related posts yet.', 'elasticpress')
+						)}
+					</Placeholder>
+				) : (
+					<ul style={{ textAlign: alignment }}>
+						{displayPosts.map((post) => {
+							const titleTrimmed = post.title.rendered.trim();
+							return (
+								<li key={post.id}>
+									<a href={post.link} onClick={showRedirectionPreventedNotice}>
+										{titleTrimmed ? (
+											<RawHTML>{titleTrimmed}</RawHTML>
+										) : (
+											__('(Untitled)', 'elasticpress')
+										)}
+									</a>
+								</li>
+							);
+						})}
+					</ul>
+				)}
+			</div>
+		</Fragment>
+	);
+};
 
-export default Edit;
+export default RelatedPostsEdit;