如何将嵌套块模板设置为属性

Question

我无法将 'InnerBlocks' 的模板设置为 variable/attribute。我可以设置一个模板并毫无问题地使用它，但我最终想要一个包含 3 个不同模板的下拉列表，所以我希望能够将模板设置为特定属性。

看看我的编辑功能，我尝试了 template={dashboardStyle} 和 template={ {dashboardStyle} }，但似乎都不起作用。

import './style.scss';
import './editor.scss';

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText, InspectorControls, InnerBlocks } = wp.editor;

const dashboard2x2 = [
    ['wpress-blocks/dashboard-item'],
    ['wpress-blocks/dashboard-item'],
    ['wpress-blocks/dashboard-item'],
    ['wpress-blocks/dashboard-item'],
];

const dashboard3x3 = [
    ['wpress-blocks/dashboard-item'],
    ['wpress-blocks/dashboard-item'],
    ['wpress-blocks/dashboard-item'],
    ['wpress-blocks/dashboard-item'],
    ['wpress-blocks/dashboard-item'],
    ['wpress-blocks/dashboard-item'],
];


registerBlockType('wpress-blocks/dashboard', {
    title: __('dashboard'), // Block title
    icon: 'dashboard', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/
    category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed
    keywords: [
        __('block'),
        __('dashboard')
    ],
    attributes:{
        dashboardStyle: {
            type: 'string',
            default: 'dashboard3x3',
        },
    },

    edit: function (props) {
        const { attributes, className } = props
        const dashboardStyle = attributes.dashboardStyle

        return (
            <div className={className}>
                <InnerBlocks 
                    template={dashboard3x3}
                />
            </div>
        );
    },

    save: function (props) {
        return (
            <div>
                <InnerBlocks.Content />
            </div>
        );
    },
});

代码按原样正常运行，但是当我尝试使用属性 dasbhoardStyle 代替显式命名模板（以列出的方式）时，我收到控制台错误 n is undefined.

我觉得我的语法不对，但我没能找到一个例子来做同样的事情，而且我在文档中也没有找到任何关于如何做到这一点的东西，所以我真的只是猜测我到目前为止尝试过的东西。如有任何想法，我们将不胜感激。

Answer 1

如果其他人发现了这个并且想知道同样的事情，这就是我想出的解决方案：

首先，我在一个名为 'templates'

的数组中定义了模板样式

const templates = {
    dashboard2x2: [
        ['wpress-blocks/dashboard-item2x2', { className: 'col-md-6'} ],
        ['wpress-blocks/dashboard-item2x2', { className: 'col-md-6'} ],
        ['wpress-blocks/dashboard-item2x2', { className: 'col-md-6'} ],
        ['wpress-blocks/dashboard-item2x2', { className: 'col-md-6'} ],
    ],
    dashboard3x2: [
        ['wpress-blocks/dashboard-item3x2', { className: 'col-md-4'} ],
        ['wpress-blocks/dashboard-item3x2', { className: 'col-md-4'} ],
        ['wpress-blocks/dashboard-item3x2', { className: 'col-md-4'} ],
        ['wpress-blocks/dashboard-item3x2', { className: 'col-md-4'} ],
        ['wpress-blocks/dashboard-item3x2', { className: 'col-md-4'} ],
        ['wpress-blocks/dashboard-item3x2', { className: 'col-md-4'} ],
    ]
}

然后将其添加到我的编辑功能中：

const activeTemplate = templates[attributes.dashboardStyle];

添加了一个下拉菜单以允许我在样式之间 select：

<InspectorControls>             
     <SelectControl                     
          label={ __( 'Select Dashboard Style' ) }
          value={ attributes.dashboardStyle } 
          onChange={ ( dashboardStyle ) => { setAttributes( { dashboardStyle } ) } }                        
          options={ [
               { value: 'dashboard2x2', label: '2 by 2' },
               { value: 'dashboard3x2', label: '3 by 2' },                                          
          ] }                       
     />
</InspectorControls>

然后更改我的 InnerBlocks 以使用模板 'activeTemplate'，如下所示：

<InnerBlocks 
     template = { activeTemplate }
/>

如何将嵌套块模板设置为属性

How to set nested block template to an attribute

javascript

wordpress

wordpress-gutenberg