Add: Frontend section presets output

lib/block-supports/descendent-block-styles.php

@@ -85,6 +85,8 @@ function gutenberg_render_descendent_block_styles_support_styles( $pre_render, $
 		return null;
 	}
 
+	$block_settings = _wp_array_get( $block, array( 'attrs', 'settings' ), null );
+
 	$class_name = gutenberg_get_block_styles_class_name( $block );
 
 	// Remove any potentially unsafe styles.
@@ -93,17 +95,25 @@ function gutenberg_render_descendent_block_styles_support_styles( $pre_render, $
 		'styles' => array(
 			'blocks' => $block_styles,
 		),
+		'settings' => $block_settings,
 	) );
+	$theme_json_object = new WP_Theme_JSON_Gutenberg( $theme_json_shape );
 
 	$styles = '';
 
-	$theme_json_object = new WP_Theme_JSON_Gutenberg( $theme_json_shape );
-	$block_nodes       = $theme_json_object->get_styles_block_nodes();
+	// include preset css variables declaration on the stylesheet.
+	$styles .= $theme_json_object->get_scoped_css_variables( $class_name );
+
+	// include block styles on the stylesheet.
+	$block_nodes = $theme_json_object->get_styles_block_nodes();
 	foreach ( $block_nodes as $block_node ) {
 		$block_node['selector'] = WP_Theme_JSON_Gutenberg::scope_selector( '.' . $class_name, $block_node['selector'] );
 		$styles .= $theme_json_object->get_styles_for_block( $block_node );
 	}
 
+	// include preset css classes on the the stylesheet.
+	$styles .= $theme_json_object->get_scoped_css_classes( $class_name );
+
 	if ( ! empty( $styles ) ) {
 		gutenberg_enqueue_block_support_styles( $styles );
 	}

lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

@@ -705,4 +705,64 @@ public static function scope_selector( $scope, $selector ) {
 
 		return implode( ', ', $selectors_scoped );
 	}
+
+	/**
+	 * Function that returns presets css variables scoped to a given selector.
+	 * Similar to get_css_variables but with added scoping.
+	 *
+	 * @param string $scope Selector to scope to.
+	 * @return string A stylesheet with the preset variables.
+	 */
+	public function get_scoped_css_variables( $scope ) {
+		$blocks_metadata    = static::get_blocks_metadata();
+		$setting_nodes      = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
+
+		// the root selector needs to target every possible block selector
+		// in order for the general setting to overwrite any bock specific setting of a parent block or
+		// the site root.
+		$default_selector = ',[class*="wp-block"]';
+		$registry         = WP_Block_Type_Registry::get_instance();
+		$blocks           = $registry->get_all_registered();
+		foreach ( $blocks as $block_name => $block_type ) {
+			if (
+				isset( $block_type->supports['__experimentalSelector'] ) &&
+				is_string( $block_type->supports['__experimentalSelector'] )
+			) {
+				$default_selector .= ','.$block_type->supports['__experimentalSelector'];
+			}
+		}
+
+		// make the root node use the default selector for this section.
+		$setting_nodes[0]['selector'] = $default_selector;
+
+		// scope every selector.
+		foreach( $setting_nodes as &$node) {
+			$node['selector'] = static::scope_selector( $scope, $node['selector'] );
+		}
+
+		$styles = $this->get_css_variables( $setting_nodes, static::VALID_ORIGINS );
+		return $styles;
+	}
+
+	/**
+	 * Function that returns presets css classes scoped to a given selector.
+	 * Similar to get_preset_classes but with added scoping.
+	 *
+	 * @param string $scope Selector to scope to.
+	 * @return string A stylesheet with the preset class rules.
+	 */
+	public function get_scoped_css_classes( $scope ) {
+		$blocks_metadata    = static::get_blocks_metadata();
+		$setting_nodes      = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
+
+		// scope every selector.
+		foreach( $setting_nodes as &$node) {
+			$node['selector'] = static::scope_selector( $scope, $node['selector'] );
+		}
+
+		// make the root node use the scope selector for this section.
+		$setting_nodes[0]['selector'] =  $scope;
+
+		return $this->get_preset_classes( $setting_nodes, static::VALID_ORIGINS );
+	}
 }