【WordPress】画像ブロックで選択した画像のリンク設定を自動で「画像ファイルへのリンク」にするカスタマイズ

ブロックエディターの画像ブロックで、選択した画像のリンク設定を手動でやる手間を省くため、画像を選択した時点でリンク設定が自動で「画像ファイルへのリンク」になるようにした。

基本情報

下図画像のように、「画像ブロック→メディアライブラリ→画像選択」した時点で、画像のリンク設定が自動で「画像ファイルへのリンク」となるようにした。

使用しているテーマ（子テーマ）のfunctions.phpからブロックエディタ用のjavascriptを読み込んで画像ブロックの挙動を変更する。

実装方法

1. 子テーマのfunctions.phpにコードを追加する。
2. 子テーマのフォルダ内に「js」フォルダを作成する。
3. 「js」フォルダにカスタマイズ用のJavaScriptを作成する。

子テーマのfunctions.php

子テーマにfunctions.phpに下記コードを追加する。

//ブロックエディターの画像ブロックのリンク設定を自動で「画像ファイルへのリンク」にするためのjavascriptを読み込む
function my_image_block_default_link() {
	wp_enqueue_script(
		'my-image-default-link',
		get_stylesheet_directory_uri() . '/js/image-default-link.js',
		array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post', 'wp-data' ),
		filemtime( get_stylesheet_directory() . '/js/image-default-link.js' ),
		true
	);
}
add_action( 'enqueue_block_editor_assets', 'my_image_block_default_link' );

JavaScript

最初に子テーマのフォルダに「js」フォルダを作成する。Cocoonの場合だと「cocoon-child-master」フォルダの中になる。「/wp-content/themes/cocoon-child-master/js」。

次に下記コードで、ファイル名「image-default-link.js」を作成して、「js」フォルダに配置する。

//ブロックエディターの画像ブロックのリンク設定を自動で「画像ファイルへのリンク」にする
(function (wp) {
    // 必要なオブジェクトが存在しない場合は実行しない
    if (!wp || !wp.hooks) {
        return;
    }

    const { addFilter } = wp.hooks;

    /**
     * 画像ブロックのデフォルト属性をカスタマイズ
     * 配置場所（カラム内など）を問わず、新規作成される画像ブロックに適用
     */
    addFilter(
        'blocks.registerBlockType',
        'my-custom/image-default-link',
        function (settings, name) {
            // 画像ブロック以外は何もしない
            if (name !== 'core/image') {
                return settings;
            }

            // 画像ブロックの属性（attributes）のデフォルト値を上書き
            return {
                ...settings,
                attributes: {
                    ...settings.attributes,
                    linkDestination: {
                        type: 'string',
                        default: 'media', // デフォルトを「メディアファイル」に設定
                    },
                },
            };
        }
    );
})(window.wp);

追加カスタマイズ：カラムブロック内の画像ブロックの「解像度」変更

上記カスタマイズに追加で、カラムブロック内の画像ブロックの「解像度」設定の挙動を変更する。

カラムブロックの2カラムに画像ブロックを作成した場合のみ、上記カスタマイズに追加で「解像度」設定が自動で「中」になる。それ以外は上記カスタマイズに準拠。

カラムブロック（の2カラム）に画像ブロックを設置することが割とあって、解像度設定を手動で「大→中」とするのが面倒なので追加してみた。

JavaScript

functions.phpのコード変更は不要。image-default-link.jsを下記コードに変更する。

// 画像ブロックのリンク設定と解像度の挙動カスタマイズ
(function (wp) {
    if (!wp || !wp.hooks || !wp.compose || !wp.element || !wp.data) return;

    const { addFilter } = wp.hooks;
    const { createHigherOrderComponent } = wp.compose;
    const { useEffect, useRef } = wp.element;
    const { useSelect } = wp.data;

    // ① デフォルトリンク設定
    addFilter(
        'blocks.registerBlockType',
        'my-custom/image-default-link',
        function (settings, name) {
            if (name !== 'core/image') return settings;
            return {
                ...settings,
                attributes: {
                    ...settings.attributes,
                    linkDestination: { type: 'string', default: 'media' },
                },
            };
        }
    );

    // ② カラム内解像度サイズの自動調整
    const withColumnSizeControl = createHigherOrderComponent(function (BlockEdit) {
        return function (props) {
            if (props.name !== 'core/image') return wp.element.createElement(BlockEdit, props);

            const { clientId, attributes, setAttributes } = props;
            
            // useSelect を使うことで、エディターの状態を安全に監視
            const { columnCount, isInsideColumn } = useSelect(function (select) {
                const { getBlockParents, getBlock } = select('core/block-editor');
                const parentIds = getBlockParents(clientId);
                
                const columnId = parentIds.find(id => getBlock(id)?.name === 'core/column');
                let count = 0;
                if (columnId) {
                    const columnsId = getBlockParents(columnId).find(id => getBlock(id)?.name === 'core/columns');
                    count = getBlock(columnsId)?.innerBlocks?.length || 0;
                }
                
                return {
                    columnCount: count,
                    isInsideColumn: !!columnId
                };
            }, [clientId]);

            // 初回判定用フラグ（挿入時のみに限定するため）
            const hasChecked = useRef(false);

            useEffect(function () {
                // 既に判定済み、またはカラム外なら何もしない
                if (hasChecked.current || !isInsideColumn) return;

                // 「2カラム」かつ「サイズが未設定」の時だけ「中」にする
                if (columnCount === 2 && !attributes.sizeSlug) {
                    setAttributes({ sizeSlug: 'medium' });
                }
                
                // 一度チェックしたら、このブロックでは二度と自動変更しない
                hasChecked.current = true;
            }, [isInsideColumn, columnCount]);

            return wp.element.createElement(BlockEdit, props);
        };
    }, 'withColumnSizeControl');

    addFilter('editor.BlockEdit', 'my-custom/image-column-size-control', withColumnSizeControl);
})(window.wp);