Gutenbergの投稿画面をカスタマイズするまとめ
ブロックエディターの「Gutenberg」の無効やカスタム投稿タイプでの有効。不要なブロックの非表示、theme.jsonの編集など、クライアントワークで使いやすいようにするGutenbergエディターのカスタマイズ方法です。
クライアント担当者にとってWordに近い「wysiwygエディター」と違い「Gutenberg（グーテンベルグ）」は学習コストがかかります。
使い慣れるとブロックエディターの方が使いやすいのですが、自由度の高いレイアウトや豊富な機能がかえって敷居を高くしてしまっているようです。
UXでは「ユーザーは時間がかかりそうだと思うだけで離脱する」という言葉がありますが「Gutenbergエディター」はまさにそれでしょう。
wysiwygエディター同様に、Gutenbergも投稿画面をカスタマイズすることが可能です。不要な機能は削除してシンプルにカスタマイズしたいと思います。
Gutenbergは定期的に機能面がアップデートされています。最新情報は「Gutenberg News」でチェックできます。
GutenbergをOFFにする
GutenbergをOFFにすることで、従来のwysiwygエディターにすることができます。
functions.php
add_filter( 'block_editor_for_post', '__return_false' );Gutenbergのスタイルシートも不要のため、スタイルシートの読み込みを削除します。
functions.php
function remove_gutenberg_style() {wp_dequeue_style( 'wp-block-library' );}add_action( 'wp_enqueue_scripts', 'remove_gutenberg_style' );ブログ記事が文字と画像が殆どの場合はGutenbergは機能が多すぎるため、従来のwysiwygエディターにするのもアリだと思います。
固定ページ以外は、Gutenbergを無効にする
ブロックエディターをOFFにする関数「disable block editor」を使って、固定ページ以外をOFFにします。
- 投稿、カスタム投稿など、固定ページ以外はGutenbergがOFF
- 固定ページはGutenbergがON
functions.php
function disable_block_editor( $use_block_editor, $post_type ) {if ( $post_type !== 'page' ) return false;return $use_block_editor;}add_filter( 'use_block_editor_for_post_type', 'disable_block_editor', 10, 2 );「$post_type !== 'page'」の箇所を「$post_type === 'page'」にすることで、「固定ページ」のみGutenbergをOFFにします。
投稿、カスタム投稿タイプでGutenbergをOFFにする
カスタム投稿タイプが「book」の場合、投稿とカスタム投稿タイプでGutenbergをOFFにするには下記になります。
functions.php
function disable_block_editor( $use_block_editor, $post_type ) {if ($post_type == 'post' && $post_type == 'book') return false;return $use_block_editor;}add_filter( 'use_block_editor_for_post_type', 'disable_block_editor', 10, 2 );カスタムタクソノミーが表示されるようにする
Gutenbergにすると、エディターからカスタムタクソノミーが表示されない場合があります。エディターのメニューにカスタムタクソノミーを表示させます。
カスタムタクソノミーのデータをREST APIから取得すると表示されます。
functions.phpでタクソノミーを追加している場合は「'show_in_rest' => true,」をカスタムタクソノミーの設定に追記します。
functions.php
register_taxonomy( ’tax_name’, 'post',array ( 中略 'show_in_rest' => true, ));下記の方法でもOKです。
functions.php
function tax_api() { $mytax = get_taxonomy( 'タクソノミー名' ); $mytax->show_in_rest = true; }add_action( 'init', 'tax_api', 30 );以上でGutenbergを利用する下準備が整いましたので、次はGutenbergのカスタマイズに進みます。
Gutenbergのブロックの表示・非表示
カスタマイズのゴールとして、不要なブロック、機能を削除してシンプルなメニューにします。
Gutenbergのカスタマイズには「theme.json」と「functions.php」を利用します。
theme.jsonとは？
テーマやブロックエディターの機能は今までfunctions.phpを利用していましたが、theme.jsonファイルでも管理できるようになりました。
theme.jsonだけではカスタマイズできないところもあるため、functions.phpも利用してカスタマイズしていきます。
フォントやサイズ、カラー、背景の設定を削除する
テキストのカラーやフォントサイズなどの装飾設定を削除します。
theme.jsonに下記を記載して、テンプレートのディレクトにアップロードします。
theme.json
{"$schema": "https://raw.githubusercontent.com/WordPress/gutenberg/trunk/schemas/json/theme.json","version": 2,"settings": { "color": { "background": false, "text": false, "link": false, "custom": false, "defaultPalette": false, "palette": [], "customGradient": false, "defaultGradients": false, "gradients": [], "duotone": [], "customDuotone": false},"typography": { "dropCap": false, "fontStyle": false, "fontWeight": false, "letterSpacing": false, "lineHeight": false, "textDecoration": false, "textTransform": false, "customFontSize": false, "fontSizes": [], "fontFamilies": []},"border": { "color": false, "radius": false, "style": false, "width": false},"layout": { "contentSize": "900px", "wideSize": "900px"},"spacing": { "blockGap": null, "margin": false, "padding": false, "units": [] } }}フォントサイズやカラー、タイポグラフィなどの設定が非表示になりました。
不要なブロックを削除する javascript編
使いそうにもない不要なブロックも削除していきます。
不要なブロックを削除する方法はjavascriptによる方法とphpによる方法があります。
javascriptによる削除方法は、削除するブロックを羅列したjavascriptファイルを用意します。ファイル名は「allow-block-list.js」として下記を記載します。
削除しないブロックは「//」でコメントアウトします。
allow-block-lists
wp.domReady( () => {
// テキスト
//wp.blocks.unregisterBlockType( 'core/paragraph' ); // 段落
//wp.blocks.unregisterBlockType( 'core/heading' ); // 見出し
wp.blocks.unregisterBlockType( 'core/list' ); // リスト
wp.blocks.unregisterBlockType( 'core/quote' ); // 引用
wp.blocks.unregisterBlockType( 'core/code' ); // コード
wp.blocks.unregisterBlockType( 'core/freeform' ); // クラシック
wp.blocks.unregisterBlockType( 'core/preformatted' ); // 整形済みテキスト
wp.blocks.unregisterBlockType( 'core/pullquote' ); // プルクオート
wp.blocks.unregisterBlockType( 'core/table' ); // テーブル
wp.blocks.unregisterBlockType( 'core/verse' ); // 詩
wp.blocks.unregisterBlockType( 'sbi/sbi-feed-block' ); // 詩
// メディア
// wp.blocks.unregisterBlockType( 'core/image' ); // 画像
wp.blocks.unregisterBlockType( 'core/gallery' ); // ギャラリー
wp.blocks.unregisterBlockType( 'core/audio' ); // 音声
wp.blocks.unregisterBlockType( 'core/cover' ); // カバー
wp.blocks.unregisterBlockType( 'core/file' ); // ファイル
wp.blocks.unregisterBlockType( 'core/media-text' ); // メディアと文章
wp.blocks.unregisterBlockType( 'core/video' ); // 動画
// デザイン
wp.blocks.unregisterBlockType( 'core/buttons' ); // ボタン
wp.blocks.unregisterBlockType( 'core/columns' ); // カラム
wp.blocks.unregisterBlockType( 'core/group' ); // グループ
wp.blocks.unregisterBlockType( 'core/more' ); // 続きを読む
wp.blocks.unregisterBlockType( 'core/nextpage' ); // ページ区切り
wp.blocks.unregisterBlockType( 'core/separator' ); // 区切り
wp.blocks.unregisterBlockType( 'core/spacer' ); // スペーサー
// ウィジェット
wp.blocks.unregisterBlockType( 'core/shortcode' ); // ショートコード
wp.blocks.unregisterBlockType( 'core/archives' ); // アーカイブ
wp.blocks.unregisterBlockType( 'core/calendar' ); // カレンダー
wp.blocks.unregisterBlockType( 'core/categories' ); // カテゴリー
//wp.blocks.unregisterBlockType( 'core/html' ); // カスタムHTML
wp.blocks.unregisterBlockType( 'core/latest-comments' ); // 最新のコメント
wp.blocks.unregisterBlockType( 'core/latest-posts' ); // 最新の投稿
wp.blocks.unregisterBlockType( 'core/rss' ); // RSS
wp.blocks.unregisterBlockType( 'core/social-links' ); // ソーシャルアイコン
wp.blocks.unregisterBlockType( 'core/tag-cloud' ); // タグクラウド
wp.blocks.unregisterBlockType( 'core/search' ); // 検索
wp.blocks.unregisterBlockType( 'core/page-list' ); // 固定ページリスト
//テーマ
wp.blocks.unregisterBlockType( 'core/navigation' ); // ナビゲーション
wp.blocks.unregisterBlockType( 'core/site-logo' ); // サイトロゴ
wp.blocks.unregisterBlockType( 'core/site-title' ); // サイトのタイトル
wp.blocks.unregisterBlockType( 'core/site-tagline' ); // サイトのキャッチフレーズ
wp.blocks.unregisterBlockType( 'core/query' ); // 投稿一覧
wp.blocks.unregisterBlockType( 'core/post-title' ); // 投稿タイトル
wp.blocks.unregisterBlockType( 'core/post-excerpt' ); // 投稿の抜粋
wp.blocks.unregisterBlockType( 'core/post-featured-image' ); // 投稿のアイキャッチ画像
wp.blocks.unregisterBlockType( 'core/post-content' ); // 投稿コンテンツ
wp.blocks.unregisterBlockType( 'core/post-author' ); // 投稿者
wp.blocks.unregisterBlockType( 'core/post-date' ); // 投稿日
wp.blocks.unregisterBlockType( 'core/post-terms' ); // 投稿カテゴリー、タグ
wp.blocks.unregisterBlockType( 'core/post-navigation-link' ); // 次の投稿、前の投稿
wp.blocks.unregisterBlockType( 'core/post-comments' ); // 投稿コメント
wp.blocks.unregisterBlockType( 'core/loginout' ); // ログイン / ログアウト
wp.blocks.unregisterBlockType( 'core/term-description' ); // タームの説明
wp.blocks.unregisterBlockType( 'core/query-title' ); // アーカイブタイトル
wp.blocks.unregisterBlockType( 'core/avatar' ); // アバター
wp.blocks.unregisterBlockType( 'core/read-more' ); // 続きを読む
wp.blocks.unregisterBlockType( 'core/comments-query-loop' ); // コメントクエリループ
wp.blocks.unregisterBlockType( 'core/post-comments-form' ); // 投稿コメントフォーム
wp.blocks.unregisterBlockType( 'core/post-author-biography' ); // 投稿者の経歴
// 埋め込み
wp.blocks.unregisterBlockVariation( 'core/embed', 'collegehumor' ); // 埋め込み
wp.blocks.unregisterBlockVariation( 'core/embed', 'twitter' ); // Twitter
//wp.blocks.unregisterBlockVariation( 'core/embed', 'youtube' ); // YouTube
wp.blocks.unregisterBlockVariation( 'core/embed', 'facebook' ); // facebook
wp.blocks.unregisterBlockVariation( 'core/embed', 'instagram' ); // instagram
wp.blocks.unregisterBlockVariation( 'core/embed', 'pinterest' ); // pinterest
wp.blocks.unregisterBlockVariation( 'core/embed', 'wordpress' ); // WordPress
wp.blocks.unregisterBlockVariation( 'core/embed', 'soundcloud' ); // SoundCloud
wp.blocks.unregisterBlockVariation( 'core/embed', 'spotify' ); // Spotify
wp.blocks.unregisterBlockVariation( 'core/embed', 'flickr' ); // Flickr
wp.blocks.unregisterBlockVariation( 'core/embed', 'vimeo' ); // Vimeo
wp.blocks.unregisterBlockVariation( 'core/embed', 'animoto' ); // Animoto
wp.blocks.unregisterBlockVariation( 'core/embed', 'cloudup' ); // Cloudup
wp.blocks.unregisterBlockVariation( 'core/embed', 'crowdsignal' ); // Crowdsignal
wp.blocks.unregisterBlockVariation( 'core/embed', 'dailymotion' ); // Dailymotion
wp.blocks.unregisterBlockVariation( 'core/embed', 'imgur' ); // Imgur
wp.blocks.unregisterBlockVariation( 'core/embed', 'issuu' ); // Issuu
wp.blocks.unregisterBlockVariation( 'core/embed', 'kickstarter' ); // Kickstarter
wp.blocks.unregisterBlockVariation( 'core/embed', 'meetup-com' ); // Meetup.com
wp.blocks.unregisterBlockVariation( 'core/embed', 'mixcloud' ); // Mixcloud
wp.blocks.unregisterBlockVariation( 'core/embed', 'reddit' ); // Reddit
wp.blocks.unregisterBlockVariation( 'core/embed', 'reverbnation' ); // ReverbNation
wp.blocks.unregisterBlockVariation( 'core/embed', 'screencast' ); // Screencast
wp.blocks.unregisterBlockVariation( 'core/embed', 'scribd' ); // Scribd
wp.blocks.unregisterBlockVariation( 'core/embed', 'slideshare' ); // Slideshare
wp.blocks.unregisterBlockVariation( 'core/embed', 'smugmug' ); // SmugMug
wp.blocks.unregisterBlockVariation( 'core/embed', 'speaker-deck' ); // Speaker Deck
wp.blocks.unregisterBlockVariation( 'core/embed', 'tiktok' ); // TikTok
wp.blocks.unregisterBlockVariation( 'core/embed', 'ted' ); // TED
wp.blocks.unregisterBlockVariation( 'core/embed', 'tumblr' ); // Tumblr
wp.blocks.unregisterBlockVariation( 'core/embed', 'videopress' ); // VideoPress
wp.blocks.unregisterBlockVariation( 'core/embed', 'wordpress-tv' ); // WordPress.tv
wp.blocks.unregisterBlockVariation( 'core/embed', 'amazon-kindle' ); // Amazon Kindle
wp.blocks.unregisterBlockVariation( 'core/embed', 'wolfram-cloud' ); // Wolfram Cloud
} );
続いて、functions.phpに「allow-block-list.js」を読み込むための下記のコードを記載します。
allow-block-list.jsファイルが置かれているディレクトリは適宜ご変更ください。
functions.php
function allow_gutenberg_scripts() {wp_enqueue_script( 'theme-editor', get_template_directory_uri() . '/common/js/allow-block-list.js', array( 'wp-blocks', 'wp-dom' ), filemtime( get_template_directory() . '/js/allow-block-list.js' ), true );}add_action( 'enqueue_block_editor_assets', 'allow_gutenberg_scripts' );ブロックを表示させるとかなりスッキリしました。
javascriptによるブロック削除による不具合
すでに利用されているブロックを削除してしまうと、利用していたブロックがエラーとなります。
例として「段落」のブロックを削除したのが下記になります。
これを回避したい場合は、ブロックの削除はPHPによる方法をおこないます。
不要なブロックを削除する PHP編
functions.phpに削除するブロックを記載する方法では、利用済みのブロックを削除してもエラーとなることはありません。
githubのddryoさんのコードをありがたく使わせて頂きます。
functions.phpに下記のコードを記載します。利用するブロックは「//」でコメントアウトします。
functions.php
add_filter( 'allowed_block_types_all', function ( $allowed_block_types, $block_editor_context ) { $allowed_blocks = []; if ( is_array( $allowed_block_types ) && ! empty( $allowed_block_types ) ) { $allowed_blocks = $allowed_block_types;} else { $block_types = \WP_Block_Type_Registry::get_instance()->get_all_registered(); foreach ( $block_types as $block_type ) { $allowed_blocks[] = $block_type->name; }}$FSE_blocks = [//テキスト //'core/paragraph', // 段落//'core/heading', // 見出し'core/list', // リスト'core/quote', // 引用'core/code', // コード'core/freeform', // クラシック'core/preformatted', // 整形済みテキスト'core/pullquote', // プルクオート'core/table', // テーブル'core/verse', // 詩// メディア//'core/image', // 画像'core/gallery', // ギャラリー'core/audio', // 音声'core/cover', // カバー'core/file', // ファイル'core/media-text', // メディアと文章'core/video', // 動画// デザイン'core/buttons', // ボタン'core/columns', // カラム'core/group', // グループ'core/more', // 続きを読む'core/nextpage', // ページ区切り'core/separator', // 区切り'core/spacer', // スペーサー// ウィジェット'core/shortcode', // ショートコード'core/archives', // アーカイブ'core/calendar', // カレンダー'core/categories', // カテゴリー//'core/html', // カスタムHTML'core/latest-comments', // 最新のコメント'core/latest-posts', // 最新の投稿'core/rss', // RSS'core/social-links', // ソーシャルアイコン'core/tag-cloud', // タグクラウド'core/search', // 検索'core/page-list', // 固定ページリスト//テーマ'core/navigation', // ナビゲーション'core/site-logo', // サイトロゴ'core/site-title', // サイトのタイトル'core/site-tagline', // サイトのキャッチフレーズ'core/query', // 投稿一覧'core/post-title', // 投稿タイトル'core/post-excerpt', // 投稿の抜粋'core/post-featured-image', // 投稿のアイキャッチ画像'core/post-content', // 投稿コンテンツ'core/post-author', // 投稿者'core/post-date', // 投稿日'core/post-terms', // 投稿カテゴリー、タグ'core/post-navigation-link', // 次の投稿、前の投稿'core/post-comments', // 投稿コメント'core/loginout', // ログイン / ログアウト'core/term-description', // タームの説明'core/query-title', // アーカイブタイトル'core/avatar', // アバター'core/read-more', // 続きを読む'core/comments-query-loop', // コメントクエリループ'core/post-comments-form', // 投稿コメントフォーム'core/post-author-biography', // 投稿者の経歴//埋め込み'core/embed' // 全て];$disallowed_blocks = $FSE_blocks;$allowed_blocks = array_diff( $allowed_blocks, $disallowed_blocks );$allowed_blocks = array_values( $allowed_blocks ); return $allowed_blocks;}, 99, 2);PHPによるブロック削除の場合、埋込ブロックを個別に削除することができません。
埋め込みブロック以外をPHPで削除して、javascriptで埋込ブロックを削除するハイブリットな方法で対応するしかありません。
プラグインによるブロックを削除する方法
プラグインのオリジナルブロックが追加されることがあります。
ブロックの名称が分かれば、PHPまたはjavascriptで削除することができます。
Chormeのデベロッパーツールの「コンソール」に下記を記載するとブロックの名称が表示されます。
ブロックの名称を確認する場合console.log(wp.blocks.getBlockTypes());
埋め込みブロックの名称を確認する場合console.log(wp.blocks.getBlockVariations('core/embed'));コンソールで調べるとプラグインのブロック名が「'sbi/sbi-feed-block'」と判明しました。
削除するブロック同様にPHP、またはjavascriptに「'sbi/sbi-feed-block'」を記載するとプラグインのブロックが削除されます。
プラグインを使ってブロックを非表示にする
PHPやjavascriptによるブロックの管理が面倒な場合はプラグイン「Gutenberg Block Manager」をお薦めします。
クライアント担当者が利用しないブロックを削除することで、誤動作も無くなりスムーズに更新できるようになります。
Gutenbergのブロックが便利になるプラグイン
Gutenbergの特徴である「ブロック」がより便利に使えるプラグインがリリースされています。
Block Lab
オリジナルのブロックをメニューに追加することができます。
Advanced Gutenberg
アコーディオンや写真付きの引用など、さまざまなブロックが用意されています。
Atomic Blocks
こちらも複数のブロックが用意されています。
拡張性がよさそうなのでGutenbergに慣れるといままでのエディター以上のレイアウトも簡単にできそうですね。
