@wordpress/edit-site 6.6.1 → 6.7.0

package/src/components/editor-canvas-container/index.js

@@ -136,6 +136,8 @@ function EditorCanvasContainer( {
 					>
 						{ shouldShowCloseButton && (
 							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								className="edit-site-editor-canvas-container__close-button"
 								icon={ closeSmall }
 								label={ closeButtonLabel || __( 'Close' ) }

package/src/components/editor-canvas-container/style.scss

@@ -16,7 +16,7 @@
 
 .edit-site-editor-canvas-container__section {
 	background: $white; // Fallback color, overridden by JavaScript.
-	border-radius: $radius-block-ui;
+	border-radius: $radius-large;
 	bottom: 0;
 	left: 0;
 	overflow: hidden;

package/src/components/error-boundary/warning.js

@@ -9,7 +9,12 @@ import { useCopyToClipboard } from '@wordpress/compose';
 function CopyButton( { text, children } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button variant="secondary" ref={ ref }>
+		<Button
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
+			variant="secondary"
+			ref={ ref }
+		>
 			{ children }
 		</Button>
 	);

package/src/components/global-styles/font-library-modal/font-card.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { _n, sprintf } from '@wordpress/i18n';
+import { _n, sprintf, isRTL } from '@wordpress/i18n';
 import {
 	__experimentalUseNavigator as useNavigator,
 	__experimentalText as Text,
@@ -15,7 +15,7 @@ import {
  * Internal dependencies
  */
 import FontDemo from './font-demo';
-import { chevronRight } from '@wordpress/icons';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 
 function FontCard( { font, onClick, variantsText, navigatorPath } ) {
 	const variantsCount = font.fontFace?.length || 1;
@@ -28,6 +28,8 @@ function FontCard( { font, onClick, variantsText, navigatorPath } ) {
 
 	return (
 		<Button
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			onClick={ () => {
 				onClick();
 				if ( navigatorPath ) {
@@ -55,7 +57,7 @@ function FontCard( { font, onClick, variantsText, navigatorPath } ) {
 						</Text>
 					</FlexItem>
 					<FlexItem>
-						<Icon icon={ chevronRight } />
+						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
 					</FlexItem>
 				</Flex>
 			</Flex>

package/src/components/global-styles/font-library-modal/font-collection.js

@@ -15,7 +15,7 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 	__experimentalHeading as Heading,
 	Notice,
 	SelectControl,
@@ -28,7 +28,7 @@ import {
 	CheckboxControl,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
-import { sprintf, __, _x } from '@wordpress/i18n';
+import { sprintf, __, _x, isRTL } from '@wordpress/i18n';
 import { moreVertical, chevronLeft, chevronRight } from '@wordpress/icons';
 
 /**
@@ -376,14 +376,16 @@ function FontCollection( { slug } ) {
 										</li>
 									) ) }
 								</ul>
-								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }{ ' ' }
+								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 							</div>
 						</NavigatorScreen>
 
 						<NavigatorScreen path="/fontFamily">
 							<Flex justify="flex-start">
-								<NavigatorToParentButton
-									icon={ chevronLeft }
+								<NavigatorBackButton
+									icon={
+										isRTL() ? chevronRight : chevronLeft
+									}
 									size="small"
 									onClick={ () => {
 										setSelectedFont( null );
@@ -425,26 +427,40 @@ function FontCollection( { slug } ) {
 								__nextHasNoMarginBottom
 							/>
 							<VStack spacing={ 0 }>
-								<Spacer margin={ 8 } />
-								{ getSortedFontFaces( selectedFont ).map(
-									( face, i ) => (
-										<CollectionFontVariant
-											font={ selectedFont }
-											face={ face }
-											key={ `face${ i }` }
-											handleToggleVariant={
-												handleToggleVariant
-											}
-											selected={ isFontFontFaceInOutline(
-												selectedFont.slug,
-												selectedFont.fontFace
-													? face
-													: null, // If the font has no fontFace, we want to check if the font is in the outline
-												fontToInstallOutline
-											) }
-										/>
-									)
-								) }
+								{ /*
+								 * Disable reason: The `list` ARIA role is redundant but
+								 * Safari+VoiceOver won't announce the list otherwise.
+								 */
+								/* eslint-disable jsx-a11y/no-redundant-roles */ }
+								<ul
+									role="list"
+									className="font-library-modal__fonts-list"
+								>
+									{ getSortedFontFaces( selectedFont ).map(
+										( face, i ) => (
+											<li
+												key={ `face${ i }` }
+												className="font-library-modal__fonts-list-item"
+											>
+												<CollectionFontVariant
+													font={ selectedFont }
+													face={ face }
+													handleToggleVariant={
+														handleToggleVariant
+													}
+													selected={ isFontFontFaceInOutline(
+														selectedFont.slug,
+														selectedFont.fontFace
+															? face
+															: null, // If the font has no fontFace, we want to check if the font is in the outline
+														fontToInstallOutline
+													) }
+												/>
+											</li>
+										)
+									) }
+								</ul>
+								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 							</VStack>
 							<Spacer margin={ 16 } />
 						</NavigatorScreen>
@@ -456,6 +472,8 @@ function FontCollection( { slug } ) {
 							className="font-library-modal__footer"
 						>
 							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								variant="primary"
 								onClick={ handleInstall }
 								isBusy={ isInstalling }
@@ -482,7 +500,7 @@ function FontCollection( { slug } ) {
 								disabled={ page === 1 }
 								showTooltip
 								accessibleWhenDisabled
-								icon={ chevronLeft }
+								icon={ isRTL() ? chevronRight : chevronLeft }
 								tooltipPosition="top"
 							/>
 							<HStack
@@ -533,7 +551,7 @@ function FontCollection( { slug } ) {
 								onClick={ () => setPage( page + 1 ) }
 								disabled={ page === totalPages }
 								accessibleWhenDisabled
-								icon={ chevronRight }
+								icon={ isRTL() ? chevronLeft : chevronRight }
 								tooltipPosition="top"
 							/>
 						</HStack>

package/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -8,7 +8,7 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 	__experimentalUseNavigator as useNavigator,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
@@ -21,8 +21,8 @@ import {
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useContext, useEffect, useState } from '@wordpress/element';
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { chevronLeft } from '@wordpress/icons';
+import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
@@ -353,8 +353,10 @@ function InstalledFonts() {
 							/>
 
 							<Flex justify="flex-start">
-								<NavigatorToParentButton
-									icon={ chevronLeft }
+								<NavigatorBackButton
+									icon={
+										isRTL() ? chevronRight : chevronLeft
+									}
 									size="small"
 									onClick={ () => {
 										handleSetLibraryFontSelected( null );
@@ -399,15 +401,31 @@ function InstalledFonts() {
 									__nextHasNoMarginBottom
 								/>
 								<Spacer margin={ 8 } />
-								{ getFontFacesToDisplay(
-									libraryFontSelected
-								).map( ( face, i ) => (
-									<LibraryFontVariant
-										font={ libraryFontSelected }
-										face={ face }
-										key={ `face${ i }` }
-									/>
-								) ) }
+								{ /*
+								 * Disable reason: The `list` ARIA role is redundant but
+								 * Safari+VoiceOver won't announce the list otherwise.
+								 */
+								/* eslint-disable jsx-a11y/no-redundant-roles */ }
+								<ul
+									role="list"
+									className="font-library-modal__fonts-list"
+								>
+									{ getFontFacesToDisplay(
+										libraryFontSelected
+									).map( ( face, i ) => (
+										<li
+											key={ `face${ i }` }
+											className="font-library-modal__fonts-list-item"
+										>
+											<LibraryFontVariant
+												font={ libraryFontSelected }
+												face={ face }
+												key={ `face${ i }` }
+											/>
+										</li>
+									) ) }
+								</ul>
+								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 							</VStack>
 						</NavigatorScreen>
 					</NavigatorProvider>
@@ -419,6 +437,8 @@ function InstalledFonts() {
 						{ isInstalling && <ProgressBar /> }
 						{ shouldDisplayDeleteButton && (
 							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								isDestructive
 								variant="tertiary"
 								onClick={ handleUninstallClick }
@@ -427,6 +447,8 @@ function InstalledFonts() {
 							</Button>
 						) }
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							variant="primary"
 							onClick={ handleUpdate }
 							disabled={ ! fontFamiliesHasChanges }

package/src/components/global-styles/font-library-modal/upload-fonts.js

@@ -230,6 +230,8 @@ function UploadFonts() {
 						onChange={ onFilesUpload }
 						render={ ( { openFileDialog } ) => (
 							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								className="font-library-modal__upload-area"
 								onClick={ openFileDialog }
 							>

package/src/components/global-styles/font-sizes/font-size.js

@@ -21,18 +21,15 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-} = unlock( componentsPrivateApis );
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 import ScreenHeader from '../header';
 import FontSizePreview from './font-size-preview';
 import ConfirmDeleteFontSizeDialog from './confirm-delete-font-size-dialog';
 import RenameFontSizeDialog from './rename-font-size-dialog';
 import SizeControl from '../size-control';
 
+const { DropdownMenuV2 } = unlock( componentsPrivateApis );
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+
 function FontSize() {
 	const [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState( false );
 	const [ isRenameDialogOpen, setIsRenameDialogOpen ] = useState( false );
@@ -47,14 +44,17 @@ function FontSize() {
 		'typography.fontSizes'
 	);
 
+	const [ globalFluid ] = useGlobalSetting( 'typography.fluid' );
+
 	// Get the font sizes from the origin, default to empty array.
 	const sizes = fontSizes[ origin ] ?? [];
 
 	// Get the font size by slug.
 	const fontSize = sizes.find( ( size ) => size.slug === slug );
 
-	// Whether fluid is true or an object, set it to true, otherwise false.
-	const isFluid = !! fontSize.fluid ?? false;
+	// Whether the font size is fluid. If not defined, use the global fluid value of the theme.
+	const isFluid =
+		fontSize.fluid !== undefined ? !! fontSize.fluid : !! globalFluid;
 
 	// Whether custom fluid values are used.
 	const isCustomFluid = typeof fontSize.fluid === 'object';
@@ -160,7 +160,7 @@ function FontSize() {
 								marginBottom={ 0 }
 								paddingX={ 4 }
 							>
-								<DropdownMenu
+								<DropdownMenuV2
 									trigger={
 										<Button
 											size="small"
@@ -169,21 +169,21 @@ function FontSize() {
 										/>
 									}
 								>
-									<DropdownMenuItem
+									<DropdownMenuV2.Item
 										onClick={ toggleRenameDialog }
 									>
-										<DropdownMenuItemLabel>
+										<DropdownMenuV2.ItemLabel>
 											{ __( 'Rename' ) }
-										</DropdownMenuItemLabel>
-									</DropdownMenuItem>
-									<DropdownMenuItem
+										</DropdownMenuV2.ItemLabel>
+									</DropdownMenuV2.Item>
+									<DropdownMenuV2.Item
 										onClick={ toggleDeleteConfirm }
 									>
-										<DropdownMenuItemLabel>
+										<DropdownMenuV2.ItemLabel>
 											{ __( 'Delete' ) }
-										</DropdownMenuItemLabel>
-									</DropdownMenuItem>
-								</DropdownMenu>
+										</DropdownMenuV2.ItemLabel>
+									</DropdownMenuV2.Item>
+								</DropdownMenuV2>
 							</Spacer>
 						</FlexItem>
 					) }

package/src/components/global-styles/font-sizes/font-sizes.js

@@ -27,11 +27,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 import Subtitle from '../subtitle';
 import { NavigationButtonAsItem } from '../navigation-button';
@@ -85,7 +81,7 @@ function FontSizeGroup( {
 							/>
 						) }
 						{ !! handleResetFontSizes && (
-							<DropdownMenu
+							<DropdownMenuV2
 								trigger={
 									<Button
 										size="small"
@@ -96,14 +92,16 @@ function FontSizeGroup( {
 									/>
 								}
 							>
-								<DropdownMenuItem onClick={ toggleResetDialog }>
-									<DropdownMenuItemLabel>
+								<DropdownMenuV2.Item
+									onClick={ toggleResetDialog }
+								>
+									<DropdownMenuV2.ItemLabel>
 										{ origin === 'custom'
 											? __( 'Remove font size presets' )
 											: __( 'Reset font size presets' ) }
-									</DropdownMenuItemLabel>
-								</DropdownMenuItem>
-							</DropdownMenu>
+									</DropdownMenuV2.ItemLabel>
+								</DropdownMenuV2.Item>
+							</DropdownMenuV2>
 						) }
 					</FlexItem>
 				</HStack>

package/src/components/global-styles/header.js

@@ -7,7 +7,7 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
@@ -18,12 +18,7 @@ function ScreenHeader( { title, description, onBack } ) {
 			<View>
 				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
 					<HStack spacing={ 2 }>
-						<NavigatorToParentButton
-							style={
-								// TODO: This style override is also used in ToolsPanelHeader.
-								// It should be supported out-of-the-box by Button.
-								{ minWidth: 24, padding: 0 }
-							}
+						<NavigatorBackButton
 							icon={ isRTL() ? chevronRight : chevronLeft }
 							size="small"
 							label={ __( 'Back' ) }

package/src/components/global-styles/navigation-button.js

@@ -3,7 +3,7 @@
  */
 import {
 	__experimentalNavigatorButton as NavigatorButton,
-	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 	__experimentalItem as Item,
 	FlexItem,
 	__experimentalHStack as HStack,
@@ -33,9 +33,7 @@ function NavigationButtonAsItem( props ) {
 }
 
 function NavigationBackButtonAsItem( props ) {
-	return (
-		<NavigatorToParentButton as={ GenericNavigationButton } { ...props } />
-	);
+	return <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;
 }
 
 export { NavigationButtonAsItem, NavigationBackButtonAsItem };

package/src/components/global-styles/palette.js

@@ -87,6 +87,8 @@ function Palette( { name } ) {
 			{ window.__experimentalEnableColorRandomizer &&
 				themeColors?.length > 0 && (
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="secondary"
 						icon={ shuffle }
 						onClick={ randomizeThemeColors }

package/src/components/global-styles/preset-colors.js

@@ -5,7 +5,7 @@ import { useStylesPreviewColors } from './hooks';
 
 export default function PresetColors() {
 	const { paletteColors } = useStylesPreviewColors();
-	return paletteColors.slice( 0, 5 ).map( ( { slug, color }, index ) => (
+	return paletteColors.slice( 0, 4 ).map( ( { slug, color }, index ) => (
 		<div
 			key={ `${ slug }-${ index }` }
 			style={ {

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -162,6 +162,8 @@ function RevisionsButtons( {
 						aria-current={ isSelected }
 					>
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							className="edit-site-global-styles-screen-revisions__revision-button"
 							accessibleWhenDisabled
 							disabled={ isSelected }

package/src/components/global-styles/screen-revisions/style.scss

@@ -43,7 +43,7 @@
 	}
 
 	&.is-selected {
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 
 		// Only visible in Windows High Contrast mode.
 		outline: 3px solid transparent;

package/src/components/global-styles/shadows-edit-panel.js

@@ -55,11 +55,7 @@ import {
 } from './shadow-utils';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuItemV2: DropdownMenuItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
 const customShadowMenuItems = [
 	{
@@ -151,7 +147,7 @@ export default function ShadowsEditPanel() {
 				<ScreenHeader title={ selectedShadow.name } />
 				<FlexItem>
 					<Spacer marginTop={ 2 } marginBottom={ 0 } paddingX={ 4 }>
-						<DropdownMenu
+						<DropdownMenuV2
 							trigger={
 								<Button
 									size="small"
@@ -164,7 +160,7 @@ export default function ShadowsEditPanel() {
 								? customShadowMenuItems
 								: presetShadowMenuItems
 							).map( ( item ) => (
-								<DropdownMenuItem
+								<DropdownMenuV2.Item
 									key={ item.action }
 									onClick={ () => onMenuClick( item.action ) }
 									disabled={
@@ -173,12 +169,12 @@ export default function ShadowsEditPanel() {
 											baseSelectedShadow.shadow
 									}
 								>
-									<DropdownMenuItemLabel>
+									<DropdownMenuV2.ItemLabel>
 										{ item.label }
-									</DropdownMenuItemLabel>
-								</DropdownMenuItem>
+									</DropdownMenuV2.ItemLabel>
+								</DropdownMenuV2.Item>
 							) ) }
-						</DropdownMenu>
+						</DropdownMenuV2>
 					</Spacer>
 				</FlexItem>
 			</HStack>
@@ -238,6 +234,8 @@ export default function ShadowsEditPanel() {
 						>
 							<FlexItem>
 								<Button
+									// TODO: Switch to `true` (40px size) if possible
+									__next40pxDefaultSize={ false }
 									variant="tertiary"
 									onClick={ () =>
 										setIsRenameModalVisible( false )
@@ -247,7 +245,12 @@ export default function ShadowsEditPanel() {
 								</Button>
 							</FlexItem>
 							<FlexItem>
-								<Button variant="primary" type="submit">
+								<Button
+									// TODO: Switch to `true` (40px size) if possible
+									__next40pxDefaultSize={ false }
+									variant="primary"
+									type="submit"
+								>
 									{ __( 'Save' ) }
 								</Button>
 							</FlexItem>
@@ -377,7 +380,12 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 				return (
 					<HStack align="center" justify="flex-start" spacing={ 0 }>
 						<FlexItem style={ { flexGrow: 1 } }>
-							<Button icon={ shadowIcon } { ...toggleProps }>
+							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
+								icon={ shadowIcon }
+								{ ...toggleProps }
+							>
 								{ shadowObj.inset
 									? __( 'Inner shadow' )
 									: __( 'Drop shadow' ) }
@@ -386,6 +394,8 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 						{ canRemove && (
 							<FlexItem>
 								<Button
+									// TODO: Switch to `true` (40px size) if possible
+									__next40pxDefaultSize={ false }
 									icon={ reset }
 									{ ...removeButtonProps }
 								/>

package/src/components/global-styles/style.scss

@@ -19,7 +19,7 @@
 	min-height: 100px;
 	margin-bottom: $grid-unit-20;
 	background: $gray-100;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	overflow: hidden;
 }
 
@@ -45,7 +45,7 @@
 	display: flex !important;
 	align-items: center;
 	justify-content: center;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-x-small;
 }
 
 .edit-site-global-styles-screen-typography__font-variants-count {
@@ -113,14 +113,14 @@
 	position: relative;
 	width: 100%;
 	border: $gray-200 $border-width solid;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-medium;
 	overflow: hidden;
 }
 
 .edit-site-global-styles__shadow-preview-panel {
 	height: $grid-unit-60 * 3;
 	border: $gray-200 $border-width solid;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-medium;
 	overflow: auto;
 	background-image: repeating-linear-gradient(45deg, #f5f5f5 25%, #0000 0, #0000 75%, #f5f5f5 0, #f5f5f5), repeating-linear-gradient(45deg, #f5f5f5 25%, #0000 0, #0000 75%, #f5f5f5 0, #f5f5f5);
 	background-position: 0 0, 8px 8px;
@@ -128,7 +128,7 @@
 
 	.edit-site-global-styles__shadow-preview-block {
 		border: $gray-200 $border-width solid;
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		background-color: $white;
 		width: 60%;
 		height: 60px;