← All changes | resources/backend/js/gutenberg-block-form.js +50 -59 2.2.4 → 3.4.4 View file →

		@@ -2,80 +2,73 @@
2	2	* Form Block specific functions for Gutenberg.
3	3	*
4	4	* @since 1.9.6.5
5	5	*
6		- * @package ConvertKit
7	6	* @author ConvertKit
8	7	*/
9	8
	9	+/* eslint-disable no-unused-vars */
10	10	/**
11	11	* Custom callback function to render the ConvertKit Form Block preview in the Gutenberg Editor.
12	12	*
13	13	* @since 1.9.6.5
14	14	*
15		- * @param object block Block
16		- * @param obejct props Block properties
	15	+ * @param {Object} block Block.
	16	+ * @param {Object} props Block properties.
17	17	*/
18		-function convertKitGutenbergFormBlockRenderPreview( block, props ) {
	18	+function convertKitGutenbergFormBlockRenderPreview(block, props) {
	19	+ // eslint-disable-line no-unused-vars
	20	+ // Get selected form.
	21	+ const form = block.fields.form.data.forms[props.attributes.form];
19	22
20		- // If no API Key has been defined in the Plugin, return a prompt to tell the editor
	23	+ // If no Form has been selected for display, return a prompt to tell the editor
21	24	// what to do.
22		- if ( ! block.has_api_key ) {
23		- return convertKitGutenbergDisplayBlockNoticeWithLink(
	25	+ if (typeof form === 'undefined') {
	26	+ return convertKitGutenbergDisplayBlockNotice(
24	27	block.name,
25		- block.no_api_key.notice,
26		- block.no_api_key.link,
27		- block.no_api_key.link_text
	28	+ block.gutenberg_help_description
28	29	);
29	30	}
30	31
31		- // If no Forms exist in ConvertKit, return a prompt to tell the editor
32		- // what to do.
33		- if ( ! block.has_resources ) {
34		- return convertKitGutenbergDisplayBlockNoticeWithLink(
35		- block.name,
36		- block.no_resources.notice,
37		- block.no_resources.link,
38		- block.no_resources.link_text
39		- );
40		- }
41		-
42		- // Get selected form.
43		- var form = block.fields.form.data.forms[ props.attributes.form ];
44		-
45		- // If no Form has been selected for display, return a prompt to tell the editor
46		- // what to do.
47		- if ( typeof form === 'undefined' ) {
48		- return convertKitGutenbergDisplayBlockNotice( block.name, block.gutenberg_help_description );
49		- }
50		-
51	32	// If the Form is a <script> embed, use the SandBox because the Gutenberg editor
52	33	// will not execute inline scripts.
53		- if ( typeof form.uid !== 'undefined' ) {
	34	+ if (typeof form.uid !== 'undefined') {
54	35	// Determine the Form's format (inline, sticky bar etc).
55	36	// This isn't available in API responses prior to Feb 2022, so check the Form object contains this property.
56		- var format = ( ( typeof form.format !== 'undefined' ) ? form.format : 'inline' ),
57		- html = '<script async data-uid="' + form.uid + '" src="' + form.embed_js + '"></script>',
58		- className = [ 'convertkit-' + block.name ];
	37	+ const format =
	38	+ typeof form.format !== 'undefined' ? form.format : 'inline';
	39	+ let html =
	40	+ '<script async data-uid="' +
	41	+ form.uid +
	42	+ '" src="' +
	43	+ form.embed_js +
	44	+ '"></script>';
	45	+ const className = ['convertkit-' + block.name];
59	46
60	47	// If the format isn't inline, define the Gutenberg Block preview's HTML to explain why the Form won't be
61	48	// rendered in the editor i.e because it is a Sticky Bar that is displayed at the top/bottom of the document.
62	49	// Also add a CSS class to the block in the editor, so that resources/backend/css/gutenberg-block-form.css
63	50	// can apply styling/branding to the block.
64		- switch ( format ) {
	51	+ switch (format) {
65	52	case 'modal':
66		- html = block.i18n.gutenberg_form_modal.replace( '%s', form.name );
67		- className.push( 'convertkit--no-content' );
	53	+ html = block.i18n.gutenberg_form_modal.replace('%s', form.name);
	54	+ className.push('convertkit-no-content');
68	55	break;
69	56
70	57	case 'slide in':
71		- html = block.i18n.gutenberg_form_slide_in.replace( '%s', form.name );
72		- className.push( 'convertkit-no-content' );
	58	+ html = block.i18n.gutenberg_form_slide_in.replace(
	59	+ '%s',
	60	+ form.name
	61	+ );
	62	+ className.push('convertkit-no-content');
73	63	break;
74	64
75	65	case 'sticky bar':
76		- html = block.i18n.gutenberg_form_sticky_bar.replace( '%s', form.name );
77		- className.push( 'convertkit-no-content' );
	66	+ html = block.i18n.gutenberg_form_sticky_bar.replace(
	67	+ '%s',
	68	+ form.name
	69	+ );
	70	+ className.push('convertkit-no-content');
78	71	break;
79	72	}
80	73
81	74	// Return SandBox.
		@@ -81,30 +74,28 @@
81	74	// Return SandBox.
82	75	return wp.element.createElement(
83	76	'div',
84	77	{
85		- className: className.join( ' ' )
	78	+ className: className.join(' '),
86	79	},
87		- wp.components.SandBox(
88		- {
89		- html: html,
90		- title: block.name,
91		- styles: [
92		- 'body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; text-align:center;}',
93		- ],
94		- }
95		- )
	80	+ wp.element.createElement(wp.components.SandBox, {
	81	+ html,
	82	+ title: block.name,
	83	+ styles: [
	84	+ 'body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; text-align:center;} form{margin: 0 auto;}',
	85	+ ],
	86	+ })
96	87	);
97	88	}
98	89
99	90	// This is a Legacy Form.
100	91	// Use the block's PHP's render() function by calling the ServerSideRender component.
101		- return wp.element.createElement(
102		- wp.serverSideRender,
103		- {
104		- block: 'convertkit/' + block.name,
105		- attributes: props.attributes,
106		- className: 'convertkit-' + block.name,
107		- }
108		- );
	92	+ return wp.element.createElement(wp.serverSideRender, {
	93	+ block: 'convertkit/' + block.name,
	94	+ attributes: props.attributes,
109	95
	96	+ // This is only output in the Gutenberg editor, so must be slightly different from the inner class name used to
	97	+ // apply styles with i.e. convertkit-block.name.
	98	+ className: 'convertkit-ssr-' + block.name,
	99	+ });
110	100	}
	101	+/* eslint-enable no-unused-vars */