edit.js

import { RichText } from '@wordpress/block-editor'
import { MediaPlaceholder, URLInput } from '@wordpress/editor'

const edit = ({ attributes, setAttributes, isSelected }) => {
  const {
    postLargeHeading,
    postLargeDescription,
    postLargeLinkUrl,
    postLargeImage,
    postSmallTopHeading,
    postSmallTopDescription,
    postSmallTopLinkUrl,
    postSmallTopImage,
    postSmallBottomHeading,
    postSmallBottomDescription,
    postSmallBottomLinkUrl,
    postSmallBottomImage,
  } = attributes

  const onPostLargeHeadingChange = value => {
    setAttributes({
      postLargeHeading: value,
    })
  }

  const onPostLargeDescriptionChange = value => {
    setAttributes({
      postLargeDescription: value,
    })
  }

  const onPostLargeLinkUrl = value => {
    setAttributes({
      postLargeLinkUrl: value,
    })
  }

  const onPostLargeImageChange = value => {
    setAttributes({
      postLargeImage: value,
    })
  }

  const onPostSmallTopHeadingChange = value => {
    setAttributes({
      postSmallTopHeading: value,
    })
  }

  const onPostSmallTopDescriptionChange = value => {
    setAttributes({
      postSmallTopDescription: value,
    })
  }

  const onPostSmallTopLinkUrl = value => {
    setAttributes({
      postSmallTopLinkUrl: value,
    })
  }

  const onPostSmallTopImageChange = value => {
    setAttributes({
      postSmallTopImage: value,
    })
  }

  const onPostSmallBottomHeadingChange = value => {
    setAttributes({
      postSmallBottomHeading: value,
    })
  }

  const onPostSmallBottomDescriptionChange = value => {
    setAttributes({
      postSmallBottomDescription: value,
    })
  }

  const onPostSmallBottomLinkUrl = value => {
    setAttributes({
      postSmallBottomLinkUrl: value,
    })
  }

  const onPostSmallBottomImageChange = value => {
    setAttributes({
      postSmallBottomImage: value,
    })
  }

  const overlay = `block text-white top-0 right-0 bottom-0 left-0 h-full w-100 bg-secondary-200 hover:bg-primary shadow transition w-100`

  return (
    <div className="container w-100 h-auto mt-16">
      <div className="flex flex-row flex-wrap">
        <div className="w-full md:w-1/2 h-128 md:h-auto mb-4 px-2">
          <div
            className="block w-full h-full bg-no-repeat bg-center bg-cover relative"
            style={postLargeImage.url && {backgroundImage:`url(${postLargeImage.url})`}}>
            {!postLargeImage.url ? (
              <MediaPlaceholder
                style={{ color: `black` }}
                onSelect={onPostLargeImageChange} />
            ) : (
              <div className={overlay}>
                <div className={`absolute inline-block bottom-0 left-0 px-2`}>
                  <RichText
                    value={postLargeHeading}
                    className={`inline-block font-display text-3xl uppercase w-100`}
                    onChange={onPostLargeHeadingChange} />
                  <RichText
                    value={postLargeDescription}
                    className={`inline-block font-sans w-100 pb-2`}
                    onChange={onPostLargeDescriptionChange} />
                  {isSelected && (
                    <URLInput
                      value={postLargeLinkUrl}
                      className={`max-w-100`}
                      onChange={onPostLargeLinkUrl} />
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
        <div className="w-full md:w-1/2 mb-4 px-2">
          <div className="flex flex-col sm:flex-row md:flex-col">
            <div className="w-full sm:w-1/2 md:w-full h-64 xl:h-64 mb-4 sm:mb-0 md:mb-4">
              <div
                className="block w-full h-full bg-no-repeat bg-center bg-cover relative"
                style={postSmallTopImage.url && { backgroundImage: `url(${postSmallTopImage.url})` }}>
                {!postSmallTopImage.url ? (
                  <MediaPlaceholder
                    style={{ color: `black` }}
                    onSelect={onPostSmallTopImageChange} />
                ) : (
                  <div className={overlay}>
                    <div className={`absolute inline-block bottom-0 left-0 px-2`}>
                      <RichText
                        value={postSmallTopHeading}
                        className={`font-display text-3xl uppercase w-100`}
                        onChange={onPostSmallTopHeadingChange} />
                      <RichText
                        value={postSmallTopDescription}
                        className={`font-sans w-100 pb-2`}
                        onChange={onPostSmallTopDescriptionChange} />
                      {isSelected && (
                        <URLInput
                          value={postSmallTopLinkUrl}
                          onChange={onPostSmallTopLinkUrl} />
                      )}
                    </div>
                  </div>
                )}
              </div>
            </div>
            <div className="w-full sm:w-1/2 md:w-full h-64 xl:h-64 sm:mb-0">
              <div
                className="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover relative"
                style={postSmallBottomImage.url && { backgroundImage: `url(${postSmallBottomImage.url})` }}>
                {!postSmallBottomImage.url ?(
                  <MediaPlaceholder onSelect={onPostSmallBottomImageChange} />
                ) : (
                  <div className={overlay}>
                    <div className={`absolute inline-block bottom-0 left-0 px-2`}>
                      <RichText
                        value={postSmallBottomHeading}
                        className={`font-display text-3xl uppercase w-100`}
                        onChange={onPostSmallBottomHeadingChange} />
                      <RichText
                        value={postSmallBottomDescription}
                        className={`font-sans w-100 pb-2`}
                        onChange={onPostSmallBottomDescriptionChange} />
                      {isSelected &&
                        <URLInput
                          value={postSmallBottomLinkUrl}
                          onChange={onPostSmallBottomLinkUrl} />
                      }
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default edit

editor.js

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

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

// block registration
registerBlockType(`tinyblocks/ndn-highlighted-content`, {
  title: __(`Highlighted content`),
  category: `common`,
  icon: `star-filled`,
  attributes: {
    postLargeHeading: {
      type: 'string',
      default: 'Heading One',
    },
    postLargeDescription: {
      type: 'string',
      default: 'Description',
    },
    postLargeLinkUrl: {
      type: 'string',
    },
    postLargeImage: {
      type: 'object',
      default: {},
    },
    postSmallTopHeading: {
      type: 'string',
      default: 'Heading Two',
    },
    postSmallTopDescription: {
      type: 'string',
      default: 'Description',
    },
    postSmallTopLinkUrl: {
      type: 'string',
    },
    postSmallTopImage: {
      type: 'object',
      default: {},
    },
    postSmallBottomHeading: {
      type: 'string',
      default: 'Heading Three',
    },
    postSmallBottomDescription: {
      type: 'string',
      default: 'Description'
    },
    postSmallBottomLinkUrl: {
      type: 'string',
    },
    postSmallBottomImage: {
      type: 'object',
      default: {},
    },
  },
  edit,
  save: () => null,
})

plugin.php

<?php
/**
 * Plugin Name: NDN - Highlighted Content
 * Description: Highlighted content
 */

add_filter('register_blockmodules', function ($blocks) {
    $blocks->push([
      'plugin'     => 'ndn-highlighted-content',
      'handle'     => 'tinyblocks/ndn-highlighted-content',
      'editor_js'  => 'index.js',
      'blade'      => 'blade/render',
    ]);

    return $blocks;
});

render.blade.php

<div class="container mx-auto p-8">
  <div class="flex flex-row flex-wrap -mx-2">
    <div class="w-full md:w-1/2 h-128 md:h-auto mb-4 px-2">
      @if(isset($attr->postLargeLinkUrl))
        <a
          class="block w-full h-full bg-no-repeat bg-center bg-cover relative"
          href="{!! $attr->postLargeLinkUrl !!}"
          title="{!! $attr->postLargeHeading !!}"
          @if(isset($attr->postLargeImage))
            style="background-image: url({!! $attr->postLargeImage['url'] !!});"
          @endif>
          <div class="inline-block text-white top-0 right-0 bottom-0 left-0 p-2 absolute h-full w-100 bg-secondary-200 hover:bg-primary shadow transition transition-h relative">
            <span class="absolute inline-block bottom-0 left-0 px-2">
              <span class="inline-block font-display text-3xl uppercase w-100">
                {!! $attr->postLargeHeading !!}
              </span>

              @if($attr->postLargeDescription)
                <span class="inline-block font-sans w-100 pb-2">
                  {!! $attr->postLargeDescription !!}
                </span>
              @endif
            </span>
          </div>
        </a>
      @endif
    </div>
    <div class="w-full md:w-1/2 mb-4 px-2">
      <div class="flex flex-col sm:flex-row md:flex-col -mx-2">
        <div class="w-full sm:w-1/2 md:w-full h-64 xl:h-64 mb-4 sm:mb-0 md:mb-4 px-2">
          @if(isset($attr->postSmallTopLinkUrl))
            <a
              class="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover relative"
              href="{!! $attr->postSmallTopLinkUrl !!}"
              title="{!! $attr->postSmallTopHeading !!}"
              @if(isset($attr->postSmallTopImage))
                style="background-image: url({!! $attr->postSmallTopImage['url'] !!});"
              @endif>

              <div class="inline-block text-white top-0 right-0 bottom-0 left-0 p-2 absolute h-full w-100 bg-secondary-200 hover:bg-primary shadow transition transition-h relative">
                <span class="absolute inline-block bottom-0 left-0 px-2">
                  <span class="inline-block font-display text-3xl uppercase w-100">
                    {!! $attr->postSmallTopHeading !!}
                  </span>

                  @if($attr->postSmallTopHeading)
                    <span class="inline-block font-sans w-100 pb-2">
                      {!! $attr->postSmallTopDescription !!}
                    </span>
                  @endif
                </span>
              </div>
            </a>
          @endif
        </div>
        <div class="w-full sm:w-1/2 md:w-full h-64 xl:h-64 px-2">
          @if(isset($attr->postSmallBottomLinkUrl))
            <a class="block w-full h-full bg-grey-dark bg-no-repeat bg-center bg-cover"
              href="{!! $attr->postSmallBottomLinkUrl !!}"
              title="{!! $attr->postSmallBottomHeading !!}"
              @if(isset($attr->postSmallBottomImage))
                style="background-image: url({!! $attr->postSmallBottomImage['url'] !!});"
              @endif>

              <div class="inline-block text-white top-0 right-0 bottom-0 left-0 p-2 absolute h-full w-100 bg-secondary-200 hover:bg-primary shadow transition transition-h relative">
                <span class="absolute inline-block bottom-0 left-0 px-2">
                  <span class="inline-block font-display text-3xl uppercase w-100">
                    {!! $attr->postSmallBottomHeading !!}
                  </span>

                  @if($attr->postSmallBottomHeading)
                    <span class="inline-block font-sans w-100 pb-2">
                      {!! $attr->postSmallBottomDescription !!}
                    </span>
                  @endif
                </span>
              </div>
            </a>
          @endif
        </div>
      </div>
    </div>
  </div>
</div>