テーマ を Gutenberg に対応させる時、最低限やっておく事

Posted on Update by nendeb

テーマ を Gutenberg(グーテンベルク) に対応させる時、最低限やっておく事

いよいよ WordPress5.0 のリリースが近づいてきました。WordPress5.0では新しいエディタ「Gutenberg(グーテンベルク)」が搭載されます。
公開画面では「Gutenberg」で入力したコンテンツはテーマ側が対応していなくても だいたい表示するようになっています。

【Gutenberg 公開画面】
Gutenberg 公開画面

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

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

【Gutenberg 編集画面(非対応)】
Gutenberg 編集画面(非対応)

【Gutenberg 編集画面(対応済)】
Gutenberg 編集画面(対応済)

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

　

functions.php (準備)

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

add_theme_support

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * @package WordPress 5.0 or Gutenberg Plugin
 * 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’」は 公開画面で Gutenberg用 の 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」で 画像や埋込系(動画)等を表示してしまいますので 設定していなければ追記しましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
 * Set the content width in pixels, based on the theme's design and stylesheet.
 *
 * @package WordPress 5.0 or Gutenberg Plugin
 * 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 も設定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * Set the class of column layout to admin_body_class
 *
 * Use editor-style-gutenberg.css
 * @package WordPress 5.0 or Gutenberg Plugin
 * 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)

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

CSSファイル読み込み

まず Gutenberg用の editor-style を設置して読み込むようにします。

1
2
3
4
5
6
7
8
9
10
11
/**
 * Enqueue block editor style Gutenberg
 *
 * Use editor-style-gutenberg.css
 * @package WordPress 5.0 or Gutenberg Plugin
 * 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サンプル】 テーマに合わせて変更してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
@charset "utf-8";
/*
 * editor-style-gutenberg.css
 * @package WordPress 5.0 or Gutenberg Plugin
 * License: GPLv2 or later
*/
 
/* font-family */
    body.gutenberg-editor-page .editor-post-title__input,
    body.gutenberg-editor-page .editor-block-list__block{
        font-family: "Hiragino Kaku Gothic Pro",Meiryo,sans-serif !important;
    }
 
 
/* 標準 font-size(16px) を 14px にする */
    body.gutenberg-editor-page .editor-block-list__block{
        font-size: 14px;
    }
    body.gutenberg-editor-page .edit-post-visual-editor p:not(.wp-block-cover-image-text){
        font-size: 14px;
    }
    /* blockquote だけ font-size をGutenberg標準に戻す */
    body.gutenberg-editor-page .wp-block-pullquote blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
    body.gutenberg-editor-page .wp-block-pullquote blockquote > .editor-rich-text p{
        font-size: 24px !important;
    }
    body.gutenberg-editor-page .wp-block-pullquote__citation,
    body.gutenberg-editor-page .wp-block-pullquote cite,
    body.gutenberg-editor-page .wp-block-pullquote footer{
        font-size: 13px;
    }
 
 
/* 投稿(固定ページ)タイトル  */
    body.gutenberg-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 */
    body.gutenberg-editor-page .edit-post-visual-editor .editor-post-title__block > div{
        margin-left: 0;
        margin-right: 0;
    }
 
/* ブロック内 タイトル  */
    body.gutenberg-editor-page .editor-block-list__block h1,
    body.gutenberg-editor-page .editor-block-list__block h2,
    body.gutenberg-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;
    }
 
 
/* 表示幅設定 */
 
    /* 2カラム 最大幅 + 30 */
    body.gutenberg-editor-page .editor-post-title__block,
    body.gutenberg-editor-page .editor-default-block-appender,
    body.gutenberg-editor-page .editor-block-list__block {
        /* 730 + 30 */
        max-width: 760px !important;
    }
 
    /* 1カラム 最大幅 + 30 */
    body.gutenberg-editor-page.full-width-page .editor-post-title__block,
    body.gutenberg-editor-page.full-width-page .editor-default-block-appender,
    body.gutenberg-editor-page.full-width-page .editor-block-list__block {
        /* 1200 + 30 */
        max-width: 1230px !important;
    }
 
    /* 幅広 Fix */
    body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block[data-align="wide"]{
        /* 800 + 30 */
         max-width: 830px !important;
    }
 
    /* 全幅 Fix */
    body.gutenberg-editor-page .edit-post-visual-editor .editor-block-list__block[data-align="full"]{
         max-width: none !important;
    }
 
 
/* line-height Fix 1.8->1.6 */
    body.gutenberg-editor-page .editor-rich-text__tinymce.mce-content-body{
        line-height: 1.6;
    }

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で設定してください。
ブロック内 タイトル

表示幅設定

テーマの表示コンテンツ幅(content_width)に合わせるようにここで設定します。
サンプルコードでは コンテンツ幅730pxに Gutenberg用マージン 30px を足して 760pxで設定します。
表示幅設定

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

幅広 Fix　全幅 Fix

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

line-height Fix 1.8->1.6

Gutenberg編集画面では line-height が 1.8 になっていますので テーマの公開画面で指定している 1.6 にします。
公開画面の line-height にあわせて 設定してください。

　
　

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

　
　

おまけ

イタリック

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

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

CSSの内容が これ・・

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

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

1
2
3
4
5
6
7
8
9
/*
 * 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 );

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

　

自動保存

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

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

　
　

参考

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

Theme Support GitHub
https://github.com/WordPress/gutenberg/blob/master/docs/extensibility/theme-support.md

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