diff --git a/packages/style-engine/class-wp-style-engine-css-declarations.php b/packages/style-engine/class-wp-style-engine-css-declarations.php
index cde6b51355195..3c7ddc1083552 100644
--- a/packages/style-engine/class-wp-style-engine-css-declarations.php
+++ b/packages/style-engine/class-wp-style-engine-css-declarations.php
@@ -26,7 +26,13 @@ class WP_Style_Engine_CSS_Declarations {
 	protected $styles = array();
 
 	/**
-	 * Contructor for this object.
+	 * A white list of CSS custom properties.
+	 * Used to bypass safecss_filter_attr().
+	 */
+	const VALID_CUSTOM_PROPERTIES = array( '--wp--style--block-gap' => 'blockGap' );
+
+	/**
+	 * Constructor for this object.
 	 *
 	 * If a `$styles` array is passed, it will be used to populate
 	 * the initial $styles prop of the object by calling add_declarations().
@@ -92,15 +98,22 @@ public function get_styles() {
 	/**
 	 * Get the CSS styles.
 	 *
+	 * @param boolean $should_prettify Whether to format the output with indents.
+	 *
 	 * @return string The CSS styles.
 	 */
-	public function get_styles_string() {
+	public function get_styles_string( $should_prettify = false ) {
 		$styles_array = $this->get_styles();
 		$styles       = '';
+		$indent       = $should_prettify ? "\t" : '';
+		$newline      = $should_prettify ? "\n" : ' ';
 		foreach ( $styles_array as $property => $value ) {
 			$css = esc_html( safecss_filter_attr( "{$property}: {$value}" ) );
+			// @TODO The safecss_filter_attr_allow_css filter in safecss_filter_attr (kses.php) does not let through CSS custom variables.
+			// So we have to be strict about them here.
+			$css = isset( static::VALID_CUSTOM_PROPERTIES[ $property ] ) ? esc_html( "{$property}: {$value}" ) : esc_html( safecss_filter_attr( "{$property}: {$value}" ) );
 			if ( $css ) {
-				$styles .= $css . '; ';
+				$styles .= "$indent$css;$newline";
 			}
 		}
 		return rtrim( $styles );
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index cc01b137b02bb..1c9bb9ec2eae9 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -30,14 +30,6 @@ class WP_Style_Engine {
 	 */
 	private static $instance = null;
 
-	/**
-	 * A white list of CSS custom properties.
-	 * Used to bypass safecss_filter_attr().
-	 */
-	const VALID_CUSTOM_PROPERTIES = array(
-		'--wp--style--block-gap' => array( 'spacing', 'blockGap' ),
-	);
-
 	/**
 	 * Style definitions that contain the instructions to
 	 * parse/output valid Gutenberg styles from a block's attributes.
@@ -484,14 +476,17 @@ public function generate( $block_styles, $options ) {
 
 		// The return object.
 		$styles_output = array();
-		$css           = $style_rules->get_styles_string();
+		$css           = $style_rules->get_styles_string( $should_prettify );
 
 		// Return css, if any.
 		if ( ! empty( $css ) ) {
 			$styles_output['css'] = $css;
 			// Return an entire rule if there is a selector.
 			if ( $css_selector ) {
-				$styles_output['css'] = $css_selector . ' { ' . $css . ' }';
+				$new_line = $should_prettify ? "\n" : '';
+				$spacer   = $should_prettify ? '' : ' ';
+				// @TODO this is just weird. Simplify?
+				$styles_output['css'] = "$css_selector {{$spacer}{$new_line}{$css}{$new_line}{$spacer}}$new_line";
 			}
 		}