Add: Frontend section presets output.

lib/block-supports/preset-settings.php

@@ -0,0 +1,116 @@
+<?php
+/**
+ * Descendent preset settings block support.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Get the class names used on block level presets.
+ *
+ * @param array $block Block object.
+ * @return string      The unique class name.
+ */
+function gutenberg_get_presets_class_name( $block ) {
+	return 'wp-descendent-presets-' . md5( serialize( $block ) );
+}
+
+/**
+ * Update the block content with block level presets class name.
+ *
+ * @param  string $block_content Rendered block content.
+ * @param  array  $block         Block object.
+ * @return string                Filtered block content.
+ */
+function gutenberg_add_descendent_presets_class( $block_content, $block ) {
+	if ( ! $block_content ) {
+		return $block_content;
+	}
+
+	// return early if the block has not support for settings.
+	$block_type           = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	if ( ! block_has_support( $block_type, array( '__experimentalSettings' ), false ) ) {
+		return $block_content;
+	}
+
+	// return early if no settings are found on the block attributes.
+	$block_settings = _wp_array_get( $block, array( 'attrs', 'settings'), null );
+	if ( empty( $block_settings ) ) {
+		return $block_content;
+	}
+
+	$class_name = gutenberg_get_presets_class_name( $block );
+
+	// Like the layout hook this assumes the hook only applies to blocks with a single wrapper.
+	// Retrieve the opening tag of the first HTML element.
+	$html_element_matches = array();
+	preg_match( '/<[^>]+>/', $block_content, $html_element_matches, PREG_OFFSET_CAPTURE );
+	$first_element = $html_element_matches[0][0];
+	// If the first HTML element has a class attribute just add the new class
+	// as we do on layout and duotone.
+	if ( strpos( $first_element, 'class="' ) !== false ) {
+		$content = preg_replace(
+			'/' . preg_quote( 'class="', '/' ) . '/',
+			'class="' . $class_name . ' ',
+			$block_content,
+			1
+		);
+	} else {
+		// If the first HTML element has no class attribute we should inject the attribute before the attribute at the end.
+		$first_element_offset = $html_element_matches[0][1];
+		$content              = substr_replace( $block_content, ' class="' . $class_name . '"', $first_element_offset + strlen( $first_element ) - 1, 0 );
+	}
+
+	return $content;
+}
+
+/**
+ * Render the block level presets stylesheet.
+ *
+ * @param string|null $pre_render   The pre-rendered content. Default null.
+ * @param array       $block The block being rendered.
+ *
+ * @return null
+ */
+function gutenberg_add_descendent_preset_styles( $pre_render, $block ) {
+	// Return early if the block has not support for descendent block styles.
+	$block_type           = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	if ( ! block_has_support( $block_type, array( '__experimentalSettings' ), false ) ) {
+		return null;
+	}
+
+	// return early if no settings are found on the block attributes.
+	$block_settings = _wp_array_get( $block, array( 'attrs', 'settings' ), null );
+	if ( empty( $block_settings ) ) {
+		return null;
+	}
+
+	$class_name = '.' . gutenberg_get_presets_class_name( $block );
+
+	// Remove any potentially unsafe styles.
+	$theme_json_shape = WP_Theme_JSON_Gutenberg::remove_insecure_properties( array(
+		'version' =>  WP_Theme_JSON_Gutenberg::LATEST_SCHEMA,
+		'styles' => array(
+			'blocks' => $block_styles,
+		),
+		'settings' => $block_settings,
+	) );
+	$theme_json_object = new WP_Theme_JSON_Gutenberg( $theme_json_shape );
+
+	$styles = '';
+
+	// include preset css variables declaration on the stylesheet.
+	$styles .= $theme_json_object->get_scoped_css_variables( $class_name );
+
+	// 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 );
+	}
+
+	return null;
+}
+
+add_filter( 'render_block', 'gutenberg_add_descendent_presets_class', 10, 2 );
+add_filter( 'pre_render_block', 'gutenberg_add_descendent_preset_styles', 10, 2 );

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

@@ -1503,4 +1503,109 @@ protected function get_layout_styles( $block_metadata ) {
 		}
 		return $block_rules;
 	}
+
+		/**
+	 * Function that scopes a selector with another one. This works a bit like
+	 * SCSS nesting except the `&` operator isn't supported.
+	 *
+	 * <code>
+	 * $scope = '.a, .b .c';
+	 * $selector = '> .x, .y';
+	 * $merged = scope_selector( $scope, $selector );
+	 * // $merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
+	 * </code>
+	 *
+	 * @since 5.9.0
+	 *
+	 * @param string $scope    Selector to scope to.
+	 * @param string $selector Original selector.
+	 * @return string Scoped selector.
+	 */
+	public static function scope_selector( $scope, $selector ) {
+		$scopes    = explode( ',', $scope );
+		$selectors = explode( ',', $selector );
+
+		$selectors_scoped = array();
+		foreach ( $scopes as $outer ) {
+			foreach ( $selectors as $inner ) {
+				$outer = trim( $outer );
+				$inner = trim( $inner );
+				if( empty( $outer ) ) {
+					if( empty( $inner ) ) {
+						continue;
+					}
+					$selectors_scoped[] = $inner;
+				} else {
+					if( empty( $inner ) ) {
+						$selectors_scoped[] = $outer;
+					} else {
+						$selectors_scoped[] = $outer . ' ' . $inner;
+					}
+				}
+			}
+		}
+
+		$result = implode( ', ', $selectors_scoped );
+		return $result;
+	}
+
+	/**
+	 * 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 );
+	}
 }

lib/load.php

@@ -126,6 +126,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 // Block supports overrides.
 require __DIR__ . '/block-supports/utils.php';
+require __DIR__ . '/block-supports/preset-settings.php';
 require __DIR__ . '/block-supports/elements.php';
 require __DIR__ . '/block-supports/colors.php';
 require __DIR__ . '/block-supports/typography.php';