Load CSS to style the (Gutenberg) Block Editor like the front-end

blocks-style.css

/*
Theme Name: Ephemeris
Description: Used to style the Block Editor (Gutenberg)
*/

/* Custom Colours */
/* Eclipse */
.edit-post-visual-editor .has-eclipse-background-color {
	background-color: #3a3a3a;
}

.edit-post-visual-editor .has-eclipse-color {
	color: #3a3a3a;
}

/* San Juan */
.edit-post-visual-editor .has-san-juan-background-color {
	background-color: #334861;
}

.edit-post-visual-editor .has-san-juan-color {
	color: #334861;
}

/* Denim */
.edit-post-visual-editor .has-denim-background-color {
	background-color: #2979c7;
}

.edit-post-visual-editor .has-denim-color {
	color: #2979c7;
}

/* Electric Violet */
.edit-post-visual-editor .has-electric-violet-background-color {
	background-color: #8309e7;
}

.edit-post-visual-editor .has-electric-violet-color {
	color: #8309e7;
}

/* Cerise */
.edit-post-visual-editor .has-cerise-background-color {
	background-color: #df49b8;
}

.edit-post-visual-editor .has-cerise-color {
	color: #df49b8;
}

/* Alizarin */
.edit-post-visual-editor .has-alizarin-background-color {
	background-color: #df312c;
}

.edit-post-visual-editor .has-alizarin-color {
	color: #df312c;
}

/* Pumpkin */
.edit-post-visual-editor .has-pumpkin-background-color {
	background-color: #FF8228;
}

.edit-post-visual-editor .has-pumpkin-color {
	color: #FF8228;
}

/* Titanium Yellow */
.edit-post-visual-editor .has-titanium-yellow-background-color {
	background-color: #eef000;
}

.edit-post-visual-editor .has-titanium-yellow-color {
	color: #eef000;
}

/* Atlantis */
.edit-post-visual-editor .has-atlantis-background-color {
	background-color: #7ed934;
}

.edit-post-visual-editor .has-atlantis-color {
	color: #7ed934;
}

/* Denim */
.edit-post-visual-editor .has-white-smoke-background-color {
	background-color: #eee;
}

.edit-post-visual-editor .has-white-smoke-color {
	color: #eee;
}

/* White */
.edit-post-visual-editor .has-white-background-color {
	background-color: #fff;
}

.edit-post-visual-editor .has-white-color {
	color: #fff;
}

/* Paragraph Block */
.edit-post-visual-editor p {
   font: 16px/1.5 'Open Sans', Helvetica, Arial, sans-serif;
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   color: #3a3a3a;
}

/* Header */
.edit-post-visual-editor .editor-post-title textarea.editor-post-title__input,
.edit-post-visual-editor h1,
.edit-post-visual-editor h2,
.edit-post-visual-editor h3,
.edit-post-visual-editor h4,
.edit-post-visual-editor h5,
.edit-post-visual-editor h6 {
	font-family: 'Dosis', sans-serif;
	font-style: normal;
	font-weight: 700;
	color: #3a3a3a;
	margin-top: 0;
}

.edit-post-visual-editor .editor-post-title textarea.editor-post-title__input,
.edit-post-visual-editor h1.blocks-rich-text__tinymce {
	margin-bottom: 10px;
	margin-bottom: 0.625rem;
	font-size: 48px;
	font-size: 3rem;
	line-height: 1.25;
}

.edit-post-visual-editor h2.blocks-rich-text__tinymce {
	margin-bottom: 8px;
	margin-bottom: .5rem;
	font-size: 36px;
	font-size: 2.25rem;
	line-height: 1.1666;
}

.edit-post-visual-editor h3.blocks-rich-text__tinymce {
	margin-bottom: 6px;
	margin-bottom: 0.375rem;
	font-size: 28px;
	font-size: 1.75rem;
	line-height: 1.2857;
}

.edit-post-visual-editor h4.blocks-rich-text__tinymce {
	margin-bottom: 5px;
	margin-bottom: 0.3125rem;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.25;
}

.edit-post-visual-editor h5.blocks-rich-text__tinymce {
	margin-bottom: 5px;
	margin-bottom: 0.3125rem;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.25;
}

.edit-post-visual-editor h6.blocks-rich-text__tinymce {
	margin-bottom: 5px;
	margin-bottom: 0.3125rem;
	font-size: 14px;
	font-size: .875rem;
	line-height: 1.2142;
}

/* Image Block */
.edit-post-visual-editor .wp-block-image > div > div {
	max-width: 100% !important;
	max-height: none !important;
}

/* Cover Image block */
.edit-post-visual-editor .wp-block-cover-image {
	height: 100vh;
}

/* Cover Image Block Header */
.edit-post-visual-editor .wp-block-cover-image h1.blocks-rich-text__tinymce,
.edit-post-visual-editor .wp-block-cover-image h2.blocks-rich-text__tinymce,
.edit-post-visual-editor .wp-block-cover-image h3.blocks-rich-text__tinymce,
.edit-post-visual-editor .wp-block-cover-image h4.blocks-rich-text__tinymce,
.edit-post-visual-editor .wp-block-cover-image h5.blocks-rich-text__tinymce,
.edit-post-visual-editor .wp-block-cover-image h6.blocks-rich-text__tinymce {
	font-family: 'Dosis', sans-serif;
	font-style: normal;
	font-weight: 700;
	color: #3a3a3a;
	margin-top: 0;
	color: #fff;
}

