How to set nested block template to an attribute

P Rohrman

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.

P Rohrman

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]

編集
0

コメントを追加

0

関連記事

分類Dev

How to set nested block template to an attribute

分類Dev

How to delete nested object attribute

分類Dev

How to use a nested typedef in a template?

分類Dev

How to handle nested template variables?

分類Dev

How to display a nested array in a template

分類Dev

How to use a nested class as type in a template class?

分類Dev

How to set a JavaScript variable in attribute of a HTML tag

分類Dev

jQuery: How to get text and set to attribute in <a>?

分類Dev

How to set HTML lang attribute dynamically

分類Dev

How to set a function attribute to a function pointer?

分類Dev

how to call block method from magento 1 template

分類Dev

How can I determine if a Jinja2 template block is empty?

分類Dev

How to create template with a set of sealed class

分類Dev

How to create product variants from the product template attribute lines in Odoo?

分類Dev

How to set the image button in the nested activity?

分類Dev

Rails - How do you access nested params attribute?

分類Dev

how can I set a timeout to a block in a test (junit)?

分類Dev

How to set the id attribute of HTML element dynamically with Thymeleaf

分類Dev

How to set element attribute using phpunit-selenium

分類Dev

How to set value into textarea attribute using nightwatch.js

分類Dev

how to set an attribute to a selected item of a dropdown list in JQuery?

分類Dev

How to set a multi-valued XML attribute using SQLXML modify

分類Dev

How to set the XML attribute 'layout_constrainedWidth' of ConstraintLayout programmatically?

分類Dev

How to set conditional statement for setting a class attribute in flutter?

分類Dev

How set up and call a rails method in the view to update an attribute of an object

分類Dev

Cython: how can I set the attribute of a cdef class?

分類Dev

Magento - undefined variable this in block template

分類Dev

How to set navigation page opened by default in jQuery template

分類Dev

How to set string-based/named template in a knockout custom binding?

Related 関連記事

  1. 1

    How to set nested block template to an attribute

  2. 2

    How to delete nested object attribute

  3. 3

    How to use a nested typedef in a template?

  4. 4

    How to handle nested template variables?

  5. 5

    How to display a nested array in a template

  6. 6

    How to use a nested class as type in a template class?

  7. 7

    How to set a JavaScript variable in attribute of a HTML tag

  8. 8

    jQuery: How to get text and set to attribute in <a>?

  9. 9

    How to set HTML lang attribute dynamically

  10. 10

    How to set a function attribute to a function pointer?

  11. 11

    how to call block method from magento 1 template

  12. 12

    How can I determine if a Jinja2 template block is empty?

  13. 13

    How to create template with a set of sealed class

  14. 14

    How to create product variants from the product template attribute lines in Odoo?

  15. 15

    How to set the image button in the nested activity?

  16. 16

    Rails - How do you access nested params attribute?

  17. 17

    how can I set a timeout to a block in a test (junit)?

  18. 18

    How to set the id attribute of HTML element dynamically with Thymeleaf

  19. 19

    How to set element attribute using phpunit-selenium

  20. 20

    How to set value into textarea attribute using nightwatch.js

  21. 21

    how to set an attribute to a selected item of a dropdown list in JQuery?

  22. 22

    How to set a multi-valued XML attribute using SQLXML modify

  23. 23

    How to set the XML attribute 'layout_constrainedWidth' of ConstraintLayout programmatically?

  24. 24

    How to set conditional statement for setting a class attribute in flutter?

  25. 25

    How set up and call a rails method in the view to update an attribute of an object

  26. 26

    Cython: how can I set the attribute of a cdef class?

  27. 27

    Magento - undefined variable this in block template

  28. 28

    How to set navigation page opened by default in jQuery template

  29. 29

    How to set string-based/named template in a knockout custom binding?

ホットタグ

アーカイブ