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

		@@ -2,58 +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 ) {
19		-
	18	+function convertKitGutenbergFormBlockRenderPreview(block, props) {
	19	+ // eslint-disable-line no-unused-vars
20	20	// Get selected form.
21		- var form = block.fields.form.data.forms[ props.attributes.form ];
	21	+ const form = block.fields.form.data.forms[props.attributes.form];
22	22
23	23	// If no Form has been selected for display, return a prompt to tell the editor
24	24	// what to do.
25		- if ( typeof form === 'undefined' ) {
26		- return convertKitGutenbergDisplayBlockNotice( block.name, block.gutenberg_help_description );
	25	+ if (typeof form === 'undefined') {
	26	+ return convertKitGutenbergDisplayBlockNotice(
	27	+ block.name,
	28	+ block.gutenberg_help_description
	29	+ );
27	30	}
28	31
29	32	// If the Form is a <script> embed, use the SandBox because the Gutenberg editor
30	33	// will not execute inline scripts.
31		- if ( typeof form.uid !== 'undefined' ) {
	34	+ if (typeof form.uid !== 'undefined') {
32	35	// Determine the Form's format (inline, sticky bar etc).
33	36	// This isn't available in API responses prior to Feb 2022, so check the Form object contains this property.
34		- var format = ( ( typeof form.format !== 'undefined' ) ? form.format : 'inline' ),
35		- html = '<script async data-uid="' + form.uid + '" src="' + form.embed_js + '"></script>',
36		- 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];
37	46
38	47	// If the format isn't inline, define the Gutenberg Block preview's HTML to explain why the Form won't be
39	48	// rendered in the editor i.e because it is a Sticky Bar that is displayed at the top/bottom of the document.
40	49	// Also add a CSS class to the block in the editor, so that resources/backend/css/gutenberg-block-form.css
41	50	// can apply styling/branding to the block.
42		- switch ( format ) {
	51	+ switch (format) {
43	52	case 'modal':
44		- html = block.i18n.gutenberg_form_modal.replace( '%s', form.name );
45		- className.push( 'convertkit--no-content' );
	53	+ html = block.i18n.gutenberg_form_modal.replace('%s', form.name);
	54	+ className.push('convertkit-no-content');
46	55	break;
47	56
48	57	case 'slide in':
49		- html = block.i18n.gutenberg_form_slide_in.replace( '%s', form.name );
50		- 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');
51	63	break;
52	64
53	65	case 'sticky bar':
54		- html = block.i18n.gutenberg_form_sticky_bar.replace( '%s', form.name );
55		- 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');
56	71	break;
57	72	}
58	73
59	74	// Return SandBox.
		@@ -59,30 +74,28 @@
59	74	// Return SandBox.
60	75	return wp.element.createElement(
61	76	'div',
62	77	{
63		- className: className.join( ' ' )
	78	+ className: className.join(' '),
64	79	},
65		- wp.components.SandBox(
66		- {
67		- html: html,
68		- title: block.name,
69		- styles: [
70		- 'body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; text-align:center;}',
71		- ],
72		- }
73		- )
	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	+ })
74	87	);
75	88	}
76	89
77	90	// This is a Legacy Form.
78	91	// Use the block's PHP's render() function by calling the ServerSideRender component.
79		- return wp.element.createElement(
80		- wp.serverSideRender,
81		- {
82		- block: 'convertkit/' + block.name,
83		- attributes: props.attributes,
84		- className: 'convertkit-' + block.name,
85		- }
86		- );
	92	+ return wp.element.createElement(wp.serverSideRender, {
	93	+ block: 'convertkit/' + block.name,
	94	+ attributes: props.attributes,
87	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	+ });
88	100	}
	101	+/* eslint-enable no-unused-vars */