WordPressのテーマでダイナミックブロック(Block)を作成

2023-04-152023-07-05

ダイナミックブロック(Block)って、使うシーン？
例えば、スライダーで人気の「slick」をWordPressのブロックにしたい時などに便利で使えます。あとは、検索結果を一覧表示したいとか。

環境がない方はこちら

WordPressのテーマでブロック(Block)を作成する方法テーマ用にブロックを作成したいと思い色々と調べました。JSXで各場合は環境の構築が必要です。WordPress では環境構築を簡単に行うためのパッケージとして @wordpress/…

テーマ内構成

└── wp-content
    └── themes
        └── sample01 //使用するテーマのディレクトリ
            ├── category.php
            ├── front-page.php
            ├── functions.php
            ├── index.php
            │    ...
            └── themes-block
                      ├── build              //ビルドすると自動生成
                      ├── node_modules       // npm で自動生成
                      ├── package-lock.json  // npm で自動生成
                      ├── package.json       // npm で自動生成
                      └── src
                           ├── block.json
                           ├── edit.js
                           ├── editor.scss
                           ├── index.js
                           └── style.scss

基本は普通のブロックと変わりありません。

フォルダとファイルを作成

└── src
     ├── block.json
     ├── edit.js
     ├── editor.scss
     ├── index.js
     ├── save.js
     └── style.scss

block.json

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 2,
	"name": "block-namespace/block-slug",
	"version": "0.1.0",
	"title": "title",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example static block scaffolded with Create Block tool.",
	"supports": {
		"html": false
	},
	"textdomain": "block-slug",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

edit.js

‘@wordpress/server-side-render’ を読み込みます。基本的にレンダリングはサーバーサイドのPHPでおこなうので、save.js などは必要ありません。

import { __ } from '@wordpress/i18n';
import { useBlockProps, } from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';
import './editor.scss';

export default function Edit( { attributes, isSelected, setAttributes } ) {

	return (
		<div { ...useBlockProps() }>
			<ServerSideRender
					block="block-namespace/block-slug"
					attributes={ attributes }
			/>
		</div>
	);
}

functions.php でブロックを読み込み

// index.asset.php をインクルード
$asset_file = include( get_theme_file_path('/themes-block/build/index.asset.php'));

// ブロックのスクリプトを登録
wp_register_script(
	'test-theme-block-script',
	get_theme_file_uri('/themes-block/build/index.js'),
	$asset_file['dependencies'],    //依存しているスクリプトの配列
	$asset_file['version']          //バージョン
);

// コールバック関数名(この関数が呼ばれる)
$block_function_name = 'exsample_render_callback';

register_block_type_from_metadata(
  get_template_directory(). "/blocks/block-slug",//ビルド後のブロックへのパス
  [
    'editor_script' => "block-namespace/block-slug",
    'render_callback' => $block_function_name
  ]
);

functions.php にコールバック関数を書く

function exsample_render_callback( $block_attributes, $contents ) {
  /*
  wp_register_script や wp_enqueue_script でjQueryプラグインを読み込みできる
  */

　$contents.= "<div>コンテンツに追記する</div>";

　return $contents;
}

以上、でダイナミックブロックが動作します。
カスタム投稿の記事を読み込んだりできるのでお試しください。

よかったらシェアしてね！