WordCamp San Diego 2018, block.js

block.js

/**
 * BLOCK: sponge-block
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './style.scss';
import './editor.scss';

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType, RichText, MediaUpload } = wp.blocks; // Import registerBlockType() from wp.blocks
const { Button } = wp.components;

registerBlockType( 'cgb/block-sponge-block', {
	title: __( 'Sponge Block' ), // Block title.
	icon: 'carrot',
	category: 'common',
	keywords: [
		__( 'sponge' ),
		__( 'CGB Example' ),
		__( 'create-guten-block' ),
	],
	attributes: {
		sponge_title: {
			type: 'string',
			source: 'children',
			selector: 'h3'
		},
		sponge_description: {
			type: 'string',
			source: 'children',
			selector: 'p'
		},
		image_alt: {
			type: 'string',
			source: 'attribute',
			selector: 'img',
			attribute: 'alt',
		},
		image_url: {
			type: 'string',
			source: 'attribute',
			selector: 'img',
			attribute: 'src',
		},
		image_id: {
			type: 'number'
		},
	},

	edit: function( props ) {
		console.log(props);

		const onChangeTitle = newTitle => {
			props.setAttributes({ sponge_title: newTitle });
		};

		const onChangeDescription = newDescription => {
			props.setAttributes({ sponge_description: newDescription });
		};

		const onSelectImage = newMedia => {
			props.setAttributes( {
				image_url: newMedia.url,
				image_id: newMedia.id,
				image_alt: newMedia.alt,
			} );
		};

		return (
			<div className="sponge">
				<figure className="sponge__image">
					<MediaUpload
						onSelect={ onSelectImage }
						type="image"
						value={ props.attributes.image_id }
						render={ ( { open } ) => (
							<Button className={ props.attributes.image_id ? 'image-button' : 'button button-large' } onClick={ open }>
								{ ! props.attributes.image_id ? __( 'Upload Image' ) : <img src={ props.attributes.image_url } alt={ props.attributes.image_alt } /> }
							</Button>
						) }
					/>
				</figure>
				<div className="sponge__details">
					<h3 className="sponge__title">
						<RichText
							placeholder="Sponge Title"
							onChange={ onChangeTitle }
							value={ props.attributes.sponge_title }
							/>
					</h3>
					<p className="sponge__description">
						<RichText
							placeholder="Sponge Description"
							onChange={ onChangeDescription }
							value={ props.attributes.sponge_description }
							/>
						</p>
				</div>
			</div>
		);
	},

	save: function( props ) {
		return (
			<div className="sponge">
				<figure className="sponge__image">
					<img src={ props.attributes.image_url } alt={ props.attributes.image_alt } />
				</figure>
				<div className="sponge__details">
					<h3 className="sponge__title">{ props.attributes.sponge_title }</h3>
					<p className="sponge__description">{ props.attributes.sponge_description }</p>
				</div>
			</div>
		);
	},
} );