Performance settings: migrate ToggleControl to @wordpress/components (#48177)

Direct swap of the three ToggleControl usages on the Jetpack Performance
settings screen off the @automattic/jetpack-components wrapper onto the
upstream @wordpress/components primitive. Preserves click-blocking during
save operations by merging the wrapper's `toggling` prop into the existing
`disabled` prop. Part of #48160.

Author: ilonagl

projects/plugins/jetpack/_inc/client/performance/media.jsx

@@ -1,4 +1,5 @@
-import { ProgressBar, ToggleControl, getRedirectUrl } from '@automattic/jetpack-components';
+import { ProgressBar, getRedirectUrl } from '@automattic/jetpack-components';
+import { ToggleControl } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Component } from 'react';
@@ -114,9 +115,12 @@ class Media extends Component {
 						</ModuleToggle>
 						<FormFieldset>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								id="videopress-site-privacy"
-								disabled={ ! this.props.getOptionValue( 'videopress' ) }
-								toggling={ this.props.isSavingAnyOption( 'videopress_private_enabled_for_site' ) }
+								disabled={
+									! this.props.getOptionValue( 'videopress' ) ||
+									this.props.isSavingAnyOption( 'videopress_private_enabled_for_site' )
+								}
 								checked={ this.props.getOptionValue( 'videopress_private_enabled_for_site' ) }
 								onChange={ this.togglePrivacySetting }
 								label={

projects/plugins/jetpack/_inc/client/performance/search.jsx

@@ -1,4 +1,5 @@
-import { ToggleControl, getRedirectUrl } from '@automattic/jetpack-components';
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Fragment, useCallback, useEffect } from 'react';
 import { connect } from 'react-redux';
@@ -92,9 +93,9 @@ function Search( props ) {
 
 						<FormFieldset>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								checked={ isModuleEnabled && isInstantSearchEnabled }
-								disabled={ togglingModule || ! props.hasInstantSearch }
-								toggling={ togglingInstantSearch }
+								disabled={ togglingModule || ! props.hasInstantSearch || togglingInstantSearch }
 								onChange={ toggleInstantSearch }
 								label={
 									<span className="jp-form-toggle-explanation">

projects/plugins/jetpack/_inc/client/performance/speed-up-site.jsx

@@ -1,4 +1,5 @@
-import { ToggleControl, getRedirectUrl } from '@automattic/jetpack-components';
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { ToggleControl } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Component } from 'react';
 import { connect } from 'react-redux';
@@ -248,10 +249,10 @@ const SpeedUpSite = withModuleSettingsFormHelpers(
 								</p>
 								{ canAppearInSearch && (
 									<ToggleControl
+										__nextHasNoMarginBottom
 										checked={ siteAcceleratorStatus }
-										toggling={ togglingSiteAccelerator }
 										onChange={ this.handleSiteAcceleratorChange }
-										disabled={ ! canDisplaySiteAcceleratorSettings }
+										disabled={ ! canDisplaySiteAcceleratorSettings || togglingSiteAccelerator }
 										label={
 											<span className="jp-form-toggle-explanation">
 												{ __( 'Enable site accelerator', 'jetpack' ) }

projects/plugins/jetpack/changelog/issue-48160-migrate-performance-toggle-control

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Performance settings: import ToggleControl from @wordpress/components instead of @automattic/jetpack-components.