@wordpress/edit-site 6.3.0 → 6.4.0

package/src/components/global-styles/font-sizes/font-sizes.js

@@ -0,0 +1,263 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
+import {
+	privateApis as componentsPrivateApis,
+	__experimentalSpacer as Spacer,
+	__experimentalView as View,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+	FlexBlock,
+	Button,
+} from '@wordpress/components';
+import {
+	Icon,
+	plus,
+	moreVertical,
+	chevronLeft,
+	chevronRight,
+} from '@wordpress/icons';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+} = unlock( componentsPrivateApis );
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+import Subtitle from '../subtitle';
+import { NavigationButtonAsItem } from '../navigation-button';
+import { getNewIndexFromPresets } from '../utils';
+import ScreenHeader from '../header';
+import ConfirmResetFontSizesDialog from './confirm-reset-font-sizes-dialog';
+
+function FontSizeGroup( {
+	label,
+	origin,
+	sizes,
+	handleAddFontSize,
+	handleResetFontSizes,
+} ) {
+	const [ isResetDialogOpen, setIsResetDialogOpen ] = useState( false );
+
+	const toggleResetDialog = () => setIsResetDialogOpen( ! isResetDialogOpen );
+
+	const resetDialogText =
+		origin === 'custom'
+			? __(
+					'Are you sure you want to remove all custom font size presets?'
+			  )
+			: __(
+					'Are you sure you want to reset all font size presets to their default values?'
+			  );
+
+	return (
+		<>
+			{ isResetDialogOpen && (
+				<ConfirmResetFontSizesDialog
+					text={ resetDialogText }
+					confirmButtonText={
+						origin === 'custom' ? __( 'Remove' ) : __( 'Reset' )
+					}
+					isOpen={ isResetDialogOpen }
+					toggleOpen={ toggleResetDialog }
+					onConfirm={ handleResetFontSizes }
+				/>
+			) }
+			<VStack spacing={ 4 }>
+				<HStack justify="space-between" align="center">
+					<Subtitle level={ 3 }>{ label }</Subtitle>
+					<FlexItem>
+						{ origin === 'custom' && (
+							<Button
+								label={ __( 'Add font size' ) }
+								icon={ plus }
+								size="small"
+								onClick={ handleAddFontSize }
+							/>
+						) }
+						{ !! handleResetFontSizes && (
+							<DropdownMenu
+								trigger={
+									<Button
+										size="small"
+										icon={ moreVertical }
+										label={ __(
+											'Font size presets options'
+										) }
+									/>
+								}
+							>
+								<DropdownMenuItem onClick={ toggleResetDialog }>
+									<DropdownMenuItemLabel>
+										{ origin === 'custom'
+											? __( 'Remove font size presets' )
+											: __( 'Reset font size presets' ) }
+									</DropdownMenuItemLabel>
+								</DropdownMenuItem>
+							</DropdownMenu>
+						) }
+					</FlexItem>
+				</HStack>
+
+				{ !! sizes.length && (
+					<ItemGroup isBordered isSeparated>
+						{ sizes.map( ( size ) => (
+							<NavigationButtonAsItem
+								key={ size.slug }
+								path={ `/typography/font-sizes/${ origin }/${ size.slug }` }
+							>
+								<HStack direction="row">
+									<FlexItem className="edit-site-font-size__item">
+										{ size.name }
+									</FlexItem>
+									<FlexItem>
+										<HStack justify="flex-end">
+											<FlexBlock className="edit-site-font-size__item edit-site-font-size__item-value">
+												{ size.size }
+											</FlexBlock>
+											<Icon
+												icon={
+													isRTL()
+														? chevronLeft
+														: chevronRight
+												}
+											/>
+										</HStack>
+									</FlexItem>
+								</HStack>
+							</NavigationButtonAsItem>
+						) ) }
+					</ItemGroup>
+				) }
+			</VStack>
+		</>
+	);
+}
+
+function FontSizes() {
+	const [ themeFontSizes, setThemeFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.theme'
+	);
+
+	const [ baseThemeFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.theme',
+		null,
+		'base'
+	);
+	const [ defaultFontSizes, setDefaultFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.default'
+	);
+
+	const [ baseDefaultFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.default',
+		null,
+		'base'
+	);
+
+	const [ customFontSizes = [], setCustomFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.custom'
+	);
+
+	const [ defaultFontSizesEnabled ] = useGlobalSetting(
+		'typography.defaultFontSizes'
+	);
+
+	const handleAddFontSize = () => {
+		const index = getNewIndexFromPresets( customFontSizes, 'custom-' );
+		const newFontSize = {
+			/* translators: %d: font size index */
+			name: sprintf( __( 'New Font Size %d' ), index ),
+			size: '16px',
+			slug: `custom-${ index }`,
+		};
+
+		setCustomFontSizes( [ ...customFontSizes, newFontSize ] );
+	};
+
+	const hasSameSizeValues = ( arr1, arr2 ) =>
+		arr1.map( ( item ) => item.size ).join( '' ) ===
+		arr2.map( ( item ) => item.size ).join( '' );
+
+	return (
+		<VStack spacing={ 2 }>
+			<ScreenHeader
+				title={ __( 'Font size presets' ) }
+				description={ __(
+					'Create and edit the presets used for font sizes across the site.'
+				) }
+			/>
+
+			<View>
+				<Spacer paddingX={ 4 }>
+					<VStack spacing={ 8 }>
+						{ !! themeFontSizes?.length && (
+							<FontSizeGroup
+								label={ __( 'Theme' ) }
+								origin="theme"
+								sizes={ themeFontSizes }
+								baseSizes={ baseThemeFontSizes }
+								handleAddFontSize={ handleAddFontSize }
+								handleResetFontSizes={
+									hasSameSizeValues(
+										themeFontSizes,
+										baseThemeFontSizes
+									)
+										? null
+										: () =>
+												setThemeFontSizes(
+													baseThemeFontSizes
+												)
+								}
+							/>
+						) }
+
+						{ defaultFontSizesEnabled &&
+							!! defaultFontSizes?.length && (
+								<FontSizeGroup
+									label={ __( 'Default' ) }
+									origin="default"
+									sizes={ defaultFontSizes }
+									baseSizes={ baseDefaultFontSizes }
+									handleAddFontSize={ handleAddFontSize }
+									handleResetFontSizes={
+										hasSameSizeValues(
+											defaultFontSizes,
+											baseDefaultFontSizes
+										)
+											? null
+											: () =>
+													setDefaultFontSizes(
+														baseDefaultFontSizes
+													)
+									}
+								/>
+							) }
+
+						<FontSizeGroup
+							label={ __( 'Custom' ) }
+							origin="custom"
+							sizes={ customFontSizes }
+							handleAddFontSize={ handleAddFontSize }
+							handleResetFontSizes={
+								customFontSizes.length > 0
+									? () => setCustomFontSizes( [] )
+									: null
+							}
+						/>
+					</VStack>
+				</Spacer>
+			</View>
+		</VStack>
+	);
+}
+
+export default FontSizes;

