@wordpress/block-editor 14.7.0 → 14.8.0

package/src/components/collab/block-comment-icon-toolbar-slot.js

@@ -3,10 +3,8 @@
  */
 import { createSlotFill } from '@wordpress/components';
 
-const { Fill: __unstableCommentIconToolbarFill, Slot } = createSlotFill(
-	'__unstableCommentIconToolbarFill'
+const CommentIconToolbarSlotFill = createSlotFill(
+	Symbol( 'CommentIconToolbarSlotFill' )
 );
 
-__unstableCommentIconToolbarFill.Slot = Slot;
-
-export default __unstableCommentIconToolbarFill;
+export default CommentIconToolbarSlotFill;

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -219,7 +219,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                         <button
                           aria-label="Color: red"
                           aria-selected="true"
-                          class="components-button components-circular-option-picker__option"
+                          class="components-button components-circular-option-picker__option is-next-40px-default-size"
                           data-active-item="true"
                           id="components-circular-option-picker-0-0"
                           role="option"
@@ -247,7 +247,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                   class="components-circular-option-picker__custom-clear-wrapper"
                 >
                   <button
-                    class="components-button components-circular-option-picker__clear is-tertiary"
+                    class="components-button components-circular-option-picker__clear is-next-40px-default-size is-tertiary"
                     type="button"
                   >
                     Clear

package/src/components/color-palette/with-color-context.js

@@ -10,14 +10,32 @@ import { useSettings } from '../use-settings';
 
 export default createHigherOrderComponent( ( WrappedComponent ) => {
 	return ( props ) => {
-		const [ colorsFeature, enableCustomColors ] = useSettings(
-			'color.palette',
-			'color.custom'
+		// Get the default colors, theme colors, and custom colors
+		const [
+			defaultColors,
+			themeColors,
+			customColors,
+			enableCustomColors,
+			enableDefaultColors,
+		] = useSettings(
+			'color.palette.default',
+			'color.palette.theme',
+			'color.palette.custom',
+			'color.custom',
+			'color.defaultPalette'
 		);
-		const {
-			colors = colorsFeature,
-			disableCustomColors = ! enableCustomColors,
-		} = props;
+
+		const _colors = enableDefaultColors
+			? [
+					...( themeColors || [] ),
+					...( defaultColors || [] ),
+					...( customColors || [] ),
+			  ]
+			: [ ...( themeColors || [] ), ...( customColors || [] ) ];
+
+		const { colors = _colors, disableCustomColors = ! enableCustomColors } =
+			props;
+
 		const hasColorsToChoose =
 			( colors && colors.length > 0 ) || ! disableCustomColors;
 		return (

package/src/components/font-family/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
+import { CustomSelectControl } from '@wordpress/components';
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
@@ -30,13 +30,15 @@ export default function FontFamilyControl( {
 	}
 
 	const options = [
-		{ value: '', label: __( 'Default' ) },
-		...fontFamilies.map( ( { fontFamily, name } ) => {
-			return {
-				value: fontFamily,
-				label: name || fontFamily,
-			};
-		} ),
+		{
+			key: '',
+			name: __( 'Default' ),
+		},
+		...fontFamilies.map( ( { fontFamily, name } ) => ( {
+			key: fontFamily,
+			name: name || fontFamily,
+			style: { fontFamily },
+		} ) ),
 	];
 
 	if ( ! __nextHasNoMarginBottom ) {
@@ -51,14 +53,12 @@ export default function FontFamilyControl( {
 	}
 
 	return (
-		<SelectControl
+		<CustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			label={ __( 'Font' ) }
-			options={ options }
 			value={ value }
-			onChange={ onChange }
-			labelPosition="top"
+			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }
+			options={ options }
 			{ ...props }
 		/>
 	);

package/src/components/global-styles/test/use-global-styles-output.js

@@ -855,7 +855,7 @@ describe( 'global styles renderer', () => {
 
 		it( 'should return block selectors data with old experimental selectors', () => {
 			const imageSupports = {
-				__experimentalBorder: {
+				border: {
 					radius: true,
 					__experimentalSelector: 'img, .crop-area',
 				},

package/src/components/global-styles/use-global-styles-output.js

@@ -47,7 +47,7 @@ const ELEMENT_CLASS_NAMES = {
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
 const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
-	__experimentalBorder: 'border',
+	border: 'border',
 	color: 'color',
 	spacing: 'spacing',
 	typography: 'typography',

package/src/components/iframe/content.scss

@@ -4,54 +4,60 @@
 
 .block-editor-iframe__html {
 	transform-origin: top center;
-	// We don't want to animate the transform of the translateX because it is used
-	// to "center" the canvas. Leaving it on causes the canvas to slide around in
-	// odd ways.
-	@include editor-canvas-resize-animation(transform 0s, scale 0s, padding 0s);
+	// Prevents a flash of background color change when entering/exiting zoom out
+	transition: background-color 400ms;
 
 	&.zoom-out-animation {
-		// we only want to animate the scaling when entering zoom out. When sidebars
-		// are toggled, the resizing of the iframe handles scaling the canvas as well,
-		// and the doubled animations cause very odd animations.
-		@include editor-canvas-resize-animation(transform 0s);
+		$scroll-top: var(--wp-block-editor-iframe-zoom-out-scroll-top, 0);
+		$scroll-top-next: var(--wp-block-editor-iframe-zoom-out-scroll-top-next, 0);
+
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: calc(-1 * #{$scroll-top});
+		bottom: 0;
+		// Force preserving a scrollbar gutter as scrollbar-gutter isn't supported in all browsers yet,
+		// and removing the scrollbar causes the content to shift.
+		overflow-y: scroll;
 	}
-}
 
-.block-editor-iframe__html.is-zoomed-out {
-	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
-	$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size);
-	$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
-	$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
-	$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);
-	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
-	// Apply an X translation to center the scaled content within the available space.
-	transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
-	scale: #{$scale};
-	background-color: $gray-300;
-
-	// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
-	// so we need to adjust the height of the content to match the scale by using negative margins.
-	$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
-	$total-frame-height: calc(2 * #{$frame-size} / #{$scale});
-	$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
-	margin-bottom: calc(-1 * #{$total-height});
-	// Add the top/bottom frame size. We use scaling to account for the left/right, as
-	// the padding left/right causes the contents to reflow, which breaks the 1:1 scaling
-	// of the content.
-	padding-top: calc(#{$frame-size} / #{$scale});
-	padding-bottom: calc(#{$frame-size} / #{$scale});
-
-	body {
-		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
-
-		> .is-root-container:not(.wp-block-post-content) {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			height: 100%;
-
-			> main {
+	&.is-zoomed-out {
+		$scale: var(--wp-block-editor-iframe-zoom-out-scale, 1);
+		$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size, 0);
+		$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
+		$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
+		$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);
+		$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
+		// Apply an X translation to center the scaled content within the available space.
+		transform: translateX(calc((#{$scale-container-width} - #{$container-width}) / 2 / #{$scale}));
+		scale: $scale;
+		background-color: $gray-300;
+
+		// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
+		// so we need to adjust the height of the content to match the scale by using negative margins.
+		$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
+		$total-frame-height: calc(2 * #{$frame-size} / #{$scale});
+		$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
+		margin-bottom: calc(-1 * #{$total-height});
+
+		// Add the top/bottom frame size. We use scaling to account for the left/right, as
+		// the padding left/right causes the contents to reflow, which breaks the 1:1 scaling
+		// of the content.
+		padding-top: calc(#{$frame-size} / #{$scale});
+		padding-bottom: calc(#{$frame-size} / #{$scale});
+
+		body {
+			min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
+
+			> .is-root-container:not(.wp-block-post-content) {
 				flex: 1;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+
+				> main {
+					flex: 1;
+				}
 			}
 		}
 	}

package/src/components/iframe/index.js

@@ -12,15 +12,9 @@ import {
 	forwardRef,
 	useMemo,
 	useEffect,
-	useRef,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import {
-	useResizeObserver,
-	useMergeRefs,
-	useRefEffect,
-	useDisabled,
-} from '@wordpress/compose';
+import { useMergeRefs, useRefEffect, useDisabled } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
@@ -30,6 +24,7 @@ import { useSelect } from '@wordpress/data';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
 import { getCompatibilityStyles } from './get-compatibility-styles';
+import { useScaleCanvas } from './use-scale-canvas';
 import { store as blockEditorStore } from '../../store';
 
 function bubbleEvent( event, Constructor, frame ) {
@@ -121,15 +116,11 @@ function Iframe( {
 		};
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
+	/** @type {[Document, import('react').Dispatch<Document>]} */
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const initialContainerWidthRef = useRef( 0 );
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
-	const [ contentResizeListener, { height: contentHeight } ] =
-		useResizeObserver();
-	const [ containerResizeListener, { width: containerWidth } ] =
-		useResizeObserver();
 
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
@@ -225,48 +216,16 @@ function Iframe( {
 		};
 	}, [] );
 
-	const [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();
-
-	const iframeResizeRef = useRefEffect( ( node ) => {
-		const nodeWindow = node.ownerDocument.defaultView;
-
-		setIframeWindowInnerHeight( nodeWindow.innerHeight );
-		const onResize = () => {
-			setIframeWindowInnerHeight( nodeWindow.innerHeight );
-		};
-		nodeWindow.addEventListener( 'resize', onResize );
-		return () => {
-			nodeWindow.removeEventListener( 'resize', onResize );
-		};
-	}, [] );
-
-	const [ windowInnerWidth, setWindowInnerWidth ] = useState();
-
-	const windowResizeRef = useRefEffect( ( node ) => {
-		const nodeWindow = node.ownerDocument.defaultView;
-
-		setWindowInnerWidth( nodeWindow.innerWidth );
-		const onResize = () => {
-			setWindowInnerWidth( nodeWindow.innerWidth );
-		};
-		nodeWindow.addEventListener( 'resize', onResize );
-		return () => {
-			nodeWindow.removeEventListener( 'resize', onResize );
-		};
-	}, [] );
-
-	const isZoomedOut = scale !== 1;
-
-	useEffect( () => {
-		if ( ! isZoomedOut ) {
-			initialContainerWidthRef.current = containerWidth;
-		}
-	}, [ containerWidth, isZoomedOut ] );
-
-	const scaleContainerWidth = Math.max(
-		initialContainerWidthRef.current,
-		containerWidth
-	);
+	const {
+		contentResizeListener,
+		containerResizeListener,
+		isZoomedOut,
+		scaleContainerWidth,
+	} = useScaleCanvas( {
+		scale,
+		frameSize: parseInt( frameSize ),
+		iframeDocument,
+	} );
 
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
@@ -275,10 +234,6 @@ function Iframe( {
 		clearerRef,
 		writingFlowRef,
 		disabledRef,
-		// Avoid resize listeners when not needed, these will trigger
-		// unnecessary re-renders when animating the iframe width, or when
-		// expanding preview iframes.
-		isZoomedOut ? iframeResizeRef : null,
 	] );
 
 	// Correct doctype is required to enable rendering in standards
@@ -320,118 +275,6 @@ function Iframe( {
 
 	useEffect( () => cleanup, [ cleanup ] );
 
-	const zoomOutAnimationClassnameRef = useRef( null );
-
-	// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect
-	// that controls settings the CSS variables, but then we would need to do more work to ensure we're
-	// only toggling these when the zoom out mode changes, as that useEffect is also triggered by a large
-	// number of dependencies.
-	useEffect( () => {
-		if ( ! iframeDocument || ! isZoomedOut ) {
-			return;
-		}
-
-		const handleZoomOutAnimationClassname = () => {
-			clearTimeout( zoomOutAnimationClassnameRef.current );
-
-			iframeDocument.documentElement.classList.add(
-				'zoom-out-animation'
-			);
-
-			zoomOutAnimationClassnameRef.current = setTimeout( () => {
-				iframeDocument.documentElement.classList.remove(
-					'zoom-out-animation'
-				);
-			}, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss
-		};
-
-		handleZoomOutAnimationClassname();
-		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
-
-		return () => {
-			handleZoomOutAnimationClassname();
-			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
-		};
-	}, [ iframeDocument, isZoomedOut ] );
-
-	// Calculate the scaling and CSS variables for the zoom out canvas
-	useEffect( () => {
-		if ( ! iframeDocument || ! isZoomedOut ) {
-			return;
-		}
-
-		const maxWidth = 750;
-		// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),
-		// initialContainerWidthRef will be smaller than the full page, and reflow will happen
-		// when the canvas area becomes larger due to sidebars closing. This is a known but
-		// minor divergence for now.
-
-		// This scaling calculation has to happen within the JS because CSS calc() can
-		// only divide and multiply by a unitless value. I.e. calc( 100px / 2 ) is valid
-		// but calc( 100px / 2px ) is not.
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-scale',
-			scale === 'auto-scaled'
-				? ( Math.min( containerWidth, maxWidth ) -
-						parseInt( frameSize ) * 2 ) /
-						scaleContainerWidth
-				: scale
-		);
-
-		// frameSize has to be a px value for the scaling and frame size to be computed correctly.
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-frame-size',
-			typeof frameSize === 'number' ? `${ frameSize }px` : frameSize
-		);
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-content-height',
-			`${ contentHeight }px`
-		);
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-inner-height',
-			`${ iframeWindowInnerHeight }px`
-		);
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-container-width',
-			`${ containerWidth }px`
-		);
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-scale-container-width',
-			`${ scaleContainerWidth }px`
-		);
-
-		return () => {
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-scale'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-frame-size'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-content-height'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-inner-height'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-container-width'
-			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-scale-container-width'
-			);
-		};
-	}, [
-		scale,
-		frameSize,
-		iframeDocument,
-		iframeWindowInnerHeight,
-		contentHeight,
-		containerWidth,
-		windowInnerWidth,
-		isZoomedOut,
-		scaleContainerWidth,
-	] );
-
 	// Make sure to not render the before and after focusable div elements in view
 	// mode. They're only needed to capture focus in edit mode.
 	const shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;
@@ -511,7 +354,7 @@ function Iframe( {
 	);
 
 	return (
-		<div className="block-editor-iframe__container" ref={ windowResizeRef }>
+		<div className="block-editor-iframe__container">
 			{ containerResizeListener }
 			<div
 				className={ clsx(