@wordpress/edit-site 6.2.0 → 6.4.0

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import TypographyExample from './typography-example';
+import PreviewIframe from './preview-iframe';
+
+const StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {
+	return (
+		<PreviewIframe
+			label={ variation.title }
+			isFocused={ isFocused }
+			withHoverView={ withHoverView }
+		>
+			{ ( { ratio, key } ) => (
+				<HStack
+					key={ key }
+					spacing={ 10 * ratio }
+					justify="center"
+					style={ {
+						height: '100%',
+						overflow: 'hidden',
+					} }
+				>
+					<TypographyExample
+						variation={ variation }
+						fontSize={ 85 * ratio }
+					/>
+				</HStack>
+			) }
+		</PreviewIframe>
+	);
+};
+
+export default StylesPreviewTypography;

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

@@ -25,6 +25,11 @@ import {
 	VariationsPanel,
 } from './variations/variations-panel';
 
+// Initial control values where no block style is set.
+const BACKGROUND_BLOCK_DEFAULT_VALUES = {
+	backgroundSize: 'cover',
+};
+
 function applyFallbackStyle( border ) {
 	if ( ! border ) {
 		return border;
@@ -70,6 +75,8 @@ const {
 	useHasFiltersPanel,
 	useHasImageSettingsPanel,
 	useGlobalStyle,
+	useHasBackgroundPanel,
+	BackgroundPanel: StylesBackgroundPanel,
 	BorderPanel: StylesBorderPanel,
 	ColorPanel: StylesColorPanel,
 	TypographyPanel: StylesTypographyPanel,
@@ -77,6 +84,7 @@ const {
 	FiltersPanel: StylesFiltersPanel,
 	ImageSettingsPanel,
 	AdvancedPanel: StylesAdvancedPanel,
+	useGlobalStyleLinks,
 } = unlock( blockEditorPrivateApis );
 
 function ScreenBlock( { name, variation } ) {
@@ -96,6 +104,7 @@ function ScreenBlock( { name, variation } ) {
 	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
 	const blockType = getBlockType( name );
+	const _links = useGlobalStyleLinks();
 
 	// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
 	if (
@@ -121,6 +130,7 @@ function ScreenBlock( { name, variation } ) {
 	}
 
 	const blockVariations = useBlockVariations( name );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
@@ -254,6 +264,16 @@ function ScreenBlock( { name, variation } ) {
 					settings={ settings }
 				/>
 			) }
+			{ hasBackgroundPanel && (
+				<StylesBackgroundPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
+					themeFileURIs={ _links?.[ 'wp:theme-file' ] }
+				/>
+			) }
 			{ hasTypographyPanel && (
 				<StylesTypographyPanel
 					inheritedValue={ inheritedStyle }

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

@@ -23,7 +23,11 @@ function ScreenLayout() {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	const hasBackgroundPanel = useHasBackgroundPanel( settings );
+	/*
+	 * Use the raw settings to determine if the background panel should be displayed,
+	 * as the background panel is not dependent on the block element settings.
+	 */
+	const hasBackgroundPanel = useHasBackgroundPanel( rawSettings );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -163,7 +163,7 @@ function RevisionsButtons( {
 					>
 						<Button
 							className="edit-site-global-styles-screen-revisions__revision-button"
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 							disabled={ isSelected }
 							onClick={ () => {
 								onChange( revision );

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

@@ -9,7 +9,7 @@ import { useZoomOut } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import StyleVariationsContainer from './style-variations-container';
+import SidebarNavigationScreenGlobalStylesContent from '../sidebar-navigation-screen-global-styles/content';
 
 function ScreenStyleVariations() {
 	// Move to zoom out mode when this component is mounted
@@ -31,7 +31,7 @@ function ScreenStyleVariations() {
 				className="edit-site-global-styles-screen-style-variations"
 			>
 				<CardBody>
-					<StyleVariationsContainer />
+					<SidebarNavigationScreenGlobalStylesContent />
 				</CardBody>
 			</Card>
 		</>

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

@@ -13,6 +13,7 @@ import TypographyElements from './typography-elements';
 import TypographyVariations from './variations/variations-typography';
 import FontFamilies from './font-families';
 import ScreenHeader from './header';
+import FontSizesCount from './font-sizes/font-sizes-count';
 
 function ScreenTypography() {
 	const fontLibraryEnabled = useSelect(
@@ -31,10 +32,10 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					{ ! window.__experimentalDisableFontLibrary &&
-						fontLibraryEnabled && <FontFamilies /> }
+					{ fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
 					<TypographyVariations title={ __( 'Presets' ) } />
+					<FontSizesCount />
 				</VStack>
 			</div>
 		</>

package/src/components/global-styles/shadows-edit-panel.js

@@ -371,8 +371,7 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 						'edit-site-global-styles__shadow-editor__remove-button',
 						{ 'is-open': isOpen }
 					),
-					ariaLabel: __( 'Remove shadow' ),
-					tooltip: __( 'Remove shadow' ),
+					label: __( 'Remove shadow' ),
 				};
 
 				return (

package/src/components/global-styles/size-control/index.js

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	BaseControl,
+	RangeControl,
+	Flex,
+	FlexItem,
+	useBaseControlProps,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalUnitControl as UnitControl,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
+
+function SizeControl( props ) {
+	const { baseControlProps } = useBaseControlProps( props );
+	const { value, onChange, fallbackValue, disabled } = props;
+
+	const units = useCustomUnits( {
+		availableUnits: DEFAULT_UNITS,
+	} );
+
+	const [ valueQuantity, valueUnit = 'px' ] =
+		parseQuantityAndUnitFromRawValue( value, units );
+
+	const isValueUnitRelative =
+		!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );
+
+	// Receives the new value from the UnitControl component as a string containing the value and unit.
+	const handleUnitControlChange = ( newValue ) => {
+		onChange( newValue );
+	};
+
+	// Receives the new value from the RangeControl component as a number.
+	const handleRangeControlChange = ( newValue ) => {
+		onChange?.( newValue + valueUnit );
+	};
+
+	return (
+		<BaseControl { ...baseControlProps }>
+			<Flex>
+				<FlexItem isBlock>
+					<UnitControl
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+						label={ __( 'Custom' ) }
+						hideLabelFromVision
+						value={ value }
+						onChange={ handleUnitControlChange }
+						units={ units }
+						min={ 0 }
+						disabled={ disabled }
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<Spacer marginX={ 2 } marginBottom={ 0 }>
+						<RangeControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Custom Size' ) }
+							hideLabelFromVision
+							value={ valueQuantity }
+							initialPosition={ fallbackValue }
+							withInputField={ false }
+							onChange={ handleRangeControlChange }
+							min={ 0 }
+							max={ isValueUnitRelative ? 10 : 100 }
+							step={ isValueUnitRelative ? 0.1 : 1 }
+							disabled={ disabled }
+						/>
+					</Spacer>
+				</FlexItem>
+			</Flex>
+		</BaseControl>
+	);
+}
+
+export default SizeControl;

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

@@ -13,7 +13,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import PreviewStyles from './preview-styles';
 import Variation from './variations/variation';
-import { isVariationWithSingleProperty } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { isVariationWithProperties } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
@@ -33,11 +33,14 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 		).__experimentalGetCurrentThemeGlobalStylesVariations();
 	}, [] );
 
-	// Filter out variations that are of single property type, i.e. color or typography variations.
-	const multiplePropertyVariations = variations?.filter( ( variation ) => {
+	// Filter out variations that are color or typography variations.
+	const fullStyleVariations = variations?.filter( ( variation ) => {
 		return (
-			! isVariationWithSingleProperty( variation, 'color' ) &&
-			! isVariationWithSingleProperty( variation, 'typography' )
+			! isVariationWithProperties( variation, [ 'color' ] ) &&
+			! isVariationWithProperties( variation, [
+				'typography',
+				'spacing',
+			] )
 		);
 	} );
 
@@ -48,7 +51,7 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 				settings: {},
 				styles: {},
 			},
-			...( multiplePropertyVariations ?? [] ),
+			...( fullStyleVariations ?? [] ),
 		];
 		return [
 			...withEmptyVariation.map( ( variation ) => {
@@ -105,7 +108,11 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 				};
 			} ),
 		];
-	}, [ multiplePropertyVariations, userStyles?.blocks, userStyles?.css ] );
+	}, [ fullStyleVariations, userStyles?.blocks, userStyles?.css ] );
+
+	if ( ! fullStyleVariations || fullStyleVariations?.length < 1 ) {
+		return null;
+	}
 
 	return (
 		<Grid

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

@@ -23,6 +23,17 @@
 	overflow: hidden;
 }
 
+.edit-site-font-size__item {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	line-break: anywhere;
+}
+
+.edit-site-font-size__item-value {
+	color: $gray-700;
+}
+
 .edit-site-global-styles-screen {
 	margin: $grid-unit-15 $grid-unit-20 $grid-unit-20;
 }
@@ -41,7 +52,6 @@
 	color: $gray-700;
 }
 
-.edit-site-global-styles-font-families__add-fonts,
 .edit-site-global-styles-font-families__manage-fonts {
 	justify-content: center;
 }
@@ -102,13 +112,13 @@
 .edit-site-global-styles__block-preview-panel {
 	position: relative;
 	width: 100%;
-	overflow: auto;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-block-ui;
+	overflow: hidden;
 }
 
 .edit-site-global-styles__shadow-preview-panel {
-	height: 150px;
+	height: $grid-unit-60 * 3;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-block-ui;
 	overflow: auto;

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

@@ -31,9 +31,6 @@ function ElementItem( { parentMenu, element, label } ) {
 	const [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' );
 	const [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );
 	const [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );
-	const [ letterSpacing ] = useGlobalStyle(
-		prefix + 'typography.letterSpacing'
-	);
 	const [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );
 	const [ fallbackBackgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
@@ -62,7 +59,6 @@ function ElementItem( { parentMenu, element, label } ) {
 						color,
 						fontStyle,
 						fontWeight,
-						letterSpacing,
 						...extraStyles,
 					} }
 				>

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

@@ -33,6 +33,8 @@ import {
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
+import FontSize from './font-sizes/font-size';
+import FontSizes from './font-sizes/font-sizes';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';
@@ -313,6 +315,14 @@ function GlobalStylesUI() {
 				<ScreenTypography />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path="/typography/font-sizes/">
+				<FontSizes />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/font-sizes/:origin/:slug">
+				<FontSize />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path="/typography/text">
 				<ScreenTypographyElement element="text" />
 			</GlobalStylesNavigationScreen>

package/src/components/global-styles/variations/variation.js

@@ -16,7 +16,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
-import { filterObjectByProperty } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { filterObjectByProperties } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../../lock-unlock';
 
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
@@ -28,7 +28,7 @@ export default function Variation( {
 	variation,
 	children,
 	isPill,
-	property,
+	properties,
 	showTooltip,
 } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
@@ -36,8 +36,8 @@ export default function Variation( {
 
 	const context = useMemo( () => {
 		let merged = mergeBaseAndUserConfigs( base, variation );
-		if ( property ) {
-			merged = filterObjectByProperty( merged, property );
+		if ( properties ) {
+			merged = filterObjectByProperties( merged, properties );
 		}
 		return {
 			user: variation,
@@ -45,7 +45,7 @@ export default function Variation( {
 			merged,
 			setUserConfig: () => {},
 		};
-	}, [ variation, base, property ] );
+	}, [ variation, base, properties ] );
 
 	const selectVariation = () => setUserConfig( variation );
 

package/src/components/global-styles/variations/variations-color.js

@@ -2,20 +2,22 @@
  * WordPress dependencies
  */
 import {
-	__experimentalVStack as VStack,
 	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import StylesPreviewColors from '../preview-colors';
-import { useColorVariations } from '../hooks';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import Subtitle from '../subtitle';
 import Variation from './variation';
 
 export default function ColorVariations( { title, gap = 2 } ) {
-	const colorVariations = useColorVariations();
+	const propertiesToFilter = [ 'color' ];
+	const colorVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
 
 	// Return null if there is only one variation (the default).
 	if ( colorVariations?.length <= 1 ) {
@@ -31,7 +33,7 @@ export default function ColorVariations( { title, gap = 2 } ) {
 						key={ index }
 						variation={ variation }
 						isPill
-						property="color"
+						properties={ propertiesToFilter }
 						showTooltip
 					>
 						{ () => <StylesPreviewColors /> }

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

@@ -3,21 +3,21 @@
  */
 import {
 	__experimentalGrid as Grid,
-	__experimentalVStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { useTypographyVariations } from '../hooks';
-import TypographyExample from '../typography-example';
-import PreviewIframe from '../preview-iframe';
-import Variation from './variation';
+import StylesPreviewTypography from '../preview-typography';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import Subtitle from '../subtitle';
+import Variation from './variation';
 
 export default function TypographyVariations( { title, gap = 2 } ) {
-	const typographyVariations = useTypographyVariations();
+	const propertiesToFilter = [ 'typography' ];
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
 
 	// Return null if there is only one variation (the default).
 	if ( typographyVariations?.length <= 1 ) {
@@ -32,40 +32,22 @@ export default function TypographyVariations( { title, gap = 2 } ) {
 				gap={ gap }
 				className="edit-site-global-styles-style-variations-container"
 			>
-				{ typographyVariations &&
-					typographyVariations.length &&
-					typographyVariations.map( ( variation, index ) => (
+				{ typographyVariations.map( ( variation, index ) => {
+					return (
 						<Variation
 							key={ index }
 							variation={ variation }
-							property="typography"
+							properties={ propertiesToFilter }
 							showTooltip
 						>
-							{ ( isFocused ) => (
-								<PreviewIframe
-									label={ variation?.title }
-									isFocused={ isFocused }
-								>
-									{ ( { ratio, key } ) => (
-										<HStack
-											key={ key }
-											spacing={ 10 * ratio }
-											justify="center"
-											style={ {
-												height: '100%',
-												overflow: 'hidden',
-											} }
-										>
-											<TypographyExample
-												variation={ variation }
-												fontSize={ 85 * ratio }
-											/>
-										</HStack>
-									) }
-								</PreviewIframe>
+							{ () => (
+								<StylesPreviewTypography
+									variation={ variation }
+								/>
 							) }
 						</Variation>
-					) ) }
+					);
+				} ) }
 			</Grid>
 		</VStack>
 	);

package/src/components/global-styles-sidebar/index.js

@@ -152,7 +152,7 @@ export default function GlobalStylesSidebar() {
 							isPressed={
 								isStyleBookOpened || isRevisionsStyleBookOpened
 							}
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 							disabled={ shouldClearCanvasContainerView }
 							onClick={ toggleStyleBook }
 							size="compact"
@@ -163,7 +163,7 @@ export default function GlobalStylesSidebar() {
 							label={ __( 'Revisions' ) }
 							icon={ backup }
 							onClick={ toggleRevisions }
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 							disabled={ ! hasRevisions }
 							isPressed={
 								isRevisionsOpened || isRevisionsStyleBookOpened

package/src/components/layout/index.js

@@ -34,16 +34,16 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
  */
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import SiteHub from '../site-hub';
+import { default as SiteHub, SiteHubMobile } from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import { unlock } from '../../lock-unlock';
-import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
 import { useIsSiteEditorLoading } from './hooks';
 import useMovingAnimation from './animation';
 import SidebarContent from '../sidebar';
 import SaveHub from '../save-hub';
+import SavePanel from '../save-panel';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
@@ -163,6 +163,7 @@ export default function Layout( { route } ) {
 											{ areas.sidebar }
 										</SidebarContent>
 										<SaveHub />
+										<SavePanel />
 									</motion.div>
 								) }
 							</AnimatePresence>
@@ -173,6 +174,16 @@ export default function Layout( { route } ) {
 
 					{ isMobileViewport && areas.mobile && (
 						<div className="edit-site-layout__mobile">
+							{ canvasMode !== 'edit' && (
+								<SidebarContent routeKey={ routeKey }>
+									<SiteHubMobile
+										ref={ toggleRef }
+										isTransparent={
+											isResizableFrameOversized
+										}
+									/>
+								</SidebarContent>
+							) }
 							{ areas.mobile }
 						</div>
 					) }
@@ -190,6 +201,17 @@ export default function Layout( { route } ) {
 							</div>
 						) }
 
+					{ ! isMobileViewport && areas.edit && (
+						<div
+							className="edit-site-layout__area"
+							style={ {
+								maxWidth: widths?.edit,
+							} }
+						>
+							{ areas.edit }
+						</div>
+					) }
+
 					{ ! isMobileViewport && areas.preview && (
 						<div className="edit-site-layout__canvas-container">
 							{ canvasResizer }
@@ -236,8 +258,6 @@ export default function Layout( { route } ) {
 						</div>
 					) }
 				</div>
-
-				<SavePanel />
 			</div>
 		</>
 	);