@wordpress/edit-site 3.0.9 → 3.0.13

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

@@ -2,12 +2,69 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import TypographyPanel from './typography-panel';
 import ScreenHeader from './header';
+import NavigationButton from './navigation-button';
+import { useStyle } from './hooks';
+import Subtitle from './subtitle';
+import TypographyPanel from './typography-panel';
+
+function Item( { name, parentMenu, element, label } ) {
+	const hasSupport = ! name;
+	const prefix =
+		element === 'text' || ! element ? '' : `elements.${ element }.`;
+	const extraStyles =
+		element === 'link'
+			? {
+					textDecoration: 'underline',
+			  }
+			: {};
+	const [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );
+	const [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );
+	const [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );
+	const [ letterSpacing ] = useStyle(
+		prefix + 'typography.letterSpacing',
+		name
+	);
+	const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
+	const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
+	const [ color ] = useStyle( prefix + 'color.text', name );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButton path={ parentMenu + '/typography/' + element }>
+			<HStack justify="flex-start">
+				<FlexItem
+					className="edit-site-global-styles-screen-typography__indicator"
+					style={ {
+						fontFamily: fontFamily ?? 'serif',
+						background: gradientValue ?? backgroundColor,
+						color,
+						fontStyle,
+						fontWeight,
+						letterSpacing,
+						...extraStyles,
+					} }
+				>
+					{ __( 'Aa' ) }
+				</FlexItem>
+				<FlexItem>{ label }</FlexItem>
+			</HStack>
+		</NavigationButton>
+	);
+}
 
 function ScreenTypography( { name } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
@@ -18,10 +75,34 @@ function ScreenTypography( { name } ) {
 				back={ parentMenu ? parentMenu : '/' }
 				title={ __( 'Typography' ) }
 				description={ __(
-					'Manage the fonts used on the website and the default aspect of different global elements.'
+					'Manage the typography settings for different elements.'
 				) }
 			/>
-			<TypographyPanel name={ name } />
+
+			{ ! name && (
+				<div className="edit-site-global-styles-screen-typography">
+					<VStack spacing={ 3 }>
+						<Subtitle>{ __( 'Elements' ) }</Subtitle>
+						<ItemGroup isBordered isSeparated>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="text"
+								label={ __( 'Text' ) }
+							/>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="link"
+								label={ __( 'Links' ) }
+							/>
+						</ItemGroup>
+					</VStack>
+				</div>
+			) }
+
+			{ /* no typogrpahy elements support yet for blocks */ }
+			{ !! name && <TypographyPanel name={ name } element="text" /> }
 		</>
 	);
 }

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

@@ -15,6 +15,30 @@
 	}
 }
 
+.edit-site-typography-panel__preview {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 100px;
+	margin-bottom: $grid-unit-20;
+	background: $gray-100;
+	border-radius: $radius-block-ui;
+}
+
+.edit-site-global-styles-screen-typography {
+	margin: $grid-unit-20;
+}
+
+.edit-site-global-styles-screen-typography__indicator {
+	height: 24px;
+	width: 24px;
+	font-size: 14px;
+	display: flex !important;
+	align-items: center;
+	justify-content: center;
+	border-radius: $radius-block-ui;
+}
+
 .edit-site-global-styles-screen-colors {
 	margin: $grid-unit-20;
 
@@ -22,7 +46,6 @@
 		margin-left: 0;
 		display: block;
 		border-radius: 50%;
-		border: 0;
 		height: 24px;
 		width: 24px;
 		padding: 0;
@@ -31,6 +54,7 @@
 			repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
 		background-position: 0 0, 25px 25px;
 		background-size: calc(2 * 5px) calc(2 * 5px);
+		border: $border-width solid $gray-300;
 	}
 }
 
@@ -44,3 +68,20 @@
 	text-transform: uppercase;
 	font-weight: 500;
 }
+
+.edit-site-screen-color-palette-toggle.edit-site-screen-color-palette-toggle {
+	margin-right: $grid-unit-20;
+	margin-left: $grid-unit-20;
+	width: unset;
+	.components-toggle-group-control {
+		min-height: $grid-unit-40;
+	}
+}
+
+h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-heading {
+	text-transform: uppercase;
+	line-height: $grid-unit-30;
+	font-weight: 500;
+	font-size: 11px;
+	margin-bottom: $grid-unit-10;
+}

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

@@ -206,7 +206,7 @@ describe( 'global styles renderer', () => {
 				settings: {
 					color: {
 						palette: {
-							user: [
+							custom: [
 								{
 									name: 'White',
 									slug: 'white',
@@ -268,7 +268,7 @@ describe( 'global styles renderer', () => {
 				settings: {
 					color: {
 						palette: {
-							core: [
+							default: [
 								{
 									name: 'White',
 									slug: 'white',
@@ -286,7 +286,7 @@ describe( 'global styles renderer', () => {
 						'core/heading': {
 							color: {
 								palette: {
-									core: [
+									default: [
 										{
 											name: 'Blue',
 											slug: 'blue',

package/src/components/global-styles/test/utils.js

@@ -21,7 +21,7 @@ describe( 'editor utils', () => {
 							name: 'Secondary',
 						},
 					],
-					user: [
+					custom: [
 						{
 							slug: 'primary',
 							color: '#007cba',

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

@@ -54,8 +54,10 @@ function useHasLetterSpacingControl( name ) {
 	);
 }
 
-export default function TypographyPanel( { name } ) {
+export default function TypographyPanel( { name, element } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
+	const prefix =
+		element === 'text' || ! element ? '' : `elements.${ element }.`;
 	const [ fontSizes ] = useSetting( 'typography.fontSizes', name );
 	const disableCustomFontSizes = ! useSetting(
 		'typography.customFontSize',
@@ -73,30 +75,58 @@ export default function TypographyPanel( { name } ) {
 	const hasLetterSpacingControl = useHasLetterSpacingControl( name );
 
 	const [ fontFamily, setFontFamily ] = useStyle(
-		'typography.fontFamily',
+		prefix + 'typography.fontFamily',
+		name
+	);
+	const [ fontSize, setFontSize ] = useStyle(
+		prefix + 'typography.fontSize',
 		name
 	);
-	const [ fontSize, setFontSize ] = useStyle( 'typography.fontSize', name );
 
 	const [ fontStyle, setFontStyle ] = useStyle(
-		'typography.fontStyle',
+		prefix + 'typography.fontStyle',
 		name
 	);
 	const [ fontWeight, setFontWeight ] = useStyle(
-		'typography.fontWeight',
+		prefix + 'typography.fontWeight',
 		name
 	);
 	const [ lineHeight, setLineHeight ] = useStyle(
-		'typography.lineHeight',
+		prefix + 'typography.lineHeight',
 		name
 	);
 	const [ letterSpacing, setLetterSpacing ] = useStyle(
-		'typography.letterSpacing',
+		prefix + 'typography.letterSpacing',
 		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',
+			  }
+			: {};
 
 	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>
+
 			{ supports.includes( 'fontFamily' ) && (
 				<FontFamilyControl
 					fontFamilies={ fontFamilies }

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

@@ -14,6 +14,7 @@ import ScreenRoot from './screen-root';
 import ScreenBlockList from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
+import ScreenTypographyElement from './screen-typography-element';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenBackgroundColor from './screen-background-color';
@@ -30,6 +31,14 @@ function ContextScreens( { name } ) {
 				<ScreenTypography name={ name } />
 			</NavigatorScreen>
 
+			<NavigatorScreen path={ parentMenu + '/typography/text' }>
+				<ScreenTypographyElement name={ name } element="text" />
+			</NavigatorScreen>
+
+			<NavigatorScreen path={ parentMenu + '/typography/link' }>
+				<ScreenTypographyElement name={ name } element="link" />
+			</NavigatorScreen>
+
 			<NavigatorScreen path={ parentMenu + '/colors' }>
 				<ScreenColors name={ name } />
 			</NavigatorScreen>

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

@@ -60,7 +60,7 @@ function getPresetsDeclarations( blockPresets = {} ) {
 		PRESET_METADATA,
 		( declarations, { path, valueKey, cssVarInfix } ) => {
 			const presetByOrigin = get( blockPresets, path, [] );
-			[ 'core', 'theme', 'user' ].forEach( ( origin ) => {
+			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
 				if ( presetByOrigin[ origin ] ) {
 					presetByOrigin[ origin ].forEach( ( value ) => {
 						declarations.push(
@@ -94,7 +94,7 @@ function getPresetsClasses( blockSelector, blockPresets = {} ) {
 			}
 
 			const presetByOrigin = get( blockPresets, path, [] );
-			[ 'core', 'theme', 'user' ].forEach( ( origin ) => {
+			[ 'default', 'theme', 'custom' ].forEach( ( origin ) => {
 				if ( presetByOrigin[ origin ] ) {
 					presetByOrigin[ origin ].forEach( ( { slug } ) => {
 						classes.forEach( ( { classSuffix, propertyName } ) => {

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

@@ -90,7 +90,7 @@ function findInPresetsBy(
 	for ( const presetByOrigin of orderedPresetsByOrigin ) {
 		if ( presetByOrigin ) {
 			// Preset origins ordered by priority.
-			const origins = [ 'user', 'theme', 'core' ];
+			const origins = [ 'custom', 'theme', 'default' ];
 			for ( const origin of origins ) {
 				const presets = presetByOrigin[ origin ];
 				if ( presets ) {

package/src/components/header/index.js

@@ -19,7 +19,6 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import NavigationLink from './navigation-link';
 import MoreMenu from './more-menu';
 import SaveButton from '../save-button';
 import UndoButton from './undo-redo/undo';
@@ -27,7 +26,6 @@ import RedoButton from './undo-redo/redo';
 import DocumentActions from './document-actions';
 import TemplateDetails from '../template-details';
 import { store as editSiteStore } from '../../store';
-import MainDashboardButton from '../main-dashboard-button';
 
 const preventDefault = ( event ) => {
 	event.preventDefault();
@@ -107,10 +105,6 @@ export default function Header( {
 	return (
 		<div className="edit-site-header">
 			<div className="edit-site-header_start">
-				<MainDashboardButton.Slot>
-					<NavigationLink />
-				</MainDashboardButton.Slot>
-
 				<div className="edit-site-header__toolbar">
 					<Button
 						ref={ inserterButton }

package/src/components/keyboard-shortcuts/index.js

@@ -136,6 +136,38 @@ function KeyboardShortcutsRegister() {
 				character: ',',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/next-region',
+			category: 'global',
+			description: __( 'Navigate to the next part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrl',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'n',
+				},
+			],
+		} );
+
+		registerShortcut( {
+			name: 'core/edit-site/previous-region',
+			category: 'global',
+			description: __( 'Navigate to the previous part of the editor.' ),
+			keyCombination: {
+				modifier: 'ctrlShift',
+				character: '`',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: 'p',
+				},
+			],
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

package/src/components/list/actions/index.js

@@ -0,0 +1,95 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import isTemplateRemovable from '../../../utils/is-template-removable';
+import isTemplateRevertable from '../../../utils/is-template-revertable';
+import RenameMenuItem from './rename-menu-item';
+
+export default function Actions( { template } ) {
+	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
+	const { saveEditedEntityRecord } = useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } = useDispatch(
+		noticesStore
+	);
+
+	const isRemovable = isTemplateRemovable( template );
+	const isRevertable = isTemplateRevertable( template );
+
+	if ( ! isRemovable && ! isRevertable ) {
+		return null;
+	}
+
+	async function revertAndSaveTemplate() {
+		try {
+			await revertTemplate( template, { allowUndo: false } );
+			await saveEditedEntityRecord(
+				'postType',
+				template.type,
+				template.id
+			);
+
+			createSuccessNotice( __( 'Template reverted.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while reverting the template.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	}
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Actions' ) }
+			className="edit-site-list-table__actions"
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup>
+					{ isRemovable && (
+						<>
+							<RenameMenuItem
+								template={ template }
+								onClose={ onClose }
+							/>
+							<MenuItem
+								isDestructive
+								onClick={ () => {
+									removeTemplate( template );
+									onClose();
+								} }
+							>
+								{ __( 'Delete template' ) }
+							</MenuItem>
+						</>
+					) }
+					{ isRevertable && (
+						<MenuItem
+							info={ __( 'Restore template to theme default' ) }
+							onClick={ () => {
+								revertAndSaveTemplate();
+								onClose();
+							} }
+						>
+							{ __( 'Clear customizations' ) }
+						</MenuItem>
+					) }
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/list/actions/rename-menu-item.js

@@ -0,0 +1,134 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	Button,
+	Flex,
+	FlexItem,
+	MenuItem,
+	Modal,
+	TextControl,
+} from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function RenameMenuItem( { template, onClose } ) {
+	const [ title, setTitle ] = useState( () => template.title.rendered );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+
+	const { getLastEntitySaveError } = useSelect( coreStore );
+	const { editEntityRecord, saveEditedEntityRecord } = useDispatch(
+		coreStore
+	);
+	const { createSuccessNotice, createErrorNotice } = useDispatch(
+		noticesStore
+	);
+
+	if ( ! template.is_custom ) {
+		return null;
+	}
+
+	async function onTemplateRename( event ) {
+		event.preventDefault();
+
+		try {
+			await editEntityRecord( 'postType', template.type, template.id, {
+				title,
+			} );
+
+			// Update state before saving rerenders the list.
+			setTitle( '' );
+			setIsModalOpen( false );
+			onClose();
+
+			// Persist edited entity.
+			await saveEditedEntityRecord(
+				'postType',
+				template.type,
+				template.id
+			);
+
+			const lastError = getLastEntitySaveError(
+				'postType',
+				template.type,
+				template.id
+			);
+
+			if ( lastError ) {
+				throw lastError;
+			}
+
+			createSuccessNotice( __( 'Template has been renamed.' ), {
+				type: 'snackbar',
+			} );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while renaming the template.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	}
+
+	return (
+		<>
+			<MenuItem
+				onClick={ () => {
+					setIsModalOpen( true );
+					setTitle( template.title.rendered );
+				} }
+			>
+				{ __( 'Rename' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<Modal
+					title={ __( 'Rename template' ) }
+					closeLabel={ __( 'Close' ) }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName="edit-site-list__rename-modal"
+				>
+					<form onSubmit={ onTemplateRename }>
+						<Flex align="flex-start" gap={ 8 }>
+							<FlexItem>
+								<TextControl
+									label={ __( 'Name' ) }
+									value={ title }
+									onChange={ setTitle }
+									required
+								/>
+							</FlexItem>
+						</Flex>
+
+						<Flex
+							className="edit-site-list__rename-modal-actions"
+							justify="flex-end"
+							expanded={ false }
+						>
+							<FlexItem>
+								<Button
+									variant="tertiary"
+									onClick={ () => {
+										setIsModalOpen( false );
+									} }
+								>
+									{ __( 'Cancel' ) }
+								</Button>
+							</FlexItem>
+							<FlexItem>
+								<Button variant="primary" type="submit">
+									{ __( 'Save' ) }
+								</Button>
+							</FlexItem>
+						</Flex>
+					</form>
+				</Modal>
+			) }
+		</>
+	);
+}