如何在WordPress块编辑器插件中调用Blocksy主题Pattern展示自定义分类

1. 核心：通过WordPress内置函数获取Pattern内容 #

WordPress提供get_block_pattern()函数，可直接通过Pattern的slug获取完整块结构内容。先找到目标Blocksy Pattern的slug（可在Gutenberg编辑器Pattern库查看，或通过WP_Query查询wp_block_pattern自定义post类型获取）。

修改你的taxonomyLoop_RenderBlock函数，替换原本地模板读取逻辑：

function taxonomyLoop_RenderBlock($term, $pattern_slug) {
    // 获取指定Pattern的内容
    $pattern = get_block_pattern($pattern_slug);
    if (!$pattern) {
        echo 'PATTERN_NOT_FOUND';
        return;
    }

    // 准备分类数据（补充分类链接）
    $term_link = get_term_link($term);
    $term_data = [
        '{{term_cover_image}}' => wp_get_attachment_image_url($term["cover_image"], 'large'),
        '{{term_title}}' => esc_html($term["name"]),
        '{{term_description}}' => wp_kses_post($term["description"]),
        '{{term_link}}' => esc_url($term_link),
        '{{term_slug}}' => esc_attr($term["slug"])
    ];

    // 替换Pattern中的占位符并输出
    $rendered_pattern = str_replace(array_keys($term_data), array_values($term_data), $pattern['content']);
    echo apply_filters('the_content', $rendered_pattern);
}

2. 在编辑器侧边栏添加Pattern选择控件 #

要让用户在插件编辑器端选择任意Pattern，需在块的注册逻辑中添加Pattern选择器。在块的JavaScript文件（通常为edit.js）中加入以下代码：

import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, SelectControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';

export default function Edit({ attributes, setAttributes }) {
    // 获取所有可用的Block Patterns
    const patterns = useSelect((select) => {
        return select('core/block-editor').getBlockPatterns();
    }, []);

    return (
        <>
            <InspectorControls>
                <PanelBody title="Pattern 设置">
                    <SelectControl
                        label="选择展示Pattern"
                        value={attributes.selectedPattern}
                        options={[
                            { label: '请选择Pattern', value: '' },
                            ...patterns.map(pattern => ({
                                label: pattern.title,
                                value: pattern.name // Pattern的slug
                            }))
                        ]}
                        onChange={(value) => setAttributes({ selectedPattern: value })}
                    />
                </PanelBody>
            </InspectorControls>
            {/* 编辑器预览内容 */}
            <div className="taxonomy-loop-preview">
                {/* 可添加预览逻辑 */}
            </div>
        </>
    );
}

同时在块的PHP注册代码中，添加selectedPattern属性：

register_block_type('your-plugin/taxonomy-loop', [
    // ...其他属性
    'attributes' => [
        // ...现有属性
        'selectedPattern' => [
            'type' => 'string',
            'default' => ''
        ]
    ],
    // ...其他配置
]);

3. 整合到现有循环逻辑中 #

修改原代码中的循环部分，传入选中的Pattern slug：

// ...原代码中的循环部分
foreach($debugTermsList as $term){
    $arrTerm = $term->to_array();
    $arrTerm["poster_image"] = get_field("poster_image", $term);
    $arrTerm["cover_image"] = get_field("cover_image", $term);
    // 传入选中的Pattern slug
    taxonomyLoop_RenderBlock($arrTerm, $attributes['selectedPattern']);
}

4. 创建适配的Blocksy Pattern #

在Gutenberg编辑器中创建自定义Pattern时，加入你定义的占位符（如{{term_title}}、{{term_cover_image}}），示例Pattern结构：

<!-- 示例Blocksy卡片Pattern -->
<div class="blocksy-taxonomy-card">
    <a href="{{term_link}}">
        <img src="{{term_cover_image}}" alt="{{term_title}}" />
        <h3>{{term_title}}</h3>
        <p>{{term_description}}</p>
    </a>
</div>

保存Pattern后，即可在插件编辑器中选中它，循环渲染时自动替换分类数据。

内容的提问来源于stack exchange，提问作者Klode