Merge branch 'WordPress:trunk' into trunk

Author: karthick-murugan

backport-changelog/6.8/7865.md

@@ -1,3 +1,4 @@
 https://github.com/WordPress/wordpress-develop/pull/7865
 
-* https://github.com/WordPress/gutenberg/pull/66851
+* https://github.com/WordPress/gutenberg/pull/66851
+* https://github.com/WordPress/gutenberg/pull/68174

backport-changelog/6.8/8032.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/8032
+
+* https://github.com/WordPress/gutenberg/pull/68003

bin/api-docs/gen-components-docs/markdown/index.mjs

@@ -8,14 +8,27 @@ import json2md from 'json2md';
  */
 import { generateMarkdownPropsJson } from './props.mjs';
 
+/**
+ * If the string is contentful, ensure that it ends with a single newline.
+ * Otherwise normalize to `undefined`.
+ *
+ * @param {string} [str]
+ */
+function normalizeTrailingNewline( str ) {
+	if ( ! str?.trim() ) {
+		return undefined;
+	}
+	return str.replace( /\n*$/, '\n' );
+}
+
 export function generateMarkdownDocs( { typeDocs, subcomponentTypeDocs } ) {
 	const mainDocsJson = [
 		{ h1: typeDocs.displayName },
 		'<!-- This file is generated automatically and cannot be edited directly. Make edits via TypeScript types and TSDocs. -->',
 		{
 			p: `<p class="callout callout-info">See the <a href="https://wordpress.github.io/gutenberg/?path=/docs/components-${ typeDocs.displayName.toLowerCase() }--docs">WordPress Storybook</a> for more detailed, interactive documentation.</p>`,
 		},
-		typeDocs.description,
+		normalizeTrailingNewline( typeDocs.description ),
 		...generateMarkdownPropsJson( typeDocs.props ),
 	];
 
@@ -26,7 +39,7 @@ export function generateMarkdownDocs( { typeDocs, subcomponentTypeDocs } ) {
 					{
 						h3: subcomponentTypeDoc.displayName,
 					},
-					subcomponentTypeDoc.description,
+					normalizeTrailingNewline( subcomponentTypeDoc.description ),
 					...generateMarkdownPropsJson( subcomponentTypeDoc.props, {
 						headingLevel: 4,
 					} ),

lib/block-supports/block-style-variations.php

@@ -211,10 +211,10 @@ function gutenberg_render_block_style_variation_support_styles( $parsed_block )
  * block attributes in the `render_block_data` filter gets applied to the
  * block's markup.
  *
- * @see gutenberg_render_block_style_variation_support_styles
- *
  * @since 6.6.0
  *
+ * @see gutenberg_render_block_style_variation_support_styles
+ *
  * @param  string $block_content Rendered block content.
  * @param  array  $block         Block object.
  *

lib/compat/wordpress-6.8/site-editor.php

@@ -145,4 +145,4 @@ function gutenberg_add_styles_submenu_item() {
 		}
 	}
 }
-add_action( 'admin_init', 'gutenberg_add_styles_submenu_item' );
+add_action( 'admin_menu', 'gutenberg_add_styles_submenu_item' );

packages/block-editor/src/components/block-tools/style.scss

@@ -78,6 +78,7 @@
 		color: $white;
 		padding: 0;
 
+		// TODO: Consider passing size="small" to the Inserter toggle instead.
 		// Special dimensions for this button.
 		min-width: $button-size-small;
 		height: $button-size-small;

packages/block-editor/src/components/default-block-appender/content.scss

@@ -42,6 +42,7 @@
 		color: $white;
 		padding: 0;
 
+		// TODO: Consider passing size="small" to the Inserter toggle instead.
 		// Special dimensions for this button.
 		min-width: $button-size-small;
 		height: $button-size-small;

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

