Edited at

WordPress ブロックエディター(Gutenberg)カスタマイズあれこれ


ブロックエディター(Gutenberg)の投稿画面をカスタマイズしたい

WordPress 5.0から導入されたブロックエディター(Gutenberg)の編集画面はどこまでカスタマイズできるかを見ていきます。オフィシャルの テーマサポート の内容をベースに、独自の情報も追加しています。


変更履歴

2019/7/10

- ブロックを個別に無効化するプラグインを別なものに変更。

2018/12/07

- WordPress 5.0正式リリース。ツール系プラグインの記述開始。

2018/11/26


  • WordPress 5.0 RC1に合わせて更新。Gutenbergをブロックエディターに読み替え。

  • Disable Gutenbergプラグインについて追加。

2018/11/20


  • Gutenberg 4.4 に合わせて更新。


  • responsive-embedsautoSaveIntervalなどを追加。


  • add_theme_support( 'editor-styles' );によるエディタスタイルの適用に変更。以前はさらに強いスタイルがあって!important必須だったのが解消したため。


幅広・全幅画像のサポート

デフォルトのままではブロック領域を超える幅の画像配置の指定(幅広・全幅)はできません。以下の設定で有効化されます。


functions.php

add_theme_support( 'align-wide' );


【ご注意】 テーマが正しくサポートしていないと、出力側で正しく幅広に表示されません。


サイドバーの色設定のカスタマイズ・無効化


色選択肢のカスタマイズ

デフォルトでカラフルな色が設定されている色設定ですが、選択肢を指定できます。


functions.php

function mytheme_setup_theme_supported_features() {

add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'strong magenta', 'themeLangDomain' ),
'slug' => 'strong-magenta',
'color' => '#a156b4',
),
array(
'name' => __( 'light grayish magenta', 'themeLangDomain' ),
'slug' => 'light-grayish-magenta',
'color' => '#d0a5db',
),
array(
'name' => __( 'very light gray', 'themeLangDomain' ),
'slug' => 'very-light-gray',
'color' => '#eee',
),
array(
'name' => __( 'very dark gray', 'themeLangDomain' ),
'slug' => 'very-dark-gray',
'color' => '#444',
),
) );
}

add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );


これを適用すると以下のようになります。

設定の中にあるslugは、ブロックのクラスに付与されます。

例えば背景色がlight-grayish-magentaの場合、.has-light-grayish-magenta-backgroundクラス、テキスト色の場合.has-light-grayish-magenta-colorクラスが付与されます。


カラーピッカーを無効にする

色設定内の一番右にある自由に色を選択するカラーピッカーを無効にします。


functions.php

  add_theme_support( 'disable-custom-colors' );



色設定をまるごと無効にする

カスタム色を空っぽにし、さらにカラーピッカーを無効にすると色設定自体が全て消えます。


functions.php

  add_theme_support( 'editor-color-palette' );

add_theme_support( 'disable-custom-colors' );


ブロックのフォントサイズ

テキスト設定内のフォントサイズ設定をカスタマイズします。

配列で指定します。選択肢として表示されるテキストはnameのものです。


functions.php

add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( '極小', 'themeLangDomain' ),
'shortName' => __( '極小', 'themeLangDomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( '中型', 'themeLangDomain' ),
'shortName' => __( '中型', 'themeLangDomain' ),
'size' => 16,
'slug' => 'regular'
),
array(
'name' => __( '大型', 'themeLangDomain' ),
'shortName' => __( '大型', 'themeLangDomain' ),
'size' => 36,
'slug' => 'large'
),

) );


以下はこの設定を適用したところです。

文字色と同様、slugに対応してhas-slug名-font-sizeクラスがブロックに付与されます。フロント用CSSにはこのクラスに対応したフォントサイズ指定が含まれています。


カスタムフォントサイズを無効にする

以下の設定により、カスタムフォントサイズ(数字で直接指定するサイズ)の設定が無効になり、ブロックエディターのデフォルトサイズか、editor-font-sizesで指定したサイズのみとなります。


functions.php

add_theme_support('disable-custom-font-sizes');



埋め込みコンテンツをレスポンシブ対応にする

デフォルトでは埋め込みコンテンツ(YouTubeやVimeo動画など)がフロント側でレスポンシブになりませんが、以下の設定によりレスポンシブになります。


functions.php

  add_theme_support( 'responsive-embeds' );



block_editor_settings フィルタで指定する

ここまで紹介した設定は/lib/client-assets.phpで定義されており、block_editor_settingsフィルタで上書きもできます。定義部は以下のようになっています:


client-assets.php

    $editor_settings = array(

'alignWide' => $align_wide || ! empty( $gutenberg_theme_support[0]['wide-images'] ), // Backcompat. Use `align-wide` outside of `gutenberg` array.
'availableTemplates' => $available_templates,
'allowedBlockTypes' => $allowed_block_types,
'disableCustomColors' => get_theme_support( 'disable-custom-colors' ),
'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
'disablePostFormats' => ! current_theme_supports( 'post-formats' ),
'titlePlaceholder' => apply_filters( 'enter_title_here', __( 'Add title', 'gutenberg' ), $post ),
'bodyPlaceholder' => apply_filters( 'write_your_story', __( 'Start writing or type / to choose a block', 'gutenberg' ), $post ),
'isRTL' => is_rtl(),
'autosaveInterval' => 10,
'maxUploadFileSize' => $max_upload_size,
'allowedMimeTypes' => get_allowed_mime_types(),
'styles' => $styles,
'imageSizes' => gutenberg_get_available_image_sizes(),
// Ideally, we'd remove this and rely on a REST API endpoint.
'postLock' => $lock_details,
'postLockUtils' => array(
'nonce' => wp_create_nonce( 'lock-post_' . $post->ID ),
'unlockNonce' => wp_create_nonce( 'update-post_' . $post->ID ),
'ajaxUrl' => admin_url( 'admin-ajax.php' ),
),
// Whether or not to load the 'postcustom' meta box is stored as a user meta
// field so that we're not always loading its assets.
'enableCustomFields' => (bool) get_user_meta( get_current_user_id(), 'enable_custom_fields', true ),
);

