Question

按一下按钮（在PHP / Wordpress中），我需要通过Ajax加载Gravity Form，并且感谢Steven Henty，我找到his solution来解决我的问题。稍加修改就可以以模态（lity modal）打开我的表单，并且可以使用！但是...现在，我开始将网站迁移到Wordpress中新的Gutenberg编辑器。因此，我需要一个可以通过Gutenberg块（javascript）代码执行相同操作的系统。

我可以编写一些代码，但我不是硬核，所以如果有人可以告诉我如何实现以前的（基于PHP）“系统”，例如实现为（基于javascript）Gutenberg Button-block的方法，我会很乐意此代码。这是当前（工作）按钮的代码：

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

我正在使用出色的create-guten-blocks作为样板，并且我的模板块文件如下所示：

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

希望这是有道理的。这是我关于Stackoverflow的第二篇文章，因此，如果您需要更多详细信息，请告诉我...真希望你们中的一个熟练人员能够解决这个问题。谢谢！

挑战：通过AJAX加载重力表单-将可工作的PHP解决方案更改为古腾堡代码

0 个答案: