block.js

import {
	__
} from '@wordpress/i18n';

import {
	registerBlockType,
} from '@wordpress/blocks';

import {
	RichText,
	MediaUpload,
} from '@wordpress/block-editor';

import {
	Button
} from '@wordpress/components';

registerBlockType( 'timmy/review-block', {
	title: 'Review (Block)',
	icon: 'admin-comments',
	category: 'common',
	attributes: {
		reviewTitle: {
			type: 'array',
			source: 'children',
			selector: 'h2',
		},
		mediaID: {
			type: 'number',
		},
		mediaURL: {
			type: 'string',
			source: 'attribute',
			selector: 'img',
			attribute: 'src',
		},
		reviewContent: {
			type: 'array',
			source: 'children',
			selector: '.steps',
		},
	},
	edit: ( props ) => {
		const {
			className,
			attributes: {
				reviewTitle,
				mediaID,
				mediaURL,
				reviewContent,
			},
			setAttributes,
		} = props;

		const onChangereviewTitle = ( value ) => {
			setAttributes( { reviewTitle: value } );
		};

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

		const onChangereviewContent = ( value ) => {
			setAttributes( { reviewContent: value } );
		};

		/**
		 * Output
		 */
		return (
			<div className="pt-review">
				<div className="pt-review__avatar">
					<MediaUpload
						onSelect={ onSelectImage }
						allowedTypes="image"
						value={ mediaID }
						render={ ( { open } ) => (
							<Button className={ mediaID ? 'image-button' : 'button button-large' } onClick={ open }>
								{ ! mediaID ? __( 'Upload Avatar', 'timmy' ) : <img src={ mediaURL } alt={ __( 'Upload Avatar', 'timmy' ) } /> }
							</Button>
						) }
					/>
				</div>
				<div className="pt-review__body">
					<RichText
						tagName="h2"
						placeholder={ __( 'Write title…', 'gutenberg-examples' ) }
						value={ reviewTitle }
						onChange={ onChangereviewTitle }
					/>
					<RichText
						tagName="div"
						multiline="p"
						className="pt-review__content"
						placeholder={ __( 'Write text…', 'timmy' ) }
						value={ reviewContent }
						onChange={ onChangereviewContent }
					/>
				</div>
			</div>
		);
	},
	save: ( props ) => {
		const {
			className,
			attributes: {
				reviewTitle,
				mediaURL,
				reviewContent,
			},
		} = props;
		return (
			<div className="pt-review">
				{
					mediaURL && (
						<figure className="pt-review__avatar">
							<img src={ mediaURL } alt={ __( 'Avatar', 'timmy' ) } />
						</figure>
					)
				}

				<div className="pt-review__body">
					<RichText.Content tagName="h2" className="pt-review__title" value={ reviewTitle } />

					<RichText.Content tagName="div" className="pt-review__content" value={ reviewContent } />
				</div>
			</div>
		);
	},
} );