package/src/components/global-styles/font-sizes/rename-font-size-dialog.js

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalInputControl as InputControl,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	Button,
+	Modal,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+
+function RenameFontSizeDialog( { fontSize, toggleOpen, handleRename } ) {
+	const [ newName, setNewName ] = useState( fontSize.name );
+
+	const handleConfirm = () => {
+		// If the new name is not empty, call the handleRename function
+		if ( newName.trim() ) {
+			handleRename( newName );
+		}
+		toggleOpen();
+	};
+
+	return (
+		<Modal
+			onRequestClose={ toggleOpen }
+			focusOnMount="firstContentElement"
+			title={ __( 'Rename' ) }
+			size="small"
+		>
+			<form
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					handleConfirm();
+					toggleOpen();
+				} }
+			>
+				<VStack spacing="3">
+					<InputControl
+						__next40pxDefaultSize
+						autoComplete="off"
+						value={ newName }
+						onChange={ setNewName }
+						label={ __( 'Name' ) }
+						placeholder={ __( 'Font size preset name' ) }
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ toggleOpen }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
+
+export default RenameFontSizeDialog;

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

@@ -84,6 +84,7 @@ const {
 	FiltersPanel: StylesFiltersPanel,
 	ImageSettingsPanel,
 	AdvancedPanel: StylesAdvancedPanel,
+	useGlobalStyleLinks,
 } = unlock( blockEditorPrivateApis );
 
 function ScreenBlock( { name, variation } ) {
@@ -103,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 (
@@ -262,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 }
@@ -304,20 +316,6 @@ function ScreenBlock( { name, variation } ) {
 				/>
 			) }
 
