WordPressプラグインでオリジナルブロックを追加（静的ブロック）

ゴール、制作物

下記の「筆者ブロック」

事前にアップロードしたファイルを使用し動的な内容の変更をしない仕様です

ワタナベ タクヤ

東京都内でフロントエンドエンジニアとして働いています。Wordpress、Next.jsが専門です。

構成ファイル

wp-content

　┗　plugins

　　　　┗　author-info-block

　　　　　　　┣　author-info-block.php

　　　　　　　┣　block.js

　　　　　　　┣　style.css

　　　　　　　┣　template.html

　　　　　　　┗　author-image.svg

author-info-block.php

<?php
/*
Plugin Name: Author Info Block
Description: Provides a custom block to display author information
Version: 1.0
Author: Your Name
*/

function author_info_block_enqueue() {
    $asset_file = plugin_dir_url( __FILE__ );

    wp_enqueue_script(
        'author-info-block-script',
        $asset_file . 'block.js',
        array( 'wp-blocks', 'wp-element' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
    );

    wp_enqueue_style(
        'author-info-block-style',
        $asset_file . 'style.css',
        array(),
        filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
    );

    $template = file_get_contents( plugin_dir_path( __FILE__ ) . 'template.html' );
    // JavaScriptに渡すデータを設定
    wp_localize_script(
        'author-info-block-script',
        'authorInfoBlockData',
        array( 
            'template' => $template,
            'pluginUrl' => $asset_file
        )
    );

    // ブロックの登録
    register_block_type( 'author-info-block/main', array(
        'editor_script' => 'author-info-block-script',
        'style'         => 'author-info-block-style',
    ) );
}
add_action( 'init', 'author_info_block_enqueue' );

register_block_type 関数の基本概念

WordPress のPHP関数です。

新しいカスタムブロックを登録することができます。

主な引数：

• 第1引数：ブロック名（文字列） 例：'my-namespace/my-block' 名前空間とブロック名をスラッシュで区切って指定します。
• 第2引数：ブロックの設定（配列） ブロックの動作や見た目を定義するさまざまなオプションを指定します。

第2引数主な設定オプション：

{
  "apiVersion": 2,
  "name": "my-namespace/my-block",
  "title": "My Custom Block",
  "category": "widgets",
  "icon": "smiley",
  "description": "A custom block for demonstration",
  "attributes": {
    "content": {
      "type": "string",
      "default": ""
    }
  },
  "editorScript": "file:./build/index.js",
  "editorStyle": "file:./build/editor.css",
  "style": "file:./build/style.css"
}

register_block_type( __DIR__ . '/block.json' );

block.js

( function( blocks, element ) {
    var el = element.createElement;

    blocks.registerBlockType( 'author-info-block/main', {
        title: 'Author Info Block',
        icon: 'admin-users',
        category: 'widgets',

        edit: function() {
            var template = authorInfoBlockData.template;
            template = template.replace('{{IMAGE_URL}}', authorInfoBlockData.pluginUrl);
            return el( 'div', { 
                dangerouslySetInnerHTML: { __html: template } 
            } );
        },

        save: function() {
            var template = authorInfoBlockData.template;
            template = template.replace('{{IMAGE_URL}}', authorInfoBlockData.pluginUrl);
            return el( 'div', { 
                dangerouslySetInnerHTML: { __html: template } 
            } );
        }
    } );
} )( window.wp.blocks, window.wp.element );

即時実行関数式

この構造は即時実行関数式（IIFE）と呼ばれます。関数を定義すると同時に実行するJavaScriptのパターンです。

( function( blocks, element, blockEditor ) {
    // ブロックの定義
}( window.wp.blocks, window.wp.element, window.wp.blockEditor ));

registerBlockType() 関数

wp.blocks.registerBlockType( 'namespace/block-name', {
    // ブロックの設定
} );

第1引数はブロック名でPHP の register_block_type 関数の引数は、一致させる必要があります。

主要な設定項目（第2引数）

• title: ブロックの表示名
• icon: ブロックのアイコン
• category: ブロックのカテゴリ
• attributes: ブロックが保存するデータの構造
• edit: エディタでのブロックの表示と編集を制御する関数
• save: 保存時の HTML を生成する関数

window.wp オブジェクト

window.wp オブジェクトは WordPress の管理画面や Gutenberg エディタ環境でのみ利用可能です。フロントエンドの通常のページでは使用できません？

template.html

<div class="author-info-block">
    <div class="author-image">
        <img src="{{IMAGE_URL}}author-image03.svg" alt="Author Image" />
    </div>
    <div class="author-details">
        <h3 class="author-name">ワタナベ タクヤ</h3>
        <p class="author-description">東京都内でフロントエンドエンジニアとして働いています。Wordpress、Next.jsが専門です。</p>
    </div>
</div>

style.css

.author-info-block {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
}

.author-image {
    width: clamp(60px, 18vw, 140px);
    height: clamp(60px, 18vw, 140px);
    flex-shrink: 0;
    margin-right: 20px;
    border-radius: 50%;
    overflow: hidden;
}

.author-image img {
    width: 100%;
    height: auto;
}

.author-name {
    font-size: 18px;
    margin-bottom: 5px;
}

.author-description {
    font-size: 14px;
}

ワタナベ タクヤ

東京都内でフロントエンドエンジニアとして働いています。Wordpress、Next.jsが専門です。