@@ -65,7 +65,9 @@ function CategoryTabs( {
 						key={ category.name }
 						tabId={ category.name }
 						aria-current={
-							category === selectedCategory ? 'true' : undefined
+							category.name === selectedCategory?.name
+								? 'true'
+								: undefined
 						}
 					>
 						{ category.label }

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

@@ -60,6 +60,7 @@ const defaultRenderToggle = ( {
 
 	return (
 		<Wrapper
+			__next40pxDefaultSize={ toggleProps.as ? undefined : true }
 			icon={ plus }
 			label={ label }
 			tooltipPosition="bottom"

packages/block-editor/src/components/media-placeholder/index.js

@@ -15,7 +15,7 @@ import {
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 	withFilters,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useState, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { keyboardReturn } from '@wordpress/icons';
@@ -482,7 +482,7 @@ export function MediaPlaceholder( {
 										) }
 										onClick={ openFileDialog }
 									>
-										{ __( 'Upload' ) }
+										{ _x( 'Upload', 'verb' ) }
 									</Button>
 									{ uploadMediaLibraryButton }
 									{ renderUrlSelectionUI() }
@@ -512,7 +512,7 @@ export function MediaPlaceholder( {
 									'block-editor-media-placeholder__upload-button'
 								) }
 							>
-								{ __( 'Upload' ) }
+								{ _x( 'Upload', 'verb' ) }
 							</Button>
 						) }
 						onChange={ onUpload }

packages/block-editor/src/components/media-replace-flow/index.js

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import {
 	FormFileUpload,
@@ -188,7 +188,7 @@ const MediaReplaceFlow = ( {
 												openFileDialog();
 											} }
 										>
-											{ __( 'Upload' ) }
+											{ _x( 'Upload', 'verb' ) }
 										</MenuItem>
 									);
 								} }

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/cover/test/edit.js

@@ -200,9 +200,7 @@ describe( 'Cover block', () => {
 
 				await selectBlock( 'Block: Cover' );
 				expect(
-					screen.getByRole( 'heading', {
-						name: 'Settings',
-					} )
+					await screen.findByRole( 'heading', { name: 'Settings' } )
 				).toBeInTheDocument();
 			} );
 		} );
@@ -216,7 +214,7 @@ describe( 'Cover block', () => {
 			);
 			await selectBlock( 'Block: Cover' );
 			await userEvent.click(
-				screen.getByLabelText( 'Fixed background' )
+				await screen.findByLabelText( 'Fixed background' )
 			);
 			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
 				'has-parallax'
@@ -232,7 +230,7 @@ describe( 'Cover block', () => {
 			);
 			await selectBlock( 'Block: Cover' );
 			await userEvent.click(
-				screen.getByLabelText( 'Repeated background' )
+				await screen.findByLabelText( 'Repeated background' )
 			);
 			expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveClass(
 				'is-repeated'
@@ -245,7 +243,7 @@ describe( 'Cover block', () => {
 			} );
 
 			await selectBlock( 'Block: Cover' );
-			await userEvent.clear( screen.getByLabelText( 'Left' ) );
+			await userEvent.clear( await screen.findByLabelText( 'Left' ) );
 			await userEvent.type( screen.getByLabelText( 'Left' ), '100' );
 
 			expect(
@@ -262,7 +260,7 @@ describe( 'Cover block', () => {
 
 			await selectBlock( 'Block: Cover' );
 			await userEvent.type(
-				screen.getByLabelText( 'Alternative text' ),
+				await screen.findByLabelText( 'Alternative text' ),
 				'Me'
 			);
 			expect( screen.getByAltText( 'Me' ) ).toBeInTheDocument();

packages/block-library/src/navigation-submenu/edit.js

@@ -44,6 +44,7 @@ import {
 	getColors,
 	getNavigationChildBlockProps,
 } from '../navigation/edit/utils';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const ALLOWED_BLOCKS = [
 	'core/navigation-link',
@@ -153,6 +154,7 @@ export default function NavigationSubmenuEdit( {
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
 	const itemLabelPlaceholder = __( 'Add text…' );
 	const ref = useRef();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const {
 		parentCount,
@@ -394,6 +396,7 @@ export default function NavigationSubmenuEdit( {
 							rel: '',
 						} );
 					} }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
 						label={ __( 'Text' ) }

packages/block-library/src/navigation/index.php

@@ -539,8 +539,8 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
 			$inner_blocks_html,
 			$toggle_aria_label_open,
 			$toggle_aria_label_close,
-			esc_attr( implode( ' ', $responsive_container_classes ) ),
-			esc_attr( implode( ' ', $open_button_classes ) ),
+			esc_attr( trim( implode( ' ', $responsive_container_classes ) ) ),
+			esc_attr( trim( implode( ' ', $open_button_classes ) ) ),
 			( ! empty( $overlay_inline_styles ) ) ? "style=\"$overlay_inline_styles\"" : '',
 			$toggle_button_content,
 			$toggle_close_button_content,