Zenn
Open23

Block Hooks APIで既存の記事にブロック突っ込む

WordPress
ちあきちあき

作ったカスタムブロックといえば…と思ってiapi-tabsでやってみたけど、インナーブロック含めるならblock.json だけじゃだめっぽいな〜。内容がないから編集画面でエラーが出る。今回作ったやつだとidつけたりなんやかんやしたりをやってるからそもそもブロックフックを前提にして作らないと厳しかったかも？

ちあきちあき

タブのときみたいにブロック自体の作り込みはすまい………！！！！！

ちあきちあき
{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "chiilog-blocks/copyright-use-hook",
	"version": "0.1.0",
	"title": "Chiilog Copyright",
	"category": "text",
	"icon": "smiley",
	"description": "Example block scaffolded with Create Block tool.",
	"example": {},
	"supports": {
		"html": false
	},
	"textdomain": "chiilog-copyright-use-hook",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"viewScript": "file:./view.js",
	"blockHooks": {
		"core/post-content": "after"
	}
}

とりあえずblockHooksだけ入れてみる。

ちあきちあき

出ないな？？？？と思ってテンプレート編集画面見るとブロックこわれてた

エラー文はこれ

Block validation: Block validation failed for `chiilog-blocks/copyright-use-hook` ({name: 'chiilog-blocks/copyright-use-hook', icon: {…}, keywords: Array(0), attributes: {…}, providesContext: {…}, …}).

Content generated by `save` function:

<p class="wp-block-chiilog-blocks-copyright-use-hook">Chiilog Copyright – hello from the saved content!</p>

Content retrieved from post body:
ちあきちあき

これはsaveがうまくいってないのかなあ。当然リカバリーしたらなおるし、core/post-content のうしろに表示されるようになります。

ちあきちあき
function add_copyright_block_after_post_title_block( $hooked_block_types, $relative_position, $anchor_block_type, $context ) {

	// Only hook the block on Single templates (posts).
	if ( ! $context instanceof WP_Block_Template || ! property_exists( $context, 'slug' ) || 'single' !== $context->slug ) {
		return $hooked_block_types;
	}

	// Hook the block after the Post Content block.
	if ( 'after' === $relative_position && 'core/post-title' === $anchor_block_type ) {
		$hooked_block_types[] = 'chiilog-blocks/copyright-use-hook';
	}

	return $hooked_block_types;
}
add_filter( 'hooked_block_types', 'add_copyright_block_after_post_title_block', 10, 4 );

これで投稿ページにある core/post-title の下に差込できる

ちあきちあき

コピーライトなのになんで投稿タイトルの下に出すねんというツッコミはなしで

ちあきちあき

カスタムブロック作って自動挿入したいのならカスタムブロックのプラグインのphpに含めたらいいけど、これデフォルトブロック使う場合ちょっと悩ましい気がするな？

ちあきちあき

テーマの領分と言われたらそうだし、プラグインの領分と言われてもそうだよなあと思う。
でも、大体こういう差し込みしたいのってテーマ変わったらいらないってなる可能性のが高いよね…？ということはテーマに入れるかなあ…… 🤔

ちあきちあき

複数はいらないから複数あるときは消すぞーってやるときは、フィルターの対象を該当のブロックにしぼる。

function remove_hooked_like_button_block_after_post_content( $parsed_hooked_block, $hooked_block_type, $relative_position, $parsed_anchor_block, $context  ) {

	// Has the hooked block been suppressed by a previous filter?
	if ( is_null( $parsed_hooked_block ) ) {
		return $parsed_hooked_block;
	}

	// Remove any Like Button blocks hooked after Post Content.
	if ( 'core/post-content' === $parsed_anchor_block['blockName'] ) {
		return null;
	}

	return $parsed_hooked_block;
}
// Priority is set to 15.
add_filter( 'hooked_block_chiilog-blocks/copyright-use-hook', 'remove_hooked_like_button_block_after_post_content', 15, 5 );
ちあきちあき

今やってる内容だとcore/post-title で強制的に入れてるからあんまり恩恵感じにくいけど、これ投稿内容にひとつでもあれば消えるってことっぽいから、結構使い道ありそう

ちあきちあき

違うね！ 'core/post-content' === $parsed_anchor_block['blockName'] で強制的に消すねえ

ちあきちあき

それにしてもこの……ブロック壊れるのどうにかならんか……？壊れる理屈はわかるんだけど……

ちあきちあき

'single' !== $context->slug とかで絞らなければどのページでも出る