@wordpress/edit-site 4.18.0 → 5.0.0

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

@@ -18,6 +18,7 @@ import {
 } from '@wordpress/components';
 import {
 	__experimentalUseCustomSides as useCustomSides,
+	__experimentalHeightControl as HeightControl,
 	__experimentalSpacingSizesControl as SpacingSizesControl,
 } from '@wordpress/block-editor';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
@@ -35,8 +36,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 +83,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 +287,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 +369,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 +555,20 @@ export default function DimensionsPanel( { name } ) {
 					) }
 				</ToolsPanelItem>
 			) }
+			{ showMinHeightControl && (
+				<ToolsPanelItem
+					hasValue={ hasMinHeightValue }
+					label={ __( 'Min. height' ) }
+					onDeselect={ resetMinHeightValue }
+					isShownByDefault={ true }
+				>
+					<HeightControl
+						label={ __( 'Min. height' ) }
+						value={ minHeightValue }
+						onChange={ setMinHeightValue }
+					/>
+				</ToolsPanelItem>
+			) }
 		</ToolsPanel>
 	);
 }

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

@@ -45,22 +45,44 @@ const cleanEmptyObject = ( object ) => {
 };
 
 function useGlobalStylesUserConfig() {
-	const { globalStylesId, settings, styles } = useSelect( ( select ) => {
-		const _globalStylesId =
-			select( coreStore ).__experimentalGetCurrentGlobalStylesId();
-		const record = _globalStylesId
-			? select( coreStore ).getEditedEntityRecord(
-					'root',
-					'globalStyles',
-					_globalStylesId
-			  )
-			: undefined;
-		return {
-			globalStylesId: _globalStylesId,
-			settings: record?.settings,
-			styles: record?.styles,
-		};
-	}, [] );
+	const { globalStylesId, isReady, settings, styles } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const _globalStylesId =
+				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
+			const record = _globalStylesId
+				? getEditedEntityRecord(
+						'root',
+						'globalStyles',
+						_globalStylesId
+				  )
+				: undefined;
+
+			let hasResolved = false;
+			if (
+				hasFinishedResolution(
+					'__experimentalGetCurrentGlobalStylesId'
+				)
+			) {
+				hasResolved = _globalStylesId
+					? hasFinishedResolution( 'getEditedEntityRecord', [
+							'root',
+							'globalStyles',
+							_globalStylesId,
+					  ] )
+					: true;
+			}
+
+			return {
+				globalStylesId: _globalStylesId,
+				isReady: hasResolved,
+				settings: record?.settings,
+				styles: record?.styles,
+			};
+		},
+		[]
+	);
 
 	const { getEditedEntityRecord } = useSelect( coreStore );
 	const { editEntityRecord } = useDispatch( coreStore );
@@ -91,7 +113,7 @@ function useGlobalStylesUserConfig() {
 		[ globalStylesId ]
 	);
 
