Merge branch 'trunk' into enhancement/patterns-sticky-header

.github/CODEOWNERS

@@ -88,6 +88,7 @@
 /packages/compose                               @ajitbohra
 /packages/element                               @ajitbohra
 /packages/notices                               @ajitbohra
+/packages/nux                                   @ajitbohra @peterwilsoncc
 /packages/viewport                              @ajitbohra
 /packages/base-styles
 /packages/icons

docs/contributors/code/scripts.md

@@ -31,6 +31,7 @@ The editor includes a number of packages to enable various pieces of functionali
 | [Is Shallow Equal](/packages/is-shallow-equal/README.md)                                     | wp-is-shallow-equal                   | A function for performing a shallow comparison between two objects or arrays                                                                                  |
 | [Keycodes](/packages/keycodes/README.md)                                                     | wp-keycodes                           | Keycodes utilities for WordPress, used to check the key pressed in events like `onKeyDown`                                                                    |
 | [List Reusable blocks](/packages/list-reusable-blocks/README.md)                             | wp-list-reusable-blocks               | Package used to add import/export links to the listing page of the reusable blocks                                                                            |
+| [NUX](/packages/nux/README.md)                                                               | wp-nux                                | Components, and wp.data methods useful for onboarding a new user to the WordPress admin interface                                                             |
 | [Plugins](/packages/plugins/README.md)                                                       | wp-plugins                            | Plugins module for WordPress                                                                                                                                  |
 | [Redux Routine](/packages/redux-routine/README.md)                                           | wp-redux-routine                      | Redux middleware for generator coroutines                                                                                                                     |
 | [Rich Text](/packages/rich-text/README.md)                                                   | wp-rich-text                          | Helper functions to convert HTML or a DOM tree into a rich text value and back                                                                                |

docs/manifest.json

@@ -1757,6 +1757,12 @@
 		"markdown_source": "../packages/npm-package-json-lint-config/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/nux",
+		"slug": "packages-nux",
+		"markdown_source": "../packages/nux/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/plugins",
 		"slug": "packages-plugins",
@@ -2003,6 +2009,12 @@
 		"markdown_source": "../docs/reference-guides/data/data-core-notices.md",
 		"parent": "data"
 	},
+	{
+		"title": "The NUX (New User Experience) Data",
+		"slug": "data-core-nux",
+		"markdown_source": "../docs/reference-guides/data/data-core-nux.md",
+		"parent": "data"
+	},
 	{
 		"title": "Preferences",
 		"slug": "data-core-preferences",

docs/reference-guides/README.md

@@ -63,6 +63,7 @@
     -   [**core/editor**: The Post Editor’s Data](/docs/reference-guides/data/data-core-editor.md)
     -   [**core/keyboard-shortcuts**: The Keyboard Shortcuts Data](/docs/reference-guides/data/data-core-keyboard-shortcuts.md)
     -   [**core/notices**: Notices Data](/docs/reference-guides/data/data-core-notices.md)
+    -   [**core/nux**: The NUX (New User Experience) Data](/docs/reference-guides/data/data-core-nux.md)
     -   [**core/preferences**: Preferences](/docs/reference-guides/data/data-core-preferences.md)
     -   [**core/reusable-blocks**: Reusable blocks](/docs/reference-guides/data/data-core-reusable-blocks.md)
     -   [**core/rich-text**: Rich Text](/docs/reference-guides/data/data-core-rich-text.md)

docs/reference-guides/data/README.md

@@ -12,6 +12,7 @@
 -   [**core/editor**: The Post Editor’s Data](/docs/reference-guides/data/data-core-editor.md)
 -   [**core/keyboard-shortcuts**: The Keyboard Shortcuts Data](/docs/reference-guides/data/data-core-keyboard-shortcuts.md)
 -   [**core/notices**: Notices Data](/docs/reference-guides/data/data-core-notices.md)
+-   [**core/nux**: The NUX (New User Experience) Data](/docs/reference-guides/data/data-core-nux.md)
 -   [**core/preferences**: Preferences](/docs/reference-guides/data/data-core-preferences.md)
 -   [**core/reusable-blocks**: Reusable blocks](/docs/reference-guides/data/data-core-reusable-blocks.md)
 -   [**core/rich-text**: Rich Text](/docs/reference-guides/data/data-core-rich-text.md)

docs/reference-guides/data/data-core-nux.md

@@ -0,0 +1,93 @@
+# The NUX (New User Experience) Data
+
+Namespace: `core/nux`.
+
+## Selectors
+
+<!-- START TOKEN(Autogenerated selectors|../../../packages/nux/src/store/selectors.js) -->
+
+### areTipsEnabled
+
+Returns whether or not tips are globally enabled.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+
+_Returns_
+
+-   `boolean`: Whether tips are globally enabled.
+
+### getAssociatedGuide
+
+Returns an object describing the guide, if any, that the given tip is a part of.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+-   _tipId_ `string`: The tip to query.
+
+_Returns_
+
+-   `?NUXGuideInfo`: Information about the associated guide.
+
+### isTipVisible
+
+Determines whether or not the given tip is showing. Tips are hidden if they are disabled, have been dismissed, or are not the current tip in any guide that they have been added to.
+
+_Parameters_
+
+-   _state_ `Object`: Global application state.
+-   _tipId_ `string`: The tip to query.
+
+_Returns_
+
+-   `boolean`: Whether or not the given tip is showing.
+
+<!-- END TOKEN(Autogenerated selectors|../../../packages/nux/src/store/selectors.js) -->
+
+## Actions
+
+<!-- START TOKEN(Autogenerated actions|../../../packages/nux/src/store/actions.js) -->
+
+### disableTips
+
+Returns an action object that, when dispatched, prevents all tips from showing again.
+
+_Returns_
+
+-   `Object`: Action object.
+
+### dismissTip
+
+Returns an action object that, when dispatched, dismisses the given tip. A dismissed tip will not show again.
+
+_Parameters_
+
+-   _id_ `string`: The tip to dismiss.
+
+_Returns_
+
+-   `Object`: Action object.
+
+### enableTips
+
+Returns an action object that, when dispatched, makes all tips show again.
+
+_Returns_
+
+-   `Object`: Action object.
+
+### triggerGuide
+
+Returns an action object that, when dispatched, presents a guide that takes the user through a series of tips step by step.
+
+_Parameters_
+
+-   _tipIds_ `string[]`: Which tips to show in the guide.
+
+_Returns_
+
+-   `Object`: Action object.
+
+<!-- END TOKEN(Autogenerated actions|../../../packages/nux/src/store/actions.js) -->

docs/toc.json

@@ -284,6 +284,7 @@
 						"docs/reference-guides/data/data-core-keyboard-shortcuts.md": []
 					},
 					{ "docs/reference-guides/data/data-core-notices.md": [] },
