prep build 10/27

packages/components/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+### Deprecations
+
+-   `BorderBoxControl`: Deprecate 36px default size ([#65752](https://github.com/WordPress/gutenberg/pull/65752)).
+-   `BorderControl`: Deprecate 36px default size ([#65755](https://github.com/WordPress/gutenberg/pull/65755)).
+
 ### Bug Fixes
 
 -   `ColorPalette`: prevent overflow of custom color button background ([#66152](https://github.com/WordPress/gutenberg/pull/66152)).

packages/components/src/border-box-control/border-box-control/README.md

@@ -47,6 +47,7 @@ const MyBorderBoxControl = () => {
 
 	return (
 		<BorderBoxControl
+			__next40pxDefaultSize
 			colors={ colors }
 			label={ __( 'Borders' ) }
 			onChange={ onChange }

packages/components/src/border-box-control/border-box-control/component.tsx

@@ -175,6 +175,7 @@ const UnconnectedBorderBoxControl = (
  *
  * 	return (
  * 		<BorderBoxControl
+ * 			__next40pxDefaultSize
  * 			colors={ colors }
  * 			label={ __( 'Borders' ) }
  * 			onChange={ onChange }

packages/components/src/border-box-control/border-box-control/hook.ts

@@ -19,6 +19,7 @@ import {
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
+import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
 import type { Border } from '../../border-control/types';
 import type { Borders, BorderSide, BorderBoxControlProps } from '../types';
@@ -39,6 +40,12 @@ export function useBorderBoxControl(
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControl' );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'BorderBoxControl',
+		__next40pxDefaultSize,
+		size,
+	} );
+
 	const computedSize =
 		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
 

packages/components/src/border-box-control/stories/index.story.tsx

@@ -84,4 +84,5 @@ Default.args = {
 	colors,
 	label: 'Borders',
 	enableStyle: true,
+	__next40pxDefaultSize: true,
 };

packages/components/src/border-box-control/test/index.tsx

@@ -44,6 +44,7 @@ const props = {
 		props.value = newValue;
 	} ),
 	value: undefined,
+	__next40pxDefaultSize: true,
 };
 
 const toggleLabelRegex = /Border color( and style)* picker/;

packages/components/src/border-control/border-control/README.md

@@ -30,6 +30,7 @@ const MyBorderControl = () => {
 
 	return (
 		<BorderControl
+			__next40pxDefaultSize
 			colors={ colors }
 			label={ __( 'Border' ) }
 			onChange={ setBorder }

packages/components/src/border-control/border-control/component.tsx

@@ -154,6 +154,7 @@ const UnconnectedBorderControl = (
  *
  * 	return (
  * 		<BorderControl
+ * 			__next40pxDefaultSize
  * 			colors={ colors }
  * 			label={ __( 'Border' ) }
  * 			onChange={ onChange }

packages/components/src/border-control/border-control/hook.ts

@@ -11,8 +11,8 @@ import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
-
 import type { Border, BorderControlProps } from '../types';
+import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
 // If either width or color are defined, the border is considered valid
 // and a border style can be set as well.
@@ -41,6 +41,12 @@ export function useBorderControl(
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
+	maybeWarnDeprecated36pxSize( {
+		componentName: 'BorderControl',
+		__next40pxDefaultSize,
+		size,
+	} );
+
 	const computedSize =
 		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
 

packages/components/src/border-control/stories/index.story.tsx

@@ -93,6 +93,7 @@ export const Default = Template.bind( {} );
 Default.args = {
 	colors,
 	label: 'Border',
+	__next40pxDefaultSize: true,
 	enableAlpha: true,
 	enableStyle: true,
 	shouldSanitizeBorder: true,

packages/components/src/border-control/test/index.js

@@ -31,6 +31,7 @@ function createProps( customProps ) {
 			props.value = newValue;
 		} ),
 		value: defaultBorder,
+		__next40pxDefaultSize: true,
 		...customProps,
 	};
 	return props;

packages/components/src/utils/deprecated-36px-size.ts

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import deprecated from '@wordpress/deprecated';
+
+export function maybeWarnDeprecated36pxSize( {
+	componentName,
+	__next40pxDefaultSize,
+	size,
+}: {
+	componentName: string;
+	__next40pxDefaultSize: boolean | undefined;
+	size: string;
+} ) {
+	if ( __next40pxDefaultSize || size !== 'default' ) {
+		return;
+	}
+
+	deprecated( `36px default size for wp.components.${ componentName }`, {
+		since: '6.8',
+		version: '7.1',
+		hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
+	} );
+}

packages/edit-site/src/components/style-book/constants.ts

@@ -143,6 +143,13 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
 	},
 ];
 
+// Forming a "block formatting context" to prevent margin collapsing.
+// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+const ROOT_CONTAINER = `
+	.is-root-container {
+		display: flow-root;
+	}
+`;
 // The content area of the Style Book is rendered within an iframe so that global styles
 // are applied to elements within the entire content area. To support elements that are
 // not part of the block previews, such as headings and layout for the block previews,
@@ -151,17 +158,13 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
 // applied to the `button` element, targeted via `.edit-site-style-book__example`.
 // This is to ensure that browser default styles for buttons are not applied to the previews.
 export const STYLE_BOOK_IFRAME_STYLES = `
-	// Forming a "block formatting context" to prevent margin collapsing.
-	// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-	.is-root-container {
-		display: flow-root;
-	}
-
 	body {
 		position: relative;
 		padding: 32px !important;
 	}
 
+	${ ROOT_CONTAINER }
+
 	.edit-site-style-book__examples {
 		max-width: 1200px;
 		margin: 0 auto;

packages/editor/src/components/entities-saved-states/index.js

@@ -177,9 +177,9 @@ export function EntitiesSavedStatesExtensible( {
 									_n(
 										'There is <strong>%d site change</strong> waiting to be saved.',
 										'There are <strong>%d site changes</strong> waiting to be saved.',
-										sortedPartitionedSavables.length
+										dirtyEntityRecords.length
 									),
-									sortedPartitionedSavables.length
+									dirtyEntityRecords.length
 								),
 								{ strong: <strong /> }
 						  )

packages/editor/src/components/visual-editor/index.js

@@ -16,7 +16,7 @@ import {
 	privateApis as blockEditorPrivateApis,
 	__experimentalUseResizeCanvas as useResizeCanvas,
 } from '@wordpress/block-editor';
-import { useEffect, useRef, useMemo } from '@wordpress/element';
+import { useEffect, useRef, useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { parse } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
@@ -106,7 +106,10 @@ function VisualEditor( {
 	contentRef,
 	className,
 } ) {
-	const [ resizeObserver, sizes ] = useResizeObserver();
+	const [ contentHeight, setContentHeight ] = useState( '' );
+	const effectContentHeight = useResizeObserver( ( [ entry ] ) => {
+		setContentHeight( entry.borderBoxSize[ 0 ].blockSize );
+	} );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const {
 		renderingMode,
@@ -323,21 +326,6 @@ function VisualEditor( {
 		.is-root-container.alignfull { max-width: none; margin-left: auto; margin-right: auto;}
 		.is-root-container.alignfull:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: none;}`;
 
-	const localRef = useRef();
-	const typewriterRef = useTypewriter();
-	contentRef = useMergeRefs( [
-		localRef,
-		contentRef,
-		renderingMode === 'post-only' ? typewriterRef : null,
-		useFlashEditableBlocks( {
-			isEnabled: renderingMode === 'template-locked',
-		} ),
-		useSelectNearestEditableBlock( {
-			isEnabled: renderingMode === 'template-locked',
-		} ),
-		useZoomOutModeExit(),
-	] );
-
 	const forceFullHeight = postType === NAVIGATION_POST_TYPE;
 	const enableResizing =
 		[
@@ -368,6 +356,24 @@ function VisualEditor( {
 		];
 	}, [ styles, enableResizing ] );
 
+	const localRef = useRef();
+	const typewriterRef = useTypewriter();
+	contentRef = useMergeRefs( [
+		localRef,
+		contentRef,
+		renderingMode === 'post-only' ? typewriterRef : null,
+		useFlashEditableBlocks( {
+			isEnabled: renderingMode === 'template-locked',
+		} ),
+		useSelectNearestEditableBlock( {
+			isEnabled: renderingMode === 'template-locked',
+		} ),
+		useZoomOutModeExit(),
+		// Avoid resize listeners when not needed, these will trigger
+		// unnecessary re-renders when animating the iframe width.
+		enableResizing ? effectContentHeight : null,
+	] );
+
 	return (
 		<div
 			className={ clsx(
@@ -385,7 +391,7 @@ function VisualEditor( {
 			<ResizableEditor
 				enableResizing={ enableResizing }
 				height={
-					sizes.height && ! forceFullHeight ? sizes.height : '100%'
+					contentHeight && ! forceFullHeight ? contentHeight : '100%'
 				}
 			>
 				<BlockCanvas
@@ -479,12 +485,6 @@ function VisualEditor( {
 							/>
 						) }
 					</RecursionProvider>
-					{
-						// Avoid resize listeners when not needed,
-						// these will trigger unnecessary re-renders
-						// when animating the iframe width.
-						enableResizing && resizeObserver
-					}
 				</BlockCanvas>
 			</ResizableEditor>
 		</div>