Wsrtjtyk

I had the need to load a Gravity Form through Ajax on a push of a button (in PHP/Wordpress), and thanks to Steven Henty, I've found his solution to fix my issue. Modified it at little to open my form in a modal (lity modal), and it works!
However.... Now I started to migrate my site to the new Gutenberg editor in Wordpress. So I need a system that can do the same from a Gutenberg block (javascript) code.

I can code some, but I am not hardcore, so would love if anyone could tell me how to implement this former (PHP based) 'system', for instance to a (javascript based) Gutenberg Button-block, that implements this code. Here is the code for the current (working) button:

button.php

// Hook up the AJAX ajctions

add_action('wp_ajax_nopriv_gf_button_get_form', 'gf_button_ajax_get_form');

add_action('wp_ajax_gf_button_get_form', 'gf_button_ajax_get_form');



// Add the "button" action to the gravityforms shortcode

// e.g. [gravityforms action="button" id=1 text="button text"]

add_filter('gform_shortcode_button', 'gf_button_shortcode', 10, 3);



function gf_button_shortcode($shortcode_string, $attributes, $content)

{

    $a = shortcode_atts(array(

        'id' => 0,

        'text' => 'Open',

        'button_class' => '',

        'button_style' => ''

    ), $attributes);



    $form_id = absint($a['id']);

    $curr_lang = ICL_LANGUAGE_CODE;



    if ($form_id < 1) {

        return '<div>Missing the ID attribute.</div>';

}

gravity_form_enqueue_scripts($form_id, true);

$ajax_url = admin_url('admin-ajax.php');

$html = sprintf('<button id="gf_button_get_form_%d" class="gf_button_get_form %s" style="%s"><div class="gf_button_get_form-label">%s</div></button>', $form_id, $a['button_class'], $a['button_style'], $form_id, $a['text']);

$html .= "<script>

            (function (SHFormLoader, $) { 

            $('#gf_button_get_form_{$form_id}').click(function(){

                $.ajaxSetup({

                    beforeSend: function() {

                        $('.spinner_{$form_id}').addClass('active');

                    },

                    complete: function() {

                        $('.spinner_{$form_id}').removeClass('active');

                        var fieldsWithHiddenLabels = $('.gfield.hidden-label');



                        if (fieldsWithHiddenLabels.length) {

                            fieldsWithHiddenLabels.each(function(){

                                if($(this).hasClass('gfield_contains_required')){

                                    $(this).find('.ginput_container label').prepend('<span class="gfield_required">*</span>');

                                }

                            }); 

                        }

                    }                        

                });

                $.get('{$ajax_url}?lang={$curr_lang}&action=gf_button_get_form&form_id={$form_id}',function(response){

                    lity(response);

                    if(window['gformInitDatepicker']) {gformInitDatepicker();}

                });                 

            });

        }(window.SHFormLoader = window.SHFormLoader || {}, jQuery));

        </script>";

return $html;



}



function gf_button_ajax_get_form() {

    $form_id = isset($_GET['form_id']) ? absint($_GET['form_id']) : 0;

    gravity_form($form_id, true, false, false, false, true);

    die();

}

I am using the excellent create-guten-blocks as boilerplate, and my template block file looks like this:

form-button.js

import './style.scss';

import './editor.scss';



const { __ } = wp.i18n;

const { registerBlockType } = wp.blocks;



registerBlockType( 'my-blocks/form-button', {

    title: __( 'Form Button' ),

    icon: heart,

    category: 'common',

    keywords: [

        __( 'my-blocks — Form Button' )

    ],







    edit: function( props ) {

    return (

        <div className={ props.className }>

            <p>— Hello from the backend.</p>

            <p>

                CGB BLOCK: <code>configit-blocks</code> is a new Gutenberg block

            </p>

            <p>

                It was created via{ ' ' }

                <code>

                    <a href="https://github.com/ahmadawais/create-guten-block">

                        create-guten-block

                    </a>

                </code>.

            </p>

        </div>

    );

},

save: function( props ) {

    return (

        <div>

            <p>— Hello from the frontend.</p>

            <p>

                CGB BLOCK: <code>configit-blocks</code> is a new Gutenberg block.

            </p>

            <p>

                It was created via{ ' ' }

                <code>

                    <a href="https://github.com/ahmadawais/create-guten-block">

                        create-guten-block

                    </a>

                </code>.

            </p>

        </div>

    );

},

} );

Hope this makes sense. This is my second post on Stackoverflow, so please let me know if you need more details ... Really hope one of you skilled people can handle this. Thanks!