@wordpress/edit-site 4.17.0 → 4.19.0

package/src/components/app/index.js

@@ -17,7 +17,7 @@ import List from '../list';
 import NavigationSidebar from '../navigation-sidebar';
 import getIsListPage from '../../utils/get-is-list-page';
 
-export default function EditSiteApp( { reboot } ) {
+export default function EditSiteApp( { reboot, homeTemplate } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
 	function onPluginAreaError( name ) {
@@ -40,6 +40,13 @@ export default function EditSiteApp( { reboot } ) {
 				{ ( { params } ) => {
 					const isListPage = getIsListPage( params );
 
+					// The existence of a 'front-page' supersedes every other setting.
+					const homeTemplateType =
+						params.postId?.includes( 'front-page' ) ||
+						params.postId === homeTemplate?.postId
+							? 'site-editor'
+							: undefined;
+
 					return (
 						<>
 							{ isListPage ? (
@@ -54,7 +61,9 @@ export default function EditSiteApp( { reboot } ) {
 								// Open the navigation sidebar by default when in the list page.
 								isDefaultOpen={ !! isListPage }
 								activeTemplateType={
-									isListPage ? params.postType : undefined
+									isListPage
+										? params.postType
+										: homeTemplateType
 								}
 							/>
 						</>

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/block-editor/style.scss

@@ -23,6 +23,7 @@
 
 		.edit-site-visual-editor__editor-canvas {
 			border-radius: $radius-block-ui;
+			max-height: 100%;
 		}
 
 		// To hide the horizontal scrollbar and show the drag handle on the

package/src/components/editor/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Popover, Button, Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
@@ -65,6 +65,7 @@ function Editor( { onError } ) {
 	const {
 		isInserterOpen,
 		isListViewOpen,
+		isSaveViewOpen,
 		sidebarIsOpened,
 		settings,
 		entityId,
@@ -82,6 +83,7 @@ function Editor( { onError } ) {
 		const {
 			isInserterOpened,
 			isListViewOpened,
+			isSaveViewOpened,
 			getSettings,
 			getEditedPostType,
 			getEditedPostId,
@@ -98,6 +100,7 @@ function Editor( { onError } ) {
 		return {
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
+			isSaveViewOpen: isSaveViewOpened(),
 			sidebarIsOpened: !! select(
 				interfaceStore
 			).getActiveComplementaryArea( editSiteStore.name ),
@@ -130,19 +133,10 @@ function Editor( { onError } ) {
 			blockEditorMode: __unstableGetEditorMode(),
 		};
 	}, [] );
-	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
+	const { setPage, setIsInserterOpened, setIsSaveViewOpened } =
+		useDispatch( editSiteStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
-	const [ isEntitiesSavedStatesOpen, setIsEntitiesSavedStatesOpen ] =
-		useState( false );
-	const openEntitiesSavedStates = useCallback(
-		() => setIsEntitiesSavedStatesOpen( true ),
-		[]
-	);
-	const closeEntitiesSavedStates = useCallback( () => {
-		setIsEntitiesSavedStatesOpen( false );
-	}, [] );
-
 	const blockContext = useMemo(
 		() => ( {
 			...page?.context,
@@ -247,9 +241,6 @@ function Editor( { onError } ) {
 											}
 											header={
 												<Header
-													openEntitiesSavedStates={
-														openEntitiesSavedStates
-													}
 													showIconLabels={
 														showIconLabels
 													}
@@ -286,19 +277,17 @@ function Editor( { onError } ) {
 																) }
 															</Notice>
 														) }
-													<KeyboardShortcuts
-														openEntitiesSavedStates={
-															openEntitiesSavedStates
-														}
-													/>
+													<KeyboardShortcuts />
 												</>
 											}
 											actions={
 												<>
-													{ isEntitiesSavedStatesOpen ? (
+													{ isSaveViewOpen ? (
 														<EntitiesSavedStates
-															close={
-																closeEntitiesSavedStates
+															close={ () =>
+																setIsSaveViewOpened(
+																	false
+																)
 															}
 														/>
 													) : (
@@ -306,8 +295,10 @@ function Editor( { onError } ) {
 															<Button
 																variant="secondary"
 																className="edit-site-editor__toggle-save-panel-button"
-																onClick={
-																	openEntitiesSavedStates
+																onClick={ () =>
+																	setIsSaveViewOpened(
+																		true
+																	)
 																}
 																aria-expanded={
 																	false

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/border-panel.js

@@ -186,6 +186,7 @@ export default function BorderPanel( { name } ) {
 						value={ border }
 						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
+						size={ '__unstable-large' }
 					/>
 				</ToolsPanelItem>
 			) }

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/global-styles-provider.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mergeWith, pickBy, isEmpty, mapValues } from 'lodash';
+import { mergeWith, isEmpty, mapValues } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,8 +15,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { GlobalStylesContext } from './context';
 
-const identity = ( x ) => x;
-
 function mergeTreesCustomizer( _, srcValue ) {
 	// We only pass as arrays the presets,
 	// in which case we want the new array of values
@@ -38,9 +36,10 @@ const cleanEmptyObject = ( object ) => {
 	) {
 		return object;
 	}
-	const cleanedNestedObjects = pickBy(
-		mapValues( object, cleanEmptyObject ),
-		identity
+	const cleanedNestedObjects = Object.fromEntries(
+		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
+			( [ , value ] ) => Boolean( value )
+		)
 	);
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };

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>
 	);
 }

package/src/components/global-styles/style.scss

@@ -19,6 +19,7 @@
 	margin-bottom: $grid-unit-20;
 	background: $gray-100;
 	border-radius: $radius-block-ui;
+	overflow: hidden;
 }
 
 .edit-site-typography-panel__full-width-control {