Title: WordPress Inject element into wp.element.createElement
Last modified: April 17, 2019

---

# WordPress Inject element into wp.element.createElement

 *  [cwdg](https://wordpress.org/support/users/cwdg/)
 * (@cwdg)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/wordpress-inject-element-into-wp-element-createelement/)
 * I am working on a plugin that will allow us to add block options to the ACF block
   system and save the fields in meta. The issue is I am really rusty with js and
   I am unable to figure out how to merge my loop into the `wp.element.create` system.
   I have included my javascript below with comments of what I am trying to accomplish.
   Any help on this is greatly appreciated.
 *     ```
       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 );
       }
       ```
   

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Joy](https://wordpress.org/support/users/joyously/)
 * (@joyously)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/wordpress-inject-element-into-wp-element-createelement/#post-10824004)
 * Well, we’re not going to write the code for you. If you have a specific question,
   someone might be able to answer it.
    If there are plugins (or core code) that
   does something similar to what you want, read that code carefully.
 *  Thread Starter [cwdg](https://wordpress.org/support/users/cwdg/)
 * (@cwdg)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/wordpress-inject-element-into-wp-element-createelement/#post-10824087)
 * This is dealing with code that is new and there is no documentation or plugins
   that do what I am trying to accomplish as this is for Gutenberg. If there was,
   I would have taken that direction. I cant find any documentation on wp.element.
   createElement. I programmed the code above from the rough example provided by
   the gutenberg plugin documentation and hours of research and testing.
 * I provided the creation of the element and the collection of the data as well
   as the loop I am using. I was simply looking for direction, documentation or 
   description of what needs to be done. If someone provides some small code examples
   I would be happier but from where I am sitting there is no solution in site.
 * In the code I left comments of what I was looking to accomplish. Simply put I
   need to insert more elements into the one above the loop. Is there a proper method
   for inserting elements of that type such as creating an object, array or function?
    -  This reply was modified 7 years, 7 months ago by [cwdg](https://wordpress.org/support/users/cwdg/).
 *  [HelgaTheViking](https://wordpress.org/support/users/helgatheviking/)
 * (@helgatheviking)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/wordpress-inject-element-into-wp-element-createelement/#post-11350843)
 * [@cwdg](https://wordpress.org/support/users/cwdg/) Did you ever make any progress
   with this? I’m looking for direction on how to modify an existing element via`
   wp.hooks.addFilter` in lieu of entirely recreating a replacement element… but
   I don’t have a clue how to modify a react function.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘WordPress Inject element into wp.element.createElement’ is closed to 
new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 3 replies
 * 3 participants
 * Last reply from: [HelgaTheViking](https://wordpress.org/support/users/helgatheviking/)
 * Last activity: [7 years, 3 months ago](https://wordpress.org/support/topic/wordpress-inject-element-into-wp-element-createelement/#post-11350843)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics