@wordpress/edit-site 3.0.7 → 3.0.11

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

@@ -6,7 +6,7 @@ import { get, cloneDeep, set, isEqual, has } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { _x } from '@wordpress/i18n';
 import { useContext, useCallback, useMemo } from '@wordpress/element';
 import {
 	getBlockType,
@@ -65,7 +65,7 @@ export function useSetting( path, blockName, source = 'all' ) {
 		const getSettingValue = ( configToUse ) => {
 			const result = get( configToUse, currentPath );
 			if ( PATHS_WITH_MERGE[ path ] ) {
-				return result?.user ?? result?.theme ?? result?.core;
+				return result?.user ?? result?.theme ?? result?.default;
 			}
 			return result;
 		};
@@ -218,57 +218,89 @@ export function getSupportedGlobalStylesPanels( name ) {
 }
 
 export function useColorsPerOrigin( name ) {
-	const [ userColors ] = useSetting( 'color.palette.user', name );
+	const [ customColors ] = useSetting( 'color.palette.user', name );
 	const [ themeColors ] = useSetting( 'color.palette.theme', name );
-	const [ coreColors ] = useSetting( 'color.palette.core', name );
+	const [ defaultColors ] = useSetting( 'color.palette.default', name );
+	const [ shouldDisplayDefaultColors ] = useSetting( 'color.defaultPalette' );
+
 	return useMemo( () => {
 		const result = [];
-		if ( coreColors && coreColors.length ) {
+		if ( themeColors && themeColors.length ) {
 			result.push( {
-				name: __( 'Core' ),
-				colors: coreColors,
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: themeColors,
 			} );
 		}
-		if ( themeColors && themeColors.length ) {
+		if (
+			shouldDisplayDefaultColors &&
+			defaultColors &&
+			defaultColors.length
+		) {
 			result.push( {
-				name: __( 'Theme' ),
-				colors: themeColors,
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				colors: defaultColors,
 			} );
 		}
-		if ( userColors && userColors.length ) {
+		if ( customColors && customColors.length ) {
 			result.push( {
-				name: __( 'User' ),
-				colors: userColors,
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				colors: customColors,
 			} );
 		}
 		return result;
-	}, [ userColors, themeColors, coreColors ] );
+	}, [ customColors, themeColors, defaultColors ] );
 }
 
 export function useGradientsPerOrigin( name ) {
-	const [ userGradients ] = useSetting( 'color.gradients.user', name );
+	const [ customGradients ] = useSetting( 'color.gradients.user', name );
 	const [ themeGradients ] = useSetting( 'color.gradients.theme', name );
-	const [ coreGradients ] = useSetting( 'color.gradients.core', name );
+	const [ defaultGradients ] = useSetting( 'color.gradients.default', name );
+	const [ shouldDisplayDefaultGradients ] = useSetting(
+		'color.defaultGradients'
+	);
+
 	return useMemo( () => {
 		const result = [];
-		if ( coreGradients && coreGradients.length ) {
+		if ( themeGradients && themeGradients.length ) {
 			result.push( {
-				name: __( 'Core' ),
-				gradients: coreGradients,
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				gradients: themeGradients,
 			} );
 		}
-		if ( themeGradients && themeGradients.length ) {
+		if (
+			shouldDisplayDefaultGradients &&
+			defaultGradients &&
+			defaultGradients.length
+		) {
 			result.push( {
-				name: __( 'Theme' ),
-				gradients: themeGradients,
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				gradients: defaultGradients,
 			} );
 		}
-		if ( userGradients && userGradients.length ) {
+		if ( customGradients && customGradients.length ) {
 			result.push( {
-				name: __( 'User' ),
-				gradients: userGradients,
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				gradients: customGradients,
 			} );
 		}
 		return result;
-	}, [ userGradients, themeGradients, coreGradients ] );
+	}, [ customGradients, themeGradients, defaultGradients ] );
 }

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

@@ -3,6 +3,11 @@
  */
 import { getBlockTypes } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import {
+	FlexItem,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -29,7 +34,12 @@ function BlockMenuItem( { block } ) {
 
 	return (
 		<NavigationButton path={ '/blocks/' + block.name }>
-			{ block.title }
+			<HStack justify="flex-start">
+				<FlexItem>
+					<BlockIcon icon={ block.icon } />
+				</FlexItem>
+				<FlexItem>{ block.title }</FlexItem>
+			</HStack>
 		</NavigationButton>
 	);
 }

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

@@ -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/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', 'user' ].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', 'user' ].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 = [ 'user', '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/header.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalHeading as Heading } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import AddNewTemplate from '../add-new-template';
+
+export default function Header( { templateType } ) {
+	const postType = useSelect(
+		( select ) => select( coreStore ).getPostType( templateType ),
+		[ templateType ]
+	);
+
+	if ( ! postType ) {
+		return null;
+	}
+
+	return (
+		<header className="edit-site-list-header">
+			<Heading level={ 1 } className="edit-site-list-header__title">
+				{ postType.labels?.name }
+			</Heading>
+
+			<div className="edit-site-list-header__right">
+				<AddNewTemplate templateType={ templateType } />
+			</div>
+		</header>
+	);
+}

package/src/components/list/index.js

@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { InterfaceSkeleton } from '@wordpress/interface';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+/**
+ * Internal dependencies
+ */
+import useRegisterShortcuts from './use-register-shortcuts';
+import Header from './header';
+import NavigationSidebar from '../navigation-sidebar';
+import Table from './table';
+
+export default function List( { templateType } ) {
+	useRegisterShortcuts();
+
+	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
+		return {
+			previousShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
+			nextShortcut: select(
+				keyboardShortcutsStore
+			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
+		};
+	}, [] );
+
+	const postType = useSelect(
+		( select ) => select( coreStore ).getPostType( templateType ),
+		[ templateType ]
+	);
+
+	// `postType` could load in asynchronously. Only provide the detailed region labels if
+	// the postType has loaded, otherwise `InterfaceSkeleton` will fallback to the defaults.
+	const itemsListLabel = postType?.labels?.items_list;
+	const detailedRegionLabels = postType
+		? {
+				header: sprintf(
+					// translators: %s - the name of the page, 'Header' as in the header area of that page.
+					__( '%s - Header' ),
+					itemsListLabel
+				),
+				body: sprintf(
+					// translators: %s - the name of the page, 'Content' as in the content area of that page.
+					__( '%s - Content' ),
+					itemsListLabel
+				),
+		  }
+		: undefined;
+
+	return (
+		<InterfaceSkeleton
+			className="edit-site-list"
+			labels={ {
+				drawer: __( 'Navigation Sidebar' ),
+				...detailedRegionLabels,
+			} }
+			header={ <Header templateType={ templateType } /> }
+			drawer={
+				<NavigationSidebar
+					activeTemplateType={ templateType }
+					isDefaultOpen
+				/>
+			}
+			content={
+				<main className="edit-site-list-main">
+					<Table templateType={ templateType } />
+				</main>
+			}
+			shortcuts={ {
+				previous: previousShortcut,
+				next: nextShortcut,
+			} }
+		/>
+	);
+}

package/src/components/list/style.scss

@@ -0,0 +1,113 @@
+.edit-site-list-header {
+	position: relative;
+	align-items: center;
+	background-color: $white;
+	display: flex;
+	height: $header-height;
+	box-sizing: border-box;
+	width: 100%;
+	justify-content: flex-end;
+	padding-right: $grid-unit-20;
+
+	body.is-fullscreen-mode & {
+		padding-left: 60px;
+		transition: padding-left 20ms linear;
+		transition-delay: 80ms;
+		@include reduce-motion("transition");
+	}
+
+	.edit-site-list-header__title {
+		position: absolute;
+		left: 0;
+		width: 100%;
+		text-align: center;
+		font-size: 20px;
+		padding: 0;
+		margin: 0;
+	}
+}
+
+.edit-site-list-header__right {
+	// Creating a stacking context so that it won't be covered by title.
+	position: relative;
+}
+
+.edit-site {
+	.edit-site-list {
+		.interface-interface-skeleton__editor {
+			min-width: 100%;
+
+			@include break-medium() {
+				min-width: 0;
+			}
+		}
+
+		.interface-interface-skeleton__content {
+			background: $white;
+		}
+	}
+}
+
+.edit-site-list-main {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: $grid-unit-20;
+
+	@include break-medium() {
+		padding: $grid-unit * 9;
+	}
+}
+
+.edit-site-list-table {
+	width: 100%;
+	border: $border-width solid $gray-200;
+	border-radius: 2px;
+	margin: 0;
+	overflow: hidden;
+
+	li {
+		display: flex;
+		align-items: center;
+		padding: $grid-unit-20;
+		box-sizing: border-box;
+		border-top: $border-width solid $gray-100;
+		margin: 0;
+
+		@include break-medium() {
+			padding: $grid-unit-30 $grid-unit-40;
+		}
+
+		.edit-site-list-table-column:nth-child(1) {
+			width: calc(60% - 36px);
+
+			a {
+				display: block;
+				text-decoration: none;
+				font-weight: 500;
+				margin-bottom: $grid-unit-05;
+			}
+		}
+
+		.edit-site-list-table-column:nth-child(2) {
+			width: calc(40% - 36px);
+		}
+
+		.edit-site-list-table-column:nth-child(3) {
+			min-width: $button-size;
+		}
+	}
+
+	li.edit-site-list-table-head {
+		border-bottom: $border-width solid $gray-200;
+		font-size: 16px;
+		font-weight: 500;
+		text-align: left;
+		color: $black;
+		border-top: none;
+
+		& + li {
+			border-top: 0;
+		}
+	}
+}

package/src/components/list/table.js

@@ -0,0 +1,132 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	VisuallyHidden,
+	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+} from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import isTemplateRemovable from '../../utils/is-template-removable';
+
+function Actions( { template, onClose } ) {
+	const { removeTemplate } = useDispatch( editSiteStore );
+
+	return (
+		<MenuGroup>
+			<MenuItem
+				onClick={ () => {
+					removeTemplate( template );
+					onClose();
+				} }
+			>
+				{ __( 'Remove template' ) }
+			</MenuItem>
+		</MenuGroup>
+	);
+}
+
+export default function Table( { templateType } ) {
+	const { templates, isLoading, postType } = useSelect(
+		( select ) => {
+			const {
+				getEntityRecords,
+				hasFinishedResolution,
+				getPostType,
+			} = select( coreStore );
+
+			return {
+				templates: getEntityRecords( 'postType', templateType ),
+				isLoading: ! hasFinishedResolution( 'getEntityRecords', [
+					'postType',
+					templateType,
+				] ),
+				postType: getPostType( templateType ),
+			};
+		},
+		[ templateType ]
+	);
+
+	if ( ! templates || isLoading ) {
+		return null;
+	}
+
+	if ( ! templates.length ) {
+		return (
+			<div>
+				{ sprintf(
+					// translators: The template type name, should be either "templates" or "template parts".
+					__( 'No %s found.' ),
+					postType?.labels?.name?.toLowerCase()
+				) }
+			</div>
+		);
+	}
+
+	return (
+		<ul className="edit-site-list-table">
+			<HStack className="edit-site-list-table-head" as="li">
+				<FlexItem className="edit-site-list-table-column">
+					<Heading level={ 4 }>{ __( 'Template' ) }</Heading>
+				</FlexItem>
+				<FlexItem className="edit-site-list-table-column">
+					<Heading level={ 4 }>{ __( 'Added by' ) }</Heading>
+				</FlexItem>
+				<FlexItem className="edit-site-list-table-column">
+					<VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>
+				</FlexItem>
+			</HStack>
+
+			{ templates.map( ( template ) => (
+				<li key={ template.id }>
+					<HStack className="edit-site-list-table-row">
+						<FlexItem className="edit-site-list-table-column">
+							<a
+								href={ addQueryArgs( window.location.href, {
+									postId: template.id,
+									postType: template.type,
+								} ) }
+							>
+								{ template.title.rendered }
+							</a>
+							{ template.description }
+						</FlexItem>
+
+						<FlexItem className="edit-site-list-table-column">
+							{ template.theme }
+						</FlexItem>
+						<FlexItem className="edit-site-list-table-column">
+							{ isTemplateRemovable( template ) && (
+								<DropdownMenu
+									icon={ moreVertical }
+									label={ __( 'Actions' ) }
+									className="edit-site-list-table__actions"
+								>
+									{ ( { onClose } ) => (
+										<Actions
+											template={ template }
+											onClose={ onClose }
+										/>
+									) }
+								</DropdownMenu>
+							) }
+						</FlexItem>
+					</HStack>
+				</li>
+			) ) }
+		</ul>
+	);
+}

package/src/components/list/use-register-shortcuts.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+
+import { useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+
+export default function useRegisterShortcuts() {
+	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+	useEffect( () => {
+		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',
+				},
+			],
+		} );
+	}, [] );
+}