WordPress5.0では新しいエディタ「ブロックエディタ」が搭載されます。
公開画面では「ブロックエディタ」で入力したコンテンツはテーマ側が対応していなくても だいたい表示するようになっています。

【ブロックエディタ 公開画面】

管理画面(編集画面)では、テーマ のデザイン(公開画面) と同じデザインで編集できるようにする事で ユーザーは簡単にイメージ通りのコンテンツを作成する事ができます。

しかし デフォルト(ブロックエディタ非対応テーマ) では 管理画面(編集画面)では テーマのデザイン(公開画面)と だいぶん違う状態になっていますので それぞれテーマ側で対応しなくてはなりません。

【ブロックエディタ 編集画面(非対応)】

※基本表示幅は 580px になっています。「Gutenberg を試してみよう」画像が大きいのは「幅広」設定になっているためです。

【ブロックエディタ 編集画面(対応済)】

ここでは テーマ(子テーマ)を ブロックエディタ対応にするために まず最低限 やっておきたい箇所を紹介します。内容は「タイトル」「表示幅」「font-family」「font-size」を テーマの見た目にあわせていきます。
以下のコードは、子テーマでも適応できますので ブロックエディタ非対応 のテーマでも 子テーマ側で対応させる事ができます。
　

functions.php (準備)

テーマの functions.php にコードを追加します。

add_theme_support

