prep build 6/22

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

@@ -336,7 +336,7 @@ to run sooner. Use this async version whenever there is no need for synchronous
 ### `wp-on-window`
 
 > [!NOTE]  
-> Consider using the more performant [`wp-on-window-async`](#wp-on-window-async) instead if your directive code does not need synchronous access to the event object. If synchronous access is required, consider implementing an [async action](#async-actions) which yields to the main thread after calling the synchronous API.
+> Consider using the more performant [`wp-on-async-window`](#wp-on-async-window) instead if your directive code does not need synchronous access to the event object. If synchronous access is required, consider implementing an [async action](#async-actions) which yields to the main thread after calling the synchronous API.
 
 This directive allows you to attach global window events like `resize`, `copy`, and `focus` and then execute a defined callback when those happen.
 
@@ -365,14 +365,14 @@ store( "myPlugin", {
 
 The callback passed as the reference receives [the event](https://developer.mozilla.org/en-US/docs/Web/API/Event) (`event`), and the returned value by this callback is ignored. When the element is removed from the DOM, the event listener is also removed.
 
-### `wp-on-window-async`
+### `wp-on-async-window`
 
 Similar to `wp-on-async`, this is an optimized version of `wp-on-window` that immediately yields to main to avoid contributing to a long task. Use this async version whenever there is no need for synchronous access to the `event` object, in particular the methods `event.preventDefault()`, `event.stopPropagation()`, and `event.stopImmediatePropagation()`. This event listener is also added as [`passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive).
 
 ### `wp-on-document`
 
 > [!NOTE]  
-> Consider using the more performant [`wp-on-document-async`](#wp-on-document-async) instead if your directive code does not need synchronous access to the event object. If synchronous access is required, consider implementing an [async action](#async-actions) which yields to the main thread after calling the synchronous API.
+> Consider using the more performant [`wp-on-async-document`](#wp-on-async-document) instead if your directive code does not need synchronous access to the event object. If synchronous access is required, consider implementing an [async action](#async-actions) which yields to the main thread after calling the synchronous API.
 
 This directive allows you to attach global document events like `scroll`, `mousemove`, and `keydown` and then execute a defined callback when those happen.
 
@@ -401,7 +401,7 @@ store( "myPlugin", {
 
 The callback passed as the reference receives [the event](https://developer.mozilla.org/en-US/docs/Web/API/Event) (`event`), and the returned value by this callback is ignored. When the element is removed from the DOM, the event listener is also removed.
 
-### `wp-on-document-async`
+### `wp-on-async-document`
 
 Similar to `wp-on-async`, this is an optimized version of `wp-on-document` that immediately yields to main to avoid contributing to a long task. Use this async version whenever there is no need for synchronous access to the `event` object, in particular the methods `event.preventDefault()`, `event.stopPropagation()`, and `event.stopImmediatePropagation()`. This event listener is also added as [`passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive).
 

packages/block-library/src/navigation/style.scss

@@ -300,6 +300,7 @@ button.wp-block-navigation-item__content {
 	color: currentColor;
 	font-size: inherit;
 	font-family: inherit;
+	letter-spacing: inherit;
 	line-height: inherit;
 	font-style: inherit;
 	font-weight: inherit;

packages/block-library/src/reset.scss

@@ -8,19 +8,18 @@
 // We use :where to keep specificity minimal.
 // https://css-tricks.com/almanac/selectors/w/where/
 :where(.editor-styles-wrapper) {
-	/**
-	* The following styles revert to the browser defaults overriding the WPAdmin styles.
-	* This is only needed while the block editor is not being loaded in an iframe.
-	*/
-	font-family: serif; // unfortunately initial doesn't work for font-family.
-	font-size: initial;
-	line-height: initial;
-	color: initial;
+	// The following styles revert to the browser defaults overriding the WPAdmin styles.
+	html & {
+		font-family: serif; // unfortunately initial doesn't work for font-family.
+		font-size: initial;
+		line-height: initial;
+		color: initial;
 
-	// Many themes with white backgrounds load editor styles but fail to also provide
-	// an explicit white background color, assuming a white editing canvas.
-	// So to match browser defaults, we provide a white default here as well.
-	background: #fff;
+		// Many themes with white backgrounds load editor styles but fail to also provide
+		// an explicit white background color, assuming a white editing canvas.
+		// So to match browser defaults, we provide a white default here as well.
+		background: #fff;
+	}
 
 	.wp-align-wrapper {
 		max-width: $content-width;

packages/edit-site/src/components/editor/index.js

@@ -110,14 +110,12 @@ export default function EditSiteEditor( { isLoading } ) {
 			{
 				// Forming a "block formatting context" to prevent margin collapsing.
 				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-
-				css: `body{${
+				css:
 					canvasMode === 'view'
-						? `min-height: 100vh; ${
+						? `body{min-height: 100vh; ${
 								currentPostIsTrashed ? '' : 'cursor: pointer;'
-						  }`
-						: ''
-				}}}`,
+						  }}`
+						: undefined,
 			},
 		],
 		[ settings.styles, canvasMode, currentPostIsTrashed ]

packages/edit-site/src/components/global-styles/font-families.js

@@ -5,11 +5,9 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
 	Button,
 } from '@wordpress/components';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { settings } from '@wordpress/icons';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -51,30 +49,41 @@ function FontFamilies() {
 			) }
 
 			<VStack spacing={ 2 }>
-				<HStack justify="space-between">
-					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
-					<Button
-						onClick={ () => setModalTabOpen( 'installed-fonts' ) }
-						label={ __( 'Manage fonts' ) }
-						icon={ settings }
-						size="small"
-					/>
-				</HStack>
+				<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 				{ hasFonts ? (
-					<ItemGroup isBordered isSeparated>
-						{ customFonts.map( ( font ) => (
-							<FontFamilyItem key={ font.slug } font={ font } />
-						) ) }
-						{ themeFonts.map( ( font ) => (
-							<FontFamilyItem key={ font.slug } font={ font } />
-						) ) }
-					</ItemGroup>
+					<>
+						<ItemGroup isBordered isSeparated>
+							{ customFonts.map( ( font ) => (
+								<FontFamilyItem
+									key={ font.slug }
+									font={ font }
+								/>
+							) ) }
+							{ themeFonts.map( ( font ) => (
+								<FontFamilyItem
+									key={ font.slug }
+									font={ font }
+								/>
+							) ) }
+						</ItemGroup>
+						<Button
+							className="edit-site-global-styles-font-families__manage-fonts"
+							variant="secondary"
+							__next40pxDefaultSize
+							onClick={ () =>
+								setModalTabOpen( 'installed-fonts' )
+							}
+						>
+							{ __( 'Manage fonts' ) }
+						</Button>
+					</>
 				) : (
 					<>
 						{ __( 'No fonts installed.' ) }
 						<Button
 							className="edit-site-global-styles-font-families__add-fonts"
 							variant="secondary"
+							__next40pxDefaultSize
 							onClick={ () => setModalTabOpen( 'upload-fonts' ) }
 						>
 							{ __( 'Add fonts' ) }

packages/edit-site/src/components/global-styles/style.scss

@@ -41,7 +41,8 @@
 	color: $gray-700;
 }
 
-.edit-site-global-styles-font-families__add-fonts {
+.edit-site-global-styles-font-families__add-fonts,
+.edit-site-global-styles-font-families__manage-fonts {
 	justify-content: center;
 }
 

platform-docs/docs/basic-concepts/block-library.md

@@ -6,7 +6,7 @@ sidebar_position: 4
 
 The block editor relies on a registry of block types to render and edit blocks. The `@wordpress/block-library` package provides a set of core blocks that you can register in your application.
 
-## Registring all block types
+## Registering all block types
 
 Registering blocks requires both loading the JavaScript code that makes the block type available for use and including the corresponding stylesheets.
 

test/e2e/specs/site-editor/font-library.spec.js

@@ -14,15 +14,15 @@ test.describe( 'Font Library', () => {
 			await editor.canvas.locator( 'body' ).click();
 		} );
 
-		test( 'should display the "Manage Fonts" icon', async ( { page } ) => {
+		test( 'should display the "Add fonts" button', async ( { page } ) => {
 			await page.getByRole( 'button', { name: 'Styles' } ).click();
 			await page
 				.getByRole( 'button', { name: 'Typography Styles' } )
 				.click();
-			const manageFontsIcon = page.getByRole( 'button', {
-				name: 'Manage Fonts',
+			const addFontsButton = page.getByRole( 'button', {
+				name: 'Add fonts',
 			} );
-			await expect( manageFontsIcon ).toBeVisible();
+			await expect( addFontsButton ).toBeVisible();
 		} );
 	} );
 
@@ -36,18 +36,20 @@ test.describe( 'Font Library', () => {
 			await editor.canvas.locator( 'body' ).click();
 		} );
 
-		test( 'should display the "Manage Fonts" icon', async ( { page } ) => {
+		test( 'should display the "Manage fonts" button', async ( {
+			page,
+		} ) => {
 			await page.getByRole( 'button', { name: 'Styles' } ).click();
 			await page
 				.getByRole( 'button', { name: 'Typography Styles' } )
 				.click();
-			const manageFontsIcon = page.getByRole( 'button', {
-				name: 'Manage Fonts',
+			const manageFontsButton = page.getByRole( 'button', {
+				name: 'Manage fonts',
 			} );
-			await expect( manageFontsIcon ).toBeVisible();
+			await expect( manageFontsButton ).toBeVisible();
 		} );
 
-		test( 'should open the "Manage Fonts" modal when clicking the "Manage Fonts" icon', async ( {
+		test( 'should open the "Manage fonts" modal when clicking the "Manage fonts" button', async ( {
 			page,
 		} ) => {
 			await page.getByRole( 'button', { name: 'Styles' } ).click();
@@ -56,7 +58,7 @@ test.describe( 'Font Library', () => {
 				.click();
 			await page
 				.getByRole( 'button', {
-					name: 'Manage Fonts',
+					name: 'Manage fonts',
 				} )
 				.click();
 			await expect( page.getByRole( 'dialog' ) ).toBeVisible();
@@ -74,7 +76,7 @@ test.describe( 'Font Library', () => {
 				.click();
 			await page
 				.getByRole( 'button', {
-					name: 'Manage Fonts',
+					name: 'Manage fonts',
 				} )
 				.click();
 			await page.getByRole( 'button', { name: 'System Font' } ).click();
@@ -120,12 +122,11 @@ test.describe( 'Font Library', () => {
 				.click();
 			await page
 				.getByRole( 'button', {
-					name: 'Manage Fonts',
+					name: 'Add fonts',
 				} )
 				.click();
 
 			// Upload local fonts.
-			await page.getByRole( 'tab', { name: 'Upload' } ).click();
 			const fileChooserPromise = page.waitForEvent( 'filechooser' );
 			await page.getByRole( 'button', { name: 'Upload Font' } ).click();
 			const fileChooser = await fileChooserPromise;
@@ -163,7 +164,7 @@ test.describe( 'Font Library', () => {
 			await page.getByRole( 'button', { name: 'Back' } ).click();
 			await page
 				.getByRole( 'button', {
-					name: 'Manage Fonts',
+					name: 'Manage fonts',
 				} )
 				.click();