diff --git a/lib/block-supports/border.php b/lib/block-supports/border.php
index 34c51eca868811..9f9053cf970052 100644
--- a/lib/block-supports/border.php
+++ b/lib/block-supports/border.php
@@ -119,7 +119,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
 
 	// Collect classes and styles.
 	$attributes = array();
-	$styles     = gutenberg_style_engine_generate( array( 'border' => $border_block_styles ), array( 'css_vars' => true ) );
+	$styles     = gutenberg_style_engine_generate( array( 'border' => $border_block_styles ) );
 
 	if ( ! empty( $styles['classnames'] ) ) {
 		$attributes['class'] = $styles['classnames'];
diff --git a/lib/block-supports/colors.php b/lib/block-supports/colors.php
index fe51ffede8d49a..45e72de2fa27b3 100644
--- a/lib/block-supports/colors.php
+++ b/lib/block-supports/colors.php
@@ -102,7 +102,7 @@ function gutenberg_apply_colors_support( $block_type, $block_attributes ) {
 	}
 
 	$attributes = array();
-	$styles     = gutenberg_style_engine_generate( array( 'color' => $color_block_styles ) );
+	$styles     = gutenberg_style_engine_generate( array( 'color' => $color_block_styles ), array( 'convert_vars_to_classnames' => true ) );
 
 	if ( ! empty( $styles['classnames'] ) ) {
 		$attributes['class'] = $styles['classnames'];
diff --git a/lib/block-supports/elements.php b/lib/block-supports/elements.php
index 9230fd48b1c102..ecbc4b1f4063d5 100644
--- a/lib/block-supports/elements.php
+++ b/lib/block-supports/elements.php
@@ -109,7 +109,6 @@ function gutenberg_render_elements_support_styles( $pre_render, $block ) {
 			$link_block_styles,
 			array(
 				'selector' => ".$class_name a",
-				'css_vars' => true,
 			)
 		);
 
diff --git a/lib/block-supports/spacing.php b/lib/block-supports/spacing.php
index 8366b9775b7488..12959435bc6ae5 100644
--- a/lib/block-supports/spacing.php
+++ b/lib/block-supports/spacing.php
@@ -57,10 +57,7 @@ function gutenberg_apply_spacing_support( $block_type, $block_attributes ) {
 	$spacing_block_styles            = array();
 	$spacing_block_styles['padding'] = $has_padding_support && ! $skip_padding ? _wp_array_get( $block_styles, array( 'spacing', 'padding' ), null ) : null;
 	$spacing_block_styles['margin']  = $has_margin_support && ! $skip_margin ? _wp_array_get( $block_styles, array( 'spacing', 'margin' ), null ) : null;
-	$styles                          = gutenberg_style_engine_generate(
-		array( 'spacing' => $spacing_block_styles ),
-		array( 'css_vars' => true )
-	);
+	$styles                          = gutenberg_style_engine_generate( array( 'spacing' => $spacing_block_styles ) );
 
 	if ( ! empty( $styles['css'] ) ) {
 		$attributes['style'] = $styles['css'];
diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index 35912e59e3a6bf..14eabac8797a0e 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -141,7 +141,10 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 	}
 
 	$attributes = array();
-	$styles     = gutenberg_style_engine_generate( array( 'typography' => $typography_block_styles ) );
+	$styles     = gutenberg_style_engine_generate(
+		array( 'typography' => $typography_block_styles ),
+		array( 'convert_vars_to_classnames' => true )
+	);
 
 	if ( ! empty( $styles['classnames'] ) ) {
 		$attributes['class'] = $styles['classnames'];
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index 85cbdbf2e0513d..1553200e4dbc9b 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -332,18 +332,18 @@ protected static function get_classnames( $style_value, $style_definition ) {
 	/**
 	 * Returns an array of CSS declarations based on valid block style values.
 	 *
-	 * @param array         $style_value      A single raw style value from the generate() $block_styles array.
-	 * @param array<string> $style_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
-	 * @param boolean       $should_return_css_vars Whether to try to build and return CSS var values.
+	 * @param array         $style_value          A single raw style value from the generate() $block_styles array.
+	 * @param array<string> $style_definition     A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
+	 * @param boolean       $should_skip_css_vars Whether to skip compiling CSS var values.
 	 *
 	 * @return array        An array of CSS definitions, e.g., array( "$property" => "$value" ).
 	 */
-	protected static function get_css_declarations( $style_value, $style_definition, $should_return_css_vars ) {
+	protected static function get_css_declarations( $style_value, $style_definition, $should_skip_css_vars = false ) {
 		if (
 			isset( $style_definition['value_func'] ) &&
 			is_callable( $style_definition['value_func'] )
 		) {
-			return call_user_func( $style_definition['value_func'], $style_value, $style_definition, $should_return_css_vars );
+			return call_user_func( $style_definition['value_func'], $style_value, $style_definition, $should_skip_css_vars );
 		}
 
 		$css_declarations    = array();
@@ -352,7 +352,7 @@ protected static function get_css_declarations( $style_value, $style_definition,
 		// Build CSS var values from var:? values, e.g, `var(--wp--css--rule-slug )`
 		// Check if the value is a CSS preset and there's a corresponding css_var pattern in the style definition.
 		if ( is_string( $style_value ) && strpos( $style_value, 'var:' ) !== false ) {
-			if ( $should_return_css_vars && ! empty( $style_definition['css_vars'] ) ) {
+			if ( ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
 				$css_var = static::get_css_var_value( $style_value, $style_definition['css_vars'] );
 				if ( $css_var ) {
 					$css_declarations[ $style_property_keys['default'] ] = $css_var;
@@ -366,7 +366,7 @@ protected static function get_css_declarations( $style_value, $style_definition,
 		// for styles such as margins and padding.
 		if ( is_array( $style_value ) ) {
 			foreach ( $style_value as $key => $value ) {
-				if ( is_string( $value ) && strpos( $value, 'var:' ) !== false && $should_return_css_vars && ! empty( $style_definition['css_vars'] ) ) {
+				if ( is_string( $value ) && strpos( $value, 'var:' ) !== false && ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
 					$value = static::get_css_var_value( $value, $style_definition['css_vars'] );
 				}
 				$individual_property = sprintf( $style_property_keys['individual'], _wp_to_kebab_case( $key ) );
@@ -387,8 +387,8 @@ protected static function get_css_declarations( $style_value, $style_definition,
 	 *
 	 * @param array $block_styles An array of styles from a block's attributes.
 	 * @param array $options array(
-	 *     'selector' => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
-	 *     'css_vars' => (boolean) Whether to covert CSS values to var() values. If `true` the style engine will try to parse var:? values and output var( --wp--preset--* ) rules. Default is `false`.
+	 *     'selector'                   => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
+	 *     'convert_vars_to_classnames' => (boolean) Whether to skip converting CSS var:? values to var( --wp--preset--* ) values. Default is `false`.
 	 * );.
 	 *
 	 * @return array|null array(
@@ -401,12 +401,12 @@ public function generate( $block_styles, $options ) {
 			return null;
 		}
 
-		$css_declarations       = array();
-		$classnames             = array();
-		$should_return_css_vars = isset( $options['css_vars'] ) && true === $options['css_vars'];
+		$css_declarations     = array();
+		$classnames           = array();
+		$should_skip_css_vars = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];
 
 		// Collect CSS and classnames.
-		foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group_key => $definition_group_style ) {
+		foreach ( static::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group_key => $definition_group_style ) {
 			if ( empty( $block_styles[ $definition_group_key ] ) ) {
 				continue;
 			}
@@ -418,7 +418,7 @@ public function generate( $block_styles, $options ) {
 				}
 
 				$classnames       = array_merge( $classnames, static::get_classnames( $style_value, $style_definition ) );
-				$css_declarations = array_merge( $css_declarations, static::get_css_declarations( $style_value, $style_definition, $should_return_css_vars ) );
+				$css_declarations = array_merge( $css_declarations, static::get_css_declarations( $style_value, $style_definition, $should_skip_css_vars ) );
 			}
 		}
 
@@ -470,11 +470,11 @@ public function generate( $block_styles, $options ) {
 	 *
 	 * @param array   $style_value                    A single raw Gutenberg style attributes value for a CSS property.
 	 * @param array   $individual_property_definition A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.
-	 * @param boolean $should_return_css_vars Whether to try to build and return CSS var values.
+	 * @param boolean $should_skip_css_vars           Whether to skip compiling CSS var values.
 	 *
 	 * @return array An array of CSS definitions, e.g., array( "$property" => "$value" ).
 	 */
-	protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition, $should_return_css_vars ) {
+	protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition, $should_skip_css_vars ) {
 		$css_declarations = array();
 
 		if ( ! is_array( $style_value ) || empty( $style_value ) || empty( $individual_property_definition['path'] ) ) {
@@ -494,11 +494,11 @@ protected static function get_individual_property_css_declarations( $style_value
 
 			// Build a path to the individual rules in definitions.
 			$style_definition_path = array( $definition_group_key, $css_property );
-			$style_definition      = _wp_array_get( self::BLOCK_STYLE_DEFINITIONS_METADATA, $style_definition_path, null );
+			$style_definition      = _wp_array_get( static::BLOCK_STYLE_DEFINITIONS_METADATA, $style_definition_path, null );
 
 			if ( $style_definition && isset( $style_definition['property_keys']['individual'] ) ) {
 				// Set a CSS var if there is a valid preset value.
-				if ( is_string( $value ) && strpos( $value, 'var:' ) !== false && $should_return_css_vars && ! empty( $individual_property_definition['css_vars'] ) ) {
+				if ( is_string( $value ) && strpos( $value, 'var:' ) !== false && ! $should_skip_css_vars && ! empty( $individual_property_definition['css_vars'] ) ) {
 					$value = static::get_css_var_value( $value, $individual_property_definition['css_vars'] );
 				}
 				$individual_css_property                      = sprintf( $style_definition['property_keys']['individual'], $individual_property_key );
diff --git a/packages/style-engine/phpunit/class-wp-style-engine-test.php b/packages/style-engine/phpunit/class-wp-style-engine-test.php
index 9ff42a75f7b449..87bd24efc288e8 100644
--- a/packages/style-engine/phpunit/class-wp-style-engine-test.php
+++ b/packages/style-engine/phpunit/class-wp-style-engine-test.php
@@ -82,7 +82,7 @@ public function data_generate_styles_fixtures() {
 						'style' => 'dotted',
 					),
 				),
-				'options'         => array(),
+				'options'         => array( 'convert_vars_to_classnames' => true ),
 				'expected_output' => array(
 					'css'        => 'border-style: dotted; border-width: 2rem; padding: 0; margin: 111px;',
 					'classnames' => 'has-text-color has-texas-flood-color has-border-color has-cool-caramel-border-color',
@@ -164,7 +164,6 @@ public function data_generate_styles_fixtures() {
 				),
 				'options'         => array(
 					'selector' => '.wp-selector',
-					'css_vars' => true,
 				),
 				'expected_output' => array(
 					'css'        => '.wp-selector { color: var(--wp--preset--color--my-little-pony); }',
@@ -196,7 +195,7 @@ public function data_generate_styles_fixtures() {
 						'fontFamily' => 'var:preset|font-family|totally-awesome',
 					),
 				),
-				'options'         => array(),
+				'options'         => array( 'convert_vars_to_classnames' => true ),
 				'expected_output' => array(
 					'classnames' => 'has-text-color has-copper-socks-color has-background has-splendid-carrot-background-color has-like-wow-dude-gradient-background has-fantastic-font-size has-totally-awesome-font-family',
 				),
@@ -208,7 +207,7 @@ public function data_generate_styles_fixtures() {
 						'text' => 'var:preset|color|teal-independents',
 					),
 				),
-				'options'         => array( 'css_vars' => true ),
+				'options'         => array(),
 				'expected_output' => array(
 					'css'        => 'color: var(--wp--preset--color--teal-independents);',
 					'classnames' => 'has-text-color has-teal-independents-color',
@@ -240,7 +239,7 @@ public function data_generate_styles_fixtures() {
 						'padding' => 'var:preset|spacing|padding',
 					),
 				),
-				'options'         => array(),
+				'options'         => array( 'convert_vars_to_classnames' => true ),
 				'expected_output' => array(
 					'classnames' => 'has-text-color has-background',
 				),
@@ -253,7 +252,7 @@ public function data_generate_styles_fixtures() {
 						'padding' => 'var:preset|spacing|20',
 					),
 				),
-				'options'         => array( 'css_vars' => true ),
+				'options'         => array(),
 				'expected_output' => array(
 					'css' => 'padding: var(--wp--preset--spacing--20); margin: var(--wp--preset--spacing--10);',
 				),
@@ -276,7 +275,7 @@ public function data_generate_styles_fixtures() {
 						),
 					),
 				),
-				'options'         => array( 'css_vars' => true ),
+				'options'         => array(),
 				'expected_output' => array(
 					'css' => 'padding-left: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--40); padding-top: 14px; padding-bottom: 14px; margin-left: var(--wp--preset--spacing--10); margin-right: var(--wp--preset--spacing--20); margin-top: 1rem; margin-bottom: 1rem;',
 				),
@@ -293,7 +292,7 @@ public function data_generate_styles_fixtures() {
 						),
 					),
 				),
-				'options'         => array( 'css_vars' => true ),
+				'options'         => array(),
 				'expected_output' => array(
 					'css' => 'margin-top: 1rem; margin-bottom: 1rem;',
 				),
@@ -338,7 +337,7 @@ public function data_generate_styles_fixtures() {
 						),
 					),
 				),
-				'options'         => array( 'css_vars' => true ),
+				'options'         => array(),
 				'expected_output' => array(
 					'css' => 'border-top-color: #fe1; border-top-width: 1.5rem; border-top-style: dashed; border-right-color: #fe2; border-right-width: 1.4rem; border-right-style: solid; border-bottom-color: #fe3; border-bottom-width: 1.3rem; border-left-color: var(--wp--preset--color--swampy-yellow); border-left-width: 0.5rem; border-left-style: dotted;',
 				),
@@ -368,7 +367,7 @@ public function data_generate_styles_fixtures() {
 						),
 					),
 				),
-				'options'         => array( 'css_vars' => true ),
+				'options'         => array(),
 				'expected_output' => array(
 					'css' => 'border-bottom-color: var(--wp--preset--color--terrible-lizard);',
 				),