Возврат большого блока HTML в блоке Гутенберга WordPress

Обновление / решение. Я обнаружил, что следующее сработало. Используя литерал шаблона (т.е. окружающий обратными кавычками), я могу вернуть весь HTML-блок как одну переменную, но сохранить его в удобном для обслуживания стиле.

Примечание. Chrome, Safari, Edge и Firefox поддерживают это уже более четырех лет. Однако некоторые браузеры, особенно текущая версия Internet Explorer, не поддерживают это. Вероятно, вы можете облегчить эту проблему, запустив свой скрипт через такой инструмент, как Babel, как часть процесса сборки.

function GetContactUsHtml() {
    return html = `
        <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.   Thank you for taking the time to provide us your feedback.
        </div>
        <div class="form-with-validation-error col-md-12 m-2">
            Unfortunately, an error occurred while submitting this form.
        </div>
    `;
}

wp.blocks.registerBlockType('whrf/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 wp.element.createElement(
            "div",
            {
                dangerouslySetInnerHTML: {
                    __html: GetContactUsHtml()
                }
            }
        );
    }
})