• I am trying to figure out how to inject fields into inspector controls. I have the following script that I am trying to figure out how to loop through an object of field variables to create the elements. I am stuck on this and looking for any help possible

    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 );
    }

The topic ‘Inject element into wp.element.createElement – Inspector Controls’ is closed to new replies.