@wordpress/block-editor

import { useState } from 'react';
import {
	BlockCanvas,
	BlockEditorProvider,
} from '@wordpress/block-editor';

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

	return (
		<BlockEditorProvider
			value={ blocks }
			onInput={ updateBlocks }
			onChange={ updateBlocks }
		>
			<BlockCanvas height="400px" />
		</BlockEditorProvider>
	);
}

import { BlockEditorProvider } from '@wordpress/block-editor';

<BlockEditorProvider
	value={ blocks }
	onInput={ onInput }
	onChange={ onChange }
	settings={ settings }
>
	{ /* Editor components */ }
</BlockEditorProvider>

import { BlockCanvas } from '@wordpress/block-editor';

<BlockCanvas
	height="600px"
	styles={ customStyles }
/>

import { BlockList } from '@wordpress/block-editor';

<BlockList />

import { BlockInspector } from '@wordpress/block-editor';

<BlockInspector />

import { BlockToolbar } from '@wordpress/block-editor';

<BlockToolbar hideDragHandle={ false } />

import { BlockControls } from '@wordpress/block-editor';
import { ToolbarButton } from '@wordpress/components';

function Edit() {
	return (
		<>
			<BlockControls>
				<ToolbarButton
					icon="admin-links"
					label="Custom Control"
					onClick={ handleClick }
				/>
			</BlockControls>
			{ /* Block content */ }
		</>
	);
}

import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

function Edit( { attributes, setAttributes } ) {
	return (
		<>
			<InspectorControls>
				<PanelBody title="Settings">
					<TextControl
						label="Title"
						value={ attributes.title }
						onChange={ ( title ) => setAttributes( { title } ) }
					/>
				</PanelBody>
			</InspectorControls>
			{ /* Block content */ }
		</>
	);
}

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

function Edit( { attributes, setAttributes } ) {
	return (
		<RichText
			{ ...useBlockProps() }
			tagName="p"
			value={ attributes.content }
			onChange={ ( content ) => setAttributes( { content } ) }
			placeholder="Enter text..."
		/>
	);
}

import { PlainText } from '@wordpress/block-editor';

<PlainText
	value={ attributes.content }
	onChange={ ( content ) => setAttributes( { content } ) }
	placeholder="Enter code..."
/>

import { useBlockProps } from '@wordpress/block-editor';

function Edit() {
	const blockProps = useBlockProps( {
		className: 'my-custom-class',
		style: { color: '#222222' },
	} );

	return <div { ...blockProps }>Block content</div>;
}

import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';

function Edit() {
	const blockProps = useBlockProps();
	const innerBlocksProps = useInnerBlocksProps( blockProps, {
		allowedBlocks: [ 'core/paragraph', 'core/image' ],
		template: [ [ 'core/paragraph' ] ],
	} );

	return <div { ...innerBlocksProps } />;
}

import { useBlockEditContext } from '@wordpress/block-editor';

function MyComponent() {
	const { name, clientId, isSelected } = useBlockEditContext();

	return isSelected ? <div>This block is selected</div> : null;
}

import { ColorPalette } from '@wordpress/block-editor';

<ColorPalette
	value={ color }
	onChange={ ( newColor ) => setAttributes( { color: newColor } ) }
/>

import { FontSizePicker } from '@wordpress/block-editor';

<FontSizePicker
	value={ fontSize }
	onChange={ ( newSize ) => setAttributes( { fontSize: newSize } ) }
/>

import { MediaPlaceholder } from '@wordpress/block-editor';

<MediaPlaceholder
	icon="format-image"
	labels={ { title: 'Image' } }
	onSelect={ ( media ) => setAttributes( { mediaId: media.id } ) }
	accept="image/*"
	allowedTypes={ [ 'image' ] }
/>

import { MediaReplaceFlow } from '@wordpress/block-editor';

<MediaReplaceFlow
	mediaId={ attributes.mediaId }
	mediaURL={ attributes.mediaURL }
	allowedTypes={ [ 'image' ] }
	accept="image/*"
	onSelect={ ( media ) => setAttributes( { mediaId: media.id } ) }
/>

import { AlignmentControl } from '@wordpress/block-editor';

<AlignmentControl
	value={ attributes.align }
	onChange={ ( align ) => setAttributes( { align } ) }
/>

import { BlockAlignmentControl } from '@wordpress/block-editor';

<BlockAlignmentControl
	value={ attributes.align }
	onChange={ ( align ) => setAttributes( { align } ) }
/>

import { getColorObjectByColorValue } from '@wordpress/block-editor';

const colorObject = getColorObjectByColorValue( colors, '#ff0000' );

import { getFontSize } from '@wordpress/block-editor';

const fontSize = getFontSize( fontSizes, 'large', 24 );

import { useSelect } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';

function MyComponent() {
	const { selectedBlock } = useSelect( ( select ) => ( {
		selectedBlock: select( blockEditorStore ).getSelectedBlock(),
	} ), [] );
}