Merge branch 'WordPress:trunk' into trunk

Author: karthick-murugan

backport-changelog/6.8/7069.md

@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/8031
+
+* https://github.com/WordPress/gutenberg/pull/66675
+* https://github.com/WordPress/gutenberg/pull/68243

backport-changelog/6.8/8031.md

@@ -37,10 +37,8 @@ The user may change the state of this block by applying different styles: a text
 After some user modifications to the block, the initial markup may become something like this:
 
 ```html
-<p
-	class="has-color has-green-color has-font-size has-small-font-size my-custom-class"
-	style="line-height: 1em"
-></p>
+<p class="has-color has-green-color has-font-size has-small-font-size my-custom-class"
+	style="line-height: 1em"></p>
 ```
 
 This is what we refer to as "user-provided block styles", also know as "local styles" or "serialized styles". Essentially, each tool (font size, color, etc) ends up adding some classes and/or inline styles to the block markup. The CSS styling for these classes is part of the block, global, or theme stylesheets.
@@ -125,7 +123,7 @@ The block supports API only serializes the font size value to the wrapper, resul
 
 This is an active area of work you can follow [in the tracking issue](https://github.com/WordPress/gutenberg/issues/38167). The linked proposal is exploring a different way to serialize the user changes: instead of each block support serializing its own data (for example, classes such as `has-small-font-size`, `has-green-color`) the idea is the block would get a single class instead (for example, `wp-style-UUID`) and the CSS styling for that class will be generated in the server by WordPress.
 
-While work continues in that proposal, there's an escape hatch, an experimental option block authors can use. Any block support can skip the serialization to HTML markup by using `skipSerialization`. For example:
+While work continues in that proposal, there's an escape hatch, an experimental option block authors can use. Any block support can skip the serialization to HTML markup by using `__experimentalSkipSerialization`. For example:
 
 ```json
 {
@@ -134,15 +132,15 @@ While work continues in that proposal, there's an escape hatch, an experimental
 	"supports": {
 		"typography": {
 			"fontSize": true,
-			"skipSerialization": true
+			"__experimentalSkipSerialization": true
 		}
 	}
 }
 ```
 
 This means that the typography block support will do all of the things (create a UI control, bind the block attribute to the control, etc) except serializing the user values into the HTML markup. The classes and inline styles will not be automatically applied to the wrapper and it is the block author's responsibility to implement this in the `edit`, `save`, and `render_callback` functions. See [this issue](https://github.com/WordPress/gutenberg/issues/28913) for examples of how it was done for some blocks provided by WordPress.
 
-Note that, if `skipSerialization` is enabled for a group (typography, color, spacing) it affects _all_ block supports within this group. In the example above _all_ the properties within the `typography` group will be affected (e.g. `fontSize`, `lineHeight`, `fontFamily` .etc).
+Note that, if `__experimentalSkipSerialization` is enabled for a group (typography, color, spacing) it affects _all_ block supports within this group. In the example above _all_ the properties within the `typography` group will be affected (e.g. `fontSize`, `lineHeight`, `fontFamily` .etc).
 
 To enable for a _single_ property only, you may use an array to declare which properties are to be skipped. In the example below, only `fontSize` will skip serialization, leaving other items within the `typography` group (e.g. `lineHeight`, `fontFamily` .etc) unaffected.
 
@@ -154,7 +152,7 @@ To enable for a _single_ property only, you may use an array to declare which pr
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"skipSerialization": [ "fontSize" ]
+			"__experimentalSkipSerialization": [ "fontSize" ]
 		}
 	}
 }
@@ -475,7 +473,7 @@ If blocks do this, they need to be registered in the server using the `block.jso
 
 Every chunk of styles can only use a single selector.
 
-This is particularly relevant if the block is using `skipSerialization` to serialize the different style properties to different nodes other than the wrapper. See "Current limitations of blocks supports" for more.
+This is particularly relevant if the block is using `__experimentalSkipSerialization` to serialize the different style properties to different nodes other than the wrapper. See "Current limitations of blocks supports" for more.
 
 #### 3. **Only a single property per block**
 

docs/explanations/architecture/styles.md

@@ -26,7 +26,7 @@ The diagram below provides an overview of the build process when using the `wp-s
 
 - **Production Mode (`npm run build`):** In this mode, `wp-scripts` compiles your JavaScript, minifying the output to reduce file size and improve loading times in the browser. This is ideal for deploying your code to a live site.
 
