WordPress6.3で変わった「パターン(旧再利用ブロック)」の使い方、使い勝手を良くする方法(メモ)

公開日:2023(令和5)年8月1日/最終更新日:

,
WordPressのカスタマイズ方法についての画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



WordPress6.3から機能性がアップする「再利用ブロック」。名称が「パターン」に代わり、作成時に「同期」「非同期」の選択ができるようになりました。

本ページでは、私が試した限りではありますが、次の内容について順に紹介していきます。

「同期パターン」「非同期パターン」の違い

この「パターン」は、WordPress6.3よりも前のバージョンで、「再利用ブロック」という機能であったものが拡張された機能です。

「同期パターン」は、以前の「再利用ブロック」が「同期ブロック」という名称に変わったもので、編集したものが同じ「同期ブロック」を挿入したすべての投稿や固定ページなどへ反映されます。

また、こちらも「再利用ブロック」と同様に、一旦挿入した「同期ブロック」を切り離して、他の投稿や固定ページに影響を与えない形での編集も可能です。

一方「非同期パターン」は、いわゆるテンプレート機能のようなもので、挿入した「非同期パターン」を編集しても他の投稿や固定ページへ影響を与えることがない「パターン」です。登録方法や呼び出す方法は異なるものの、現存する「ブロックパターン」と同じ機能だと考えて問題ないでしょう。

QA Analytics QA Analytics

「パターン」の基本的な使い方

ブロックのパターン化方法

ブロック(1つまたは複数)をいつでも呼び出して使えるようにする「パターン」化は、通常の投稿や固定ページ編集画面からいつでも行えます。

下図のように「パターン」化したいブロックを選択して、ブロックツールバーの三点リーダーをクリック後、「パターン / 再利用ブロックの作成」をクリックします。

パターンの登録

クリックすると、下図のように名前と同期するかどうかを聞かれますので、名前を入力し、同期(編集したものが同じ「パターン」を使っている投稿・固定ページすべてへ反映される)する場合はONに、同期しない場合はOFFにします。

パターン名の設定と同期非同期の指定

これで同期または非同期のパターン登録は完了です。簡単ですね。

一度同期(非同期)で登録したパターンは後から非同期(同期)に切り替えることができない点に注意してください

「パターン」の呼び出し方

次に登録したパターンを呼び出す方法です。

投稿(固定ページ)などの編集画面から、ブロックの追加(+マーククリック)をし、「すべて表示」をクリックします。

パターンの呼び出し①

次に、「非同期パターン」であれば「パターン」→「カスタムパターン」を順にクリックし、「同期パターン」であれば「非同期パターン」ボタンをクリックして、登録済のパターンをクリックすれば、エディターに挿入されます。

WordPress6.3で変わった「パターン(旧再利用ブロック)」の使い方、使い勝手を良くする方法(メモ)|Personal WP Customization Notes (PWCN)
非同期パターンの場合
パターンの呼び出し②
同期パターンの場合

「同期パターン」の同期を解除する

「同期パターン」として登録されているパターンを呼び出した後に、その投稿(固定ページ)などだけで編集が反映されるように、同期を解除することもできます。

切り離すには、挿入した同期パターンを選択後、下図のようにブロックツールバーの三点リーダーをクリックし、「パターンを切り離す」をクリックします。

パターンの同期解除(手動)

「パターン」の再編集や削除

「同期パターン」が挿入されている編集画面の場合

投稿や固定ページなどの編集画面上の「同期パターン」をクリックして、ブロックツールバーの三点リーダーをクリック後、「パターンの管理」をクリックします。

サイトエディターという別画面へ遷移しますので、「パターンの管理」をクリック前に必ず現在の編集画面を保存しておいてください

パターンの編集

編集したい「パターン」をクリックして編集後、保存します。

サイトエディター上のパターン一覧

サイトエディターを持たないテーマでは、通常の投稿一覧画面と同じような一覧が表示されます。

管理画面上のパターン一覧

「同期パターン」であれば、それが含まれる投稿・固定ページなどすべてに即時反映され、「非同期パターン」であれば次回どこかで使用する際に編集後のものが挿入されます

