Zoom Out: Add a new experiment for zoom out

WordPress · Sep 4, 2024 · 194ed01 · 194ed01
1 parent 04cf579
commit 194ed01
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php
@@ -40,6 +40,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-media-processing', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalMediaProcessing = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoom-out-experiment', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomOutExperiment = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

diff --git a/lib/experiments-page.php b/lib/experiments-page.php
@@ -199,6 +199,19 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-zoom-out-experiment',
+		__( 'Zoom out experiments', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable zoom out experiments; shows zoom out in the device preview and other zoom out experiments.', 'gutenberg' ),
+			'id'    => 'gutenberg-zoom-out-experiment',
+		)
+	);
+
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
@@ -112,22 +112,24 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			label: __( 'Desktop' ),
 			icon: desktop,
 		},
-		{
+	];
+	if ( window.__experimentalEnableZoomOutExperiment ) {
+		choices.push( {
 			value: 'ZoomOut',
 			label: __( 'Desktop (50%)' ),
 			icon: desktop,
-		},
-		{
-			value: 'Tablet',
-			label: __( 'Tablet' ),
-			icon: tablet,
-		},
-		{
-			value: 'Mobile',
-			label: __( 'Mobile' ),
-			icon: mobile,
-		},
-	];
+		} );
+	}
+	choices.push( {
+		value: 'Tablet',
+		label: __( 'Tablet' ),
+		icon: tablet,
+	} );
+	choices.push( {
+		value: 'Mobile',
+		label: __( 'Mobile' ),
+		icon: mobile,
+	} );
 
 	const previewValue = editorMode === 'zoom-out' ? 'ZoomOut' : deviceType;