-- **Development Mode (`npm run start`):** This mode is tailored for active development. It skips minification for easier debugging, generates source maps for better error tracking, and watches your source files for changes. When a change is detected, it automatically rebuilds the affected files, allowing you to see updates in real-time.
+- **Development Mode (`npm start`):** This mode is tailored for active development. It skips minification for easier debugging, generates source maps for better error tracking, and watches your source files for changes. When a change is detected, it automatically rebuilds the affected files, allowing you to see updates in real-time.
 
 The `wp-scripts` package also facilitates the use of JavaScript modules, allowing code distribution across multiple files and resulting in a streamlined bundle after the build process. The [block-development-example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) GitHub repository provides some good examples.
 

docs/getting-started/fundamentals/javascript-in-the-block-editor.md

@@ -183,9 +183,34 @@ save: ( { attributes } ) => {
 ```
 
 
-
 When saving your block, you want to save the attributes in the same format specified by the attribute source definition. If no attribute source is specified, the attribute will be saved to the block's comment delimiter. See the [Block Attributes documentation](/docs/reference-guides/block-api/block-attributes.md) for more details.
 
+### innerBlocks
+
+There is a second property in the props passed to the `save` function, `innerBlocks`. This property is typically used for internal operations, and there are very few scenarios where you would need to use it.
+
+`innerBlocks`, when initialized, is an array containing object representations of nested blocks. In those rare cases where you might use this property,
+it can help you adjust how a block is rendered. For example, you could render a block differently based on the number of nested blocks or if a specific block type is present..
+
+
+```jsx
+save: ( { attributes, innerBlocks } ) => {
+	const { className, ...rest } = useBlockProps.save();
+
+	// innerBlocks could also be an object - react element during initialization
+	const numberOfInnerBlocks = innerBlocks?.length;
+	if ( numberOfInnerBlocks > 1 ) {
+		className = className + ( className ? ' ' : '' ) + 'more-than-one';
+	};
+	const blockProps =  { ...rest, className };
+
+	return <div { ...blockProps }>{ attributes.content }</div>;
+};
+```
+
+
+Here, an additional class is added to the block if number of inner blocks is greater than one, allowing for different styling of the block.
+
 ## Examples
 
 Here are a couple examples of using attributes, edit, and save all together.

docs/reference-guides/block-api/block-edit-save.md

@@ -17,7 +17,7 @@ function gutenberg_register_border_support( $block_type ) {
 		$block_type->attributes = array();
 	}
 
-	if ( block_has_support( $block_type, array( 'border' ) ) && ! array_key_exists( 'style', $block_type->attributes ) ) {
+	if ( block_has_support( $block_type, array( '__experimentalBorder' ) ) && ! array_key_exists( 'style', $block_type->attributes ) ) {
 		$block_type->attributes['style'] = array(
 			'type' => 'object',
 		);
@@ -52,7 +52,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
 	if (
 		gutenberg_has_border_feature_support( $block_type, 'radius' ) &&
 		isset( $block_attributes['style']['border']['radius'] ) &&
-		! wp_should_skip_block_supports_serialization( $block_type, 'border', 'radius' )
+		! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'radius' )
 	) {
 		$border_radius = $block_attributes['style']['border']['radius'];
 
@@ -67,7 +67,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
 	if (
 		gutenberg_has_border_feature_support( $block_type, 'style' ) &&
 		isset( $block_attributes['style']['border']['style'] ) &&
-		! wp_should_skip_block_supports_serialization( $block_type, 'border', 'style' )
+		! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' )
 	) {
 		$border_block_styles['style'] = $block_attributes['style']['border']['style'];
 	}
@@ -76,7 +76,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
 	if (
 		$has_border_width_support &&
 		isset( $block_attributes['style']['border']['width'] ) &&
-		! wp_should_skip_block_supports_serialization( $block_type, 'border', 'width' )
+		! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' )
 	) {
 		$border_width = $block_attributes['style']['border']['width'];
 
@@ -91,7 +91,7 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
 	// Border color.
 	if (
 		$has_border_color_support &&
-		! wp_should_skip_block_supports_serialization( $block_type, 'border', 'color' )
+		! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' )
 	) {
 		$preset_border_color          = array_key_exists( 'borderColor', $block_attributes ) ? "var:preset|color|{$block_attributes['borderColor']}" : null;
 		$custom_border_color          = $block_attributes['style']['border']['color'] ?? null;
@@ -103,9 +103,9 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
 		foreach ( array( 'top', 'right', 'bottom', 'left' ) as $side ) {
 			$border                       = $block_attributes['style']['border'][ $side ] ?? null;
 			$border_side_values           = array(
-				'width' => isset( $border['width'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'width' ) ? $border['width'] : null,
-				'color' => isset( $border['color'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'color' ) ? $border['color'] : null,
-				'style' => isset( $border['style'] ) && ! wp_should_skip_block_supports_serialization( $block_type, 'border', 'style' ) ? $border['style'] : null,
+				'width' => isset( $border['width'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'width' ) ? $border['width'] : null,
+				'color' => isset( $border['color'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'color' ) ? $border['color'] : null,
+				'style' => isset( $border['style'] ) && ! wp_should_skip_block_supports_serialization( $block_type, '__experimentalBorder', 'style' ) ? $border['style'] : null,
 			);
 			$border_block_styles[ $side ] = $border_side_values;
 		}
@@ -129,9 +129,9 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
 /**
  * Checks whether the current block type supports the border feature requested.
  *
- * If the `border` support flag is a boolean `true` all border
+ * If the `__experimentalBorder` support flag is a boolean `true` all border
  * support features are available. Otherwise, the specific feature's support
- * flag nested under `border` must be enabled for the feature
+ * flag nested under `experimentalBorder` must be enabled for the feature
  * to be opted into.
  *
  * @param WP_Block_Type $block_type    Block type to check for support.
@@ -141,17 +141,17 @@ function gutenberg_apply_border_support( $block_type, $block_attributes ) {
  * @return boolean                  Whether or not the feature is supported.
  */
 function gutenberg_has_border_feature_support( $block_type, $feature, $default_value = false ) {
-	// Check if all border support features have been opted into via `"border": true`.
+	// Check if all border support features have been opted into via `"__experimentalBorder": true`.
 	if ( $block_type instanceof WP_Block_Type ) {
-		$block_type_supports_border = $block_type->supports['border'] ?? $default_value;
+		$block_type_supports_border = $block_type->supports['__experimentalBorder'] ?? $default_value;
 		if ( true === $block_type_supports_border ) {
 			return true;
 		}
 	}
 
 	// Check if the specific feature has been opted into individually
-	// via nested flag under `border`.
-	return block_has_support( $block_type, array( 'border', $feature ), $default_value );
+	// via nested flag under `__experimentalBorder`.
+	return block_has_support( $block_type, array( '__experimentalBorder', $feature ), $default_value );
 }
 
 // Register the block support.

lib/block-supports/border.php

@@ -255,12 +255,12 @@ function gutenberg_render_elements_class_name( $block_content, $block ) {
 }
 
 // Remove deprecated WordPress core filters.
-remove_filter( 'render_block', 'wp_render_elements_support', 10, 2 );
-remove_filter( 'pre_render_block', 'wp_render_elements_support_styles', 10, 2 );
+remove_filter( 'render_block', 'wp_render_elements_support', 10 );
+remove_filter( 'pre_render_block', 'wp_render_elements_support_styles', 10 );
 
 // Remove WordPress core filters to avoid rendering duplicate elements stylesheet & attaching classes twice.
-remove_filter( 'render_block', 'wp_render_elements_class_name', 10, 2 );
-remove_filter( 'render_block_data', 'wp_render_elements_support_styles', 10, 1 );
+remove_filter( 'render_block', 'wp_render_elements_class_name', 10 );
+remove_filter( 'render_block_data', 'wp_render_elements_support_styles', 10 );
 
 add_filter( 'render_block', 'gutenberg_render_elements_class_name', 10, 2 );
 add_filter( 'render_block_data', 'gutenberg_render_elements_support_styles', 10, 1 );

lib/block-supports/elements.php

@@ -1055,8 +1055,8 @@ static function ( $matches ) {
 }
 
 if ( function_exists( 'wp_restore_group_inner_container' ) ) {
-	remove_filter( 'render_block', 'wp_restore_group_inner_container', 10, 2 );
-	remove_filter( 'render_block_core/group', 'wp_restore_group_inner_container', 10, 2 );
+	remove_filter( 'render_block', 'wp_restore_group_inner_container', 10 );
+	remove_filter( 'render_block_core/group', 'wp_restore_group_inner_container', 10 );
 }
 add_filter( 'render_block_core/group', 'gutenberg_restore_group_inner_container', 10, 2 );
 
@@ -1118,6 +1118,6 @@ function gutenberg_restore_image_outer_container( $block_content, $block ) {
 }
 
 if ( function_exists( 'wp_restore_image_outer_container' ) ) {
-	remove_filter( 'render_block_core/image', 'wp_restore_image_outer_container', 10, 2 );
+	remove_filter( 'render_block_core/image', 'wp_restore_image_outer_container', 10 );
 }
 add_filter( 'render_block_core/image', 'gutenberg_restore_image_outer_container', 10, 2 );

lib/block-supports/layout.php

@@ -128,7 +128,7 @@ function _gutenberg_add_block_level_preset_styles( $pre_render, $block ) {
 	return null;
 }
 // Remove WordPress core filter to avoid rendering duplicate settings style blocks.
-remove_filter( 'render_block', '_wp_add_block_level_presets_class', 10, 2 );
-remove_filter( 'pre_render_block', '_wp_add_block_level_preset_styles', 10, 2 );
+remove_filter( 'render_block', '_wp_add_block_level_presets_class', 10 );
+remove_filter( 'pre_render_block', '_wp_add_block_level_preset_styles', 10 );
 add_filter( 'render_block', '_gutenberg_add_block_level_presets_class', 10, 2 );
 add_filter( 'pre_render_block', '_gutenberg_add_block_level_preset_styles', 10, 2 );

lib/block-supports/settings.php

@@ -20,16 +20,16 @@ function gutenberg_register_typography_support( $block_type ) {
 		return;
 	}
 
-	$has_font_family_support     = $typography_supports['fontFamily'] ?? false;
+	$has_font_family_support     = $typography_supports['__experimentalFontFamily'] ?? false;
 	$has_font_size_support       = $typography_supports['fontSize'] ?? false;
-	$has_font_style_support      = $typography_supports['fontStyle'] ?? false;
-	$has_font_weight_support     = $typography_supports['fontWeight'] ?? false;
-	$has_letter_spacing_support  = $typography_supports['letterSpacing'] ?? false;
+	$has_font_style_support      = $typography_supports['__experimentalFontStyle'] ?? false;
+	$has_font_weight_support     = $typography_supports['__experimentalFontWeight'] ?? false;
+	$has_letter_spacing_support  = $typography_supports['__experimentalLetterSpacing'] ?? false;
 	$has_line_height_support     = $typography_supports['lineHeight'] ?? false;
 	$has_text_align_support      = $typography_supports['textAlign'] ?? false;
 	$has_text_columns_support    = $typography_supports['textColumns'] ?? false;
-	$has_text_decoration_support = $typography_supports['textDecoration'] ?? false;
-	$has_text_transform_support  = $typography_supports['textTransform'] ?? false;
+	$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
+	$has_text_transform_support  = $typography_supports['__experimentalTextTransform'] ?? false;
 	$has_writing_mode_support    = $typography_supports['__experimentalWritingMode'] ?? false;
 
 	$has_typography_support = $has_font_family_support
@@ -91,16 +91,16 @@ function gutenberg_apply_typography_support( $block_type, $block_attributes ) {
 		return array();
 	}
 
-	$has_font_family_support     = $typography_supports['fontFamily'] ?? false;
+	$has_font_family_support     = $typography_supports['__experimentalFontFamily'] ?? false;
 	$has_font_size_support       = $typography_supports['fontSize'] ?? false;
-	$has_font_style_support      = $typography_supports['fontStyle'] ?? false;
-	$has_font_weight_support     = $typography_supports['fontWeight'] ?? false;
-	$has_letter_spacing_support  = $typography_supports['letterSpacing'] ?? false;
+	$has_font_style_support      = $typography_supports['__experimentalFontStyle'] ?? false;
+	$has_font_weight_support     = $typography_supports['__experimentalFontWeight'] ?? false;
+	$has_letter_spacing_support  = $typography_supports['__experimentalLetterSpacing'] ?? false;
 	$has_line_height_support     = $typography_supports['lineHeight'] ?? false;
 	$has_text_align_support      = $typography_supports['textAlign'] ?? false;
 	$has_text_columns_support    = $typography_supports['textColumns'] ?? false;
-	$has_text_decoration_support = $typography_supports['textDecoration'] ?? false;
-	$has_text_transform_support  = $typography_supports['textTransform'] ?? false;
+	$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
+	$has_text_transform_support  = $typography_supports['__experimentalTextTransform'] ?? false;
 	$has_writing_mode_support    = $typography_supports['__experimentalWritingMode'] ?? false;
 
 	// Whether to skip individual block support features.

lib/block-supports/typography.php

@@ -640,7 +640,7 @@ private static function get_global_styles_presets( $sources ) {
 	 *
 	 * @param string $block_name The block name.
 	 *
-	 * @return string The CSS selector or null if there is no support.
+	 * @return ?string The CSS selector or null if there is no support.
 	 */
 	private static function get_selector( $block_name ) {
 		$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
@@ -669,6 +669,8 @@ private static function get_selector( $block_name ) {
 			// Regular filter.duotone support uses filter.duotone selectors with fallbacks.
 			return wp_get_block_css_selector( $block_type, array( 'filter', 'duotone' ), true );
 		}
+
+		return null;
 	}
 
 	/**