+					{ "docs/reference-guides/data/data-core-nux.md": [] },
 					{
 						"docs/reference-guides/data/data-core-preferences.md": []
 					},

lib/client-assets.php

@@ -368,6 +368,15 @@ function gutenberg_register_packages_styles( $styles ) {
 	);
 	$styles->add_data( 'wp-edit-blocks', 'rtl', 'replace' );
 
+	gutenberg_override_style(
+		$styles,
+		'wp-nux',
+		gutenberg_url( 'build/nux/style.css' ),
+		array( 'wp-components' ),
+		$version
+	);
+	$styles->add_data( 'wp-nux', 'rtl', 'replace' );
+
 	gutenberg_override_style(
 		$styles,
 		'wp-block-library-theme',

package.json

@@ -65,6 +65,7 @@
 		"@wordpress/list-reusable-blocks": "file:packages/list-reusable-blocks",
 		"@wordpress/media-utils": "file:packages/media-utils",
 		"@wordpress/notices": "file:packages/notices",
+		"@wordpress/nux": "file:packages/nux",
 		"@wordpress/plugins": "file:packages/plugins",
 		"@wordpress/preferences": "file:packages/preferences",
 		"@wordpress/preferences-persistence": "file:packages/preferences-persistence",

packages/base-styles/_z-index.scss

@@ -144,7 +144,10 @@ $z-layers: (
 	// The focus styles of the region navigation containers should be above their content.
 	".is-focusing-regions {region} :focus::after": 1000000,
 
-	// Show tooltips above wp-admin menus, submenus, and sidebar:
+	// Show NUX tips above popovers, wp-admin menus, submenus, and sidebar:
+	".nux-dot-tip": 1000001,
+
+	// Show tooltips above NUX tips, wp-admin menus, submenus, and sidebar:
 	".components-tooltip": 1000002,
 
 	// Keep template popover underneath 'Create custom template' modal overlay.

packages/block-editor/src/components/block-toolbar/index.js

@@ -35,9 +35,9 @@ import __unstableBlockNameContext from './block-name-context';
 import { unlock } from '../../lock-unlock';
 
 const BlockToolbar = ( { hideDragHandle } ) => {
+	const { getSelectedBlockClientId } = useSelect( blockEditorStore );
 	const {
 		blockClientIds,
-		blockClientId,
 		blockType,
 		hasFixedToolbar,
 		isDistractionFree,
@@ -61,7 +61,6 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 		return {
 			blockClientIds: selectedBlockClientIds,
-			blockClientId: selectedBlockClientId,
 			blockType:
 				selectedBlockClientId &&
 				getBlockType( getBlockName( selectedBlockClientId ) ),
@@ -91,7 +90,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 				if ( isFocused && isDistractionFree ) {
 					return;
 				}
-				toggleBlockHighlight( blockClientId, isFocused );
+				toggleBlockHighlight( getSelectedBlockClientId(), isFocused );
 			},
 		}
 	);

packages/block-editor/src/components/global-styles/color-panel.js

@@ -328,22 +328,6 @@ export default function ColorPanel( {
 			: gradientValue;
 	};
 
-	// Text Color
-	const showTextPanel = useHasTextPanel( settings );
-	const textColor = decodeValue( inheritedValue?.color?.text );
-	const userTextColor = decodeValue( value?.color?.text );
-	const hasTextColor = () => !! userTextColor;
-	const setTextColor = ( newColor ) => {
-		onChange(
-			setImmutably(
-				value,
-				[ 'color', 'text' ],
-				encodeColorValue( newColor )
-			)
-		);
-	};
-	const resetTextColor = () => setTextColor( undefined );
-
 	// BackgroundColor
 	const showBackgroundPanel = useHasBackgroundPanel( settings );
 	const backgroundColor = decodeValue( inheritedValue?.color?.background );
@@ -424,6 +408,29 @@ export default function ColorPanel( {
 		onChange( newValue );
 	};
 
+	// Text Color
+	const showTextPanel = useHasTextPanel( settings );
+	const textColor = decodeValue( inheritedValue?.color?.text );
+	const userTextColor = decodeValue( value?.color?.text );
+	const hasTextColor = () => !! userTextColor;
+	const setTextColor = ( newColor ) => {
+		let changedObject = setImmutably(
+			value,
+			[ 'color', 'text' ],
+			encodeColorValue( newColor )
+		);
+		if ( textColor === linkColor ) {
+			changedObject = setImmutably(
+				changedObject,
+				[ 'elements', 'link', 'color', 'text' ],
+				encodeColorValue( newColor )
+			);
+		}
+
+		onChange( changedObject );
+	};
+	const resetTextColor = () => setTextColor( undefined );
+
 	// Elements
 	const elements = [
 		{

packages/block-library/src/home-link/index.php

@@ -98,8 +98,15 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
 		$colors['css_classes'],
 		$font_sizes['css_classes']
 	);
-	$classes[]       = 'wp-block-navigation-item';
 	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
+	$classes[]       = 'wp-block-navigation-item';
+
+	if ( is_front_page() ) {
+		$classes[] = 'current-menu-item';
+	} elseif ( is_home() && ( (int) get_option( 'page_for_posts' ) !== get_queried_object_id() ) ) {
+		// Edge case where the Reading settings has a posts page set but not a static homepage.
+		$classes[] = 'current-menu-item';
+	}
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
@@ -124,8 +131,14 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 	if ( empty( $attributes['label'] ) ) {
 		return '';
 	}
+	$aria_current = '';
 
-	$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
+	if ( is_front_page() ) {
+		$aria_current = ' aria-current="page"';
+	} elseif ( is_home() && ( (int) get_option( 'page_for_posts' ) !== get_queried_object_id() ) ) {
+		// Edge case where the Reading settings has a posts page set but not a static homepage.
+		$aria_current = ' aria-current="page"';
+	}
 
 	return sprintf(
 		'<li %1$s><a class="wp-block-home-link__content wp-block-navigation-item__content" href="%2$s" rel="home"%3$s>%4$s</a></li>',

packages/components/CHANGELOG.md

@@ -12,6 +12,7 @@
 -   `Popover`: Pin `react-dropdown-menu` version to avoid breaking changes in dependency updates. ([#52356](https://github.com/WordPress/gutenberg/pull/52356)).
 -   `Item`: Unify focus style and add default font styles. ([#52495](https://github.com/WordPress/gutenberg/pull/52495)).
 -   `Toolbar`: Fix toolbar items not being tabbable on the first render. ([#52613](https://github.com/WordPress/gutenberg/pull/52613))
+-   `FormTokenField`: Fix token overflow when moving cursor left or right. ([#52662](https://github.com/WordPress/gutenberg/pull/52662))
 
 ## 25.3.0 (2023-07-05)
 

packages/components/src/form-token-field/styles.ts

@@ -9,6 +9,7 @@ import { css } from '@emotion/react';
  */
 import { Flex } from '../flex';
 import { space } from '../ui/utils/space';
+import { boxSizingReset } from '../utils';
 
 type TokensAndInputWrapperProps = {
 	__next40pxDefaultSize: boolean;
@@ -27,6 +28,7 @@ const deprecatedPaddings = ( {
 
 export const TokensAndInputWrapperFlex = styled( Flex )`
 	padding: 7px;
+	${ boxSizingReset }
 
 	${ deprecatedPaddings }
 `;

packages/core-commands/src/site-editor-navigation-commands.js

@@ -13,6 +13,7 @@ import {
 	symbolFilled,
 	styles,
 	navigation,
+	symbol,
 } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { getQueryArg, addQueryArgs, getPath } from '@wordpress/url';
@@ -199,8 +200,8 @@ function useSiteEditorBasicNavigationCommands() {
 
 		result.push( {
 			name: 'core/edit-site/open-template-parts',
-			label: __( 'Open library' ),
-			icon: symbolFilled,
+			label: __( 'Open patterns' ),
+			icon: symbol,
 			callback: ( { close } ) => {
 				const args = {
 					path: '/patterns',