Skip to content

Instantly share code, notes, and snippets.

@ryanwelcher
Last active July 19, 2022 09:49
Show Gist options
  • Save ryanwelcher/ee897533239166ab3e5f653fe8c31134 to your computer and use it in GitHub Desktop.
Save ryanwelcher/ee897533239166ab3e5f653fe8c31134 to your computer and use it in GitHub Desktop.
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/>
</>
)}
</>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment