I am creating a Query Loop block that retrieves post type, similar to Gutenberg's, but for various reasons I need to create one.

Currently the code I am using is as follows and it works, but I would prefer the various internal blocks to use their own edit.js file.

Currently they use what is given in this file instead.

edit.js

/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import {
    useBlockProps,
    useInnerBlocksProps,
    store as blockEditorStore,
} from "@wordpress/block-editor";
import { useSelect } from "@wordpress/data";
import { store as coreStore } from "@wordpress/core-data";
import QueryInspectorControls from "./inspector-controls";
import React from "react";

/**
 * Edit component
 *
 * @param {Object} props
 * @param {Object} props.attributes
 * @param {Object} props.setAttributes
 * @param {string} props.clientId
 */
export default function Edit({ attributes, setAttributes, clientId }) {
    const { query } = attributes;
    const blockProps = useBlockProps();

    // Get Posts
    const { posts, isResolving, templateBlock } = useSelect(
        (select) => {
            const { getEntityRecords, isResolving } = select(coreStore);
            const { getBlocks } = select(blockEditorStore);

            // Find block
            const innerBlocks = getBlocks(clientId);
            const template = innerBlocks.find(
                (block) => block.name === "prismatic/post-type-template",
            );

            return {
                posts: getEntityRecords("postType", query.postType, {
                    per_page: query.perPage,
                    offset: query.offset,
                    orderby: query.orderBy,
                    order: query.order,
                    _embed: true,
                    ...(query.authors?.length && {
                        author: query.authors.join(","),
                    }),
                    ...(query.search?.length && {
                        search: query.search.join(" "),
                    }),
                    ...(query.postType === "page" &&
                        query.parents?.length && {
                            parent: query.parents[0],
                        }),
                    ...(query.taxQuery && {
                        tax_query: Object.entries(query.taxQuery)
                            .filter(([key]) => !key.includes("_relation"))
                            .map(([taxonomy, terms]) => ({
                                taxonomy,
                                terms,
                                operator:
                                    query.taxQuery[`${taxonomy}_relation`] === "AND"
                                        ? "AND"
                                        : "IN",
                            })),
                    }),
                }),
                isResolving: isResolving("getEntityRecords", [
                    "postType",
                    query.postType,
                ]),
                templateBlock: template,
            };
        },
        [query, clientId],
    );

    // Template
    const innerBlocksProps = useInnerBlocksProps(
        {
            style: { display: "none" },
        },
        {
            template: [["prismatic/post-type-template"]],
            allowedBlocks: ["prismatic/post-type-template"],
        },
    );

    // Item rendering
    function QueryPostTypeItem({ post, templateBlock }) {
        if (!templateBlock || !post) return null;

        return (
            <div
                className={templateBlock.attributes.className || ""}
                data-id={post.id}
            >
                {templateBlock.innerBlocks.map((block) => {
                    if (block.name === "prismatic/post-type-featured-image") {
                        const imageUrl =
                            post._embedded?.["wp:featuredmedia"]?.[0]?.source_url;
                        const imageAlt =
                            post._embedded?.["wp:featuredmedia"]?.[0]?.alt_text || "";

                        if (!imageUrl) return null;

                        return (
                            <img
                                key={block.clientId}
                                src={imageUrl}
                                alt={imageAlt}
                                className={block.attributes.className || ""}
                            />
                        );
                    }

                    if (block.name === "prismatic/post-type-title") {
                        const TagName = block.attributes.tagName || "p";
                        return (
                            <TagName
                                key={block.clientId}
                                className={block.attributes.className || ""}
                            >
                                {post.title.rendered}
                            </TagName>
                        );
                    }

                    if (block.name === "prismatic/post-type-excerpt") {
                        const excerpt = post.excerpt?.rendered || "";
                        const words = block.attributes.words || 25;
                        const strippedExcerpt = excerpt.replace(/<\/?[^>]+(>|$)/g, "");
                        const trimmedExcerpt =
                            strippedExcerpt.split(" ").slice(0, words).join(" ") + "...";

                        return (
                            <p
                                key={block.clientId}
                                className={block.attributes.className || ""}
                                dangerouslySetInnerHTML={{ __html: trimmedExcerpt }}
                            />
                        );
                    }

                    if (block.name === "prismatic/post-type-button") {
                        const text =
                            block.attributes.text || __("Leggi tutto", "prismatic");
                        return (
                            <a
                                key={block.clientId}
                                className={block.attributes.className || ""}
                                href={post.link}
                            >
                                {text}
                            </a>
                        );
                    }

                    return null;
                })}
            </div>
        );
    }

    // Loop
    function QueryPostTypeLoop({ posts, templateBlock }) {
        if (!posts) return null;

        return (
            <>
                {posts.map((post) => (
                    <QueryPostTypeItem
                        key={post.id}
                        post={post}
                        templateBlock={templateBlock}
                    />
                ))}
            </>
        );
    }

    return (
        <>
            <QueryInspectorControls
                attributes={attributes}
                setAttributes={setAttributes}
            />

            <div {...blockProps}>
                {isResolving ? (
                    <p>{__("Loading...", "prismatic")}</p>
                ) : !posts?.length ? (
                    <p>{__("No content.", "prismatic")}</p>
                ) : (
                    <>
                        <div {...innerBlocksProps} />

                        <QueryPostTypeLoop posts={posts} templateBlock={templateBlock} />
                    </>
                )}
            </div>
        </>
    );
}