Get custom posts in gutenberg block

A few things I noticed. The edit area of the block only shows up in the editor – not the front end. The save area is where you want to add posts that show up on the front end.

Personally, I would go with jQuery / AJAX / and JSON for this. (so you would be using the Wp JSON API).

I would do something like this:

const {__} =  wp.i18n;

( function( blocks, element ) {
    var el = element.createElement;

    blocks.registerBlockType( 'cgb/block-myposts', {
    title: __( 'myposts - CGB Block' ),
    icon: 'shield',
    category: 'common',
    keywords: [
        __( 'myposts — CGB Block' ),
        __( 'CGB Example' ),
        __( 'create-guten-block' ),
    ],

    edit: function(props) {
            return (
                el( 'div', { className: props.className },
                    el('div', {'class': 'postarea'})))},

    save: function(props) {
            return (
                el( 'div', { className: props.className},
                    el('div', {'class': 'postarea'}
)))} );
}(
    window.wp.blocks,
    window.wp.element
) );

Feel free to add as you need for your exact project. Just remember the save area is the area that will show up on the front end. After this, you will use jQuery to retrieve the class: postarea and insert the posts you want.

There are a few ways to solve this problem – depending on the user experience you want.