@wordpress/edit-site 4.15.0 → 4.16.0

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

@@ -57,38 +57,14 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 
 	useEffect(
 		function autoResizeIframeHeight() {
-			const iframe = iframeRef.current;
-
-			if ( ! iframe || ! enableResizing ) {
+			if ( ! iframeRef.current || ! enableResizing ) {
 				return;
 			}
 
-			let timeoutId = null;
-
-			function resizeHeight() {
-				if ( ! timeoutId ) {
-					// Throttle the updates on timeout. This code previously
-					// used `requestAnimationFrame`, but that seems to not
-					// always work before an iframe is ready.
-					timeoutId = iframe.contentWindow.setTimeout( () => {
-						const { readyState } = iframe.contentDocument;
-
-						// Continue deferring the timeout until the document is ready.
-						// Only then will it have a height.
-						if (
-							readyState !== 'interactive' &&
-							readyState !== 'complete'
-						) {
-							resizeHeight();
-							return;
-						}
-
-						setHeight( iframe.contentDocument.body.scrollHeight );
-						timeoutId = null;
-
-						// 30 frames per second.
-					}, 1000 / 30 );
-				}
+			const iframe = iframeRef.current;
+
+			function setFrameHeight() {
+				setHeight( iframe.contentDocument.body.scrollHeight );
 			}
 
 			let resizeObserver;
@@ -97,28 +73,23 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 				resizeObserver?.disconnect();
 
 				resizeObserver = new iframe.contentWindow.ResizeObserver(
-					resizeHeight
+					setFrameHeight
 				);
 
 				// Observe the body, since the `html` element seems to always
 				// have a height of `100%`.
 				resizeObserver.observe( iframe.contentDocument.body );
-
-				resizeHeight();
+				setFrameHeight();
 			}
 
-			// This is only required in Firefox for some unknown reasons.
 			iframe.addEventListener( 'load', registerObserver );
-			// This is required in Chrome and Safari.
-			registerObserver();
 
 			return () => {
-				iframe.contentWindow?.clearTimeout( timeoutId );
 				resizeObserver?.disconnect();
 				iframe.removeEventListener( 'load', registerObserver );
 			};
 		},
-		[ enableResizing ]
+		[ enableResizing, iframeRef.current ]
 	);
 
 	const resizeWidthBy = useCallback( ( deltaPixels ) => {

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

@@ -68,11 +68,15 @@ function Palette( { name } ) {
 						}
 					>
 						<ZStack isLayered={ false } offset={ -8 }>
-							{ colors.slice( 0, 5 ).map( ( { color } ) => (
-								<ColorIndicatorWrapper key={ color }>
-									<ColorIndicator colorValue={ color } />
-								</ColorIndicatorWrapper>
-							) ) }
+							{ colors
+								.slice( 0, 5 )
+								.map( ( { color }, index ) => (
+									<ColorIndicatorWrapper
+										key={ `${ color }-${ index }` }
+									>
+										<ColorIndicator colorValue={ color } />
+									</ColorIndicatorWrapper>
+								) ) }
 						</ZStack>
 						<FlexItem>{ paletteButtonText }</FlexItem>
 					</HStack>

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

@@ -79,13 +79,13 @@ const StylesPreview = ( { label, isFocused } ) => {
 		)
 		.slice( 0, 2 );
 
-	// Reset leaked styles from WP common.css and remove main content layout padding.
+	// Reset leaked styles from WP common.css and remove main content layout padding and border.
 	const editorStyles = useMemo( () => {
 		if ( styles ) {
 			return [
 				...styles,
 				{
-					css: 'body{min-width: 0;padding: 0;}',
+					css: 'body{min-width: 0;padding: 0;border: none;}',
 					isGlobalStyles: true,
 				},
 			];

package/src/components/global-styles/screen-typography-element.js

@@ -2,12 +2,19 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import TypographyPanel from './typography-panel';
 import ScreenHeader from './header';
+import TypographyPreview from './typography-preview';
 
 const elements = {
 	text: {
@@ -29,13 +36,70 @@ const elements = {
 };
 
 function ScreenTypographyElement( { name, element } ) {
+	const [ headingLevel, setHeadingLevel ] = useState( 'heading' );
+
 	return (
 		<>
 			<ScreenHeader
 				title={ elements[ element ].title }
 				description={ elements[ element ].description }
 			/>
-			<TypographyPanel name={ name } element={ element } />
+			<Spacer marginX={ 4 }>
+				<TypographyPreview
+					name={ name }
+					element={ element }
+					headingLevel={ headingLevel }
+				/>
+			</Spacer>
+			{ element === 'heading' && (
+				<Spacer marginX={ 4 } marginBottom="1em">
+					<ToggleGroupControl
+						label={ __( 'Select heading level' ) }
+						hideLabelFromVision
+						value={ headingLevel }
+						onChange={ setHeadingLevel }
+						isBlock
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					>
+						<ToggleGroupControlOption
+							value="heading"
+							/* translators: 'All' refers to selecting all heading levels 
+							and applying the same style to h1-h6. */
+							label={ __( 'All' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h1"
+							label={ __( 'H1' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h2"
+							label={ __( 'H2' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h3"
+							label={ __( 'H3' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h4"
+							label={ __( 'H4' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h5"
+							label={ __( 'H5' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h6"
+							label={ __( 'H6' ) }
+						/>
+					</ToggleGroupControl>
+				</Spacer>
+			) }
+			<TypographyPanel
+				name={ name }
+				element={ element }
+				headingLevel={ headingLevel }
+			/>
 		</>
 	);
 }

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

@@ -11,7 +11,7 @@
 	display: block;
 }
 
-.edit-site-typography-panel__preview {
+.edit-site-typography-preview {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -46,7 +46,7 @@
 
 	.component-color-indicator {
 		// Show a diagonal line (crossed out) for empty swatches.
-		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+		background: $white linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 		flex-shrink: 0;
 	}
 }
@@ -97,7 +97,7 @@
 	}
 
 	&:focus .edit-site-global-styles-variations_item-preview {
-		border: var(--wp-admin-theme-color) $border-width solid;
+		border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
 	}
 }
 

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

@@ -9,25 +9,25 @@ import {
 	__experimentalTextTransformControl as TextTransformControl,
 } from '@wordpress/block-editor';
 import {
-	PanelBody,
 	FontSizePicker,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	__experimentalGrid as Grid,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
 
 export function useHasTypographyPanel( name ) {
+	const hasFontFamily = useHasFontFamilyControl( name );
 	const hasLineHeight = useHasLineHeightControl( name );
 	const hasFontAppearance = useHasAppearanceControl( name );
 	const hasLetterSpacing = useHasLetterSpacingControl( name );
 	const supports = getSupportedGlobalStylesPanels( name );
 	return (
+		hasFontFamily ||
 		hasLineHeight ||
 		hasFontAppearance ||
 		hasLetterSpacing ||
@@ -35,6 +35,12 @@ export function useHasTypographyPanel( name ) {
 	);
 }
 
+function useHasFontFamilyControl( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ fontFamilies ] = useSetting( 'typography.fontFamilies', name );
+	return supports.includes( 'fontFamily' ) && !! fontFamilies?.length;
+}
+
 function useHasLineHeightControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	return (
@@ -54,6 +60,23 @@ function useHasAppearanceControl( name ) {
 	return hasFontStyles || hasFontWeights;
 }
 
+function useAppearanceControlLabel( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const hasFontStyles =
+		useSetting( 'typography.fontStyle', name )[ 0 ] &&
+		supports.includes( 'fontStyle' );
+	const hasFontWeights =
+		useSetting( 'typography.fontWeight', name )[ 0 ] &&
+		supports.includes( 'fontWeight' );
+	if ( ! hasFontStyles ) {
+		return __( 'Font weight' );
+	}
+	if ( ! hasFontWeights ) {
+		return __( 'Font style' );
+	}
+	return __( 'Appearance' );
+}
+
 function useHasLetterSpacingControl( name, element ) {
 	const setting = useSetting( 'typography.letterSpacing', name )[ 0 ];
 	if ( ! setting ) {
@@ -78,12 +101,53 @@ function useHasTextTransformControl( name, element ) {
 	return supports.includes( 'textTransform' );
 }
 
-export default function TypographyPanel( { name, element } ) {
-	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
+function useStyleWithReset( path, blockName ) {
+	const [ style, setStyle ] = useStyle( path, blockName );
+	const [ userStyle ] = useStyle( path, blockName, 'user' );
+	const hasStyle = () => !! userStyle;
+	const resetStyle = () => setStyle( undefined );
+	return [ style, setStyle, hasStyle, resetStyle ];
+}
+
+function useFontAppearance( prefix, name ) {
+	const [ fontStyle, setFontStyle ] = useStyle(
+		prefix + 'typography.fontStyle',
+		name
+	);
+	const [ userFontStyle ] = useStyle(
+		prefix + 'typography.fontStyle',
+		name,
+		'user'
+	);
+	const [ fontWeight, setFontWeight ] = useStyle(
+		prefix + 'typography.fontWeight',
+		name
+	);
+	const [ userFontWeight ] = useStyle(
+		prefix + 'typography.fontWeight',
+		name,
+		'user'
+	);
+	const hasFontAppearance = () => !! userFontStyle || !! userFontWeight;
+	const resetFontAppearance = () => {
+		setFontStyle( undefined );
+		setFontWeight( undefined );
+	};
+	return {
+		fontStyle,
+		setFontStyle,
+		fontWeight,
+		setFontWeight,
+		hasFontAppearance,
+		resetFontAppearance,
+	};
+}
+
+export default function TypographyPanel( { name, element, headingLevel } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	let prefix = '';
 	if ( element === 'heading' ) {
-		prefix = `elements.${ selectedLevel }.`;
+		prefix = `elements.${ headingLevel }.`;
 	} else if ( element && element !== 'text' ) {
 		prefix = `elements.${ element }.`;
 	}
@@ -99,142 +163,99 @@ export default function TypographyPanel( { name, element } ) {
 	const hasFontWeights =
 		useSetting( 'typography.fontWeight', name )[ 0 ] &&
 		supports.includes( 'fontWeight' );
+	const hasFontFamilyEnabled = useHasFontFamilyControl( name );
 	const hasLineHeightEnabled = useHasLineHeightControl( name );
 	const hasAppearanceControl = useHasAppearanceControl( name );
+	const appearanceControlLabel = useAppearanceControlLabel( name );
 	const hasLetterSpacingControl = useHasLetterSpacingControl( name, element );
 	const hasTextTransformControl = useHasTextTransformControl( name, element );
 
 	/* Disable font size controls when the option to style all headings is selected. */
 	let hasFontSizeEnabled = supports.includes( 'fontSize' );
-	if ( element === 'heading' && selectedLevel === 'heading' ) {
+	if ( element === 'heading' && headingLevel === 'heading' ) {
 		hasFontSizeEnabled = false;
 	}
 
-	const [ fontFamily, setFontFamily ] = useStyle(
-		prefix + 'typography.fontFamily',
-		name
-	);
-	const [ fontSize, setFontSize ] = useStyle(
-		prefix + 'typography.fontSize',
-		name
-	);
+	const [ fontFamily, setFontFamily, hasFontFamily, resetFontFamily ] =
+		useStyleWithReset( prefix + 'typography.fontFamily', name );
+	const [ fontSize, setFontSize, hasFontSize, resetFontSize ] =
+		useStyleWithReset( prefix + 'typography.fontSize', name );
+	const {
+		fontStyle,
+		setFontStyle,
+		fontWeight,
+		setFontWeight,
+		hasFontAppearance,
+		resetFontAppearance,
+	} = useFontAppearance( prefix, name );
+	const [ lineHeight, setLineHeight, hasLineHeight, resetLineHeight ] =
+		useStyleWithReset( prefix + 'typography.lineHeight', name );
+	const [
+		letterSpacing,
+		setLetterSpacing,
+		hasLetterSpacing,
+		resetLetterSpacing,
+	] = useStyleWithReset( prefix + 'typography.letterSpacing', name );
+	const [
+		textTransform,
+		setTextTransform,
+		hasTextTransform,
+		resetTextTransform,
+	] = useStyleWithReset( prefix + 'typography.textTransform', name );
 
-	const [ fontStyle, setFontStyle ] = useStyle(
-		prefix + 'typography.fontStyle',
-		name
-	);
-	const [ fontWeight, setFontWeight ] = useStyle(
-		prefix + 'typography.fontWeight',
-		name
-	);
-	const [ lineHeight, setLineHeight ] = useStyle(
-		prefix + 'typography.lineHeight',
-		name
-	);
-	const [ letterSpacing, setLetterSpacing ] = useStyle(
-		prefix + 'typography.letterSpacing',
-		name
-	);
-	const [ textTransform, setTextTransform ] = useStyle(
-		prefix + 'typography.textTransform',
-		name
-	);
-	const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
-	const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
-	const [ color ] = useStyle( prefix + 'color.text', name );
-	const extraStyles =
-		element === 'link'
-			? {
-					textDecoration: 'underline',
-			  }
-			: {};
+	const resetAll = () => {
+		resetFontFamily();
+		resetFontSize();
+		resetFontAppearance();
+		resetLineHeight();
+		resetLetterSpacing();
+		resetTextTransform();
+	};
 
 	return (
-		<PanelBody className="edit-site-typography-panel" initialOpen={ true }>
-			<div
-				className="edit-site-typography-panel__preview"
-				style={ {
-					fontFamily: fontFamily ?? 'serif',
-					background: gradientValue ?? backgroundColor,
-					color,
-					fontSize,
-					fontStyle,
-					fontWeight,
-					letterSpacing,
-					...extraStyles,
-				} }
-			>
-				Aa
-			</div>
-			<Grid columns={ 2 } rowGap={ 16 } columnGap={ 8 }>
-				{ element === 'heading' && (
-					<div className="edit-site-typography-panel__full-width-control">
-						<ToggleGroupControl
-							label={ __( 'Select heading level' ) }
-							hideLabelFromVision
-							value={ selectedLevel }
-							onChange={ setCurrentTab }
-							isBlock
-							size="__unstable-large"
-							__nextHasNoMarginBottom
-						>
-							<ToggleGroupControlOption
-								value="heading"
-								/* translators: 'All' refers to selecting all heading levels 
-							and applying the same style to h1-h6. */
-								label={ __( 'All' ) }
-							/>
-							<ToggleGroupControlOption
-								value="h1"
-								label={ __( 'H1' ) }
-							/>
-							<ToggleGroupControlOption
-								value="h2"
-								label={ __( 'H2' ) }
-							/>
-							<ToggleGroupControlOption
-								value="h3"
-								label={ __( 'H3' ) }
-							/>
-							<ToggleGroupControlOption
-								value="h4"
-								label={ __( 'H4' ) }
-							/>
-							<ToggleGroupControlOption
-								value="h5"
-								label={ __( 'H5' ) }
-							/>
-							<ToggleGroupControlOption
-								value="h6"
-								label={ __( 'H6' ) }
-							/>
-						</ToggleGroupControl>
-					</div>
-				) }
-				{ supports.includes( 'fontFamily' ) && (
-					<div className="edit-site-typography-panel__full-width-control">
-						<FontFamilyControl
-							fontFamilies={ fontFamilies }
-							value={ fontFamily }
-							onChange={ setFontFamily }
-							size="__unstable-large"
-							__nextHasNoMarginBottom
-						/>
-					</div>
-				) }
-				{ hasFontSizeEnabled && (
-					<div className="edit-site-typography-panel__full-width-control">
-						<FontSizePicker
-							value={ fontSize }
-							onChange={ setFontSize }
-							fontSizes={ fontSizes }
-							disableCustomFontSizes={ disableCustomFontSizes }
-							size="__unstable-large"
-							__nextHasNoMarginBottom
-						/>
-					</div>
-				) }
-				{ hasAppearanceControl && (
+		<ToolsPanel label={ __( 'Typography' ) } resetAll={ resetAll }>
+			{ hasFontFamilyEnabled && (
+				<ToolsPanelItem
+					label={ __( 'Font family' ) }
+					hasValue={ hasFontFamily }
+					onDeselect={ resetFontFamily }
+					isShownByDefault
+				>
+					<FontFamilyControl
+						fontFamilies={ fontFamilies }
+						value={ fontFamily }
+						onChange={ setFontFamily }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasFontSizeEnabled && (
+				<ToolsPanelItem
+					label={ __( 'Font size' ) }
+					hasValue={ hasFontSize }
+					onDeselect={ resetFontSize }
+					isShownByDefault
+				>
+					<FontSizePicker
+						value={ fontSize }
+						onChange={ setFontSize }
+						fontSizes={ fontSizes }
+						disableCustomFontSizes={ disableCustomFontSizes }
+						withReset={ false }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				</ToolsPanelItem>
+			) }
+			{ hasAppearanceControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ appearanceControlLabel }
+					hasValue={ hasFontAppearance }
+					onDeselect={ resetFontAppearance }
+					isShownByDefault
+				>
 					<FontAppearanceControl
 						value={ {
 							fontStyle,
@@ -252,8 +273,16 @@ export default function TypographyPanel( { name, element } ) {
 						size="__unstable-large"
 						__nextHasNoMarginBottom
 					/>
-				) }
-				{ hasLineHeightEnabled && (
+				</ToolsPanelItem>
+			) }
+			{ hasLineHeightEnabled && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Line height' ) }
+					hasValue={ hasLineHeight }
+					onDeselect={ resetLineHeight }
+					isShownByDefault
+				>
 					<LineHeightControl
 						__nextHasNoMarginBottom
 						__unstableInputWidth="auto"
@@ -261,28 +290,41 @@ export default function TypographyPanel( { name, element } ) {
 						onChange={ setLineHeight }
 						size="__unstable-large"
 					/>
-				) }
-				{ hasLetterSpacingControl && (
+				</ToolsPanelItem>
+			) }
+			{ hasLetterSpacingControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Letter spacing' ) }
+					hasValue={ hasLetterSpacing }
+					onDeselect={ resetLetterSpacing }
+					isShownByDefault
+				>
 					<LetterSpacingControl
 						value={ letterSpacing }
 						onChange={ setLetterSpacing }
 						size="__unstable-large"
 						__unstableInputWidth="auto"
 					/>
-				) }
-				{ hasTextTransformControl && (
-					<div className="edit-site-typography-panel__full-width-control">
-						<TextTransformControl
-							value={ textTransform }
-							onChange={ setTextTransform }
-							showNone
-							isBlock
-							size="__unstable-large"
-							__nextHasNoMarginBottom
-						/>
-					</div>
-				) }
-			</Grid>
-		</PanelBody>
+				</ToolsPanelItem>
+			) }
+			{ hasTextTransformControl && (
+				<ToolsPanelItem
+					label={ __( 'Letter case' ) }
+					hasValue={ hasTextTransform }
+					onDeselect={ resetTextTransform }
+					isShownByDefault
+				>
+					<TextTransformControl
+						value={ textTransform }
+						onChange={ setTextTransform }
+						showNone
+						isBlock
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				</ToolsPanelItem>
+			) }
+		</ToolsPanel>
 	);
 }