WordPress短码转Block：设置className及指定block variation问题

问题1：为core/group应用自定义block style #

直接设置className: "is-style-box-shadow"不生效，核心原因是WordPress核心区块的内置样式是通过style属性关联，而非直接手动添加className。

正确做法： #

1. 先确认你已正确注册box-shadow区块样式（如果还没注册）：

wp.blocks.registerBlockStyle('core/group', {
    name: 'box-shadow',
    label: '带阴影',
    isDefault: false
});

2. 在createBlock中，给core/group的style属性赋值为你注册的样式名称：

// 替换原className设置为style属性
style: "box-shadow"

Gutenberg会自动为该区块添加is-style-box-shadow类，并加载对应的样式。

如果坚持手动设置className，需确保自定义CSS已正确加载，且选择器优先级足够，比如：

.wp-block-group.is-style-box-shadow {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

问题2：通过createBlock指定区块变体 #

可以直接通过createBlock关联已定义的区块变体，核心是让创建的区块属性与变体的attributes完全匹配。

示例： #

假设你已定义了一个core/group的变体：

wp.blocks.registerBlockVariation('core/group', {
    name: 'shadow-group',
    title: '带阴影的分组',
    attributes: {
        style: 'box-shadow',
        layout: { type: 'constrained' }
    }
});

在转换代码中，只需让core/group的属性和变体的attributes一致，Gutenberg会自动识别并应用该变体。

修正后的完整转换代码 #

const transforms = {
    from: [
        {
            type: 'shortcode',
            tag: ["shadow"],
            priority: 1,
            transform: ( attrs, shortcodeObj ) => {
                return createBlock( 'core/group', { 
                    style: "box-shadow", // 关联已注册的block style
                    layout: { type: 'constrained' } // 匹配变体的属性
                }, [
                    createBlock( 'core/paragraph', { content: attrs.named.heading }),
                    createBlock( 'core/paragraph', { content: shortcodeObj.shortcode.content })
                ] );
            }
        }    
    ],
};

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