.edit-post-visual-editor .wp-block-cover-image h1.blocks-rich-text__tinymce {
	margin-bottom: 10px;
	margin-bottom: 0.625rem;
	font-size: 48px;
	font-size: 3rem;
	line-height: 1.25;
}

.edit-post-visual-editor .wp-block-cover-image h2.blocks-rich-text__tinymce {
	margin-bottom: 8px;
	margin-bottom: .5rem;
	font-size: 36px;
	font-size: 2.25rem;
	line-height: 1.1666;
}

.edit-post-visual-editor .wp-block-cover-image h3.blocks-rich-text__tinymce {
	margin-bottom: 6px;
	margin-bottom: 0.375rem;
	font-size: 28px;
	font-size: 1.75rem;
	line-height: 1.2857;
}

.edit-post-visual-editor .wp-block-cover-image h4.blocks-rich-text__tinymce {
	margin-bottom: 5px;
	margin-bottom: 0.3125rem;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.25;
}

.edit-post-visual-editor .wp-block-cover-image h5.blocks-rich-text__tinymce {
	margin-bottom: 5px;
	margin-bottom: 0.3125rem;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.25;
}

.edit-post-visual-editor .wp-block-cover-image h6.blocks-rich-text__tinymce {
	margin-bottom: 5px;
	margin-bottom: 0.3125rem;
	font-size: 14px;
	font-size: .875rem;
	line-height: 1.2142;
}

/* Blockquote block */
.edit-post-visual-editor .wp-block-quote {
	border-top: none;
	border-bottom: none;
	margin: 0 0 18px 20px;
	margin: 0 0 1.125rem 1.25rem;
	padding: 16px 0 16px 16px;
	padding: 1rem 0 1rem 1rem;
	text-align: left;
}

/* Pullquote block */
.edit-post-visual-editor .wp-block-pullquote {
	border-top: 5px solid #3a3a3a;
	border-bottom: 5px solid #3a3a3a;
	border-left: none;
	margin: 0 0 18px 0;
	margin: 0 0 1.125rem 0;
	padding: 32px 0;
	padding: 2rem 0;
	text-align: center;
}

/* Blockquote & Pullquote block */
.edit-post-visual-editor .wp-block-quote p,
.edit-post-visual-editor .wp-block-pullquote p {
	font-style: italic;
	font-weight: 400;
	font-size: 24px;
	font-size: 1.5rem;
}

.edit-post-visual-editor .wp-block-quote cite,
.edit-post-visual-editor .wp-block-pullquote cite {
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	font-size: 0.875rem;
	line-height: 1.125;
	color: #999;
	text-transform: none;
}

/* Video block */
.edit-post-visual-editor .wp-block-video {
	margin-left: 0;
	margin-right: 0;
}

/* Audio block */
.edit-post-visual-editor .wp-block-audio {
	margin-left: 0;
	margin-right: 0;
}

.edit-post-visual-editor .wp-block-audio audio {
	width: 100%;
}

/* Button block */
.edit-post-visual-editor .wp-block-button .wp-block-button__link {
	display: inline-block;
	*display: inline;
	padding: 9px 14px;
	padding: 0.59375rem 0.875rem;
	margin-bottom: 0;
	*margin-left: .3em;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.25;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background-color: #2e7bc4;
	*background-color: #2e7bc4;
	border: none;
	border-radius: 0;
}

.edit-post-visual-editor .wp-block-button .wp-block-button__link:hover {
	background-color: #344860;
	*background-color: #344860;
}

/* Seperator block */
.edit-post-visual-editor hr {
	background-color: inherit;
}

.edit-post-visual-editor .wp-block-separator {
	border-bottom: 1px solid #999;
	max-width: 500px;
}

functions.php

<?php
/**
 * Load our Block Editor styles to style the Editor like the front-end & increase the width of the Block Editor blocks to match the site width from the Customizer
 */
if ( ! function_exists( 'ephemeris_block_editor_width_styles' ) ) {
	function ephemeris_block_editor_width_styles() {
		$ephemeris_layout_width = 1200;
		$styles = '';

		wp_enqueue_style( 'ephemeris-blocks-style', trailingslashit( get_template_directory_uri() ) . 'css/blocks-style.css', array(), '1.0.0', 'all' );

		// Increase width of Title
		$styles .= 'body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title .editor-post-title__block {max-width: ' . esc_attr( $ephemeris_layout_width - 10 ) . 'px;}';

		// Increase width of all Blocks & Block Appender
		$styles .= 'body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block {max-width: ' . esc_attr( $ephemeris_layout_width - 10 ) . 'px;}';
		$styles .= 'body.gutenberg-editor-page .edit-post-visual-editor .editor-default-block-appender {max-width: ' . esc_attr( $ephemeris_layout_width - 10 ) . 'px;}';

		// Increase width of Wide blocks
		$styles .= 'body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block[data-align="wide"] {max-width: ' . esc_attr( $ephemeris_layout_width - 10 + 400 ) . 'px;}';

		// Remove max-width on Full blocks
		$styles .= 'body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block[data-align="full"] {max-width: none;}';

		// Output our styles into the <head> whenever our block styles are enqueued
		wp_add_inline_style( 'ephemeris-blocks-style', $styles );
	}
}
add_action( 'enqueue_block_editor_assets', 'ephemeris_block_editor_width_styles' );