diff --git a/inc/customizer/class-customize-field.php b/inc/customizer/class-customize-field.php
index 21cc432a..ca6cae5d 100644
--- a/inc/customizer/class-customize-field.php
+++ b/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
diff --git a/inc/customizer/controls/class-wrapper-control.php b/inc/customizer/controls/class-wrapper-control.php
new file mode 100644
index 00000000..0564fc50
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/inc/customizer/customizer-helpers.php b/inc/customizer/customizer-helpers.php
index 4e65308a..71488069 100644
--- a/inc/customizer/customizer-helpers.php
+++ b/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';
diff --git a/src/components/GeneratePressControl.js b/src/components/GeneratePressControl.js
index 3bee0f60..69770483 100644
--- a/src/components/GeneratePressControl.js
+++ b/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.
 		},
 
 		/**
diff --git a/src/customizer-controls/color-picker/GeneratePressColorControlForm.js b/src/customizer-controls/color-picker/GeneratePressColorControlForm.js
index a437cc60..b0bf53cc 100644
--- a/src/customizer-controls/color-picker/GeneratePressColorControlForm.js
+++ b/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 );
diff --git a/src/customizer-controls/font-manager/GeneratePressFontManagerControlForm.js b/src/customizer-controls/font-manager/GeneratePressFontManagerControlForm.js
index 74fe9495..d1d512ea 100644
--- a/src/customizer-controls/font-manager/GeneratePressFontManagerControlForm.js
+++ b/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',
 		[
diff --git a/src/customizer-controls/font-manager/GeneratePressTypographyControlForm.js b/src/customizer-controls/font-manager/GeneratePressTypographyControlForm.js
index 3bca165e..e32b054d 100644
--- a/src/customizer-controls/font-manager/GeneratePressTypographyControlForm.js
+++ b/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 ) => {
diff --git a/src/customizer-controls/title/GeneratePressTitleControl.js b/src/customizer-controls/title/GeneratePressTitleControl.js
index 414602c3..90768834 100644
--- a/src/customizer-controls/title/GeneratePressTitleControl.js
+++ b/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.
 	},
 
 	/**
diff --git a/src/customizer-controls/wrapper/GeneratePressWrapperControl.js b/src/customizer-controls/wrapper/GeneratePressWrapperControl.js
deleted file mode 100644
index c91cf1ab..00000000
--- a/src/customizer-controls/wrapper/GeneratePressWrapperControl.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import render from '../../utils/react-render';
-import classnames from 'classnames';
-
-import {
-	unmountComponentAtNode,
-} from '@wordpress/element';
-
-/**
- * GeneratePressColorControl.
- *
- * @class
- * @augments wp.customize.Control
- * @augments wp.customize.Class
- */
-const GeneratePressWrapperControl = wp.customize.Control.extend( {
-
-	/**
-	 * After control has been first rendered, start re-rendering when setting changes.
-	 *
-	 * React is able to be used here instead of the wp.customize.Element abstraction.
-	 *
-	 * @return {void}
-	 */
-	ready: function ready() {
-		const control = this;
-
-		control.renderContent();
-	},
-
-	/**
-	 * Embed the control in the document.
-	 *
-	 * Overrides the embed() method to embed the control
-	 * when the section is expanded instead of on load.
-	 *
-	 * @since 1.0.0
-	 * @return {void}
-	 */
-	embed() {
-		const control = this;
-		const sectionId = control.section();
-
-		if ( ! sectionId ) {
-			return;
-		}
-
-		wp.customize.section( sectionId, function( section ) {
-			section.expanded.bind( function( expanded ) {
-				if ( expanded ) {
-					control.actuallyEmbed();
-				}
-			} );
-		} );
-	},
-
-	/**
-	 * Deferred embedding of control.
-	 *
-	 * This function is called in Section.onChangeExpanded() so the control
-	 * will only get embedded when the Section is first expanded.
-	 *
-	 * @since 1.0.0
-	 */
-	actuallyEmbed() {
-		const control = this;
-
-		if ( 'resolved' === control.deferred.embedded.state() ) {
-			return;
-		}
-
-		control.renderContent();
-		control.deferred.embedded.resolve(); // Triggers control.ready().
-	},
-
-	/**
-	 * Initialize.
-	 *
-	 * @param {string} id     - Control ID.
-	 * @param {Object} params - Control params.
-	 */
-	initialize( id, params ) {
-		const control = this;
-
-		// Bind functions to this control context for passing as React props.
-		control.setNotificationContainer = control.setNotificationContainer.bind( control );
-
-		wp.customize.Control.prototype.initialize.call( control, id, params );
-
-		// The following should be eliminated with <https://core.trac.wordpress.org/ticket/31334>.
-		function onRemoved( removedControl ) {
-			if ( control === removedControl ) {
-				control.destroy();
-				control.container.remove();
-				wp.customize.control.unbind( 'removed', onRemoved );
-			}
-		}
-		wp.customize.control.bind( 'removed', onRemoved );
-	},
-
-	/**
-	 * Set notification container and render.
-	 *
-	 * This is called when the React component is mounted.
-	 *
-	 * @param {Element} element - Notification container.
-	 * @return {void}
-	 */
-	setNotificationContainer: function setNotificationContainer( element ) {
-		const control = this;
-		control.notifications.container = jQuery( element );
-		control.notifications.render();
-	},
-
-	/**
-	 * Render the control into the DOM.
-	 *
-	 * This is called from the Control#embed() method in the parent class.
-	 *
-	 * @return {void}
-	 */
-	renderContent: function renderContent() {
-		const control = this;
-		const choices = control.params.choices;
-
-		const form = () => {
-			return (
-				<div
-					className={ classnames( {
-						'generate-customize-control-wrapper': true,
-						[ choices.class ]: !! choices.class,
-					} ) }
-					id={ choices.id }
-					data-wrapper-type={ choices.type }
-				>
-					{ choices.items.map( ( wrapper ) => {
-						return <div key={ wrapper } id={ wrapper + '--wrapper' }></div>;
-					} ) }
-				</div>
-			);
-		};
-
-		if ( control.params.choices.toggleId ) {
-			control.container[ 0 ].setAttribute( 'data-toggleId', control.params.choices.toggleId );
-		}
-
-		render(
-			form(),
-			control.container[ 0 ]
-		);
-	},
-
-	/**
-	 * Handle removal/de-registration of the control.
-	 *
-	 * This is essentially the inverse of the Control#embed() method.
-	 *
-	 * @see https://core.trac.wordpress.org/ticket/31334
-	 * @return {void}
-	 */
-	destroy: function destroy() {
-		const control = this;
-
-		// Garbage collection: undo mounting that was done in the embed/renderContent method.
-		unmountComponentAtNode( control.container[ 0 ] );
-
-		// Call destroy method in parent if it exists (as of #31334).
-		if ( wp.customize.Control.prototype.destroy ) {
-			wp.customize.Control.prototype.destroy.call( control );
-		}
-	},
-} );
-
-export default GeneratePressWrapperControl;
diff --git a/src/customizer-controls/wrapper/index.js b/src/customizer-controls/wrapper/index.js
deleted file mode 100644
index db38d667..00000000
--- a/src/customizer-controls/wrapper/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import GeneratePressWrapperControl from './GeneratePressWrapperControl';
-
-// Register control type with Customizer.
-wp.customize.controlConstructor[ 'generate-wrapper-control' ] = GeneratePressWrapperControl;
diff --git a/src/customizer-controls/wrapper/style.scss b/src/customizer-controls/wrapper/style.scss
deleted file mode 100644
index 0af0756b..00000000
--- a/src/customizer-controls/wrapper/style.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.generate-customize-control-title {
-	display: flex;
-	justify-content: space-between;
-
-	button.generate-customize-control-title--label {
-		font-size: 16px;
-		font-weight: 500;
-		padding: 0;
-		height: auto;
-	}
-
-	button.generate-customize-control-title--toggle {
-		svg {
-			width: 1em;
-			height: 1em;
-		}
-	}
-
-	h3 {
-		font-size: 16px !important;
-		font-weight: 500;
-		margin-bottom: 0;
-	}
-}
diff --git a/src/customizer.js b/src/customizer.js
index 1d71f0bc..30ad51f4 100644
--- a/src/customizer.js
+++ b/src/customizer.js
@@ -3,7 +3,6 @@ import './customizer-controls/color-picker';
 import './customizer-controls/font-manager';
 import './customizer-controls/color-manager';
 import './customizer-controls/title';
-import './customizer-controls/wrapper';
 
 document.addEventListener( 'DOMContentLoaded', () => {
 	window.sessionStorage.removeItem( 'generateGlobalColors' );