WP5の目玉、ブロックエディター。

今のところ無くても困らない、むしろ対応が面倒だ、程度ですが、更新が速いのがとても魅力的。（書き換え⇒保存が速いという意味）

クラシックエディタはカスタムフィールドをいろいろ足していくと、保存がどんどん遅くなっていくので、ブロックエディターを活用して軽くしたいところです。

まずは簡単にできることから

まだ難しいドキュメントしかない状態なので、テーマ「Twenty Nineteen」の内容を少しずつ試します。

 

「Twenty Nineteen」のfunctions.phpに書き込まれている内容で、良いな、と感じた項目を抜粋。

“my_theme”は任意の名前で。

// 5.0～ ビジュアルエディター
if ( ! function_exists( 'my_theme_setup' ) ) :
	function my_theme_setup() {

		// Add support for full and wide align images.
		add_theme_support( 'align-wide' );

		// Add support for responsive embedded content.
		add_theme_support( 'responsive-embeds' );

		// Add custom editor font sizes.
		add_theme_support(
			'editor-font-sizes',
			array(
				array(
					'name'      => __( 'Small', 'my_theme' ),
					'shortName' => __( 'S', 'my_theme' ),
					'size'      => 14,
					'slug'      => 'small',
				),
				array(
					'name'      => __( 'Normal', 'my_theme' ),
					'shortName' => __( 'M', 'my_theme' ),
					'size'      => 16,
					'slug'      => 'normal',
				),
				array(
					'name'      => __( 'Large', 'my_theme' ),
					'shortName' => __( 'L', 'my_theme' ),
					'size'      => 18,
					'slug'      => 'large',
				),
				array(
					'name'      => __( 'Huge', 'my_theme' ),
					'shortName' => __( 'XL', 'my_theme' ),
					'size'      => 24,
					'slug'      => 'huge',
				),
			)
		);

		// Editor color palette.
		add_theme_support(
			'editor-color-palette',
			array(
				array(
					'name'  => __( 'Theme Green', 'my_theme' ),
					'slug'  => 'theme_green',
					'color' => '#59b200',
				),
				array(
					'name'  => __( 'Dark Gray', 'my_theme' ),
					'slug'  => 'dark-gray',
					'color' => '#111',
				),
				array(
					'name'  => __( 'Light Gray', 'my_theme' ),
					'slug'  => 'light-gray',
					'color' => '#767676',
				),
				array(
					'name'  => __( 'White', 'my_theme' ),
					'slug'  => 'white',
					'color' => '#FFF',
				),
			)
		);

	}
endif;
add_action( 'after_setup_theme', 'my_theme_setup' );

align-wide

選択すると、クラス名に「alignfull」または「alignwide」が付与されます。

「Twenty Nineteen」では、コンテンツ幅に収めるか、ブラウザワイドにするか、という使われ方をしています。（ただし、とてもややこしいCSSで全幅を表現しています。ちょっと取り入れる気にならない。）

これは宣言しておかないとエディターの選択肢に出てきません。

responsive-embeds

これを書いておくと、ユーチューブ動画を埋め込んだ時などに、縦横比を整えてくれます。

ラッパーに「class=”video-container”」とか書かなくて済みます。

editor-font-sizes

デフォルトのフォントサイズ選択を上書きします。

細分化して調整したい、選択肢を減らして見苦しくならないように、などお好みで。

editor-color-palette

ブロックの背景色と文字色のセットです。

これもデフォルトのセットを上書きします。

キーカラー、ポイントカラーなどに絞っておけば、満艦飾の投稿になりにくいかも。

CSS

ベーシックなスタイリングは「wp-includes/css/dist/block-library/style.min.css」で整えています。

これを直接書き換えても、WPを更新したら多分リセットされちゃうので、テーマのCSSで上書き。

ただし、結構ボリュームがあります。（編集しやすいように整形すると900行）

「disable_default_gallery_style」みたいな指定も出来るんだと思いますがまだ不明。

挙動

フォントサイズや色は、選択肢から選んだだけだと特定のCSSクラスを付与しますが、パラメーターを変えるとstyleだけを付与します。

フォントサイズでhuge（特大）を選ぶ⇒「class=”has-huge-font-size“」

hugeを選んだうえで数字を変えると⇒「style=”font-size:36px“」

 

「align-wide」などはテーマ内に”align-wide”などと書いてあるわけではないので、この段階ではこのまんま使うことになります。

 

このあたりの挙動も制御できると随分テーマの作り方も変わりそうです。

ラジオボタンやチェックボックスなども自由に使えるようになると、レイアウトのためのカスタムフィールドはあまり必要なくなるかもしれません。

カスタム投稿タイプ

デフォルトでは、カスタム投稿タイプではブロックエディターは現れません。

宣言時に「 ‘show_in_rest’ => true,」を追加しておくと、カスタム投稿タイプでもブロックエディターが使えるようになります。

そのほか

• ブロックの位置を上下させるコントロールですが、「Spotlight Mode」にチェックを入れていると消えちゃいます。
• カラムを4列にしてコンテンツを挿入後、3列に変えると、4列目のコンテンツは消えちゃいます。
  改行してグリッドにしてくれたりはしないです。