I'm having trouble setting the template of my 'InnerBlocks' to be a variable/attribute. I can set a template and use it without issue, but I eventually want to have a dropdown with 3 different templates so I would like to be able to have the template set to a particular attribute.
Taking a look at my edit function I have tried template={dashboardStyle}
and template={ {dashboardStyle} }
but neither seem to work.
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>
);
},
});
The code functions correctly as is, but when I have tried to use the attribute dasbhoardStyle
in place of naming the template explicitly (in the ways listed), I get a console error that n is undefined
.
I figure my syntax is off, but I have not been able to find an example that does this same sort of thing, and I haven't found anything in the documentation on how to do this, so I'm really just guessing in what I've tried so far. Any thoughts would be appreciated.
In case anyone else finds this and is wondering the same thing, this is what I came up with as a solution:
first I defined the template styles in an array called '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'} ],
]
}
Then added this to my edit function:
const activeTemplate = templates[attributes.dashboardStyle];
Added a dropdown to allow me to select between the styles:
<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>
and then changed my InnerBlocks to use the template 'activeTemplate' like so:
<InnerBlocks
template = { activeTemplate }
/>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加