投稿時に編集者が追加できるブロックを制限してUX改善

投稿時に編集者が追加できるブロックを制限してUX改善

ブロックエディターの登場によって、企業のWeb担当者が難しい事を覚えなくても凝ったレイアウトが出来るようになりましたね。
でも、ブロック数がありすぎて逆にUX的には悪くなってませんか?
今回は不要なブロックを消してそんな問題を解決。

管理者以外の場合

管理者権限がある場合はフル機能を利用可能で、管理者以外の場合に制限する場合は、下記のコードの4行目にブロック一覧から必要な項目を追加します。
2行目と11行目を消すことで、管理者にも適用します。

function wpqw_allowed_block_types( $allowed_block_types ) {
	if ( ! current_user_can( 'administrator' ) ) {
		$allowed_block_types = array(
			// ここに許可するブロックを書く
			'core/paragraph',           // 段落
			'core/heading',             // 見出し
			'core/image',               // 画像
			'core-embed/youtube',       // YouTube
		);
		return $allowed_block_types;
	}
}
add_filter( 'allowed_block_types', 'wpqw_allowed_block_types' );

クライアントのリテラシーに照らし合わせて制御するのが良いです。

最小ブロック構成の場合

クライアントのスキルレベルに応じて、まずはこの構成で始めて、慣れてきて要望が出てきたり運用状況を見ながら、使いこなせそうだなと思ったら随時追加していくことが多いです。

// 一般ブロック 'common'
'core/paragraph',           // 段落
'core/heading',             // 見出し
'core/image',               // 画像
// 埋め込み 'embed'
'core-embed/twitter',       // Twitter
'core-embed/youtube',       // YouTube
'core-embed/facebook',      // Facebook
'core-embed/instagram',     // Instagram

基本ブロック構成パターン

WordPress4の経験があるクライアントの場合、だいたいこんな感じを基本として、場合によってはファイルやボタンブロックを追加しています。

// 一般ブロック 'common'
'core/paragraph',           // 段落
'core/heading',             // 見出し
'core/image',               // 画像
'core/quote',               // 引用
'core/gallery',             // ギャラリー
'core/list',                // リスト

// レイアウト要素 'layout'
'core/columns',             // カラム
'core/media-text',          // メディアと文章
'core/more',                // 続きを読む
'core/separator',           // 区切り
'core/spacer',              // スペーサー

// 埋め込み 'embed'
'core-embed/twitter',       // Twitter
'core-embed/youtube',       // YouTube
'core-embed/facebook',      // Facebook
'core-embed/instagram',     // Instagram

// 再利用ブロック 'reusable'
'core/block',                  // 再利用ブロック

ブロック一覧

ブロック一覧は、初期登録ブロックリスト(随時更新)を参考にしてください。

// 一般ブロック 'common'
'core/paragraph',           // 段落
'core/heading',             // 見出し
'core/image',               // 画像
'core/quote',               // 引用
'core/gallery',             // ギャラリー
'core/list',                // リスト
'core/audio',               // 音声
'core/cover',               // カバー
'core/file',                // ファイル
'core/video',               // 動画

// フォーマット 'formatting'
'core/code',                // ソースコード
'core/freeform',            // クラシック
'core/html',                // カスタムHTML
'core/preformatted',        // 整形済み
'core/pullquote',           // プルクオート
'core/table',               // テーブル
'core/verse',               // 詩

// レイアウト要素 'layout'
'core/button',              // ボタン
'core/columns',             // カラム
'core/media-text',          // メディアと文章
'core/more',                // 続きを読む
'core/nextpage',            // 改ページ
'core/separator',           // 区切り
'core/spacer',              // スペーサー

// ウィジェット 'widgets'
'core/shortcode',           // ショートコード
'core/archives',            // アーカイブ
'core/calender',            // カレンダー 5.2追加
'core/categories',          // カテゴリー
'core/latest-comments',     // 最新のコメント
'core/latest-posts',        // 最新の記事
'core/rss',                 // RSS 5.2追加
'core/search',              // 検索 5.2追加
'core/tag-cloud',           // タグクラウド 5.2追加

// 埋め込み 'embed'
'core/embed',               // 埋め込み
'core-embed/twitter',       // Twitter
'core-embed/youtube',       // YouTube
'core-embed/facebook',      // Facebook
'core-embed/instagram',     // Instagram
'core-embed/wordpress',     // WordPress
'core-embed/soundcloud',    // SoundCloud
'core-embed/spotify',       // Spotify
'core-embed/flickr',        // Flickr
'core-embed/vimeo',         // Viemo
'core-embed/animoto',       // Animoto
'core-embed/cloudup',       // Cloudup
'core-embed/collegehumor',  // CollegeHumor
'core-embed/cloudsignal',  // Cloudsignal 5.x追加
'core-embed/dailymotion',   // Dailymotion
'core-embed/hulu',          // Hulu
'core-embed/imgur',         // Imgur
'core-embed/issuu',         // Issuu
'core-embed/kickstarter',   // Kickstarter
'core-embed/meetup-com',    // Meetup.com
'core-embed/mixcloud',      // Mixcloud
'core-embed/reddit',        // Reddit
'core-embed/reverbnation',  // ReverbNation
'core-embed/screencast',    // Screencast
'core-embed/scribd',        // Scribd
'core-embed/slideshare',    // Slideshare
'core-embed/smugmug',       // SmugMug
'core-embed/speaker-deck',  // Speaker Deck
'core-embed/ted',           // TED
'core-embed/tumblr',        // Tumblr
'core-embed/videopress',    // VideoPress
'core-embed/wordpress-tv',  // WordPress.tv
'core-embed/amazon-kindle',  // Amazon Kindle 5.2で追加

// 再利用ブロック 'reusable'
'core/block',                  // 再利用ブロック