@wordpress/edit-site 4.18.0 → 4.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.18.0",
+	"version": "4.19.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,34 +27,35 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.21.0",
-		"@wordpress/api-fetch": "^6.18.0",
-		"@wordpress/block-editor": "^10.4.0",
-		"@wordpress/block-library": "^7.18.0",
-		"@wordpress/blocks": "^11.20.0",
-		"@wordpress/components": "^22.0.0",
-		"@wordpress/compose": "^5.19.0",
-		"@wordpress/core-data": "^5.4.0",
-		"@wordpress/data": "^7.5.0",
-		"@wordpress/deprecated": "^3.21.0",
-		"@wordpress/editor": "^12.20.0",
-		"@wordpress/element": "^4.19.0",
-		"@wordpress/hooks": "^3.21.0",
-		"@wordpress/html-entities": "^3.21.0",
-		"@wordpress/i18n": "^4.21.0",
-		"@wordpress/icons": "^9.12.0",
-		"@wordpress/interface": "^4.20.0",
-		"@wordpress/keyboard-shortcuts": "^3.19.0",
-		"@wordpress/keycodes": "^3.21.0",
-		"@wordpress/media-utils": "^4.12.0",
-		"@wordpress/notices": "^3.21.0",
-		"@wordpress/plugins": "^4.19.0",
-		"@wordpress/preferences": "^2.13.0",
-		"@wordpress/reusable-blocks": "^3.19.0",
-		"@wordpress/style-engine": "^1.4.0",
-		"@wordpress/url": "^3.22.0",
-		"@wordpress/viewport": "^4.19.0",
+		"@wordpress/a11y": "^3.22.0",
+		"@wordpress/api-fetch": "^6.19.0",
+		"@wordpress/block-editor": "^10.5.0",
+		"@wordpress/block-library": "^7.19.0",
+		"@wordpress/blocks": "^11.21.0",
+		"@wordpress/components": "^22.1.0",
+		"@wordpress/compose": "^5.20.0",
+		"@wordpress/core-data": "^5.5.0",
+		"@wordpress/data": "^7.6.0",
+		"@wordpress/deprecated": "^3.22.0",
+		"@wordpress/editor": "^12.21.0",
+		"@wordpress/element": "^4.20.0",
+		"@wordpress/hooks": "^3.22.0",
+		"@wordpress/html-entities": "^3.22.0",
+		"@wordpress/i18n": "^4.22.0",
+		"@wordpress/icons": "^9.13.0",
+		"@wordpress/interface": "^4.21.0",
+		"@wordpress/keyboard-shortcuts": "^3.20.0",
+		"@wordpress/keycodes": "^3.22.0",
+		"@wordpress/media-utils": "^4.13.0",
+		"@wordpress/notices": "^3.22.0",
+		"@wordpress/plugins": "^4.20.0",
+		"@wordpress/preferences": "^2.14.0",
+		"@wordpress/reusable-blocks": "^3.20.0",
+		"@wordpress/style-engine": "^1.5.0",
+		"@wordpress/url": "^3.23.0",
+		"@wordpress/viewport": "^4.20.0",
 		"classnames": "^2.3.1",
+		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
 		"lodash": "^4.17.21",
@@ -68,5 +69,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
+	"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
 }

package/src/components/add-new-template/add-custom-template-modal.js

@@ -17,6 +17,7 @@ import {
 } from '@wordpress/components';
 import { useDebounce } from '@wordpress/compose';
 import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -50,7 +51,10 @@ function SuggestionListItem( {
 			}
 		>
 			<span className={ `${ baseCssClass }__title` }>
-				<TextHighlight text={ suggestion.name } highlight={ search } />
+				<TextHighlight
+					text={ decodeEntities( suggestion.name ) }
+					highlight={ search }
+				/>
 			</span>
 			{ suggestion.link && (
 				<span className={ `${ baseCssClass }__info` }>

package/src/components/block-editor/resizable-editor.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
+import { useState, useRef, useCallback } from '@wordpress/element';
 import { ResizableBox } from '@wordpress/components';
 import {
 	__experimentalUseResizeCanvas as useResizeCanvas,
@@ -11,7 +11,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -19,11 +19,6 @@ import { useMergeRefs } from '@wordpress/compose';
 import { store as editSiteStore } from '../../store';
 import ResizeHandle from './resize-handle';
 
-const DEFAULT_STYLES = {
-	width: '100%',
-	height: '100%',
-};
-
 // Removes the inline styles in the drag handles.
 const HANDLE_STYLES_OVERRIDE = {
 	position: undefined,
@@ -38,6 +33,7 @@ const HANDLE_STYLES_OVERRIDE = {
 };
 
 function ResizableEditor( { enableResizing, settings, children, ...props } ) {
+	const [ resizeObserver, sizes ] = useResizeObserver();
 	const { deviceType, isZoomOutMode } = useSelect(
 		( select ) => ( {
 			deviceType:
@@ -49,60 +45,21 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 		[]
 	);
 	const deviceStyles = useResizeCanvas( deviceType );
-	const [ width, setWidth ] = useState( DEFAULT_STYLES.width );
-	const [ height, setHeight ] = useState( DEFAULT_STYLES.height );
+	const [ width, setWidth ] = useState( '100%' );
 	const iframeRef = useRef();
 	const mouseMoveTypingResetRef = useMouseMoveTypingReset();
 	const ref = useMergeRefs( [ iframeRef, mouseMoveTypingResetRef ] );
 
-	useEffect(
-		function autoResizeIframeHeight() {
-			if ( ! iframeRef.current || ! enableResizing ) {
-				return;
-			}
-
-			const iframe = iframeRef.current;
-
-			function setFrameHeight() {
-				setHeight( iframe.contentDocument.body.scrollHeight );
-			}
-
-			let resizeObserver;
-
-			function registerObserver() {
-				resizeObserver?.disconnect();
-
-				resizeObserver = new iframe.contentWindow.ResizeObserver(
-					setFrameHeight
-				);
-
-				// Observe the body, since the `html` element seems to always
-				// have a height of `100%`.
-				resizeObserver.observe( iframe.contentDocument.body );
-				setFrameHeight();
-			}
-
-			iframe.addEventListener( 'load', registerObserver );
-
-			return () => {
-				resizeObserver?.disconnect();
-				iframe.removeEventListener( 'load', registerObserver );
-			};
-		},
-		[ enableResizing, iframeRef.current ]
-	);
-
 	const resizeWidthBy = useCallback( ( deltaPixels ) => {
 		if ( iframeRef.current ) {
 			setWidth( iframeRef.current.offsetWidth + deltaPixels );
 		}
 	}, [] );
-
 	return (
 		<ResizableBox
 			size={ {
-				width,
-				height,
+				width: enableResizing ? width : '100%',
+				height: enableResizing && sizes.height ? sizes.height : '100%',
 			} }
 			onResizeStop={ ( event, direction, element ) => {
 				setWidth( element.style.width );
@@ -141,21 +98,18 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 		>
 			<Iframe
 				isZoomedOut={ isZoomOutMode }
-				style={ enableResizing ? { height } : deviceStyles }
+				style={ enableResizing ? {} : deviceStyles }
 				head={
 					<>
 						<EditorStyles styles={ settings.styles } />
 						<style>{
 							// 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; }`
+							`.is-root-container { display: flow-root; }
+							body { position: relative; }`
 						}</style>
 						{ enableResizing && (
 							<style>
-								{
-									// Force the <html> and <body>'s heights to fit the content.
-									`html, body { height: -moz-fit-content !important; height: fit-content !important; min-height: 0 !important; }`
-								}
 								{
 									// Some themes will have `min-height: 100vh` for the root container,
 									// which isn't a requirement in auto resize mode.
@@ -173,6 +127,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 			>
 				{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
 				{ settings.svgFilters }
+				{ resizeObserver }
 				{ children }
 			</Iframe>
 		</ResizableBox>

package/src/components/editor/style.scss

@@ -7,16 +7,10 @@ html.wp-toolbar {
 }
 
 .edit-site-editor__toggle-save-panel {
-	z-index: z-index(".edit-site-editor__toggle-save-panel");
-	position: fixed !important; // Need to override the default relative positioning
-	top: -9999em;
-	bottom: auto;
-	left: auto;
-	right: 0;
+	box-sizing: border-box;
 	width: $sidebar-width;
 	background-color: $white;
 	border: 1px dotted $gray-300;
-	height: auto !important; // Need to override the default sidebar positioning
 	padding: $grid-unit-30;
 	display: flex;
 	justify-content: center;

package/src/components/global-styles/dimensions-panel.js

@@ -35,8 +35,16 @@ export function useHasDimensionsPanel( name ) {
 	const hasPadding = useHasPadding( name );
 	const hasMargin = useHasMargin( name );
 	const hasGap = useHasGap( name );
+	const hasMinHeight = useHasMinHeight( name );
 
-	return hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap;
+	return (
+		hasContentSize ||
+		hasWideSize ||
+		hasPadding ||
+		hasMargin ||
+		hasGap ||
+		hasMinHeight
+	);
 }
 
 function useHasContentSize( name ) {
@@ -74,6 +82,13 @@ function useHasGap( name ) {
 	return settings && supports.includes( 'blockGap' );
 }
 
+function useHasMinHeight( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ settings ] = useSetting( 'dimensions.minHeight', name );
+
+	return settings && supports.includes( 'minHeight' );
+}
+
 function useHasSpacingPresets() {
 	const [ settings ] = useSetting( 'spacing.spacingSizes' );
 
@@ -271,12 +286,29 @@ function useBlockGapProps( name ) {
 	};
 }
 
+// Props for managing `dimensions.minHeight`.
+function useMinHeightProps( name ) {
+	const [ minHeightValue, setMinHeightValue ] = useStyle(
+		'dimensions.minHeight',
+		name
+	);
+	const resetMinHeightValue = () => setMinHeightValue( undefined );
+	const hasMinHeightValue = () => !! minHeightValue;
+	return {
+		minHeightValue,
+		setMinHeightValue,
+		resetMinHeightValue,
+		hasMinHeightValue,
+	};
+}
+
 export default function DimensionsPanel( { name } ) {
 	const showContentSizeControl = useHasContentSize( name );
 	const showWideSizeControl = useHasWideSize( name );
 	const showPaddingControl = useHasPadding( name );
 	const showMarginControl = useHasMargin( name );
 	const showGapControl = useHasGap( name );
+	const showMinHeightControl = useHasMinHeight( name );
 	const showSpacingPresetsControl = useHasSpacingPresets();
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [
@@ -336,6 +368,14 @@ export default function DimensionsPanel( { name } ) {
 		hasGapValue,
 	} = useBlockGapProps( name );
 
+	// Props for managing `dimensions.minHeight`.
+	const {
+		minHeightValue,
+		setMinHeightValue,
+		resetMinHeightValue,
+		hasMinHeightValue,
+	} = useMinHeightProps( name );
+
 	const resetAll = () => {
 		resetPaddingValue();
 		resetMarginValue();
@@ -514,6 +554,24 @@ export default function DimensionsPanel( { name } ) {
 					) }
 				</ToolsPanelItem>
 			) }
+			{ showMinHeightControl && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ hasMinHeightValue }
+					label={ __( 'Min. height' ) }
+					onDeselect={ resetMinHeightValue }
+					isShownByDefault={ true }
+				>
+					<UnitControl
+						label={ __( 'Min. height' ) }
+						value={ minHeightValue }
+						onChange={ setMinHeightValue }
+						units={ units }
+						min={ 0 }
+						size={ '__unstable-large' }
+					/>
+				</ToolsPanelItem>
+			) }
 		</ToolsPanel>
 	);
 }

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

@@ -2,6 +2,8 @@
  * External dependencies
  */
 import { get, set, isEqual } from 'lodash';
+import { colord, extend } from 'colord';
+import a11yPlugin from 'colord/plugins/a11y';
 
 /**
  * WordPress dependencies
@@ -20,6 +22,9 @@ import {
 import { getValueFromVariable, getPresetVariableFromValue } from './utils';
 import { GlobalStylesContext } from './context';
 
+// Enable colord's a11y plugin.
+extend( [ a11yPlugin ] );
+
 const EMPTY_CONFIG = { settings: {}, styles: {} };
 
 export const useGlobalStylesReset = () => {
@@ -323,3 +328,34 @@ export function useGradientsPerOrigin( name ) {
 		return result;
 	}, [ customGradients, themeGradients, defaultGradients ] );
 }
+
+export function useColorRandomizer( name ) {
+	const [ themeColors, setThemeColors ] = useSetting(
+		'color.palette.theme',
+		name
+	);
+
+	function randomizeColors() {
+		/* eslint-disable no-restricted-syntax */
+		const randomRotationValue = Math.floor( Math.random() * 225 );
+		/* eslint-enable no-restricted-syntax */
+
+		const newColors = themeColors.map( ( colorObject ) => {
+			const { color } = colorObject;
+			const newColor = colord( color )
+				.rotate( randomRotationValue )
+				.toHex();
+
+			return {
+				...colorObject,
+				color: newColor,
+			};
+		} );
+
+		setThemeColors( newColors );
+	}
+
+	return window.__experimentalEnableColorRandomizer
+		? [ randomizeColors ]
+		: [];
+}

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

@@ -8,8 +8,10 @@ import {
 	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
 	ColorIndicator,
+	Button,
 } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { shuffle } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -17,7 +19,7 @@ import { useMemo } from '@wordpress/element';
  */
 import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
-import { useSetting } from './hooks';
+import { useColorRandomizer, useSetting } from './hooks';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 
 const EMPTY_COLORS = [];
@@ -31,6 +33,9 @@ function Palette( { name } ) {
 		'color.defaultPalette',
 		name
 	);
+
+	const [ randomizeThemeColors ] = useColorRandomizer();
+
 	const colors = useMemo(
 		() => [
 			...( customColors || EMPTY_COLORS ),
@@ -82,6 +87,15 @@ function Palette( { name } ) {
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>
+			{ randomizeThemeColors && (
+				<Button
+					variant="secondary"
+					icon={ shuffle }
+					onClick={ randomizeThemeColors }
+				>
+					{ __( 'Randomize colors' ) }
+				</Button>
+			) }
 		</VStack>
 	);
 }