• 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)
  • 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

    (@cwdg)

    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.

    @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.