The best way to achieve what i was wanting to do was to use the core blocks for latest post. Then style as I needed to. Here is what my code looks like.
import { registerBlockType } from "@wordpress/blocks";
import { __ } from "@wordpress/i18n";
import {
useBlockProps,
InnerBlocks,
} from "@wordpress/block-editor";
registerBlockType('sfs-test-header-para-block/sfs-test-header-para-container-block', {
title: __( 'This is my test block', 'sfs-block' ),
category: 'design',
edit( { className} ) {
const blockProps = useBlockProps();
const TEMPLATE = [ [ 'core/cover', { className: 'sfs-header-cover',}, [
[ 'core/columns', {className: 'sfs-h2-header-cols', backgroundColor: 'transparent', verticalAlignment: 'center' }, [
[ 'core/column', {className: 'sfs-h2-header-img-col', templateLock: 'insert' }, [
[ 'core/latest-posts' ],
] ],
] ] ] ]];
return(
<div { ...blockProps }
className={ className }>
<InnerBlocks
template={ TEMPLATE }
templateLock="insert"
/>
</div>
)
},
save() {
const blockProps = useBlockProps.save();
return(
<div { ...blockProps }>
<InnerBlocks.Content />
</div>
)
},
});
I would avoid what I was tying to do with apiFetch and list of attributes. It’s a rabbit hole you want to avoid. Big Thanks to @TomJNowell for setting me straight.