Use an experiment toggle

lib/experimental/editor-settings.php

@@ -92,6 +92,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-details-blocks', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableDetailsBlocks = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-image-block-alignment-snapping', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableImageBlockAlignmentSnapping = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

lib/experiments-page.php

@@ -101,6 +101,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-image-block-alignment-snapping',
+		__( 'Image block snapping ', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Test new guides for snapping to alignment sizes when resizing the image block.', 'gutenberg' ),
+			'id'    => 'gutenberg-image-block-alignment-snapping',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

packages/block-editor/src/components/resizable-alignment-controls/index.js

@@ -90,6 +90,11 @@ function ResizableAlignmentControls( {
 		useDispatch( blockEditorStore )
 	);
 
+	const isSnappingExperimentEnabled =
+		window.__experimentalEnableImageBlockAlignmentSnapping;
+	const showAlignmentVisualizer =
+		isSnappingExperimentEnabled && isAlignmentVisualizerVisible;
+
 	const rootClientId = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getBlockRootClientId( clientId ),
@@ -136,7 +141,7 @@ function ResizableAlignmentControls( {
 	return (
 		<>
 			<AnimatePresence>
-				{ isAlignmentVisualizerVisible && (
+				{ showAlignmentVisualizer && (
 					<motion.div
 						initial={ { opacity: 0 } }
 						animate={ { opacity: 1 } }
@@ -171,22 +176,25 @@ function ResizableAlignmentControls( {
 					hideBlockInterface();
 
 					if (
-						resizeDirection === 'right' ||
-						resizeDirection === 'left'
+						isSnappingExperimentEnabled &&
+						( resizeDirection === 'right' ||
+							resizeDirection === 'left' )
 					) {
 						setIsAlignmentVisualizerVisible( true );
 					}
 				} }
 				onResize={ ( event, resizeDirection, resizableElement ) => {
-					// Detect if snapping is happening.
-					const newSnappedAlignment = detectSnapping(
-						resizableElement,
-						resizeDirection
-					);
-					if (
-						newSnappedAlignment?.name !== snappedAlignment?.name
-					) {
-						setSnappedAlignment( newSnappedAlignment );
+					if ( showAlignmentVisualizer ) {
+						// Detect if snapping is happening.
+						const newSnappedAlignment = detectSnapping(
+							resizableElement,
+							resizeDirection
+						);
+						if (
+							newSnappedAlignment?.name !== snappedAlignment?.name
+						) {
+							setSnappedAlignment( newSnappedAlignment );
+						}
 					}
 				} }
 				onResizeStop={ ( ...resizeArgs ) => {
@@ -195,13 +203,15 @@ function ResizableAlignmentControls( {
 					} else {
 						onResizeStop( ...resizeArgs );
 					}
-					setIsAlignmentVisualizerVisible( false );
+					if ( isSnappingExperimentEnabled ) {
+						setIsAlignmentVisualizerVisible( false );
+					}
 					showBlockInterface();
 					setSnappedAlignment( null );
 				} }
 				resizeRatio={ currentAlignment === 'center' ? 2 : 1 }
 			>
-				{ isAlignmentVisualizerVisible && (
+				{ showAlignmentVisualizer && (
 					<>
 						<motion.div
 							layout
@@ -217,7 +227,7 @@ function ResizableAlignmentControls( {
 						</motion.div>
 					</>
 				) }
-				{ ! isAlignmentVisualizerVisible && children }
+				{ ! showAlignmentVisualizer && children }
 			</ResizableBox>
 		</>
 	);