「同期パターン」が挿入されてない編集画面の場合

ブロックの追加(+マーク)をクリックし、「すべて表示」をクリック、「同期パターン」マークをクリック後、一番下にある「カスタムパターンを管理」をクリックします。

パターン管理ページへのリンク

クリックすると、通常の投稿一覧のような画面に遷移するので、必要に応じて編集し、保存します。

管理画面上のパターンの一覧

「同期パターン」であれば、それが含まれる投稿・固定ページなどすべてに即時反映され、「非同期パターン」であれば次回どこかで使用する際に編集後のものが挿入されます

先ほどのサイトエディターの画面とは違いますが、こちらの方が見慣れていて操作しやすいかも知れませんね。

サイトエディターから直接呼び出す場合

ブロックテーマなどを使用していて、サイトエディターメニュー(「外観」→「エディター」)のある環境であれば、投稿や固定ページの編集画面からでなくても、直接編集することもできます。

左サイドメニューから、「外観」→「エディター」をクリックし、遷移した画面で「パターン」をクリックします。

サイトエディター上のパターン呼び出しメニュー

あとは「同期パターン」が挿入されている編集画面の場合と同じです。

削除した同期パターンが含まれるコンテンツの振る舞い

いろいろな投稿や固定ページに挿入されている「同期パターン」を削除した場合には、以下のような振る舞いをします。

  • ブロックエディター上では、「ブロックは削除されたか利用できません」と表示される
  • フロントエンド(閲覧画面)上では何も出力されない

特にエディター上に「ブロックは削除されたか利用できません」というブロックが存在しても、編集は通常通りできますし、フロントエンドでも何も表示されないので、削除した同期パターンが含まれるコンテンツをすぐに編集しなおす必要はないでしょう。

「パターン」を使いやすくするカスタマイズいろいろ

「パターン」一覧へ「同期」「非同期」の状態を表示させる

前述したように、登録されているものをブロックエディターから呼び出すとき、非同期パターンは「パターン」→「カスタムパターン」から呼び出すことができ、同期パターンは「非同期パターン」ボタン(旧債利用ブロックボタン)から呼び出すことができます。

ただ、「パターン」の一覧では、「同期」なのか「非同期」なのかの区別がなく、誤って「同期」パターンを編集して、挿入している投稿や固定ページすべての内容が変わってしまうというトラブルが起こりかねません。

そこで、以下のコードを有効化しているテーマのfunctions.phpへ追加して、「パターン」の一覧へ「同期」なのか「非同期」なのかを表示させて、誤編集をできるだけ防ぐとよいと思います。

/***** 同期/非同期パターンへ同期しているかを表示 *****/
/* 列を追加 */
if ( !function_exists( 'sample_sync_status_column_register' ) ){
function sample_sync_status_column_register( $columns ) {
	$columns['SyncStatus'] =__('同期状況','');
	return $columns;
}
}
add_filter( 'manage_wp_block_posts_columns', 'sample_sync_status_column_register' );

/* 状態を追加 */
if ( !function_exists( 'sample_sync_status_column_display' ) ){
function sample_sync_status_column_display( $column_name, $post_id ) {
	$synced_title = __('同期','hima-art-utility');
	$unsynced_title = __('非同期','hima-art-utility');
	$status = get_post_meta($post_id, 'wp_pattern_sync_status', true);
	$sync_color = 'background:#38c338;color:#fff;padding:8px;border-radius:4px;';
	$unsync_color = 'background:#dd3636;color:#fff;padding:8px;border-radius:4px;';

	if( $column_name == 'SyncStatus' ) {
		if ($status == 'unsynced') {
			echo '<div style="'.$unsync_color.'">'.$unsynced_title.'</div>';
		} else {
			echo '<div style="'.$sync_color.'">'.$synced_title.'</div>';
		}
	}
}
}
add_action( 'manage_wp_block_posts_custom_column', 'sample_sync_status_column_display', 10, 2 );

