Example of updating block content by filtering editor.BlockListBlock

block-content.js

/*
 * This isn't a fully working example yet due to limitations in what is available via BlockListBlock
 */

import { store as coreStore } from '@wordpress/core-data';
import { useState, useEffect } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { useBlockProps } from '@wordpress/block-editor';
import apiFetch from '@wordpress/api-fetch';
import { addFilter } from '@wordpress/hooks';

const withCustomFeaturedImage = (BlockListBlock) => (props) => {
	const { name, attributes } = props;
	const blockProps = useBlockProps();

	if (
		name !== 'core/post-featured-image' ||
		attributes.namespace !== 'top-10/featured-image'
	) {
		return <BlockListBlock {...props} />;
	}

	console.log(props);

	const {
		useCustomImage,
		customImage,
		isLink,
		linkTarget,
		aspectRatio,
		height,
		width,
		scale,
		sizeSlug,
		rel,
		useDefaultImage,
		useFirstImage,
	} = attributes;

	const [customFeaturedImageHtml, setCustomFeaturedImageHtml] =
		useState(null);

	const { media, postPermalink, postId, postType } = useSelect(
		(select) => {
			const { getMedia, getEditedEntityRecord } = select(coreStore);

			// Try to get postId from context first, then fallback to current post
			const contextPostId =
				blockProps['data-post-id'] ||
				select('core/editor').getCurrentPostId();
			const contextPostType =
				blockProps['data-post-type'] ||
				select('core/editor').getCurrentPostType();

			const post = getEditedEntityRecord(
				'postType',
				contextPostType,
				contextPostId
			);
			const featuredImageId = post?.featured_media;

			return {
				media: featuredImageId
					? getMedia(featuredImageId, { context: 'view' })
					: null,
				postPermalink: post?.link,
				postId: contextPostId,
				postType: contextPostType,
			};
		},
		[blockProps]
	);

	useEffect(() => {
		if (!media && postId) {
			const queryParams = new URLSearchParams({
				useCustomImage,
				customImage,
				linkTarget,
				aspectRatio,
				height,
				width,
				scale,
				sizeSlug,
				rel,
				useDefaultImage,
				useFirstImage,
			}).toString();

			apiFetch({
				path: `/top-10/v1/featured-image/${postId}?${queryParams}`,
			})
				.then((response) => {
					setCustomFeaturedImageHtml(response);
				})
				.catch((error) => {
					console.error(
						'Error fetching custom featured image:',
						error
					);
				});
		}
	}, [attributes, postId, media]);

	const renderImage = () => {
		if (customFeaturedImageHtml) {
			const image = (
				<div
					dangerouslySetInnerHTML={{
						__html: customFeaturedImageHtml,
					}}
				/>
			);

			return isLink ? (
				<a
					href={postPermalink}
					target={linkTarget}
					onClick={(e) => e.preventDefault()}
					aria-disabled={true}
				>
					{image}
				</a>
			) : (
				image
			);
		}

		return null;
	};

	return (
		<BlockListBlock {...props}>
			<figure
				className={`wp-block-post-featured-image ${useCustomImage ? 'has-custom-image' : ''}`}
			>
				{media ? null : renderImage()}
			</figure>
		</BlockListBlock>
	);
};

addFilter(
	'editor.BlockListBlock',
	'top-10/featured-image-content',
	withCustomFeaturedImage
);