Merge branch 'trunk' of personal.github.com:WordPress/gutenberg into …

…enhancement/audio-block-placeholder-state

.eslintrc.js

@@ -177,6 +177,8 @@ module.exports = {
 		'@wordpress/dependency-group': 'error',
 		'@wordpress/wp-global-usage': 'error',
 		'@wordpress/react-no-unsafe-timeout': 'error',
+		'@wordpress/i18n-hyphenated-range': 'error',
+		'@wordpress/i18n-no-flanking-whitespace': 'error',
 		'@wordpress/i18n-text-domain': [
 			'error',
 			{
@@ -321,6 +323,7 @@ module.exports = {
 						'FontSizePicker',
 						'FormTokenField',
 						'InputControl',
+						'LetterSpacingControl',
 						'LineHeightControl',
 						'NumberControl',
 						'RangeControl',
@@ -341,13 +344,15 @@ module.exports = {
 							'FormFileUpload should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
 					},
 					// Temporary rules until all existing components have the `__next40pxDefaultSize` prop.
-					...[ 'SelectControl' ].map( ( componentName ) => ( {
-						// Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated.
-						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`,
-						message:
-							componentName +
-							' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
-					} ) ),
+					...[ 'SelectControl', 'UnitControl' ].map(
+						( componentName ) => ( {
+							// Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated.
+							selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`,
+							message:
+								componentName +
+								' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
+						} )
+					),
 				],
 			},
 		},

.github/CODEOWNERS

@@ -1,5 +1,5 @@
 # Documentation
-/docs                                           @ajitbohra @ryanwelcher @juanmaguitar @fabiankaegy @ndiego
+/docs                                           @ajitbohra @juanmaguitar @fabiankaegy @ndiego
 /packages/interactivity/docs                    @juanmaguitar
 
 # Schemas

backport-changelog/6.7/7125.md

@@ -1,3 +1,4 @@
 https://github.com/WordPress/wordpress-develop/pull/7125
 
 * https://github.com/WordPress/gutenberg/pull/61577
+* https://github.com/WordPress/gutenberg/pull/64610

docs/reference-guides/interactivity-api/api-reference.md

@@ -501,7 +501,7 @@ The `unique-id` doesn't need to be unique globally. It just needs to be differen
 
 ```html
 <div data-wp-init="callbacks.logTimeInit">
-  <p>Hi!</>
+  <p>Hi!</p>
 </div>
 ```
 

docs/reference-guides/slotfills/README.md

@@ -9,9 +9,9 @@ In order to use them, we must leverage the [@wordpress/plugins](/packages/plugin
 
 In order to access the SlotFills, we need to do four things:
 
-1. Import the `registerPlugin` method from `wp.plugins`.
-2. Import the SlotFill we want from `wp.editor`.
-3. Define a method to render our changes. Our changes/additions will be wrapped in the SlotFill component we imported.
+1. Import the `registerPlugin` method from the `@wordpress/plugins` package.
+2. Import the SlotFill we want from the `@wordpress/editor'` package.
+3. Define a component to render our changes. Our changes/additions will be wrapped in the SlotFill component we imported.
 4. Register the plugin.
 
 Here is an example using the `PluginPostStatusInfo` slotFill:
@@ -70,8 +70,7 @@ export default function PostSummary( { onActionPerformed } ) {
 	const { isRemovedPostStatusPanel } = useSelect( ( select ) => {
 		// We use isEditorPanelRemoved to hide the panel if it was programmatically removed. We do
 		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
-		const { isEditorPanelRemoved } =
-			select( editorStore );
+		const { isEditorPanelRemoved } = select( editorStore );
 		return {
 			isRemovedPostStatusPanel: isEditorPanelRemoved( PANEL_NAME ),
 		};

docs/reference-guides/slotfills/main-dashboard-button.md

@@ -1,21 +1,26 @@
 # MainDashboardButton
 
-This slot allows replacing the default main dashboard button in the post editor and site editor.
+This slot allows replacing the default main dashboard button in the post editor. It is no longer available in the site editor as of WordPress 6.2.
 It's used for returning back to main wp-admin dashboard when editor is in fullscreen mode.
 
+<div class="callout callout-warning">
+	Please note that this SlotFill is still considered experimental and may change
+</div>
+
 ## Examples
 
-### Post editor example
+### Change the icon
 
-This will override the W icon button in the header.
+This will replace the W icon button in the header with a close icon.
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
 import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/edit-post';
+import { close } from '@wordpress/icons';
 
 const MainDashboardButtonTest = () => (
 	<MainDashboardButton>
-		Custom main dashboard button content
+		<FullscreenModeClose icon={ close } />
 	</MainDashboardButton>
 );
 
@@ -24,20 +29,23 @@ registerPlugin( 'main-dashboard-button-test', {
 } );
 ```
 
-If your goal is just to replace the icon of the existing button in
-the post editor, that can be achieved in the following way:
+![The edit post screen in fullscreen mode displaying a close icon instead of the default W](https://developer.wordpress.org/files/2024/08/main-dashboard-button-close-icon-example.png 'Replace the W icon button in the header with a close icon')
+
+### Change the icon and link
+
+This example will change the icon in the header to indicate an external link that will take the user to http://wordpress.org when clicked.
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
 import {
 	__experimentalFullscreenModeClose as FullscreenModeClose,
 	__experimentalMainDashboardButton as MainDashboardButton,
 } from '@wordpress/edit-post';
-import { close } from '@wordpress/icons';
+import { external } from '@wordpress/icons';
 
 const MainDashboardButtonIconTest = () => (
 	<MainDashboardButton>
-		<FullscreenModeClose icon={ close } href="http://wordpress.org" />
+		<FullscreenModeClose icon={ external } href="http://wordpress.org" />
 	</MainDashboardButton>
 );
 
@@ -46,26 +54,4 @@ registerPlugin( 'main-dashboard-button-icon-test', {
 } );
 ```
 
-### Site editor example
-
-In the site editor this slot refers to the "back to dashboard" button in the navigation sidebar.
-
-```js
-import { registerPlugin } from '@wordpress/plugins';
-import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/edit-site';
-import { __experimentalNavigationBackButton as NavigationBackButton } from '@wordpress/components';
-
-const MainDashboardButtonIconTest = () => (
-	<MainDashboardButton>
-		<NavigationBackButton
-			backButtonLabel={ __( 'Back to dashboard' ) }
-			className="edit-site-navigation-panel__back-to-dashboard"
-			href="index.php"
-		/>
-	</MainDashboardButton>
-);
-
-registerPlugin( 'main-dashboard-button-icon-test', {
-	render: MainDashboardButtonIconTest,
-} );
-```
+![The edit post screen in fullscreen mode displaying an external link icon instead of the default W](https://developer.wordpress.org/files/2024/08/main-dashboard-button-external-link-example.png 'Change the icon in the header to indicate an external link that will take the user to http://wordpress.org when clicked')

docs/reference-guides/slotfills/plugin-block-settings-menu-item.md

@@ -7,7 +7,7 @@ This will either appear in the controls for each block or at the Top Toolbar dep
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
-import { PluginBlockSettingsMenuItem } from '@wordpress/edit-post';
+import { PluginBlockSettingsMenuItem } from '@wordpress/editor';
 
 const PluginBlockSettingsMenuGroupTest = () => (
 	<PluginBlockSettingsMenuItem

docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md

@@ -1,31 +1,78 @@
 # PluginSidebarMoreMenuItem
 
-This slot allows the creation of a `<PluginSidebar>` with a menu item that when clicked will expand the sidebar to the appropriate Plugin section.
-This is done by setting the `target` on `<PluginSidebarMoreMenuItem>` to match the `name` on the `<PluginSidebar>`
+This slot is used to allow the opening of a `<PluginSidebar />` panel from the Options dropdown.
+When a `<PluginSidebar />` is registered, a `<PluginSidebarMoreMenuItem />` is automatically registered using the title prop from the `<PluginSidebar />` and so it's not required to use this slot to create the menu item.
 
 ## Example
 
+This example shows how customize the text for the menu item instead of using the default text provided by the `<PluginSidebar />` title.
+
 ```js
-import { registerPlugin } from '@wordpress/plugins';
+import { __ } from '@wordpress/i18n';
 import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
+import {
+	PanelBody,
+	Button,
+	TextControl,
+	SelectControl,
+} from '@wordpress/components';
+import { registerPlugin } from '@wordpress/plugins';
+import { useState } from '@wordpress/element';
 import { image } from '@wordpress/icons';
 
-const PluginSidebarMoreMenuItemTest = () => (
-	<>
-		<PluginSidebarMoreMenuItem target="sidebar-name" icon={ image }>
-			Expanded Sidebar - More item
-		</PluginSidebarMoreMenuItem>
-		<PluginSidebar name="sidebar-name" icon={ image } title="My Sidebar">
-			Content of the sidebar
-		</PluginSidebar>
-	</>
-);
-
-registerPlugin( 'plugin-sidebar-expanded-test', {
+const PluginSidebarMoreMenuItemTest = () => {
+	const [ text, setText ] = useState( '' );
+	const [ select, setSelect ] = useState( 'a' );
+	return (
+		<>
+			<PluginSidebarMoreMenuItem target="sidebar-name" icon={ image }>
+				{ __( 'Custom Menu Item Text' ) }
+			</PluginSidebarMoreMenuItem>
+			<PluginSidebar
+				name="sidebar-name"
+				icon={ image }
+				title="My Sidebar"
+			>
+				<PanelBody>
+					<h2>
+						{ __(
+							'This is a heading for the PluginSidebar example.'
+						) }
+					</h2>
+					<p>
+						{ __(
+							'This is some example text for the PluginSidebar example.'
+						) }
+					</p>
+					<TextControl
+						label={ __( 'Text Control' ) }
+						value={ text }
+						onChange={ ( newText ) => setText( newText ) }
+					/>
+					<SelectControl
+						label={ __( 'Select Control' ) }
+						value={ select }
+						options={ [
+							{ value: 'a', label: __( 'Option A' ) },
+							{ value: 'b', label: __( 'Option B' ) },
+							{ value: 'c', label: __( 'Option C' ) },
+						] }
+						onChange={ ( newSelect ) => setSelect( newSelect ) }
+					/>
+					<Button variant="primary">
+						{ __( 'Primary Button' ) }{ ' ' }
+					</Button>
+				</PanelBody>
+			</PluginSidebar>
+		</>
+	);
+};
+
+registerPlugin( 'plugin-sidebar-more-menu-item-example', {
 	render: PluginSidebarMoreMenuItemTest,
 } );
 ```
 
 ## Location
 
-![Interaction](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/plugin-sidebar-more-menu-item.gif?raw=true)
+![Interaction](https://developer.wordpress.org/files/2024/08/pluginsidebar-more-menu-item-1.gif)

docs/reference-guides/slotfills/plugin-sidebar.md

@@ -2,6 +2,7 @@
 
 This slot allows adding items to the tool bar of either the Post or Site editor screens.
 Using this slot will add an icon to the toolbar that, when clicked, opens a panel with containing the items wrapped in the `<PluginSidebar />` component.
+Additionally, it will also create a `<PluginSidebarMoreMenuItem />` that will allow opening the panel from Options panel when clicked.
 
 ## Example
 
@@ -63,6 +64,4 @@ registerPlugin( 'plugin-sidebar-example', { render: PluginSidebarExample } );
 
 ## Location
 
-### Open State
-
-![Open State](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/plugin-sidebar-open-state.png?raw=true)
+![PluginSidebar example expanded](https://developer.wordpress.org/files/2024/08/plugin-sidebar-example.png)

gutenberg.php

@@ -5,7 +5,7 @@
  * Description: Printing since 1440. This is the development plugin for the block editor, site editor, and other future WordPress core functionality.
  * Requires at least: 6.5
  * Requires PHP: 7.2
- * Version: 19.0.0
+ * Version: 19.1.0-rc.1
  * Author: Gutenberg Team
  * Text Domain: gutenberg
  *

lib/compat/wordpress-6.7/compat.php

@@ -27,11 +27,15 @@ function _gutenberg_add_block_templates_from_registry( $query_result, $query, $t
 	foreach ( $query_result as $key => $value ) {
 		$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $query_result[ $key ]->slug );
 		if ( $registered_template ) {
-			$query_result[ $key ]->plugin = $registered_template->plugin;
-			$query_result[ $key ]->origin =
+			$query_result[ $key ]->plugin      = $registered_template->plugin;
+			$query_result[ $key ]->origin      =
 				'theme' !== $query_result[ $key ]->origin && 'theme' !== $query_result[ $key ]->source ?
 				'plugin' :
 				$query_result[ $key ]->origin;
+			$query_result[ $key ]->title       =
+				empty( $query_result[ $key ]->title ) || $query_result[ $key ]->title === $query_result[ $key ]->slug ?
+				$registered_template->title : $query_result[ $key ]->title;
+			$query_result[ $key ]->description = empty( $query_result[ $key ]->description ) ? $registered_template->description : $query_result[ $key ]->description;
 		}
 	}
 
@@ -70,11 +74,13 @@ function _gutenberg_add_block_template_plugin_attribute( $block_template ) {
 	if ( $block_template ) {
 		$registered_template = WP_Block_Templates_Registry::get_instance()->get_by_slug( $block_template->slug );
 		if ( $registered_template ) {
-			$block_template->plugin = $registered_template->plugin;
-			$block_template->origin =
+			$block_template->plugin      = $registered_template->plugin;
+			$block_template->origin      =
 				'theme' !== $block_template->origin && 'theme' !== $block_template->source ?
 				'plugin' :
 				$block_template->origin;
+			$block_template->title       = empty( $block_template->title ) || $block_template->title === $block_template->slug ? $registered_template->title : $block_template->title;
+			$block_template->description = empty( $block_template->description ) ? $registered_template->description : $block_template->description;
 		}
 	}
 

lib/experimental/block-editor-settings-mobile.php

@@ -16,24 +16,15 @@
  * @return array New block editor settings.
  */
 function gutenberg_get_block_editor_settings_mobile( $settings ) {
-	if (
-		defined( 'REST_REQUEST' ) &&
-		REST_REQUEST &&
-		isset( $_GET['context'] ) &&
-		'mobile' === $_GET['context']
-	) {
-		if ( wp_theme_has_theme_json() ) {
-			$settings['__experimentalStyles'] = gutenberg_get_global_styles();
-		}
-
-		// To tell mobile that the site uses quote v2 (inner blocks).
-		// See https://github.com/WordPress/gutenberg/pull/25892.
-		$settings['__experimentalEnableQuoteBlockV2'] = true;
-		// To tell mobile that the site uses list v2 (inner blocks).
-		$settings['__experimentalEnableListBlockV2'] = true;
+	if ( wp_theme_has_theme_json() ) {
+		$settings['__experimentalStyles'] = gutenberg_get_global_styles();
 	}
 
+	// To tell mobile that the site uses quote v2 (inner blocks).
+	// See https://github.com/WordPress/gutenberg/pull/25892.
+	$settings['__experimentalEnableQuoteBlockV2'] = true;
+	// To tell mobile that the site uses list v2 (inner blocks).
+	$settings['__experimentalEnableListBlockV2'] = true;
+
 	return $settings;
 }
-
-add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_mobile', PHP_INT_MAX );

lib/experimental/class-wp-rest-block-editor-settings-controller.php

@@ -93,9 +93,13 @@ public function get_items( $request ) { // phpcs:ignore VariableAnalysis.CodeAna
 					break;
 			}
 
+			add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_mobile', PHP_INT_MAX );
+
 			$editor_context = new WP_Block_Editor_Context( array( 'name' => $editor_context_name ) );
 			$settings       = get_block_editor_settings( array(), $editor_context );
 
+			remove_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings_mobile', PHP_INT_MAX );
+
 			return rest_ensure_response( $settings );
 		}