-			{ hasBackgroundPanel && (
-				<StylesBackgroundPanel
-					inheritedValue={ inheritedStyle }
-					value={ style }
-					onChange={ setStyle }
-					settings={ settings }
-					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
-					defaultControls={
-						blockType?.supports?.background
-							?.__experimentalDefaultControls
-					}
-				/>
-			) }
-
 			{ canEditCSS && (
 				<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>
 					<p>

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/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

@@ -110,6 +110,10 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 		];
 	}, [ fullStyleVariations, userStyles?.blocks, userStyles?.css ] );
 
+	if ( ! fullStyleVariations || fullStyleVariations?.length < 1 ) {
+		return null;
+	}
+
 	return (
 		<Grid
 			columns={ 2 }

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/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/variations-color.js

@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import {
-	__experimentalVStack as VStack,
 	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 /**

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

@@ -9,11 +9,10 @@ import {
 /**
  * Internal dependencies
  */
-
 import StylesPreviewTypography from '../preview-typography';
 import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import Variation from './variation';
 import Subtitle from '../subtitle';
+import Variation from './variation';
 
 export default function TypographyVariations( { title, gap = 2 } ) {
 	const propertiesToFilter = [ 'typography' ];

package/src/components/layout/index.js

@@ -201,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 }

package/src/components/layout/router.js

@@ -9,7 +9,7 @@ import { useEffect } from '@wordpress/element';
  */
 import { unlock } from '../../lock-unlock';
 import Editor from '../editor';
-import PostsList from '../posts-app/posts-list';
+import PostList from '../post-list';
 import PagePatterns from '../page-patterns';
 import PageTemplates from '../page-templates';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
@@ -26,6 +26,7 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 	TEMPLATE_POST_TYPE,
 } from '../../utils/constants';
+import { PostEdit } from '../post-edit';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -74,13 +75,15 @@ function useRedirectOldPaths() {
 
 export default function useLayoutAreas() {
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom, canvas } = params;
+	const { postType, postId, path, layout, isCustom, canvas, quickEdit } =
+		params;
 	const hasEditCanvasMode = canvas === 'edit';
 	useRedirectOldPaths();
 
 	// Page list
 	if ( postType === 'page' ) {
 		const isListLayout = layout === 'list' || ! layout;
+		const showQuickEdit = quickEdit && ! isListLayout;
 		return {
 			key: 'pages',
 			areas: {
@@ -91,16 +94,21 @@ export default function useLayoutAreas() {
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
-				content: <PostsList postType={ postType } />,
-				preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
+				content: <PostList postType={ postType } />,
+				preview: ! showQuickEdit &&
+					( isListLayout || hasEditCanvasMode ) && <Editor />,
 				mobile: hasEditCanvasMode ? (
 					<Editor />
 				) : (
-					<PostsList postType={ postType } />
+					<PostList postType={ postType } />
+				),
+				edit: showQuickEdit && (
+					<PostEdit postType={ postType } postId={ postId } />
 				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
+				edit: showQuickEdit ? 380 : undefined,
 			},
 		};
 	}