Inject element into wp.element.createElement – Inspector Controls
-
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.