banner.blade.php

@php($uid = uniqid())

<div class="wp-block-wrap">
  <div class="bg-black w-full block_header_{!! $uid !!}">
    <div class="w-100 h-100 mx-auto rounded-t shadow mb-4 block_header_{!! $uid !!}__image">
      <div class="relative w-100 h-100 block_header_{!! $uid !!}__scrim">
        <div class="container pt-48 pb-40 relative z-10">
          <div class="text-center">
            @isset($block->attributes->displaySVG)
              <div class="text-primary ml-auto mr-auto max-w-md text-center mb-0 pb-0">@svg('ndn-logo-reversed')</div>
            @endisset
            <h1 class="font-display font-bold text-4xl uppercase text-white pt-0 mt-0 pb-4">{!! get_the_title() !!}</h1>
            <h2 class="font-hairline font-serif text-xl tracking-wide text-white my-0 mb-0">{!! get_the_excerpt() !!}</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@isset($block->attributes->mediaURL)
  @push('css')
    .block_header_{!! $uid !!}__image {
      background-image: url({!! $block->attributes->mediaURL !!});
      background-size: cover;
      background-position: center;
    }
  @endpush
@endisset

@isset($block->attributes->color)
  @push('css')
    .block_header_{!! $uid !!}__scrim {
      background: {!! $block->attributes->color !!};
    }
  @endpush
@endisset

Banner.php

<?php

namespace App\Blocks;

use \TinyPixel\BlockCompose\Composer;
use \TinyPixel\BlockCompose\Attribute;
use \TinyPixel\BlockCompose\Traits;

class Banner extends Composer
{
    use Traits\Compose;

    public $name = 'tinypixel/banner';
    public $view = 'blocks.banner';
    public $editor_script = 'tiny/blocks';

    public function attributes()
    {
        return [
            new Attribute('mediaURL', 'string'),
            new Attribute('mediaID', 'string'),
            new Attribute('color', 'string'),
            new Attribute('opacity', 'string'),
        ];
    }
}

container.js

import { __ } from '@wordpress/i18n'
import { Fragment } from '@wordpress/element'
import { InspectorControls, MediaUpload, ColorPalette } from '@wordpress/editor'
import { PanelBody, RangeControl } from '@wordpress/components'
import { classes } from './styled'

const Container = ({
  color, opacity, media,
  onColor, onOpacity, onMedia, children,
}) => {

  const styles = {
    container: {
      backgroundImage: `url(${media})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center',
    },
    overlay: {
      backgroundColor: color,
    },
  }

  const renderMediaPreview = ({open}) => (
    <Fragment>
      {media && (<img className='mb-2' src={media} />)}
      <button className={classes.inspectorBtn} onClick={open}>Upload Image</button>
    </Fragment>
  )

  return (
    <Fragment>
      <InspectorControls>
        <PanelBody title={__('Overlay', 'tinypixel')}>
          <ColorPalette value={color} onChange={onColor} />
          <RangeControl
            label='Opacity'
            value={opacity}
            onChange={onOpacity}
            min={0}
            max={100}
          />
        </PanelBody>
        <PanelBody title={__('Background', 'tinypixel')}>
            <MediaUpload
              value={media}
              onSelect={onMedia}
              render={renderMediaPreview} />
        </PanelBody>
      </InspectorControls>
      <div className={classes.backsplash}>
        <div className={classes.container} style={styles.container}>
          <div className={classes.scrim} style={styles.overlay}>
            <div className={classes.content}>
              <div className={classes.text}>
                {children}
              </div>
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  )
}

export { Container }

edit.js

import { Container } from './Container'
import { PostTitleInput, PostExcerptInput } from './PostInput'

import chroma from 'chroma-js'

const edit = ({className, attributes, setAttributes}) => {
  const {color, opacity, mediaURL} = attributes

  const onMedia = media => setAttributes({
    mediaURL: media.url,
    mediaID:  media.id,
  })

  const onColor = color => setAttributes({
    color:
      chroma(color)
        .alpha(opacity * 0.01)
        .hex('rgba'),
  })

  const onOpacity = opacity => setAttributes({
    opacity,
    color:
      chroma(color)
        .alpha(opacity * 0.01)
        .hex('rgba'),
  })

  return (
    <div className={className}>
      <Container
        color={color}
        media={mediaURL}
        opacity={opacity}
        onMedia={onMedia}
        onColor={onColor}
        onOpacity={onOpacity}>
        <div role="region" tabIndex="-1" aria-label="Post title input">
          <PostTitleInput />
        </div>
        <div role="region" tabIndex="-1" aria-label="Post excerpt input">
          <PostExcerptInput />
        </div>
      </Container>
    </div>
  )
}

export { edit }

index.js

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

registerBlockType('tinypixel/banner', {
  title: __('Banner', 'tinypixel'),
  category: 'common',
  attributes: {
    mediaURL: {
      type: 'string',
    },
    mediaID: {
      type: 'number',
    },
    color: {
      type: 'string',
    },
    opacity: {
      type: 'number',
      default: 0.8,
    },
    align: {
      type: 'string',
      default: 'full',
    },
  },
  supports: {
    align: true,
  },
  edit,
  save: () => { return null },
})

postInput.js

import { RichText } from '@wordpress/editor'
import { compose } from '@wordpress/compose'
import { navigateRegions } from '@wordpress/components'
import { withSelect, withDispatch } from '@wordpress/data'

import { classes } from './styled'

const TitleInput = navigateRegions(({title, onTitle}) => (
  <div role="region" tabIndex="-1" aria-label="Post title input">
    <RichText el="h1" value={title} className={classes.title} onChange={onTitle} />
  </div>
))

const ExcerptInput = navigateRegions(({excerpt, onExcerpt}) => (
  <div role="region" tabIndex="-1" aria-label="Post excerpt input">
    <RichText el="h2" value={excerpt} className={classes.subtitle} onChange={onExcerpt} />
  </div>
))

const PostTitleInput = compose([
  withSelect(select => ({
    title: select('core/editor').getEditedPostAttribute('title'),
  })),
  withDispatch(dispatch => ({
    onTitle: title => dispatch('core/editor').editPost({title}),
  })),
])(TitleInput)

const PostExcerptInput = compose([
  withSelect(select => ({
    excerpt: select('core/editor').getEditedPostAttribute('excerpt'),
  })),
  withDispatch(dispatch => ({
    onExcerpt: excerpt => dispatch('core/editor').editPost({excerpt}),
  })),
])(ExcerptInput)

export { PostTitleInput, PostExcerptInput }

styled.js

import classnames from 'classnames';

const classes = {
  title: classnames([
    'font-display',
    'font-bold',
    'text-4xl',
    'uppercase',
    'text-white',
    'pt-4 mt-0',
    'pb-4',
  ]),
  subtitle: classnames([
    'font-hairline',
    'font-serif',
    'text-xl',
    'tracking-wide',
    'text-white',
    'mt-2',
    'mb-4',
  ]),
  backsplash: classnames([
    'bg-black',
    'w-full',
  ]),
  container: classnames([
    'w-100',
    'h-100',
    'mx-auto',
    'rounded-t',
    'shadow',
  ]),
  scrim: classnames([
    'relative',
    'w-100',
    'h-100',
  ]),
  content: classnames([
    'container',
    'py-16',
    'relative',
    'z-10',
  ]),
  text: classnames([
    'text-center',
    'py-32',
  ]),
  inspectorBtn: classnames([
    'button',
    'button-secondary',
  ]),
}

export { classes }