-	return [ !! settings || !! styles, config, setConfig ];
+	return [ isReady, config, setConfig ];
 }
 
 function useGlobalStylesBaseConfig() {

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

@@ -1,7 +1,10 @@
 /**
  * External dependencies
  */
-import { get, set, isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
+import { get, set } from 'lodash';
+import { colord, extend } from 'colord';
+import a11yPlugin from 'colord/plugins/a11y';
 
 /**
  * WordPress dependencies
@@ -20,11 +23,14 @@ 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 = () => {
 	const { user: config, setUserConfig } = useContext( GlobalStylesContext );
-	const canReset = !! config && ! isEqual( config, EMPTY_CONFIG );
+	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
 	return [
 		canReset,
 		useCallback(
@@ -132,7 +138,11 @@ export function useStyle( path, blockName, source = 'all' ) {
 			result = getValueFromVariable(
 				mergedConfig,
 				blockName,
-				get( userConfig, finalPath ) ?? get( baseConfig, finalPath )
+				// The stlyes.css path is allowed to be empty, so don't revert to base if undefined.
+				finalPath === 'styles.css'
+					? get( userConfig, finalPath )
+					: get( userConfig, finalPath ) ??
+							get( baseConfig, finalPath )
 			);
 			break;
 		case 'user':
@@ -323,3 +333,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 ),
@@ -44,7 +49,7 @@ function Palette( { name } ) {
 
 	const screenPath = ! name
 		? '/colors/palette'
-		: '/blocks/' + name + '/colors/palette';
+		: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';
 	const paletteButtonText =
 		colors.length > 0
 			? sprintf(
@@ -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/screen-block-list.js

@@ -68,7 +68,7 @@ function BlockMenuItem( { block } ) {
 
 	return (
 		<NavigationButtonAsItem
-			path={ '/blocks/' + block.name }
+			path={ '/blocks/' + encodeURIComponent( block.name ) }
 			aria-label={ navigationButtonLabel }
 		>
 			<HStack justify="flex-start">
@@ -129,6 +129,7 @@ function ScreenBlockList() {
 				) }
 			/>
 			<SearchControl
+				__nextHasNoMarginBottom
 				className="edit-site-block-types-search"
 				onChange={ setFilterValue }
 				value={ filterValue }

package/src/components/global-styles/screen-block.js

@@ -2,12 +2,14 @@
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
+import { __experimentalSpacer as Spacer } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import ContextMenu from './context-menu';
 import ScreenHeader from './header';
+import BlockPreviewPanel from './block-preview-panel';
 
 function ScreenBlock( { name } ) {
 	const blockType = getBlockType( name );
@@ -15,7 +17,13 @@ function ScreenBlock( { name } ) {
 	return (
 		<>
 			<ScreenHeader title={ blockType.title } />
-			<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />
+			<Spacer paddingX={ 4 }>
+				<BlockPreviewPanel name={ name } />
+			</Spacer>
+			<ContextMenu
+				parentMenu={ '/blocks/' + encodeURIComponent( name ) }
+				name={ name }
+			/>
 		</>
 	);
 }

package/src/components/global-styles/screen-border.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import BorderPanel, { useHasBorderPanel } from './border-panel';
+
+function ScreenBorder( { name } ) {
+	const hasBorderPanel = useHasBorderPanel( name );
+
+	return (
+		<>
+			<ScreenHeader title={ __( 'Border' ) } />
+			{ hasBorderPanel && <BorderPanel name={ name } /> }
+		</>
+	);
+}
+
+export default ScreenBorder;

package/src/components/global-styles/screen-colors.js

@@ -174,7 +174,8 @@ function ButtonColorItem( { name, parentMenu } ) {
 }
 
 function ScreenColors( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+	const parentMenu =
+		name === undefined ? '' : '/blocks/' + encodeURIComponent( name );
 
 	return (
 		<>

package/src/components/global-styles/screen-css.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import Subtitle from './subtitle';
+import CustomCSSControl from './custom-css';
+
+function ScreenCSS() {
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'CSS' ) }
+				description={ __(
+					'Add your own CSS to customize the appearance and layout of your site.'
+				) }
+			/>
+			<div className="edit-site-global-styles-screen-css">
+				<VStack spacing={ 3 }>
+					<Subtitle>{ __( 'ADDITIONAL CSS' ) }</Subtitle>
+					<CustomCSSControl />
+				</VStack>
+			</div>
+		</>
+	);
+}
+
+export default ScreenCSS;

package/src/components/global-styles/screen-layout.js

@@ -6,19 +6,16 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import BorderPanel, { useHasBorderPanel } from './border-panel';
 import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
 import ScreenHeader from './header';
 
 function ScreenLayout( { name } ) {
-	const hasBorderPanel = useHasBorderPanel( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
 
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
 			{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }
-			{ hasBorderPanel && <BorderPanel name={ name } /> }
 		</>
 	);
 }

package/src/components/global-styles/screen-root.js

@@ -75,7 +75,8 @@ function ScreenRoot() {
 					paddingTop={ 2 }
 					/*
 					 * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
-					 * This is an ad hoc override for this particular instance only and should be reconsidered before making into a pattern.
+					 * This is an ad hoc override for this instance and the Addtional CSS option below. Other options for matching the
+					 * the nav button inset should be looked at before reusing further.
 					 */
 					paddingX="13px"
 					marginBottom={ 4 }
@@ -98,6 +99,34 @@ function ScreenRoot() {
 					</NavigationButtonAsItem>
 				</ItemGroup>
 			</CardBody>
+
+			<CardDivider />
+
+			<CardBody>
+				<Spacer
+					as="p"
+					paddingTop={ 2 }
+					paddingX="13px"
+					marginBottom={ 4 }
+				>
+					{ __(
+						'Add your own CSS to customize the appearance and layout of your site.'
+					) }
+				</Spacer>
+				<ItemGroup>
+					<NavigationButtonAsItem
+						path="/css"
+						aria-label={ __( 'Additional CSS' ) }
+					>
+						<HStack justify="space-between">
+							<FlexItem>{ __( 'Custom' ) }</FlexItem>
+							<IconWithCurrentColor
+								icon={ isRTL() ? chevronLeft : chevronRight }
+							/>
+						</HStack>
+					</NavigationButtonAsItem>
+				</ItemGroup>
+			</CardBody>
 		</Card>
 	);
 }

package/src/components/global-styles/screen-style-variations.js

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
 import classnames from 'classnames';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -34,7 +34,10 @@ import StylesPreview from './preview';
 import ScreenHeader from './header';
 
 function compareVariations( a, b ) {
-	return isEqual( a.styles, b.styles ) && isEqual( a.settings, b.settings );
+	return (
+		fastDeepEqual( a.styles, b.styles ) &&
+		fastDeepEqual( a.settings, b.settings )
+	);
 }
 
 function Variation( { variation } ) {

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

@@ -1,3 +1,6 @@
+// Variables
+$block-preview-height: 150px;
+
 .edit-site-global-styles-preview {
 	display: flex;
 	align-items: center;
@@ -28,7 +31,8 @@
 }
 
 .edit-site-global-styles-screen-heading-color,
-.edit-site-global-styles-screen-typography {
+.edit-site-global-styles-screen-typography,
+.edit-site-global-styles-screen-css {
 	margin: $grid-unit-20;
 }
 
@@ -52,8 +56,12 @@
 	}
 }
 
-.edit-site-global-styles-header__description,
+.edit-site-global-styles-header__description {
+	padding: 0 $grid-unit-20;
+}
+
 .edit-site-block-types-search {
+	margin-bottom: $grid-unit-10;
 	padding: 0 $grid-unit-20;
 }
 
@@ -117,3 +125,24 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+
+.edit-site-global-styles__block-preview-panel {
+	position: relative;
+	width: 100%;
+	height: $block-preview-height + 2 * $border-width;
+	overflow: auto;
+	border: $gray-200 $border-width solid;
+	border-radius: $radius-block-ui;
+}
+
+.edit-site-global-styles__custom-css-input textarea {
+	font-family: $editor_html_font;
+}
+
+.edit-site-global-styles__custom-css-theme-css {
+	width: 100%;
+	line-break: anywhere;
+	white-space: break-spaces;
+	max-height: 200px;
+	overflow-y: scroll;
+}