index.jsx

/**
 * WordPress dependencies
 */
import '@wordpress/editor'; // This shouldn't be necessary

import { render, useState, Fragment } from '@wordpress/element';
import {
	BlockEditorProvider,
} from '@wordpress/block-editor';
import {
	Icon,
	IconButton,
	Popover,
	Placeholder,
	SlotFillProvider,
	DropZoneProvider,
} from '@wordpress/components';
import { registerCoreBlocks } from '@wordpress/block-library';
import { Paragraph } from '@wordpress/block-library';
import '@wordpress/format-library';

/**
 * Internal dependencies
 */
import './style.scss';

/* eslint-disable no-restricted-syntax */
import '@wordpress/components/build-style/style.css';
import '@wordpress/block-editor/build-style/style.css';
import '@wordpress/block-library/build-style/style.css';
import '@wordpress/block-library/build-style/editor.css';
import '@wordpress/block-library/build-style/theme.css';
import '@wordpress/format-library/build-style/style.css';
/* eslint-enable no-restricted-syntax */

import { Panel, PanelBody, PanelRow } from '@wordpress/components';

import { withState } from '@wordpress/compose';
 

function App() {
	const [ blocks, updateBlocks ] = useState( [] );

	const clickTools = function () {
		alert('a');
	}

	return (
		<div className="playground__body">
			<BlockEditorProvider
				value={ blocks }
				onInput={ updateBlocks }
				onChange={ updateBlocks }
			>
				<div className="editor-top-bar">
					<div className="editor-top-bar-icon">
						<Icon icon="wordpress-alt" color="#338"/>
					</div>
					<div className="editor-top-bar-title">
						Create your site
					</div>
					<div className="editor-top-bar-tools">
						<Icon icon="admin-generic"/>
					</div>
					<div className="editor-top-bar-more">
						<IconButton
					        icon="menu"
					        label="More"								       
					    />
				   </div>	

				</div>
				<div className="editor-styles-wrapper">
					   <Placeholder
					        icon="wordpress"
					        label="site block goes here"
					    />
				</div>
			</BlockEditorProvider>
		</div>
	);
}

registerCoreBlocks();
render(
	<App />,
	document.querySelector( '#app' )
);

style.scss

@import "../../assets/stylesheets/colors";
@import "../../assets/stylesheets/variables";
@import "../../assets/stylesheets/mixins";
@import "../../assets/stylesheets/breakpoints";
@import "../../assets/stylesheets/animations";
@import "../../assets/stylesheets/z-index";

@import "./reset";
@import "./editor-styles";


.playground__header {
	padding: 20px;
	border-bottom: 1px solid #ddd;
}

.playground__logo {
	font-size: 20px;
	font-weight: 300;
}

.playground__body {
	img {
		max-width: 100%;
		height: auto;
	}

	iframe {
		width: 100%;
	}

	.components-navigate-regions {
		height: 100%;
	}
}

/**
 * Animations
 */

// These keyframes should not be part of the _animations.scss mixins file.
// Because keyframe animations can't be defined as mixins properly, they are duplicated.
// Since hey are intended only for the editor, we add them here instead.
@keyframes edit-post__fade-in-animation {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}



.editor-top-bar {
	display: flex;
	width: 100%;
	padding: 16px;
	border-bottom: 1px solid #DDD;
	margin-bottom: 1em;

	div {	
		margin: 0 8px;
		align-self: center;
	}

	div:nth-child(3) {
    	margin-left: auto;
    }

}