/* スタイル */
if ( !function_exists( 'sample_admin_sync_status_column_style_init' ) ){
function sample_admin_sync_status_column_style_init(){
?>
<style>
.fixed .column-SyncStatus {width: 10%;}
</style>
<?php
}
}
add_action('admin_head','sample_admin_sync_status_column_style_init');

この措置を行うと、「パターン」の一覧に以下のように表示されるようになります(もちろん「表示オプション」でチェックを外せば非表示にすることもできます)。

管理画面上でパターンが同期か非同期かを表示する

管理画面のメニューに「パターン」リンクを追加

既存のパターンの編集は、「同期パターン」であれば旧再利用ブロックと同様に編集できますが、「非同期」パターンについては、「同期パターン」を選択した後に「カスタムパターンを管理」をクリックするアクションが必要となり、ちょっと面倒かも知れません。

そこで、以下のコードを有効化しているテーマのfunctions.phpへ追記して、管理画面のメニューへ「パターン」という項目を追加しておけば、どこからでも一発でパターンの一覧(投稿の一覧のような感じ)が表示できるようになります。

/***** 管理画面のサイドバーメニューに「パターン」リンクを追加 *****/
if ( !function_exists( 'sample_add_reuse_list_admin_menu' ) ){
function sample_add_reuse_list_admin_menu() {
	add_menu_page( __('パターン',''), __('パターン',''), 'manage_options', 'edit.php?post_type=wp_block', '', 'dashicons-screenoptions', 6 );
}
}

add_action( 'admin_menu', 'sample_add_reuse_list_admin_menu' );

「同期パターン」であることを分かりやすくする

通常では一応編集確定の可否が問われるようになっているエディターからの「同期パターン」の編集ですが、誤って確定してしまい、挿入しているすべての投稿や固定ページへ反映されてしまうトラブルが出る可能性があります。

以下のコードを有効化しているテーマのfunctions.phpへ追加することで、「同期パターン」に内包されているブロック全体を赤枠で囲み、上部へ「このエリアは同期パターンです。編集すると同じパターンを持つすべてのコンテンツが変更されますのでご注意ください」という文章を表示します。

このコードは注意喚起するもので、編集をできなくするものではありません

/***** 同期パターンであることを分かりやすくする *****/
if ( !function_exists( 'sample_restrict_reuse_block_edit' ) ){
	function sample_restrict_reuse_block_edit(){
		$message = __('このエリアは同期パターンです。編集すると同じパターンを持つすべてのコンテンツが変更されますのでご注意ください','');
		
?>
<style>
.block-library-block__reusable-block-container {
	border: 4px solid #FF0000!important;
}

.block-library-block__reusable-block-container:before {
	content: "<?php echo $message; ?>"!important;
	font-size:0.8em;
	color:#FF0000;
	margin-top: -24px;
}
</style>
<?php
}
}
add_action('admin_head','sample_restrict_reuse_block_edit');

この措置を行うと、以下のように表示されるようにできます。

ブロックエディター上で同期パターンであることを明示する

ブロックパターンの今後は...

WordPress6.2までは、同期しないブロック類を登録しておく「ブロックパターン」と、同期するブロック類を登録しておく「再利用ブロック」に分かれていました。

しかし、WordPress6.3からは、「再利用ブロック」の名称が「パターン」に代わり、作成時に「同期(旧債利用ブロックのように機能させるのか?)」と「非同期(旧ブロックパターンのように機能させるのか?)」が選べるようになりました。

これによって影をひそめることが予測されるのが、ブロックパターン。

ブロックパターン自体はテーマに内包されているものもあるし、何よりWordPress公式で展開されて利用できるようになっているので、それ自体がなくなることはないと思われます。

しかしながら、テーマの機能やプラグインにあった「自身で作成したブロックパターンを管理する機能」についてはその役目が薄れ、特に頻度高く更新すべきプログラムではないものの、機能から外されたり、プラグインの提供を停止したり、更新されなくなる可能性があることは留意する必要がありそうです。

心配であれば、早いうちに独自のブロックパターン機能で登録したものを、「パターン」へ登録しなおしておいた方がよいかも知れませんね。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

Image Of News & Diary
当サイトの動作環境について 使用しているテーマは何?使ってるプラグインは何?