Fix: React Customizer controls

inc/customizer/class-customize-field.php

@@ -53,7 +53,7 @@ public static function add_wrapper( $id, $control_args = array() ) {
 		$control_args['type'] = 'generate-wrapper-control';
 
 		$wp_customize->add_control(
-			new GeneratePress_Customize_React_Control(
+			new GeneratePress_Customize_Wrapper_Control(
 				$wp_customize,
 				$id,
 				$control_args

inc/customizer/controls/class-wrapper-control.php

@@ -0,0 +1,97 @@
+<?php
+/**
+ * Customize API: Wrapper class.
+ *
+ * @package GeneratePress
+ */
+
+/**
+ * Customize Wrapper Control class.
+ *
+ * @see WP_Customize_Control
+ */
+class GeneratePress_Customize_Wrapper_Control extends WP_Customize_Control {
+	/**
+	 * Type.
+	 *
+	 * @access public
+	 * @since 1.0.0
+	 * @var string
+	 */
+	public $type = 'generate-wrapper-control';
+
+	/**
+	 * Refresh the parameters passed to the JavaScript via JSON.
+	 *
+	 * @since 3.4.0
+	 * @uses WP_Customize_Control::to_json()
+	 */
+	public function to_json() {
+		parent::to_json();
+		$this->json['choices'] = $this->choices;
+	}
+
+	/**
+	 * Empty JS template.
+	 *
+	 * @access public
+	 * @since 1.0.0
+	 * @return void
+	 */
+	public function content_template() {}
+
+	/**
+	 * Empty PHP template.
+	 *
+	 * @access public
+	 * @since 1.0.0
+	 * @return void
+	 */
+	public function render_content() {
+		$html_attributes = array(
+			'class' => 'generate-customize-control-wrapper',
+			'id'    => $this->id,
+			'data-wrapper-type' => $this->choices['type'],
+		);
+
+		if ( ! empty( $this->choices['class'] ) ) {
+			$html_attributes['class'] .= ' ' . $this->choices['class'];
+		}
+
+		$attributes_string = '';
+
+		foreach ( $html_attributes as $attribute => $value ) {
+			$attributes_string .= $attribute . '="' . esc_attr( $value ) . '" ';
+		}
+
+		$this->toggleIdScript();
+		?>
+		<div <?php echo $attributes_string; // phpcs:ignore -- Escaped above. ?>>
+			<?php
+			foreach ( $this->choices['items'] as $wrapper ) {
+				?>
+				<div id="<?php echo esc_attr( $wrapper . '--wrapper' ); ?>"></div>
+				<?php
+			}
+			?>
+		</div>
+		<?php
+	}
+
+	/**
+	 * Add a script to toggle the wrapper.
+	 */
+	public function toggleIdScript() {
+		if ( ! empty( $this->choices['toggleId'] ) ) :
+			?>
+			<script>
+				var liElement = document.getElementById( 'customize-control-<?php echo esc_js( $this->id ); ?>' );
+
+				if ( liElement ) {
+					liElement.setAttribute('data-toggleId', '<?php echo esc_attr( $this->choices['toggleId'] ); ?>');
+				}
+			</script>
+			<?php
+		endif;
+	}
+}

inc/customizer/customizer-helpers.php

@@ -17,6 +17,7 @@
 require_once trailingslashit( dirname( __FILE__ ) ) . 'controls/class-color-control.php';
 require_once trailingslashit( dirname( __FILE__ ) ) . 'controls/class-range-control.php';
 require_once trailingslashit( dirname( __FILE__ ) ) . 'controls/class-typography-control.php';
+require_once trailingslashit( dirname( __FILE__ ) ) . 'controls/class-wrapper-control.php';
 require_once trailingslashit( dirname( __FILE__ ) ) . 'controls/class-upsell-section.php';
 require_once trailingslashit( dirname( __FILE__ ) ) . 'controls/class-upsell-control.php';
 require_once trailingslashit( dirname( __FILE__ ) ) . 'controls/class-deprecated.php';

src/components/GeneratePressControl.js

@@ -19,12 +19,7 @@ const GeneratePressControl = {
 		 * @return {void}
 		 */
 		ready: function ready() {
-			const control = this;
-
-			// Re-render control when setting changes.
-			control.setting.bind( () => {
-				control.renderContent();
-			} );
+			// We don't need to re-render the entire control when the setting changes.
 		},
 
 		/**

src/customizer-controls/color-picker/GeneratePressColorControlForm.js

@@ -2,8 +2,15 @@ import './style.scss';
 import { __ } from '@wordpress/i18n';
 import { BaseControl } from '@wordpress/components';
 import ColorPicker from '../../components/color-picker';
+import { useState, useEffect } from '@wordpress/element';
 
 const GeneratePressColorControlForm = ( props ) => {
+	const [ value, setValue ] = useState( '' );
+
+	useEffect( () => {
+		setValue( props.value );
+	}, [] );
+
 	/**
 	 * Save the value when changing the colorpicker.
 	 *
@@ -12,6 +19,7 @@ const GeneratePressColorControlForm = ( props ) => {
 	 */
 	const handleChangeComplete = ( color ) => {
 		wp.customize.control( props.customizerSetting.id ).setting.set( color );
+		setValue( color );
 	};
 
 	const showLabel = ! props.choices.hideLabel || 'undefined' === typeof props.choices.hideLabel;
@@ -32,7 +40,7 @@ const GeneratePressColorControlForm = ( props ) => {
 				}
 
 				<ColorPicker
-					value={ props.value }
+					value={ value }
 					hideLabel={ true }
 					tooltipText={ props?.choices?.tooltip || __( 'Choose Color', 'generatepress' ) }
 					tooltipPosition={ 'top center' }
@@ -42,8 +50,8 @@ const GeneratePressColorControlForm = ( props ) => {
 					showPalette={ true }
 					variableNameIsDisabled={ true }
 					label={ props.label }
-					onChange={ ( value ) => {
-						handleChangeComplete( value );
+					onChange={ ( newValue ) => {
+						handleChangeComplete( newValue );
 					} }
 					onClickReset={ () => {
 						handleChangeComplete( props.defaultValue );

src/customizer-controls/font-manager/GeneratePressFontManagerControlForm.js

@@ -1,7 +1,7 @@
 import './style.scss';
 import googleFonts from './google-fonts.json';
 import getIcon from '../../utils/get-icon';
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import AdvancedSelect from '../../components/advanced-select';
 import { applyFilters } from '@wordpress/hooks';
@@ -14,7 +14,21 @@ import {
 } from '@wordpress/components';
 
 const GeneratePressFontManagerControlForm = ( props ) => {
+	const propValues = props.value;
 	const [ isOpen, setOpen ] = useState( 0 );
+	const [ fonts, setFonts ] = useState( [] );
+
+	useEffect( () => {
+		let newFonts = [];
+
+		if ( Array.isArray( propValues ) ) {
+			newFonts = propValues;
+		} else if ( 'object' === typeof propValues ) {
+			newFonts = Object.values( propValues );
+		}
+
+		setFonts( newFonts );
+	}, [] );
 
 	/**
 	 * Save the value when changing the control.
@@ -23,15 +37,16 @@ const GeneratePressFontManagerControlForm = ( props ) => {
 	 * @return {void}
 	 */
 	const handleChangeComplete = ( value ) => {
+		setFonts( value );
 		wp.customize.control( props.customizerSetting.id ).setting.set( value );
 	};
 
 	const propagateChanges = ( currentFontFamily, previousFontFamily ) => {
 		const typographyControl = wp.customize.control( 'generate_settings[typography]' );
-		const fonts = typographyControl.setting.get();
-		const fontValues = [ ...fonts ];
+		const typographyValues = typographyControl.setting.get();
+		const fontValues = [ ...typographyValues ];
 
-		fonts.forEach( ( typography, index ) => {
+		typographyValues.forEach( ( typography, index ) => {
 			if (
 				( '' === typography.fontFamily && '' === previousFontFamily ) ||
 				typography.fontFamily !== previousFontFamily
@@ -53,13 +68,6 @@ const GeneratePressFontManagerControlForm = ( props ) => {
 		setOpen( 0 );
 	};
 
-	let fonts = props.value || [];
-
-	// Temporary fix for a bug that returned an object instead of an array.
-	if ( 'object' === typeof fonts ) {
-		fonts = Object.values( fonts );
-	}
-
 	const systemFontOptions = applyFilters(
 		'generate_font_manager_system_fonts',
 		[

src/customizer-controls/font-manager/GeneratePressTypographyControlForm.js

@@ -10,7 +10,6 @@ const GeneratePressTypographyControlForm = ( props ) => {
 	const propValues = props.value;
 	const [ fonts, setFonts ] = useState( [] );
 	const [ isOpen, setOpen ] = useState( 0 );
-	const [ isUserInteraction, setIsUserInteraction ] = useState( false );
 
 	useEffect( () => {
 		let newFonts = [];
@@ -25,14 +24,6 @@ const GeneratePressTypographyControlForm = ( props ) => {
 		migrateOldUnits( newFonts );
 	}, [] );
 
-	useEffect( () => {
-		// Prevents the Customizer iframe refreshing on load.
-		const transport = isUserInteraction ? 'refresh' : 'postMessage';
-
-		wp.customize.control( props.customizerSetting.id ).setting.transport = transport;
-		wp.customize.control( props.customizerSetting.id ).setting.set( fonts );
-	}, [ fonts ] );
-
 	/**
 	 * Migrate our number fields with separate units to single values with
 	 * the units included.
@@ -64,8 +55,8 @@ const GeneratePressTypographyControlForm = ( props ) => {
 	const toggleClose = () => setOpen( 0 );
 
 	const updateFonts = ( fontValues ) => {
-		setIsUserInteraction( true );
 		setFonts( fontValues );
+		wp.customize.control( props.customizerSetting.id ).setting.set( fontValues );
 	};
 
 	const deleteFont = ( fontIndex ) => {

src/customizer-controls/title/GeneratePressTitleControl.js

@@ -27,9 +27,7 @@ const GeneratePressToggleControl = wp.customize.Control.extend( {
 	 * @return {void}
 	 */
 	ready: function ready() {
-		const control = this;
-
-		control.renderContent();
+		// We don't need to re-render the entire control when the setting changes.
 	},
 
 	/**