WordPress将元素注入wp.element.createElement

时间:2018-10-27 19:53:04

标签: javascript jquery wordpress

我正在开发一个插件,它将允许我们向ACF块系统添加块选项并将字段保存在meta中。问题是我对js真的很生疏,无法弄清楚如何将循环合并到wp.element.create系统中。我在下面包含了我的JavaScript,并附有我要完成的操作的注释。任何帮助,我们将不胜感激。

jQuery(function(){

    var el = wp.element.createElement,
        Fragment = wp.element.Fragment
        registerBlockType = wp.blocks.registerBlockType,
        RichText = wp.editor.RichText,
        BlockControls = wp.editor.BlockControls,
        AlignmentToolbar = wp.editor.AlignmentToolbar,
        InspectorControls = wp.editor.InspectorControls;

    var withInspectorControls = wp.compose.createHigherOrderComponent( function( BlockEdit ) {
        return function( props ) {

            // Set data if it does not exist - needed when new page is created
            if(props.attributes.data === undefined){ props.attributes.data={}; }

            // begin creating the return element
            var elm = el(
                Fragment,
                {},
                el( BlockEdit, props ),
                el( InspectorControls, {},
                    el( PanelBody, { title: 'Accordion Options' },

                    // THIS IS WHERE THE ADDED ELEMENTS WILL GO

                )
            );

            $.each(fields, function( key, field ) {
                switch(field.type){
                    case 'text':
                        var optionField = el( TextControl, {
                            label: field.label,
                            help: field.instructions,
                            onChange: function(value){ 
                                textField=value;
                                props.setAttributes( { textField: value } ); 
                            }
                        });


                        // ADD optionField TO elm ABOVE CORRECTLY


                        break;
                    default: continue;
                }
            });
            return elm;
        };
    }, 'withInspectorControls' );

    wp.hooks.addFilter( 'editor.BlockEdit', 'acf/accordion', withInspectorControls );
}

0 个答案:

没有答案