# elasticpress/4.7.1/assets/js/blocks/related-posts/Edit.js

ElasticPress, version 4.7.1. 119 lines.

- Page: https://pluginprobe.com/plugins/elasticpress/4.7.1/code/assets/js/blocks/related-posts/Edit.js
- Raw: https://pluginprobe.com/plugins/elasticpress/4.7.1/raw/assets/js/blocks/related-posts/Edit.js
- Modified: 2023-08-10T17:15:40+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/elasticpress/4.7.1/code/assets/js/blocks/related-posts/Edit.js#L10-L20`.

```javascript
/**
 * WordPress dependencies.
 */
import apiFetch from '@wordpress/api-fetch';
import {
	AlignmentToolbar,
	BlockControls,
	InspectorControls,
	useBlockProps,
} from '@wordpress/block-editor';
import { Disabled, PanelBody, Placeholder, Spinner, QueryControls } from '@wordpress/components';
import { Fragment, RawHTML, useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { addQueryArgs } from '@wordpress/url';

/**
 * Internal dependencies.
 */
import icon from './icon';

/**
 * Related Posts block edit component.
 *
 * @param {object} props Component props.
 * @param {object} props.attributes Block attributes.
 * @param {object} props.context Block context,
 * @param {Function} props.setAttributes Attribute setter.
 * @returns {Function} Component element.
 */
const RelatedPostsEdit = ({ attributes, context, setAttributes }) => {
	const { alignment, number } = attributes;
	const [posts, setPosts] = useState(false);

	const blockProps = useBlockProps();

	/**
	 * Related posts, limited by the selected number.
	 */
	const displayPosts = posts.length > number ? posts.slice(0, number) : posts;

	/**
	 * Initialize block.
	 */
	const handleInit = () => {
		const urlArgs = {
			number: 100,
		};

		const { postId = 0 } = context;

		apiFetch({
			path: addQueryArgs(`/wp/v2/posts/${postId}/related`, urlArgs),
		})
			.then((posts) => {
				setPosts(posts);
			})
			.catch(() => {
				setPosts(false);
			});
	};

	/**
	 * Effects.
	 */
	useEffect(handleInit, [context]);

	return (
		<Fragment>
			<BlockControls>
				<AlignmentToolbar
					value={alignment}
					onChange={(newValue) => setAttributes({ alignment: newValue })}
				/>
			</BlockControls>
			<InspectorControls>
				<PanelBody title={__('Settings', 'elasticpress')}>
					<QueryControls
						numberOfItems={number}
						onNumberOfItemsChange={(value) => setAttributes({ number: value })}
					/>
				</PanelBody>
			</InspectorControls>

			<div {...blockProps}>
				{displayPosts === false || displayPosts.length === 0 ? (
					<Placeholder icon={icon} label={__('Related Posts', 'elasticpress')}>
						{posts === false ? (
							<Spinner />
						) : (
							__('No related posts yet.', 'elasticpress')
						)}
					</Placeholder>
				) : (
					<Disabled>
						<ul style={{ textAlign: alignment }}>
							{displayPosts.map((post) => {
								const titleTrimmed = post.title.rendered.trim();
								return (
									<li key={post.id}>
										<a href={post.link} onClick={(e) => e.preventDefault()}>
											{titleTrimmed ? (
												<RawHTML>{titleTrimmed}</RawHTML>
											) : (
												__('(Untitled)', 'elasticpress')
											)}
										</a>
									</li>
								);
							})}
						</ul>
					</Disabled>
				)}
			</div>
		</Fragment>
	);
};

export default RelatedPostsEdit;

```