ryanwelcher
11/21/2019 - 3:56 PM

EditComponent with State - Hooks

const { useState } = wp.element;
const { ServerSideRender } = wp.components;
const { BlockControls, InnerBlocks } = wp.blockEditor;

import LivePreviewButton from '../../components/live-preview-button';

const EditComponent = ( props ) => {
	const [ preview, setPreview ] =  useState( false );
	const { attributes, clientId, name } = props;
	return (
		<>
			<BlockControls>
				<LivePreviewButton
					clientId={ clientId }
					onChange={ preview => setPreview( preview ) }
				/>
			</BlockControls>
		{ preview ? (
			<div>
				<ServerSideRender
					block={ name} 
					attributes={ attributes }
				/>
			</div>
		) : (
			<>
				<InnerBlocks/>
			</>
		)}
		</>
	)
}