Hero Block

/**
 * Block dependencies
 */
import icon from './icon';
import './style.scss';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const {
    RichText,
    MediaUpload,
    BlockControls,
    BlockAlignmentToolbar,
} = wp.editor

/**
 * Register block
 */
export default registerBlockType(
    'jsforwpblocks/heroblock',
    {
        title: __( 'Hero Block', 'jsforwpblocks' ),
        description: __( 'Large block with hero image, text and buttons', 'jsforwpblocks' ),
        category: 'common',
        icon: {
            background: 'rgba(254, 243, 224, 0.52)',
            src: icon,
        },
        keywords: [
            __( 'Banner', 'jsforwpblocks' ),
            __( 'Call to Action', 'jsforwpblocks' ),
            __( 'Message', 'jsforwpblocks' ),
        ],
        attributes: {
            message: {
                type: 'array',
                source: 'children',
                selector: '.message-body',
            },
            blockAlignment: {
                type: 'string',
                default: 'wide',
            },
            imgUrl: {
                type: 'string',
                default: 'http://placehold.it/500'
            }
        },
        getEditWrapperProps( { blockAlignment } ) {
            if ( 'left' === blockAlignment || 'right' === blockAlignment || 'full' === blockAlignment ) {
                return { 'data-align': blockAlignment };
            }
        },
        edit: props => {
            const { attributes: { message, blockAlignment }, className, setAttributes } = props;
            const onChangeMessage = message => { setAttributes( { message } ) };

            function selectImage(value) {
                console.log(value);
                setAttributes({
                    imgUrl: value.sizes.full.url,
                })
            }

            return (
                <div className={ className }>
                    <BlockControls>
                        <BlockAlignmentToolbar
                            value={ blockAlignment }
                            onChange={ blockAlignment => setAttributes( { blockAlignment } ) }
                        />
                    </BlockControls>
                    <RichText
                        tagName="div"
                        multiline="p"
                        placeholder={ __( 'Add your custom message', 'jsforwpblocks' ) }
                        onChange={ onChangeMessage }
                        value={ message }
                    />
                    <div className="media">
                        <MediaUpload
                            onSelect={selectImage}
                            render={ ({open}) => {
                                return <img
                                    src={attributes.imgUrl}
                                    onClick={open}
                                    />;
                            }}
                        />
                    </div>
                </div>
            );
        },
        save: props => {
            const { attributes: { message, blockAlignment, imgUrl } } = props;
            return (
                <div
                    className={classnames(
                        `align${blockAlignment}`
                    )}
                    style={backgroundImage={imgUrl}}
                >
                    <h2>{ __( 'Call to Action', 'jsforwpblocks' ) }</h2>
                    <div class="message-body">
                        { message }
                    </div>
                </div>
            );
        },
    },
);