これまで見てきた設定が並んでいます。例えば、幅広設定を許可するalingnWideであれば、以下のように直接指定できます。


functions.php

add_filter( 'block_editor_settings', function( $editor_settings ){

$editor_settings['alignWide'] = true; // alignWide 設定を上書き
return $editor_settings;
});


オートセーブ時間を変更する - autoSaveInterval

ブロックエディターで執筆していると頻繁に自動保存が走り、勝手にリビジョンが作られますが、これは上記のautosaveIntervalが10(秒)に設定されているためです。少しでも記事を変更して10秒放置すると自動で保存されてしまいます。ですから、この数値を巨大にすれば事実上自動保存をさせないことも可能です。ちなみにこの値を0や-1にしてみましたが、自動保存を無効にすることはできませんでした。


functions.php

add_filter( 'block_editor_settings', function( $editor_settings ){

$editor_settings['autosaveInterval'] = 360; // 自動保存360秒
return $editor_settings;
});


更新 この目的のためにとてもよいプラグインが出ています → Disable Gutenberg Autosave



エディタのスタイルをカスタマイズする

iframeに入っていたTinyMCEのエディタと異なり、ブロックエディタは管理画面と同じレベルに配置されているため、以前のeditor-styleとは少し考え方が変わっています。


functions.php

add_editor_style( 'editor-style.css' );

add_theme_support( 'editor-styles' );

1行目はeditor-style.cssというファイルをエディタに当てるという意味です。

2行目はスタイルの衝突を防ぐための機能で、ブロックエディタでこのCSSを読み込み、全てのセレクタを.editor-styles-wrapper > 各セレクタに再構成して出力します(ルートのbodyだけは.editor-styles-wrapperに変換)。

add_editor_styleを複数記述すると複数のエディタ用CSSを適用できます。


基本の色設定

上の例の場合、editor-style.cssにスタイルを記述すればエディタに適用されます。背景色や文字色は以下のようになります(実際にはbody.editor-styles-wrapperに変換されます)。


editor-style.css

body {

background-color: #d3ebf3;
color: #00005d;
}


エディタの幅設定

デフォルトではエディタの幅が狭めですが、これを編集します。


editor-style.scss

// メインのカラム幅

// 左右に15pxのpaddingがあるので、コンテンツは720px-30px
.wp-block {
max-width: 720px;
}

//「幅広」ブロックの幅、コンテンツは1080px-30px
.wp-block[data-align="wide"] {
max-width: 1080px;
}

//「全幅」ブロックの幅
.wp-block[data-align="full"] {
max-width: none;
}



フロント側にデフォルトのブロックエディタースタイルを当てる

通常は編集画面にしか適用されないブロックエディターのスタイルを表示画面にも読み込ませます。これがベースのスタイルとなります。自分ですべて面倒を見る場合を除き、有効にしましょう。


functions.php

  add_theme_support( 'wp-block-styles' );



ブロックエディターを無効化する(Classic Editorプラグインを使わない方法)


サイト全体で無効化する


functions.php

add_filter( 'use_block_editor_for_post', '__return_false' );



特定の投稿タイプだけで無効化する


functions.php

function disable_blockeditor( $is_enabled, $post_type ) {

if ( $post_type === 'your-post-type' ) return false;
return $is_enabled;
}
add_filter( 'use_block_editor_for_post', 'disable_blockeditor' );


プラグインを使う


ブロックエディタの無効化・有効化を行う

Disable Gutenberg」を使うと管理画面で細かな条件(ユーザー権限、投稿タイプ、投稿ID、テンプレート)をもとにブロックエディタの無効化ができます。


使わないブロックを無効化したい

WordPress 5.2 から「ブロックマネージャー」という機能が追加され、不要なブロックを隠すことができるようになりました。ただしこの設定はそのユーザのみ有効でさらにクッキーに保存されるので、ブラウザやユーザが異なると設定を引き継ぐことができません。

サイト全体でブロックの無効・有効を切り替えるには、Disable Guntenberg Blocks というプラグインが使えます。

【更新2019/7/10】

以前は Advanced Gutenberg というプラグインを取り上げていましたが、編集画面に謎のスタイルを無理やりねじ込むようになったので取り下げます。


インラインで文字列の装飾をしたい

ブロックエディタでは文字色の装飾はブロック単位でしかできません。文字列の一部だけの色を変えたい場合は、「Advanced Rich Text Tools for Gutenberg」が対応します。

インライン文字列の色や背景色の他、上付きと下付きも行えます。このプラグインでは直接スタイルを埋め込むので、フロント出力時に追加対応は不要です。

注:ブロックエディタはペースト時に<span>を削除してしまうため、ここで装飾したテキストをコピペするとスタイルが消えてしまいます。ブロック単位で複製するようにしましょう。


カスタム投稿タイプでの注意

カスタム投稿タイプをブロックエディターに対応させるには、add_post_type_support()で登録するときshow_in_restオプションをtrueに設定する必要があります(デフォルトはfalse)。

また、supportsオプションで、明示的にeditorを除外するとクラシックエディタ画面になります。以下のeditorが必須です。

'supports' => ['title','editor','thumbnail'],

なお、デフォルトではRest APIに対応しない件についてはチケットが出されており、今後変更される可能性があります。