@wordpress/edit-site

import { initialize } from '@wordpress/edit-site';
import blockEditorSettings from './block-editor-settings';

initialize( '#editor-root', blockEditorSettings );

my-theme/
├── theme.json
├── templates/
│   ├── index.html
│   └── single.html
├── parts/
│   ├── header.html
│   └── footer.html
└── style.css

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{
					"slug": "primary",
					"color": "#007cba",
					"name": "Primary"
				}
			]
		},
		"typography": {
			"fontSizes": [
				{
					"slug": "small",
					"size": "14px",
					"name": "Small"
				}
			]
		}
	}
}

function my_custom_template() {
	$post_type_object = get_post_type_object( 'my_cpt' );
	$post_type_object->template = [
		[ 'core/paragraph', [
			'placeholder' => 'Add content...'
		] ],
	];
}
add_action( 'init', 'my_custom_template' );

function my_register_patterns() {
	register_block_pattern(
		'my-theme/hero',
		[
			'title' => __( 'Hero Section', 'my-theme' ),
			'categories' => [ 'featured' ],
			'content' => '<!-- wp:group --><!-- wp:heading --><!-- /wp:heading --><!-- /wp:group -->',
		]
	);
}
add_action( 'init', 'my_register_patterns' );

<!-- wp:template-part {"slug":"header","theme":"my-theme"} /-->

<!-- wp:group -->
<div class="wp-block-group">
	<!-- Your content -->
</div>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","theme":"my-theme"} /-->

import { useSelect } from '@wordpress/data';
import { store as editSiteStore } from '@wordpress/edit-site';

function MyComponent() {
	const globalStyles = useSelect( ( select ) => {
		return select( editSiteStore ).getSettings();
	}, [] );

	return <div>{ /* Use global styles */ }</div>;
}

import { useSelect } from '@wordpress/data';
import { store as editSiteStore } from '@wordpress/edit-site';

function MyComponent() {
	const { canvasMode, editedPost } = useSelect(
		( select ) => ( {
			canvasMode: select( editSiteStore ).getCanvasMode(),
			editedPost: select( editSiteStore ).getEditedPostId(),
		} ),
		[]
	);

	return (
		<div>
			<p>Canvas Mode: { canvasMode }</p>
			<p>Edited Post: { editedPost }</p>
		</div>
	);
}

const editorSettings = {
	alignWide: true,
	supportsLayout: true,
	availableTemplates: {},
	defaultTemplateTypes: [
		{
			slug: 'index',
			title: 'Index',
			description: 'Main template',
		},
	],
	__experimentalBlockPatterns: [],
	__experimentalBlockPatternCategories: [],
};

<!-- wp:navigation {"layout":{"type":"flex"}} -->
<nav class="wp-block-navigation">
	<!-- wp:page-list /-->
</nav>
<!-- /wp:navigation -->

<!-- wp:query -->
<div class="wp-block-query">
	<!-- wp:post-template -->
		<!-- wp:post-title /-->
		<!-- wp:post-excerpt /-->
	<!-- /wp:post-template -->
	
	<!-- wp:query-pagination -->
	<!-- /wp:query-pagination -->
</div>
<!-- /wp:query -->