card.js

// @wordpress
import {RawHTML} from '@wordpress/element'

// @react-moment
import Moment from 'react-moment'

// exports
const Card = ({featuredImage, title, date}) => (
  <div className={`my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3`}>
    <div
      className={`overflow-hidden rounded-lg bg-white shadow-md hover:shadow-lg`}
      styles={{
        transition: 'box-shadow 0.2s ease-in-out',
        '&:hover': {
          boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)',
          transition: 'box-shadow 0.2s ease-in-out',
        },
      }}>
      {featuredImage && (<img className={`block h-auto w-full`} alt={featuredImage.caption && featuredImage.caption} src={featuredImage.sourceUrl} />)}
      <header className="items-center justify-between leading-tight p-2 md:p-4">
        <div className="font-display text-lg uppercase text-secondary">
          <a href="#">
            <RawHTML className={`font-display no-underline text-lg text-secondary hover:text-primary`}>
              {title}
            </RawHTML>
          </a>
        </div>
        <div className="font-sans text-grey-darker text-xs pt-2">
          Published <Moment fromNow date={date} />
        </div>
      </header>
    </div>
  </div>
)

export { Card }

cards.js

// @wordpress
import { select } from '@wordpress/data'

// components
import { Card } from './Card'

const Container = ({children}) => (
  <div className="mx-auto px-4">
    <div className="flex flex-wrap -mx-1 lg:-mx-4">
      {children}
    </div>
  </div>
)

// exports
const Cards = ({posts}) => (
  <Container>
    {posts.map(({node}) =>
      select('core/editor').getEditedPostAttribute('id') !== node.id && <Card key={node.id} {...node} />
    )}
  </Container>
)

export default Cards

edit.js

// @wordpress
import { __ } from '@wordpress/i18n'
import { select } from '@wordpress/data'
import { Spinner } from '@wordpress/components'
import { InspectorControls } from '@wordpress/block-editor'
import { RangeControl, PanelBody } from '@wordpress/components'

// @apollo
import { ApolloProvider, useQuery } from '@apollo/react-hooks'
import gql from 'graphql-tag'

// app components
import Cards from './Cards'

// exports
const PostsBlock = ({attributes: {limit, posts}, setAttributes}) => {
  const currentPost = select('core/editor').getEditedPostAttribute('id')

  const { data, loading, error } = useQuery(gql`{
    posts(first: ${limit}, where: {
      status: PUBLISH,
      notIn: "${currentPost}"
    }) {
      edges {
        node {
          postId
          title
          date
          slug
          featuredImage {
            title
            caption
            sourceUrl
          }
        }
      }
    }
  }`)

  if(loading) return <Spinner />
  if(error)   return <p>Error..</p>
  if(data)    setAttributes({posts: data.posts.edges})

  return posts ? <Cards posts={posts} /> : null
}

const edit = ({attributes, setAttributes}) => {
  const onLimit = limit => setAttributes({ limit })

  return (
    <ApolloProvider client={attributes.client}>
      <InspectorControls>
        <PanelBody title={__(`Posts Selection`)}>
          <RangeControl
            label={`Display posts`}
            value={attributes.limit}
            onChange={onLimit}
            min={1}
            max={10} />
        </PanelBody>
      </InspectorControls>
      <PostsBlock
        attributes={attributes}
        setAttributes={setAttributes} />
    </ApolloProvider>
  )
}

export default edit

index.js

// @wordpress
import { __ } from '@wordpress/i18n'
import { registerBlockType } from '@wordpress/blocks'

// @apollo
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';

// @app/components
import edit from './components/edit'

registerBlockType(`tinyblocks/posts`, {
  title: __(`Posts`, `tinyblocks`),
  category: `common`,
  attributes: {
    client: {
      type: `object`,
      default:
        new ApolloClient({
          cache: new InMemoryCache(),
          link:  new HttpLink({ uri: `/graphql` }),
        }),
    },
    count: {
      type: `number`,
      default: 3,
    },
    posts: {
      type: `array`,
    },
    align: {
      type: `string`,
    },
    limit: {
      type: `number`,
      default: 3,
    },
  },
  supports: {
    align: [
      `full`,
      `wide`,
    ],
  },
  edit,
  save: () => null,
})