@wordpress/edit-site 4.15.1-next.4d3b314fd5.0 → 4.16.0

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

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

@@ -0,0 +1,49 @@
+/**
+ * Internal dependencies
+ */
+import { useStyle } from './hooks';
+
+export default function TypographyPreview( { name, element, headingLevel } ) {
+	let prefix = '';
+	if ( element === 'heading' ) {
+		prefix = `elements.${ headingLevel }.`;
+	} else if ( element && element !== 'text' ) {
+		prefix = `elements.${ element }.`;
+	}
+
+	const [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );
+	const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
+	const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
+	const [ color ] = useStyle( prefix + 'color.text', name );
+	const [ fontSize ] = useStyle( prefix + 'typography.fontSize', name );
+	const [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );
+	const [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );
+	const [ letterSpacing ] = useStyle(
+		prefix + 'typography.letterSpacing',
+		name
+	);
+	const extraStyles =
+		element === 'link'
+			? {
+					textDecoration: 'underline',
+			  }
+			: {};
+
+	return (
+		<div
+			className="edit-site-typography-preview"
+			style={ {
+				fontFamily: fontFamily ?? 'serif',
+				background: gradientValue ?? backgroundColor,
+				color,
+				fontSize,
+				fontStyle,
+				fontWeight,
+				letterSpacing,
+				...extraStyles,
+			} }
+		>
+			Aa
+		</div>
+	);
+}

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

@@ -434,9 +434,15 @@ export const getNodesWithStyles = ( tree, blockSelectors ) => {
 
 	const pickStyleKeys = ( treeToPickFrom ) =>
 		pickBy( treeToPickFrom, ( value, key ) =>
-			[ 'border', 'color', 'spacing', 'typography', 'filter' ].includes(
-				key
-			)
+			[
+				'border',
+				'color',
+				'spacing',
+				'typography',
+				'filter',
+				'outline',
+				'shadow',
+			].includes( key )
 		);
 
 	// Top-level.
@@ -605,12 +611,12 @@ export const toStyles = (
 	}
 
 	if ( useRootPaddingAlign ) {
-		ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } 
-			.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } 
-			.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; } 
-			.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } 
-			.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; } 
-			.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } 
+		ruleset += `padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) }
+			.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
+			.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }
+			.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
+			.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }
+			.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
 			.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0;`;
 	}
 

package/src/components/main-dashboard-button/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	__experimentalUseSlot as useSlot,
+	__experimentalUseSlotFills as useSlotFills,
 	createSlotFill,
 } from '@wordpress/components';
 
@@ -13,8 +13,8 @@ const { Fill, Slot: MainDashboardButtonSlot } = createSlotFill( slotName );
 const MainDashboardButton = Fill;
 
 const Slot = ( { children } ) => {
-	const slot = useSlot( slotName );
-	const hasFills = Boolean( slot.fills && slot.fills.length );
+	const fills = useSlotFills( slotName );
+	const hasFills = Boolean( fills && fills.length );
 
 	if ( ! hasFills ) {
 		return children;

package/src/components/sidebar/style.scss

@@ -56,7 +56,7 @@
 	border: 0;
 }
 
-.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
+.edit-site-global-styles-sidebar .single-column {
 	grid-column: span 1;
 }
 

package/src/index.js

@@ -18,6 +18,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import { __ } from '@wordpress/i18n';
 import { store as viewportStore } from '@wordpress/viewport';
 import { getQueryArgs } from '@wordpress/url';
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -51,6 +52,26 @@ export function reinitializeEditor( target, settings ) {
 		return;
 	}
 
+	/*
+	 * Prevent adding the Clasic block in the site editor.
+	 * Only add the filter when the site editor is initialized, not imported.
+	 * Also only add the filter(s) after registerCoreBlocks()
+	 * so that common filters in the block library are not overwritten.
+	 *
+	 * This usage here is inspired by previous usage of the filter in the post editor:
+	 * https://github.com/WordPress/gutenberg/pull/37157
+	 */
+	addFilter(
+		'blockEditor.__unstableCanInsertBlockType',
+		'removeClassicBlockFromInserter',
+		( canInsert, blockType ) => {
+			if ( blockType.name === 'core/freeform' ) {
+				return false;
+			}
+			return canInsert;
+		}
+	);
+
 	// This will be a no-op if the target doesn't have any React nodes.
 	unmountComponentAtNode( target );
 	const reboot = reinitializeEditor.bind( null, target, settings );