[pull] trunk from WordPress:trunk

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/block-patterns-explorer/index.js

@@ -14,9 +14,8 @@ import { usePatternCategories } from '../block-patterns-tab/use-pattern-categori
 
 function PatternsExplorer( { initialCategory, rootClientId } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
-	const [ selectedCategory, setSelectedCategory ] = useState(
-		initialCategory?.name
-	);
+	const [ selectedCategory, setSelectedCategory ] =
+		useState( initialCategory );
 
 	const patternCategories = usePatternCategories( rootClientId );
 

packages/block-editor/src/components/inserter/block-patterns-tab/index.js

@@ -70,7 +70,9 @@ function BlockPatternsTab( {
 			) }
 			{ showPatternsExplorer && (
 				<PatternsExplorerModal
-					initialCategory={ selectedCategory || categories[ 0 ] }
+					initialCategory={
+						selectedCategory?.name || categories[ 0 ]?.name
+					}
 					patternCategories={ categories }
 					onModalClose={ () => setShowPatternsExplorer( false ) }
 					rootClientId={ rootClientId }

packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -69,19 +69,19 @@ export function PatternCategoryPreviews( {
 					return false;
 				}
 
-				if ( category.name === allPatternsCategory.name ) {
+				if ( category.name === allPatternsCategory?.name ) {
 					return true;
 				}
 
 				if (
-					category.name === myPatternsCategory.name &&
+					category.name === myPatternsCategory?.name &&
 					pattern.type === INSERTER_PATTERN_TYPES.user
 				) {
 					return true;
 				}
 
 				if (
-					category.name === starterPatternsCategory.name &&
+					category.name === starterPatternsCategory?.name &&
 					pattern.blockTypes?.includes( 'core/post-content' )
 				) {
 					return true;
@@ -149,7 +149,7 @@ export function PatternCategoryPreviews( {
 							level={ 4 }
 							as="div"
 						>
-							{ category.label }
+							{ category?.label }
 						</Heading>
 					</FlexBlock>
 					<PatternsFilter

packages/block-editor/src/components/inserter/block-patterns-tab/patterns-filter.js

@@ -25,7 +25,7 @@ import {
 const getShouldDisableSyncFilter = ( sourceFilter ) =>
 	sourceFilter !== 'all' && sourceFilter !== 'user';
 const getShouldHideSourcesFilter = ( category ) => {
-	return category.name === myPatternsCategory.name;
+	return category?.name === myPatternsCategory.name;
 };
 
 const PATTERN_SOURCE_MENU_OPTIONS = [
@@ -60,7 +60,7 @@ export function PatternsFilter( {
 	// the user may be confused when switching to another category if the haven't explicity set
 	// this filter themselves.
 	const currentPatternSourceFilter =
-		category.name === myPatternsCategory.name
+		category?.name === myPatternsCategory.name
 			? INSERTER_PATTERN_TYPES.user
 			: patternSourceFilter;
 

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

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

packages/block-editor/src/hooks/use-zoom-out.js

@@ -2,13 +2,14 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
+import BlockContext from '../components/block-context';
 
 /**
  * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
@@ -19,6 +20,7 @@ import { unlock } from '../lock-unlock';
  * @param {boolean} enabled If we should enter into zoomOut mode or not
  */
 export function useZoomOut( enabled = true ) {
+	const { postId } = useContext( BlockContext );
 	const { setZoomLevel, resetZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
@@ -37,6 +39,7 @@ export function useZoomOut( enabled = true ) {
 
 	const controlZoomLevelRef = useRef( false );
 	const isEnabledRef = useRef( enabled );
+	const postIdRef = useRef( postId );
 
 	/**
 	 * This hook tracks if the zoom state was changed manually by the user via clicking
@@ -55,6 +58,11 @@ export function useZoomOut( enabled = true ) {
 	useEffect( () => {
 		isEnabledRef.current = enabled;
 
+		// If the user created a new post/page, we should take control of the zoom level.
+		if ( postIdRef.current !== postId ) {
+			controlZoomLevelRef.current = true;
+		}
+
 		if ( enabled !== isZoomOut() ) {
 			controlZoomLevelRef.current = true;
 
@@ -71,5 +79,5 @@ export function useZoomOut( enabled = true ) {
 				resetZoomLevel();
 			}
 		};
-	}, [ enabled, isZoomOut, resetZoomLevel, setZoomLevel ] );
+	}, [ enabled, isZoomOut, postId, resetZoomLevel, setZoomLevel ] );
 }

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;
 	}

packages/components/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Enhancements
 
 -   `BoxControl`: Add presets support ([#67688](https://github.com/WordPress/gutenberg/pull/67688)).
+-   `Navigation`: Upsize back buttons ([#68157](https://github.com/WordPress/gutenberg/pull/68157)).
 
 ### Deprecations
 
@@ -26,6 +27,7 @@
 ### Internal
 
 -   `SlotFill`: rewrite the non-portal version to use `observableMap` ([#67400](https://github.com/WordPress/gutenberg/pull/67400)).
+-   `DatePicker`: Prepare day buttons for 40px default size ([#68156](https://github.com/WordPress/gutenberg/pull/68156)).
 
 ## 29.0.0 (2024-12-11)
 

packages/components/src/button/test/index.tsx

@@ -6,19 +6,26 @@ import { render, screen } from '@testing-library/react';
 /**
  * WordPress dependencies
  */
-import { createRef } from '@wordpress/element';
+import { createRef, forwardRef } from '@wordpress/element';
 import { plusCircle } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import Button from '..';
+import _Button from '..';
 import Tooltip from '../../tooltip';
 import cleanupTooltip from '../../tooltip/test/utils';
 import { press } from '@ariakit/test';
 
 jest.mock( '../../icon', () => () => <div data-testid="test-icon" /> );
 
+const Button = forwardRef(
+	(
+		props: React.ComponentProps< typeof _Button >,
+		ref: React.ForwardedRef< unknown >
+	) => <_Button __next40pxDefaultSize { ...props } ref={ ref } />
+);
+
 describe( 'Button', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render a button element with only one class', () => {

packages/components/src/date-time/date/index.tsx

@@ -306,6 +306,7 @@ function Day( {
 
 	return (
 		<DayButton
+			__next40pxDefaultSize
 			ref={ ref }
 			className="components-datetime__date__day" // Unused, for backwards compatibility.
 			disabled={ isInvalid }

packages/components/src/navigation/back-button/index.tsx

@@ -49,6 +49,7 @@ function UnforwardedNavigationBackButton(
 	const icon = isRTL() ? chevronRight : chevronLeft;
 	return (
 		<MenuBackButtonUI
+			__next40pxDefaultSize
 			className={ classes }
 			href={ href }
 			variant="tertiary"

packages/components/src/navigation/item/index.tsx

@@ -79,6 +79,8 @@ export function NavigationItem( props: NavigationItemProps ) {
 		? restProps
 		: {
 				as: Button,
+				__next40pxDefaultSize:
+					'as' in restProps ? restProps.as === undefined : true,
 				href,
 				onClick: onItemClick,
 				'aria-current': isActive ? 'page' : undefined,