在WordPress Gutenberg块中返回HTML的大块

Question

我正在构建古腾堡街区，但遇到了问题。

我想返回一大段HTML，但收到有关意外

是否有一种方法可以从Gutenberg块中返回较大的HTML块，而不用转义所有内容或在Javascript中逐个元素地构建它？

这是我的示例代码：

wp.blocks.registerBlockType('myforms/contactus', {
    title: 'Contact Us',
    icon: 'smiley',
    category: 'widgets',

    edit: function (props) {
        return React.createElement(
            "div",
            null,
            "Contact Us form will be rendered here."
        );
    },
    save: function (props) {
        return (
            <div>
               <form method="post" action="#" id="ContactForm" class="contact-form form-with-validation col-md-12 m-2">
                    <div class="mt-3 mb-3">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="FirstName" class="sr-only">First name</label>
                                <input type="text" id="FirstName" name="FirstName" placeholder="First name" class="form-control" required data-rule-required="true" data-msg-required="Please enter your first name." />
                            </div>
                            <div class="form-group col-md-6">
                                <label for="LastName" class="sr-only">Last name</label>
                                <input type="text" id="LastName" name="LastName" placeholder="Last name" class="form-control" required data-rule-required="true" data-msg-required="Please enter your last name."/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="Email" class="sr-only">Email</label>
                            <input type="email" id="Email" name="Email" placeholder="Email" class="form-control" required data-rule-required="true" data-msg-required="Please enter your email address." data-rule-email="true" data-msg-email="Please enter a valid email address." />
                        </div>
                        <div class="form-group">
                            <label for="Subject" class="sr-only">Subject</label>
                            <input type="text" id="Subject" name="Subject" placeholder="Subject" class="form-control" required data-rule-required="true" data-msg-required="Please enter a message subject." />
                        </div>
                        <div class="form-group">
                            <label for="Message" class="sr-only">Your message...</label>
                            <textarea rows="5" cols="20" id="Message" name="Message" placeholder="Your message..." class="form-control" required data-rule-required="true" data-msg-required="Please enter a message."></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="hidden" id="FormType" name="FormType" value="ContactForm" />
                        <button type="submit" id="SendButton" class="btn btn-primary">Send message</button>
                    </div>
                </form>
                <div class="form-with-validation-success col-md-12 m-2">
                    Your message has been successfully sent.
                </div>
                <div class="form-with-validation-error col-md-12 m-2">
                    Unfortunately, an error occurred while submitting this form.  
                </div>
            </div>

        );
    }
})

Answer 1

大量用于将HTML转换为JS字符串的在线工具。

这很好用：https://codebeautify.org/string-builder