functions.php では add_theme_support の追加が必要です。
以下のコードをテーマの functions.php に追加してください。
※既に add_action( ‘after_setup_theme’・・　で関数を設置している場合はその中に add_theme_support() を追記してください。

/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * @package WordPress 5.0
 * License: GPLv2 or later
 */
function nendebcom_theme_support_setup() {

	// Default block styles Gutenberg
	add_theme_support( 'wp-block-styles' );

	// Wide Alignment Gutenberg
	//add_theme_support( 'align-wide' );

}
add_action( 'after_setup_theme', 'nendebcom_theme_support_setup' );

「’wp-block-styles’」は 公開画面で ブロックエディタ用 の CSSを追加読込するようにします。※Gutenberg内 の theme.css を読み込みます。

「’align-wide’」は 画像ブロック等で「幅広」「全幅」ボタンを追加します。

「幅広」「全幅」はコンテンツ幅(content_width) を超えて表示させるようにする為のボタン設定ですので テーマが対応していない場合は不要です。

※子テーマを利用している場合は 子テーマの functions.php に設置してください。

　

1カラムテンプレート対策

「content_width」は結構大事で 画像や埋込系(動画)等の生成時の wide に影響します。
※1カラムテンプレートが無い場合は不要です。

例えばテーマで 1カラムテンプレート(full-width-page) を使っている場合このテンプレート利用時での 「content_width」を設定していないと 2(又は3)カラム用の小さい「content_width」で 画像や埋込系(動画)等を表示してしまいますので 設定していなければ追記しましょう。

 
/**
 * Set the content width in pixels, based on the theme's design and stylesheet.
 *
 * @package WordPress 5.0
 * License: GPLv2 or later
 */
function nendebcom_content_width() {

	global $content_width;

	// full-width-page
	if ( is_page_template( 'full-width-page.php' ) ){
		$content_width = 1200;
	}

}
add_action( 'template_redirect', 'nendebcom_content_width' );

※’full-width-page.php’ は 1カラムテンプレートファイル名です。テーマにあわせて変更してください。。
※値の 1200 はテンプレートにあわせて変更してください。
※子テーマを利用している場合は 子テーマの functions.php に設置してください。

　

管理画面(編集画面)で 1カラムテンプレート(full-width-page)利用時での幅をCSSで設定するために body_class も設定します。

/**
 * Set the class of column layout to admin_body_class
 *
 * Use editor-style-gutenberg.css
 * @package WordPress 5.0
 * License: GPLv2 or later
 */
function nendebcom_add_admin_body_class( $classes ) {

	global $post;

	//template class
	if ( isset( $post->ID ) ) {
		$page_template = get_page_template_slug( $post->ID );
		if ( $page_template == 'full-width-page.php' ) {
			return "$classes  full-width-page";
		}
	}
	return $classes;
}
add_filter( 'admin_body_class', 'nendebcom_add_admin_body_class' );

※’full-width-page.php’ は 1カラムテンプレートファイル名です。テーマにあわせて変更してください。。
※次の 管理画面CSS(admin css)で利用します。
※子テーマを利用している場合は 子テーマの functions.php に設置してください。

　
　

管理画面CSS(admin css)

投稿や固定ページのブロックエディタでは 管理画面全体のCSS が影響していますので テーマのデザインやサイズ等で 調整する必要があります。
公開画面と同じデザインにするのが理想ですが、幅とタイトルあたりを合わせるとそれらしく見えてきますので「タイトル」「表示幅」「font-family」「font-size」等を テーマの見た目にあわせていきます。

CSSファイル読み込み

まず ブロックエディタ用の editor-style を設置して読み込むようにします。

/**
 * Enqueue block editor style Gutenberg
 *
 * Use editor-style-gutenberg.css
 * @package WordPress 5.0
 * License: GPLv2 or later
 */
function nendebcom_block_editor_styles() {
	wp_enqueue_style( 'nendebcom-block-editor-styles', get_theme_file_uri( '/css/editor-style-gutenberg.css' ), false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'nendebcom_block_editor_styles' );

※この例では 管理画面で テーマの cssフォルダにあるファイル(editor-style-gutenberg.css)を読み込むようにしています。(テーマの構成にあわせて変更してください)
※子テーマを利用している場合は 子テーマの functions.php に設置してください。
　この場合 CSSファイルは 子テーマのcssフォルダに設置してください。

　

CSS

CSSファイル(editor-style-gutenberg.css)では以下のCSSサンプルコードを参考に テーマに合わせて設定してください。
CSSファイルは 上記の例で設定したフォルダに設置してください。(テーマの cssフォルダ)
※子テーマを利用している場合は子テーマの cssフォルダになります。

【CSSサンプル】 テーマに合わせて変更してください。

@charset "utf-8";
/*
 * editor-style-gutenberg.css
 * @package WordPress ～5.4
 * License: GPLv2 or later
*/

	/* font-family */
	body.block-editor-page .editor-post-title__input,
	body.block-editor-page .editor-block-list__block{
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif !important;
	}

	/* 標準 font-size(16px) を 14px にする場合 */
	body.block-editor-page .editor-block-list__block{
		font-size: 14px;
	}
	body.block-editor-page .edit-post-visual-editor p:not(.wp-block-cover-text){
		font-size: 14px;
	}
	/* blockquote だけ font-size を標準に戻す */
	body.block-editor-page .wp-block-pullquote blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]:before,
	body.block-editor-page .wp-block-pullquote blockquote > .editor-rich-text p{
		font-size: 24px !important;
	}
	body.block-editor-page .wp-block-pullquote__citation,
	body.block-editor-page .wp-block-pullquote cite,
	body.block-editor-page .wp-block-pullquote footer{
		font-size: 13px;
	}


	/* メインタイトル 装飾  */
	body.block-editor-page .editor-post-title__block textarea {
		border-bottom: 1px dotted #ccc !important;
		border-left: 3px solid #666 !important;
		border-top: 1px dotted #ccc !important;
		font-size: 1.4rem !important;
		margin: 0 0 20px !important;
		padding: 7px 0 7px 10px !important;
	}

	/* タイトル幅合わせ Fix WordPress～5.3 	*/
	body.branch-5.block-editor-page .editor-post-title__block > div,
	body.branch-5-1.block-editor-page .editor-post-title__block > div,
	body.branch-5-2.block-editor-page .editor-post-title__block > div,
	body.branch-5-3.block-editor-page .editor-post-title__block > div{
		margin-left: 13px;
		margin-right: 13px;
	}
	/* タイトル幅合わせ Fix WordPress5.4 */
	body.block-editor-page .editor-post-title__block > div{
		margin-left: 0;
		margin-right: 0;
	}


	/* ブロックタイトル 装飾 */
	body.block-editor-page .editor-block-list__block h1,
	body.block-editor-page .editor-block-list__block h2,
	body.block-editor-page .editor-block-list__block h3{
		border-bottom: 1px dotted #ccc !important;
		border-left: 3px solid #666 !important;
		border-top: 1px dotted #ccc !important;
		font-size: 1.4rem !important;
		margin: 0 0 20px !important;
		padding: 7px 0 7px 10px !important;
	}


	/* 表示幅設定 メインカラム */

	/* Content-Width 730px WordPress5.4 */
	body.block-editor-page .wp-block{
		max-width: 730px !important;
		max-height: none !important;
	}
	/* Content-Width 730px WordPress～5.3 */
	body.branch-5.block-editor-page .wp-block,
	body.branch-5-1.block-editor-page .wp-block,
	body.branch-5-2.block-editor-page .wp-block,
	body.branch-5-3.block-editor-page .wp-block{
		max-width: 760px !important;	/* 730 + 30 */
		max-height: none !important;
	}

	/* メインカラム full-width-page */
	/* Content-Width full-width-page 1200px WordPress5.4 */
	body.block-editor-page.full-width-page .wp-block{
		max-width: 1200px !important;
		max-height: none !important;
	}
	/* Content-Width full-width-page 1200px WordPress～5.3 */
	body.branch-5.block-editor-page.full-width-page .wp-block,
	body.branch-5-1.block-editor-page.full-width-page .wp-block,
	body.branch-5-2.block-editor-page.full-width-page .wp-block,
	body.branch-5-3.block-editor-page.full-width-page .wp-block{
		max-width: 1230px !important;	/* 1200 + 30 */
		max-height: none !important;
	}


	/* 幅広 Fix ordPress5.4  800px */
	.wp-block[data-align="wide"]{
		 max-width: 800px !important;
	}

	/* 幅広 Fix WordPress～5.3  800px */
	body.branch-5 .wp-block[data-align="wide"],
	body.branch-5-1 .wp-block[data-align="wide"],
	body.branch-5-2 .wp-block[data-align="wide"],
	body.branch-5-3 .wp-block[data-align="wide"]{
		 max-width: 830px !important;	/* 800 + 30 */
	}

	/* 全幅 Fix */
	.wp-block[data-align="full"]{
		 max-width: none !important;
	}

font-family

デフォルトでは WordPress管理画面で使ってるfont-familyをそのまま使っています。
公開画面で使う font-family とは違うのでここで設定します。
公開画面(テーマ)の font-family にあわせて 設定してください。

標準 font-size(16px) を 14px にする

WordPress管理画面では font-sizeが16pxになってます。
公開画面で使う font-size が 16px でない場合はここで設定します。

メインタイトル

投稿・固定ページのメインタイトルのデザインをここで設定します。
公開画面に合わせたサイズやデザインをCSSで設定してください。

ブロックタイトル

コンテンツ内で使うタイトル(h1,h2,h3・・)のデザインをここで設定します。
公開画面に合わせたサイズやデザインをCSSで設定してください。

表示幅設定 メインカラム

デフォルトでは 580px ですので テーマの表示コンテンツ幅(content_width) と違う場合は テーマに合わせるようにここで設定します。
サンプルコードでは コンテンツ幅730pxに ブロックエディタ用マージン 30px を足して 760pxで設定します。
※WordPress5.4からはマージン(30px)は足しません。

※タイトル幅だけ微調整を入れています

また、1カラムテンプレートがある場合は functions.php で設定した body_class を利用して オーバーライドします。
※1カラムテンプレートが無い場合は不要です。

幅広 Fix　全幅 Fix

「幅広」「全幅」ボタンで設定した時の幅調整です。/* 幅広 Fix */ の max-width は 公開画面の幅広での表示幅にあわせてください。
「幅広」「全幅」ボタンを使用しない場合は不要です。

　

どうですか? うまくできましたでしょうか。
あとは、細かいパーツを テーマに合わせていくともっと精度が上がりますのでチャレンジしてみてください。
もしかしたら、気になる部分では テーマ側のCSSも変更する事になりますょ。

　
　

おまけ

イタリック

編集画面で 文字をイタリック(斜め文字)に設定しても 画面上ではイタリックになりませんでした。

原因は「WP Multibyte Patchプラグイン(ver2.8.1)」の CSS が影響していました。

CSSの内容が これ・・

body *:not(textarea) {
	font-style: normal !important;
}

結局 打ち消せなかったしプラグイン利用をやめるわけにもいかないので このCSS自体読まなくするようにしました。

/*
 * Remove WP Multibyte Patch css。
*/
function wpmp_remove_enqueue_style() {
	if ( wp_style_is( 'wpmp-admin-custom' ) ) {
		wp_dequeue_style( 'wpmp-admin-custom' );
	}
}
add_action( 'admin_enqueue_scripts', 'wpmp_remove_enqueue_style', 99 );

【2018/12/6】
WP Multibyte Patchプラグイン(ver2.8.2)より CSSが修正され、解消されました。

他にもプラグインによっては 「ブロックエディタ」に影響がある CSSを読み込んでいるかもしれませんので気をつけてください。

　

自動保存

「ブロックエディタ」では 自動保存機能があり、10秒ごとにで自動保存しています。
自動保存の間、何もできないので テストや開発している場合 もやもや します。
そんな時は「Disable Gutenberg Autosave」プラグインを入れてみましょう。

Disable Gutenberg Autosave
https://wordpress.org/plugins/disable-gutenberg-autosave/

　
　

参考

Gutenberg | WordPress.org
https://wordpress.org/plugins/gutenberg/

Theme Support – The new Gutenberg editing experience — WordPress
https://wordpress.org/gutenberg/handbook/extensibility/theme-support/