WordPress Gutenberg core/query自定义变体缺失网格视图选项

核心原因 #

你的自定义Query变体缺少网格视图选项，主要由以下几个可能的问题导致：

1. 自定义Post Template区块不支持布局上下文 #

你使用了hwrdp/post-template-id-filter而非默认的core/post-template，而Gutenberg的Query区块网格视图控件仅在内部使用core/post-template，或自定义Post Template区块明确声明支持displayLayout上下文时才会显示。如果你的自定义Post Template没有接收并处理这个上下文，Query区块就不会加载布局切换控件。

2. displayLayout属性的type值错误 #

你在属性中设置displayLayout.type: 'flex'，但Gutenberg中Query区块的网格布局对应的type值应为grid（列表布局对应list），错误的类型值会导致网格视图选项无法正常触发或显示。

3. 变体注册的name属性语法错误 #

代码中name: custom_variation_query_loop未加引号，虽然你定义了常量VARIATION_NAME，但此处未正确引用常量，严格模式下会触发未定义变量错误，可能影响变体的初始化流程。

解决方法 #

方法1：修复自定义Post Template的上下文支持 #

如果需要保留hwrdp/post-template-id-filter，需修改该自定义区块的注册代码，添加displayLayout上下文支持，并在渲染时响应布局属性：

registerBlockType('hwrdp/post-template-id-filter', {
  // 其他原有属性...
  usesContext: ['displayLayout', 'query'], // 新增displayLayout上下文
  edit: (props) => {
    const layout = props.context.displayLayout || { type: 'list', columns: 1 };
    const containerClass = layout.type === 'grid' ? 'wp-block-post-template-is-grid' : '';
    
    return (
      <div className={containerClass}>
        {/* 你的区块原有编辑逻辑 */}
      </div>
    );
  },
  save: (props) => {
    const layout = props.context.displayLayout || { type: 'list', columns: 1 };
    const containerClass = layout.type === 'grid' ? 'wp-block-post-template-is-grid' : '';
    
    return (
      <div className={containerClass}>
        {/* 你的区块原有保存逻辑 */}
      </div>
    );
  },
});

方法2：替换为默认core/post-template区块 #

如果不需要自定义Post Template的特殊功能，直接替换为默认区块即可，它会自动响应Query的布局上下文，网格视图选项会正常显示：

innerBlocks: [
  [
    'core/post-template',
    {},
    [
      ['core/post-title', { level: 0, isLink: true, fontSize: 'large' }],
    ],
  ],
  ['core/query-no-results'],
],

方法3：修正变体注册代码的两处错误 #

修改你的变体注册代码，修复语法错误和布局类型值：

const VARIATION_NAME = 'custom_variation_query_loop';

registerBlockVariation('core/query', {
    name: VARIATION_NAME, // 正确引用常量
    title: 'Custom Variation Query Loop',
    description: 'Variation (Custom)',
    usesContext: ["query", "displayLayout"],
    isActive: ( blockAttributes ) =>
        blockAttributes.namespace === VARIATION_NAME,
    icon: 'admin-links',
    attributes: {
        namespace: VARIATION_NAME,
        displayLayout: {
            type: 'grid', // 改为grid对应网格视图
            columns: 2,
        },
        query: {
            postType: 'destination',
            orderBy: 'title',
            perPage: 12,
            offset: 0,
        },
    },
    innerBlocks: [
        [
            'hwrdp/post-template-id-filter',
            {},
            [
                ['core/post-title', { level: 0, isLink: true, fontSize: 'large' }],
            ],
        ],
        ['core/query-no-results'],
    ],
    scope: [ 'block', 'inserter' ],
});

额外验证步骤 #

• 打开浏览器开发者工具的控制台，检查是否存在JavaScript报错（比如未定义变量的错误）
• 确认自定义Post Template区块是否正确传递displayLayout上下文到内部子区块

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