Merge branch 'trunk' into fix/issue-65339-task1

WordPress · Oct 29, 2024 · 4fd8d34 · 4fd8d34
2 parents a3d6c29 + ba17e59
commit 4fd8d34
Show file tree

Hide file tree

Showing 40 changed files with 608 additions and 495 deletions.
diff --git a/README.md b/README.md
@@ -7,6 +7,8 @@
 [![React Native E2E Tests (iOS)](<https://github.com/WordPress/gutenberg/workflows/React%20Native%20E2E%20Tests%20(iOS)/badge.svg>)](https://github.com/WordPress/gutenberg/actions?query=workflow%3A%22React+Native+E2E+Tests+%28iOS%29%22+branch%3Atrunk)
 [![React Native E2E Tests (Android)](<https://github.com/WordPress/gutenberg/workflows/React%20Native%20E2E%20Tests%20(Android)/badge.svg>)](https://github.com/WordPress/gutenberg/actions?query=workflow%3A%22React+Native+E2E+Tests+%28Android%29%22+branch%3Atrunk)
 
+<a href="https://wordpress.github.io/gutenberg/" target="_blank"><img src="https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg" alt="Storybook Badge" /></a>
+
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org)
 
 ![Screenshot of the Gutenberg Editor, editing a post in WordPress](https://user-images.githubusercontent.com/1204802/100067796-fc3e8700-2e36-11eb-993b-6b80b4310b87.png)

diff --git a/backport-changelog/6.7/7661.md b/backport-changelog/6.7/7661.md
@@ -0,0 +1,4 @@
+https://github.com/WordPress/wordpress-develop/pull/7661
+
+* https://github.com/WordPress/gutenberg/pull/66468
+* https://github.com/WordPress/gutenberg/pull/66543
diff --git a/backport-changelog/6.8/7642.md b/backport-changelog/6.8/7642.md
diff --git a/bin/api-docs/gen-components-docs/get-subcomponent-descriptions.mjs b/bin/api-docs/gen-components-docs/get-subcomponent-descriptions.mjs
@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import fs from 'node:fs/promises';
+import babel from '@babel/core';
+import { parse as commentParser } from 'comment-parser';
+
+/**
+ * Try to get subcomponent descriptions from the main component Object.assign() call.
+ */
+export async function getDescriptionsForSubcomponents(
+	filePath,
+	mainComponentName
+) {
+	const fileContent = await fs.readFile( filePath, 'utf8' );
+	const parsedFile = babel.parse( fileContent, {
+		filename: filePath,
+	} );
+	const mainComponent = parsedFile.program.body
+		.filter( ( node ) => node.type === 'ExportNamedDeclaration' )
+		.flatMap( ( node ) => node.declaration?.declarations )
+		.find( ( node ) => node?.id.name === mainComponentName );
+
+	if (
+		! (
+			// If the main component export has `Object.assign( ... )`
+			(
+				mainComponent?.init?.type === 'CallExpression' &&
+				mainComponent?.init?.callee?.object?.name === 'Object' &&
+				mainComponent?.init?.callee?.property?.name === 'assign'
+			)
+		)
+	) {
+		return;
+	}
+
+	const properties = mainComponent?.init?.arguments[ 1 ]?.properties.map(
+		( node ) => [
+			node.key.name,
+			commentParser( `/*${ node.leadingComments?.[ 0 ].value }*/`, {
+				spacing: 'preserve',
+			} )?.[ 0 ]?.description,
+		]
+	);
+	return Object.fromEntries( properties );
+}
diff --git a/bin/api-docs/gen-components-docs/index.mjs b/bin/api-docs/gen-components-docs/index.mjs
@@ -10,6 +10,7 @@ import path from 'path';
  * Internal dependencies
  */
 import { generateMarkdownDocs } from './markdown/index.mjs';
+import { getDescriptionsForSubcomponents } from './get-subcomponent-descriptions.mjs';
 
 const MANIFEST_GLOB = 'packages/components/src/**/docs-manifest.json';
 
@@ -79,8 +80,10 @@ await Promise.all(
 			displayName: manifest.displayName,
 		} );
 
-		const subcomponentTypeDocs = manifest.subcomponents?.map(
-			( subcomponent ) => {
+		let subcomponentDescriptions;
+
+		const subcomponentTypeDocs = await Promise.all(
+			manifest.subcomponents?.map( async ( subcomponent ) => {
 				const docs = getTypeDocsForComponent( {
 					manifestPath,
 					componentFilePath: subcomponent.filePath,
@@ -91,10 +94,29 @@ await Promise.all(
 					docs.displayName = subcomponent.preferredDisplayName;
 				}
 
+				if ( ! subcomponent.description ) {
+					subcomponentDescriptions ??=
+						getDescriptionsForSubcomponents(
+							path.resolve(
+								path.dirname( manifestPath ),
+								manifest.filePath
+							),
+							manifest.displayName
+						);
+
+					docs.description = ( await subcomponentDescriptions )?.[
+						subcomponent.displayName
+					];
+				}
+
 				return docs;
-			}
+			} ) ?? []
 		);
-		const docs = generateMarkdownDocs( { typeDocs, subcomponentTypeDocs } );
+
+		const docs = generateMarkdownDocs( {
+			typeDocs,
+			subcomponentTypeDocs,
+		} );
 		const outputFile = path.resolve(
 			path.dirname( manifestPath ),
 			'./README.md'

diff --git a/lib/compat/wordpress-6.7/rest-api.php b/lib/compat/wordpress-6.7/rest-api.php
@@ -50,6 +50,25 @@ function gutenberg_block_editor_preload_paths_6_7( $paths, $context ) {
 		}
 	}
 
+	// Preload theme and global styles paths.
+	$excluded_paths = array();
+	if ( 'core/edit-site' === $context->name || 'core/edit-post' === $context->name ) {
+		$active_theme     = get_stylesheet();
+		$global_styles_id = WP_Theme_JSON_Resolver_Gutenberg::get_user_global_styles_post_id();
+		$paths[]          = '/wp/v2/global-styles/themes/' . $active_theme . '?context=view';
+		$paths[]          = '/wp/v2/global-styles/themes/' . $active_theme . '/variations?context=view';
+		$paths[]          = array( '/wp/v2/global-styles/' . $global_styles_id, 'OPTIONS' );
+
+		// Remove duplicate or unnecessary global styles paths.
+		$excluded_paths[] = '/wp/v2/global-styles/themes/' . $active_theme;
+		$excluded_paths[] = '/wp/v2/global-styles/' . $global_styles_id;
+		foreach ( $paths as $key => $path ) {
+			if ( in_array( $path, $excluded_paths, true ) ) {
+				unset( $paths[ $key ] );
+			}
+		}
+	}
+
 	return $paths;
 }
 add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_block_editor_preload_paths_6_7', 10, 2 );

diff --git a/lib/compat/wordpress-6.8/remove-default-css.php b/lib/compat/wordpress-6.8/remove-default-css.php
diff --git a/lib/load.php b/lib/load.php
@@ -47,7 +47,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require __DIR__ . '/compat/wordpress-6.7/rest-api.php';
 
 	// WordPress 6.8 compat.
-	require __DIR__ . '/compat/wordpress-6.8/remove-default-css.php';
 	require __DIR__ . '/compat/wordpress-6.8/block-comments.php';
 	require __DIR__ . '/compat/wordpress-6.8/class-gutenberg-rest-comment-controller-6-8.php';
 

diff --git a/packages/block-editor/src/autocompleters/block.js b/packages/block-editor/src/autocompleters/block.js
@@ -6,6 +6,7 @@ import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	parse,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
 
@@ -36,22 +37,30 @@ function createBlockCompleter() {
 		triggerPrefix: '/',
 
 		useItems( filterValue ) {
-			const { rootClientId, selectedBlockName, prioritizedBlocks } =
+			const { rootClientId, selectedBlockId, prioritizedBlocks } =
 				useSelect( ( select ) => {
 					const {
 						getSelectedBlockClientId,
-						getBlockName,
+						getBlock,
 						getBlockListSettings,
 						getBlockRootClientId,
 					} = select( blockEditorStore );
+					const { getActiveBlockVariation } = select( blocksStore );
 					const selectedBlockClientId = getSelectedBlockClientId();
+					const { name: blockName, attributes } = getBlock(
+						selectedBlockClientId
+					);
+					const activeBlockVariation = getActiveBlockVariation(
+						blockName,
+						attributes
+					);
 					const _rootClientId = getBlockRootClientId(
 						selectedBlockClientId
 					);
 					return {
-						selectedBlockName: selectedBlockClientId
-							? getBlockName( selectedBlockClientId )
-							: null,
+						selectedBlockId: activeBlockVariation
+							? `${ blockName }/${ activeBlockVariation.name }`
+							: blockName,
 						rootClientId: _rootClientId,
 						prioritizedBlocks:
 							getBlockListSettings( _rootClientId )
@@ -78,11 +87,11 @@ function createBlockCompleter() {
 					  );
 
 				return initialFilteredItems
-					.filter( ( item ) => item.name !== selectedBlockName )
+					.filter( ( item ) => item.id !== selectedBlockId )
 					.slice( 0, SHOWN_BLOCK_TYPES );
 			}, [
 				filterValue,
-				selectedBlockName,
+				selectedBlockId,
 				items,
 				categories,
 				collections,

diff --git a/packages/block-editor/src/components/iframe/style.scss b/packages/block-editor/src/components/iframe/style.scss
@@ -1,7 +1,6 @@
 .block-editor-iframe__container {
 	width: 100%;
 	height: 100%;
-	overflow-x: hidden;
 }
 
 .block-editor-iframe__scale-container {

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/patterns-filter.js b/packages/block-editor/src/components/inserter/block-patterns-tab/patterns-filter.js
@@ -158,7 +158,7 @@ export function PatternsFilter( {
 								value={ patternSyncFilter }
 							/>
 						</MenuGroup>
-						<div className="block-editor-tool-selector__help">
+						<div className="block-editor-inserter__patterns-filter-help">
 							{ createInterpolateElement(
 								__(
 									'Patterns are available from the <Link>WordPress.org Pattern Directory</Link>, bundled in the active theme, or created by users on this site. Only patterns created on this site can be synced.'

diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js
@@ -6,6 +6,7 @@ import {
 	privateApis as componentsPrivateApis,
 	__unstableMotion as motion,
 } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -31,10 +32,22 @@ function CategoryTabs( {
 
 	const previousSelectedCategory = usePrevious( selectedCategory );
 
+	const selectedTabId = selectedCategory ? selectedCategory.name : null;
+	const [ activeTabId, setActiveId ] = useState();
+	const firstTabId = categories?.[ 0 ]?.name;
+	useEffect( () => {
+		// If there is no active tab, make the first tab the active tab, so that
+		// when focus is moved to the tablist, the first tab will be focused
+		// despite not being selected
+		if ( selectedTabId === null && ! activeTabId && firstTabId ) {
+			setActiveId( firstTabId );
+		}
+	}, [ selectedTabId, activeTabId, firstTabId, setActiveId ] );
+
 	return (
 		<Tabs
 			selectOnMove={ false }
-			selectedTabId={ selectedCategory ? selectedCategory.name : null }
+			selectedTabId={ selectedTabId }
 			orientation="vertical"
 			onSelect={ ( categoryId ) => {
 				// Pass the full category object
@@ -44,6 +57,8 @@ function CategoryTabs( {
 					)
 				);
 			} }
+			activeTabId={ activeTabId }
+			onActiveTabIdChange={ setActiveId }
 		>
 			<Tabs.TabList className="block-editor-inserter__category-tablist">
 				{ categories.map( ( category ) => (

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -266,6 +266,13 @@ $block-inserter-tabs-height: 44px;
 	margin-top: $grid-unit-30;
 }
 
+.block-editor-inserter__patterns-filter-help {
+	padding: $grid-unit-20;
+	border-top: $border-width solid $gray-300;
+	color: $gray-700;
+	min-width: 280px;
+}
+
 .block-editor-inserter__media-list,
 .block-editor-block-patterns-list {
 	overflow-y: auto;

diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	ExternalLink,
@@ -96,7 +96,8 @@ export default function LinkPreview( {
 
 	return (
 		<div
-			aria-label={ __( 'Currently selected' ) }
+			role="group"
+			aria-label={ __( 'Manage link' ) }
 			className={ clsx( 'block-editor-link-control__search-item', {
 				'is-current': true,
 				'is-rich': hasRichData,
@@ -107,7 +108,14 @@ export default function LinkPreview( {
 			} ) }
 		>
 			<div className="block-editor-link-control__search-item-top">
-				<span className="block-editor-link-control__search-item-header">
+				<span
+					className="block-editor-link-control__search-item-header"
+					role="figure"
+					aria-label={
+						/* translators: Accessibility text for the link preview when editing a link. */
+						__( 'Link information' )
+					}
+				>
 					<span
 						className={ clsx(
 							'block-editor-link-control__search-item-icon',
@@ -149,26 +157,25 @@ export default function LinkPreview( {
 					label={ __( 'Edit link' ) }
 					onClick={ onEditClick }
 					size="compact"
+					showTooltip={ ! showIconLabels }
 				/>
 				{ hasUnlinkControl && (
 					<Button
 						icon={ linkOff }
 						label={ __( 'Remove link' ) }
 						onClick={ onRemove }
 						size="compact"
+						showTooltip={ ! showIconLabels }
 					/>
 				) }
 				<Button
 					icon={ copySmall }
-					label={ sprintf(
-						// Translators: %s is a placeholder for the link URL and an optional colon, (if a Link URL is present).
-						__( 'Copy link%s' ), // Ends up looking like "Copy link: https://example.com".
-						isEmptyURL || showIconLabels ? '' : ': ' + value.url
-					) }
+					label={ __( 'Copy link' ) }
 					ref={ ref }
 					accessibleWhenDisabled
 					disabled={ isEmptyURL }
 					size="compact"
+					showTooltip={ ! showIconLabels }
 				/>
 				<ViewerSlot fillProps={ value } />
 			</div>