prep build 08/03

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

@@ -1,30 +1,68 @@
 # PluginSidebar
 
-This slot allows for adding items into the Gutenberg Toolbar.
-Using this slot will add an icon to the bar that, when clicked, will open a sidebar with the content of the items wrapped in the `<PluginSidebar />` component.
+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.
 
 ## Example
 
-```js
-import { registerPlugin } from '@wordpress/plugins';
+```jsx
+import { __ } from '@wordpress/i18n';
 import { PluginSidebar } from '@wordpress/editor';
-import { image } from '@wordpress/icons';
+import {
+	PanelBody,
+	Button,
+	TextControl,
+	SelectControl,
+} from '@wordpress/components';
+import { registerPlugin } from '@wordpress/plugins';
+import { useState } from '@wordpress/element';
+
+const PluginSidebarExample = () => {
+	const [ text, setText ] = useState( '' );
+	const [ select, setSelect ] = useState( 'a' );
 
-const PluginSidebarTest = () => (
-	<PluginSidebar name="plugin-sidebar-test" title="My Plugin" icon={ image }>
-		<p>Plugin Sidebar</p>
-	</PluginSidebar>
-);
+	return (
+		<PluginSidebar
+			name="plugin-sidebar-example"
+			title={ __( 'My PluginSidebar' ) }
+			icon={ 'smiley' }
+		>
+			<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-test', { render: PluginSidebarTest } );
+// Register the plugin.
+registerPlugin( 'plugin-sidebar-example', { render: PluginSidebarExample } );
 ```
 
 ## Location
 
-### Closed State
-
-![Closed State](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/plugin-sidebar-closed-state.png?raw=true)
-
 ### Open State
 
 ![Open State](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/plugin-sidebar-open-state.png?raw=true)

packages/base-styles/_animations.scss

@@ -3,3 +3,8 @@
 	animation-fill-mode: forwards;
 	@include reduce-motion("animation");
 }
+
+@mixin editor-canvas-resize-animation() {
+	transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
+	@include reduce-motion("transition");
+}

packages/block-editor/README.md

@@ -547,7 +547,7 @@ _Returns_
 
 > **Deprecated**
 
-This function was accidentially exposed for mobile/native usage.
+This function was accidentally exposed for mobile/native usage.
 
 _Returns_
 

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

@@ -4,4 +4,5 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
+	@include editor-canvas-resize-animation;
 }

packages/block-editor/src/components/iframe/content.scss

@@ -22,9 +22,9 @@
 }
 
 .block-editor-iframe__html {
+	border: 0 solid $gray-300;
 	transform-origin: top center;
-	transition: transform 0.3s;
-	@include reduce-motion("transition");
+	@include editor-canvas-resize-animation;
 }
 
 .block-editor-iframe__html.is-zoomed-out {

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

@@ -305,7 +305,7 @@ function Iframe( {
 
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
-		const maxWidth = 800;
+		const maxWidth = 750;
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
 			scale === 'default'
@@ -378,10 +378,8 @@ function Iframe( {
 			<iframe
 				{ ...props }
 				style={ {
-					border: 0,
 					...props.style,
 					height: props.style?.height,
-					transition: 'all .3s',
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
 				tabIndex={ tabIndex }

packages/block-editor/src/components/use-resize-canvas/index.js

@@ -43,7 +43,7 @@ export default function useResizeCanvas( deviceType ) {
 		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
 	};
 
-	const marginValue = () => ( window.innerHeight < 800 ? 36 : 72 );
+	const marginValue = () => ( window.innerHeight < 800 ? 36 : 64 );
 
 	const contentInlineStyles = ( device ) => {
 		const height = device === 'Mobile' ? '768px' : '1024px';
@@ -62,8 +62,6 @@ export default function useResizeCanvas( deviceType ) {
 					marginLeft: marginHorizontal,
 					marginRight: marginHorizontal,
 					height,
-					borderRadius: '2px 2px 2px 2px',
-					border: '1px solid #ddd',
 					overflowY: 'auto',
 				};
 			default:

packages/block-editor/src/utils/get-editor-region.js

@@ -23,7 +23,7 @@ export default function getEditorRegion( editor ) {
 			return iframeDocument === editor.ownerDocument;
 		} ) ?? editor;
 
-	// The region is provivided by the editor, not the block-editor.
+	// The region is provided by the editor, not the block-editor.
 	// We should send focus to the region if one is available to reuse the
 	// same interface for navigating landmarks. If no region is available,
 	// use the canvas instead.

packages/block-editor/src/utils/get-px-from-css-unit.js

@@ -1,5 +1,5 @@
 /**
- * This function was accidentially exposed for mobile/native usage.
+ * This function was accidentally exposed for mobile/native usage.
  *
  * @deprecated
  *

packages/dataviews/src/layouts/table/column-header-menu.tsx

@@ -249,7 +249,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 							} }
 						>
 							<DropdownMenuItemLabel>
-								{ __( 'Hide' ) }
+								{ __( 'Hide column' ) }
 							</DropdownMenuItemLabel>
 						</DropdownMenuItem>
 					) }

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

@@ -7,7 +7,11 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, __experimentalHStack as HStack } from '@wordpress/components';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -80,9 +84,14 @@ const SiteHub = memo(
 								variant="link"
 								href={ homeUrl }
 								target="_blank"
-								label={ __( 'View site (opens in a new tab)' ) }
 							>
 								{ decodeEntities( siteTitle ) }
+								<VisuallyHidden as="span">
+									{
+										/* translators: accessibility text */
+										__( '(opens in a new tab)' )
+									}
+								</VisuallyHidden>
 							</Button>
 						</div>
 						<HStack

packages/edit-site/src/hooks/push-changes-to-global-styles/index.js

@@ -26,7 +26,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { useSupportedStyles } from '../../components/global-styles/hooks';
 import { unlock } from '../../lock-unlock';
-import cloneDeep from '../../utils/clone-deep';
 import setNestedValue from '../../utils/set-nested-value';
 
 const { cleanEmptyObject, GlobalStylesContext } = unlock(
@@ -259,8 +258,8 @@ function PushChangesToGlobalStylesControl( {
 		if ( changes.length > 0 ) {
 			const { style: blockStyles } = attributes;
 
-			const newBlockStyles = cloneDeep( blockStyles );
-			const newUserConfig = cloneDeep( userConfig );
+			const newBlockStyles = structuredClone( blockStyles );
+			const newUserConfig = structuredClone( userConfig );
 
 			for ( const { path, value } of changes ) {
 				setNestedValue( newBlockStyles, path, undefined );

packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js

@@ -11,7 +11,6 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import cloneDeep from '../../utils/clone-deep';
 import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
@@ -91,7 +90,7 @@ export function useCurrentMergeThemeStyleVariationsWithUserConfig(
 	const propertiesAsString = properties.toString();
 
 	return useMemo( () => {
-		const clonedUserVariation = cloneDeep( userVariation );
+		const clonedUserVariation = structuredClone( userVariation );
 
 		// Get user variation and remove the settings for the given property.
 		const userVariationWithoutProperties = removePropertiesFromObject(
@@ -167,7 +166,7 @@ export const filterObjectByProperties = ( object, properties ) => {
  */
 export function isVariationWithProperties( variation, properties ) {
 	const variationWithProperties = filterObjectByProperties(
-		cloneDeep( variation ),
+		structuredClone( variation ),
 		properties
 	);
 

packages/primitives/package.json

@@ -35,6 +35,9 @@
 		"@wordpress/element": "file:../element",
 		"clsx": "^2.1.1"
 	},
+	"peerDependencies": {
+		"react": "^18.0.0"
+	},
 	"publishConfig": {
 		"access": "public"
 	}