Merge branch 'WordPress:trunk' into trunk

Author: karthick-murugan

docs/how-to-guides/themes/global-settings-and-styles.md

@@ -1053,16 +1053,16 @@ Pseudo selectors `:hover`, `:focus`, `:visited`, `:active`, `:link`, `:any-link`
 
 #### Variations
 
-A block can have a "style variation", as defined per the [block.json specification](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/#styles-optional). Theme authors can define the style attributes for an existing style variation using the theme.json file. Styles for unregistered style variations will be ignored.
+A block can have a "style variation," as defined in the [block.json specification](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/#styles-optional). Theme authors can define the style attributes for an existing style variation using the `theme.json` file. Styles for unregistered style variations will be ignored.
 
-Note that variations are a "block concept", they only exist bound to blocks. The `theme.json` specification respects that distinction by only allowing `variations` at the block-level but not at the top-level. It's also worth highlighting that only variations defined in the `block.json` file of the block are considered "registered": so far, the style variations added via `register_block_style` or in the client are ignored, see [this issue](https://github.com/WordPress/gutenberg/issues/49602) for more information.
+Note that variations are a "block concept"—they only exist when bound to blocks. The `theme.json` specification respects this distinction by only allowing `variations` at the block level, not the top level. It’s also worth highlighting that only variations defined in the `block.json` file of the block or via `register_block_style` on the server are considered "registered" for `theme.json` styling purposes.
 
 For example, this is how to provide styles for the existing `plain` variation for the `core/quote` block:
 
 ```json
 {
 	"version": 3,
-	"styles":{
+	"styles": {
 		"blocks": {
 			"core/quote": {
 				"variations": {
@@ -1078,14 +1078,107 @@ For example, this is how to provide styles for the existing `plain` variation fo
 }
 ```
 
-The resulting CSS output is this:
+The resulting CSS output is:
 
 ```css
 .wp-block-quote.is-style-plain {
 	background-color: red;
 }
 ```
 
+It is also possible for multiple block types to share the same variation styles. There are two recommended ways to define such shared styles:
+
+1. `theme.json` partial files
+2. programmatically, using `register_block_style`
+
+##### Variation Theme.json Partials
+
+Like theme style variation partials, those for block style variations reside within a theme's `/styles` directory. However, they are differentiated from theme style variations by the introduction of a top-level property called `blockTypes`. The `blockTypes` property is an array of block types for which the block style variation has been registered.
+
+Additionally, a `slug` property is available to provide consistency between the different sources that may define block style variations and to decouple the `slug` from the translatable `title` property.
+
+The following is an example of a `theme.json` partial that defines styles for the "Variation A" block style for the Group, Columns, and Media & Text block types:
+
+```json
+{
+	"$schema": "https://schemas.wp.org/trunk/theme.json",
+	"version": 3,
+	"title": "Variation A",
+	"slug": "variation-a",
+	"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
+	"styles": {
+		"color": {
+			"background": "#eed8d3",
+			"text": "#201819"
+		},
+		"elements": {
+			"heading": {
+				"color": {
+					"text": "#201819"
+				}
+			}
+		},
+		"blocks": {
+			"core/group": {
+				"color": {
+					"background": "#825f58",
+					"text": "#eed8d3"
+				},
+				"elements": {
+					"heading": {
+						"color": {
+							"text": "#eed8d3"
+						}
+					}
+				}
+			}
+		}
+	}
+}
+```
+
+##### Programmatically Registering Variation Styles
+
+As an alternative to `theme.json` partials, you can register variation styles at the same time as registering the variation itself through `register_block_style`. This is done by registering the block style for an array of block types while also passing a "style object" within the `style_data` option.
+
+The example below registers a "Green" variation for the Group and Columns blocks. Note that the style object passed via `style_data` follows the same shape as the `styles` property of a `theme.json` partial.
+
+```php
+register_block_style(
+    array( 'core/group', 'core/columns' ),
+    array(
+        'name'       => 'green',
+        'label'      => __( 'Green' ),
+        'style_data' => array(
+            'color'    => array(
+                'background' => '#4f6f52',
+                'text'       => '#d2e3c8',
+            ),
+            'blocks'   => array(
+                'core/group' => array(
+                    'color' => array(
+                        'background' => '#739072',
+                        'text'       => '#e3eedd',
+                    ),
+                ),
+            ),
+            'elements' => array(
+                'link'   => array(
+                    'color'  => array(
+                        'text' => '#ead196',
+                    ),
+                    ':hover' => array(
+                        'color' => array(
+                            'text' => '#ebd9b4',
+                        ),
+                    ),
+                ),
+            ),
+        ),
+    )
+);
+```
+
 ### customTemplates
 
 <div class="callout callout-alert">Supported in WordPress from version 5.9.</div>

packages/block-editor/src/components/inserter/category-tabs/index.js

@@ -64,7 +64,6 @@ function CategoryTabs( {
 					<Tabs.Tab
 						key={ category.name }
 						tabId={ category.name }
-						aria-label={ category.label }
 						aria-current={
 							category === selectedCategory ? 'true' : undefined
 						}

packages/block-editor/src/components/text-transform-control/README.md

@@ -1,7 +1,7 @@
 # TextTransformControl
 
 The `TextTransformControl` component is responsible for rendering a control element that allows users to select and apply text transformation options to blocks or elements in the Gutenberg editor. It provides an intuitive interface for changing the text appearance by applying different transformations such as `none`, `uppercase`, `lowercase`, `capitalize`.
- 
+
 ![TextTransformConrol Element in Inspector Control](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/text-transform-component.png?raw=true)
 
 ## Development guidelines
@@ -28,7 +28,6 @@ const MyTextTransformControlComponent = () => (
 ### `value`
 
 -   **Type:** `String`
--   **Default:** `none`
 -   **Options:** `none`, `uppercase`, `lowercase`, `capitalize`
 
 The current value of the Text Transform setting. You may only choose from the `Options` listed above.
@@ -37,4 +36,4 @@ The current value of the Text Transform setting. You may only choose from the `O
 
 -   **Type:** `Function`
 
-A callback function invoked when the Text Transform value is changed via an interaction with any of the buttons. Called with the Text Transform value (`none`, `uppercase`, `lowercase`, `capitalize`) as the only argument.
+A callback function invoked when the Text Transform value is changed via an interaction with any of the buttons. Called with the Text Transform value (`none`, `uppercase`, `lowercase`, `capitalize`) as the only argument.

packages/block-editor/src/components/text-transform-control/stories/index.story.js

@@ -8,26 +8,63 @@ import { useState } from '@wordpress/element';
  */
 import TextTransformControl from '../';
 
-export default {
+const meta = {
 	title: 'BlockEditor/TextTransformControl',
 	component: TextTransformControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'Control to facilitate text transformation selections.',
+			},
+		},
+	},
 	argTypes: {
-		onChange: { action: 'onChange' },
+		onChange: {
+			action: 'onChange',
+			control: {
+				type: null,
+			},
+			description: 'Handles change in text transform selection.',
+			table: {
+				type: {
+					summary: 'function',
+				},
+			},
+		},
+		className: {
+			control: { type: 'text' },
+			description: 'Class name to add to the control.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		value: {
+			control: { type: null },
+			description: 'Currently selected text transform.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
 	},
 };
 
-const Template = ( { onChange, ...args } ) => {
-	const [ value, setValue ] = useState();
-	return (
-		<TextTransformControl
-			{ ...args }
-			onChange={ ( ...changeArgs ) => {
-				onChange( ...changeArgs );
-				setValue( ...changeArgs );
-			} }
-			value={ value }
-		/>
-	);
-};
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
 
-export const Default = Template.bind( {} );
+		return (
+			<TextTransformControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};

packages/block-library/src/query-total/index.php

@@ -43,16 +43,16 @@ function render_block_core_query_total( $attributes, $content, $block ) {
 				$range_text = sprintf(
 					/* translators: 1: Start index of posts, 2: Total number of posts */
 					__( 'Displaying %1$s of %2$s' ),
-					'<strong>' . $start . '</strong>',
-					'<strong>' . $max_rows . '</strong>'
+					$start,
+					$max_rows
 				);
 			} else {
 				$range_text = sprintf(
 					/* translators: 1: Start index of posts, 2: End index of posts, 3: Total number of posts */
 					__( 'Displaying %1$s – %2$s of %3$s' ),
-					'<strong>' . $start . '</strong>',
-					'<strong>' . $end . '</strong>',
-					'<strong>' . $max_rows . '</strong>'
+					$start,
+					$end,
+					$max_rows
 				);
 			}
 
@@ -61,10 +61,11 @@ function render_block_core_query_total( $attributes, $content, $block ) {
 
 		case 'total-results':
 		default:
-			$output = sprintf(
-				'<p><strong>%d</strong> %s</p>',
-				$max_rows,
-				_n( 'result found', 'results found', $max_rows )
+			// translators: %d: number of results.
+			$total_text = sprintf( _n( '%d result found', '%d results found', $max_rows ), $max_rows );
+			$output     = sprintf(
+				'<p>%s</p>',
+				$total_text
 			);
 			break;
 	}