@wordpress/edit-site 4.11.0 → 4.13.0

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

@@ -3,6 +3,11 @@
  */
 import { get, find } from 'lodash';
 
+/**
+ * Internal dependencies
+ */
+import { getTypographyFontSizeValue } from './typography-utils';
+
 /* Supporting data. */
 export const ROOT_BLOCK_NAME = 'root';
 export const ROOT_BLOCK_SELECTOR = 'body';
@@ -58,6 +63,8 @@ export const PRESET_METADATA = [
 	},
 	{
 		path: [ 'typography', 'fontSizes' ],
+		valueFunc: ( preset, { typography: typographySettings } ) =>
+			getTypographyFontSizeValue( preset, typographySettings ),
 		valueKey: 'size',
 		cssVarInfix: 'font-size',
 		classes: [ { classSuffix: 'font-size', propertyName: 'font-size' } ],
@@ -70,6 +77,13 @@ export const PRESET_METADATA = [
 			{ classSuffix: 'font-family', propertyName: 'font-family' },
 		],
 	},
+	{
+		path: [ 'spacing', 'spacingSizes' ],
+		valueKey: 'spacingSizes',
+		cssVarInfix: 'spacing',
+		valueFunc: ( { size } ) => size,
+		classes: [],
+	},
 ];
 
 const STYLE_PATH_TO_CSS_VAR_INFIX = {
@@ -78,6 +92,9 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'elements.link.color.text': 'color',
 	'elements.button.color.text': 'color',
 	'elements.button.backgroundColor': 'background-color',
+	'elements.heading.color': 'color',
+	'elements.heading.backgroundColor': 'background-color',
+	'elements.heading.gradient': 'gradient',
 	'color.gradient': 'gradient',
 	'typography.fontSize': 'font-size',
 	'typography.fontFamily': 'font-family',
@@ -185,7 +202,7 @@ function getValueFromPresetVariable(
 	}
 
 	const presetObject = findInPresetsBy(
-		features,
+		features.settings,
 		blockName,
 		metadata.path,
 		'slug',
@@ -203,8 +220,8 @@ function getValueFromPresetVariable(
 
 function getValueFromCustomVariable( features, blockName, variable, path ) {
 	const result =
-		get( features, [ 'blocks', blockName, 'custom', ...path ] ) ??
-		get( features, [ 'custom', ...path ] );
+		get( features.settings, [ 'blocks', blockName, 'custom', ...path ] ) ??
+		get( features.settings, [ 'custom', ...path ] );
 	if ( ! result ) {
 		return variable;
 	}
@@ -212,9 +229,27 @@ function getValueFromCustomVariable( features, blockName, variable, path ) {
 	return getValueFromVariable( features, blockName, result );
 }
 
+/**
+ * Attempts to fetch the value of a theme.json CSS variable.
+ *
+ * @param {Object}   features  GlobalStylesContext config, e.g., user, base or merged. Represents the theme.json tree.
+ * @param {string}   blockName The name of a block as represented in the styles property. E.g., 'root' for root-level, and 'core/${blockName}' for blocks.
+ * @param {string|*} variable  An incoming style value. A CSS var value is expected, but it could be any value.
+ * @return {string|*|{ref}} The value of the CSS var, if found. If not found, the passed variable argument.
+ */
 export function getValueFromVariable( features, blockName, variable ) {
 	if ( ! variable || typeof variable !== 'string' ) {
-		return variable;
+		if ( variable?.ref && typeof variable?.ref === 'string' ) {
+			const refPath = variable.ref.split( '.' );
+			variable = get( features, refPath );
+			// Presence of another ref indicates a reference to another dynamic value.
+			// Pointing to another dynamic value is not supported.
+			if ( ! variable || !! variable?.ref ) {
+				return variable;
+			}
+		} else {
+			return variable;
+		}
 	}
 	const USER_VALUE_PREFIX = 'var:';
 	const THEME_VALUE_PREFIX = 'var(--wp--';

package/src/components/header/document-actions/index.js

@@ -141,6 +141,9 @@ export default function DocumentActions( {
 								aria-expanded={ isOpen }
 								aria-haspopup="true"
 								onClick={ onToggle }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
 								label={ sprintf(
 									/* translators: %s: the entity to see details about, like "template"*/
 									__( 'Show %s details' ),

package/src/components/header/index.js

@@ -11,8 +11,14 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
 import { _x, __ } from '@wordpress/i18n';
-import { listView, plus } from '@wordpress/icons';
-import { Button, ToolbarItem } from '@wordpress/components';
+import { listView, plus, external } from '@wordpress/icons';
+import {
+	Button,
+	ToolbarItem,
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
@@ -48,6 +54,7 @@ export default function Header( {
 		listViewShortcut,
 		isLoaded,
 		isVisualMode,
+		settings,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -56,6 +63,7 @@ export default function Header( {
 			isInserterOpened,
 			isListViewOpened,
 			getEditorMode,
+			getSettings,
 		} = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
 		const { __experimentalGetTemplateInfo: getTemplateInfo } =
@@ -79,6 +87,7 @@ export default function Header( {
 				'core/edit-site/toggle-list-view'
 			),
 			isVisualMode: getEditorMode() === 'visual',
+			settings: getSettings(),
 		};
 	}, [] );
 
@@ -168,6 +177,9 @@ export default function Header( {
 								onClick={ toggleListView }
 								shortcut={ listViewShortcut }
 								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
 							/>
 						</>
 					) }
@@ -200,14 +212,30 @@ export default function Header( {
 						<PreviewOptions
 							deviceType={ deviceType }
 							setDeviceType={ setPreviewDeviceType }
-						/>
+						>
+							<MenuGroup>
+								<MenuItem
+									href={ settings?.siteUrl }
+									target="_blank"
+									icon={ external }
+								>
+									{ __( 'View site' ) }
+									<VisuallyHidden as="span">
+										{
+											/* translators: accessibility text */
+											__( '(opens in a new tab)' )
+										}
+									</VisuallyHidden>
+								</MenuItem>
+							</MenuGroup>
+						</PreviewOptions>
 					) }
 					<SaveButton
 						openEntitiesSavedStates={ openEntitiesSavedStates }
 						isEntitiesSavedStatesOpen={ isEntitiesSavedStatesOpen }
 					/>
 					<PinnedItems.Slot scope="core/edit-site" />
-					<MoreMenu />
+					<MoreMenu showIconLabels={ showIconLabels } />
 				</div>
 			</div>
 		</div>

package/src/components/header/mode-switcher/index.js

@@ -6,9 +6,6 @@ import { MenuItemsChoice, MenuGroup } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
-/**
- * Internal dependencies
- */
 /**
  * Internal dependencies
  */

package/src/components/header/more-menu/index.js

@@ -21,7 +21,7 @@ import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import CopyContentMenuItem from './copy-content-menu-item';
 import ModeSwitcher from '../mode-switcher';
 
-export default function MoreMenu() {
+export default function MoreMenu( { showIconLabels } ) {
 	const [ isModalActive, toggleModal ] = useReducer(
 		( isActive ) => ! isActive,
 		false
@@ -36,7 +36,12 @@ export default function MoreMenu() {
 
 	return (
 		<>
-			<MoreMenuDropdown>
+			<MoreMenuDropdown
+				toggleProps={ {
+					showTooltip: ! showIconLabels,
+					...( showIconLabels && { variant: 'tertiary' } ),
+				} }
+			>
 				{ ( { onClose } ) => (
 					<>
 						<MenuGroup label={ _x( 'View', 'noun' ) }>

package/src/components/header/undo-redo/redo.js

@@ -5,11 +5,15 @@ import { __, isRTL } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { redo as redoIcon, undo as undoIcon } from '@wordpress/icons';
-import { displayShortcut } from '@wordpress/keycodes';
+import { displayShortcut, isAppleOS } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 import { forwardRef } from '@wordpress/element';
 
 function RedoButton( props, ref ) {
+	const shortcut = isAppleOS()
+		? displayShortcut.primaryShift( 'z' )
+		: displayShortcut.primary( 'y' );
+
 	const hasRedo = useSelect(
 		( select ) => select( coreStore ).hasRedo(),
 		[]
@@ -21,7 +25,7 @@ function RedoButton( props, ref ) {
 			ref={ ref }
 			icon={ ! isRTL() ? redoIcon : undoIcon }
 			label={ __( 'Redo' ) }
-			shortcut={ displayShortcut.primaryShift( 'z' ) }
+			shortcut={ shortcut }
 			// If there are no undo levels we don't want to actually disable this
 			// button, because it will remove focus for keyboard users.
 			// See: https://github.com/WordPress/gutenberg/issues/3486

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

@@ -79,7 +79,9 @@ export default function Actions( { template } ) {
 					) }
 					{ isRevertable && (
 						<MenuItem
-							info={ __( 'Restore to default state' ) }
+							info={ __(
+								'Use the template as supplied by the theme.'
+							) }
 							onClick={ () => {
 								revertAndSaveTemplate();
 								onClose();

package/src/components/save-button/index.js

@@ -30,18 +30,15 @@ export default function SaveButton( {
 	const disabled = ! isDirty || isSaving;
 
 	return (
-		<>
-			<Button
-				variant="primary"
-				className="edit-site-save-button__button"
-				aria-disabled={ disabled }
-				aria-expanded={ isEntitiesSavedStatesOpen }
-				disabled={ disabled }
-				isBusy={ isSaving }
-				onClick={ disabled ? undefined : openEntitiesSavedStates }
-			>
-				{ __( 'Save' ) }
-			</Button>
-		</>
+		<Button
+			variant="primary"
+			className="edit-site-save-button__button"
+			aria-disabled={ disabled }
+			aria-expanded={ isEntitiesSavedStatesOpen }
+			isBusy={ isSaving }
+			onClick={ disabled ? undefined : openEntitiesSavedStates }
+		>
+			{ __( 'Save' ) }
+		</Button>
 	);
 }

package/src/components/sidebar/default-sidebar.js

@@ -5,6 +5,12 @@ import {
 	ComplementaryArea,
 	ComplementaryAreaMoreMenuItem,
 } from '@wordpress/interface';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
 
 export default function DefaultSidebar( {
 	className,
@@ -17,6 +23,11 @@ export default function DefaultSidebar( {
 	headerClassName,
 	panelClassName,
 } ) {
+	const showIconLabels = useSelect(
+		( select ) => select( editSiteStore ).getSettings().showIconLabels,
+		[]
+	);
+
 	return (
 		<>
 			<ComplementaryArea
@@ -29,6 +40,7 @@ export default function DefaultSidebar( {
 				header={ header }
 				headerClassName={ headerClassName }
 				panelClassName={ panelClassName }
+				showIconLabels={ showIconLabels }
 			>
 				{ children }
 			</ComplementaryArea>

package/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js

@@ -48,9 +48,5 @@ export default function NavigationMenu( { innerBlocks, id } ) {
 			}
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
-	return (
-		<>
-			<ListView id={ id } />
-		</>
-	);
+	return <ListView id={ id } />;
 }

package/src/components/sidebar/plugin-sidebar/index.js

@@ -2,6 +2,12 @@
  * WordPress dependencies
  */
 import { ComplementaryArea } from '@wordpress/interface';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
 
 /**
  * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
@@ -69,11 +75,17 @@ import { ComplementaryArea } from '@wordpress/interface';
  * ```
  */
 export default function PluginSidebarEditSite( { className, ...props } ) {
+	const showIconLabels = useSelect(
+		( select ) => select( editSiteStore ).getSettings().showIconLabels,
+		[]
+	);
+
 	return (
 		<ComplementaryArea
 			panelClassName={ className }
 			className="edit-site-sidebar"
 			scope="core/edit-site"
+			showIconLabels={ showIconLabels }
 			{ ...props }
 		/>
 	);

package/src/components/sidebar/template-card/template-actions.js

@@ -28,7 +28,9 @@ export default function Actions( { template } ) {
 			{ ( { onClose } ) => (
 				<MenuGroup>
 					<MenuItem
-						info={ __( 'Restore to default state' ) }
+						info={ __(
+							'Use the template as supplied by the theme.'
+						) }
 						onClick={ () => {
 							revertTemplate( template );
 							onClose();

package/src/components/template-details/edit-template-title.js

@@ -19,9 +19,13 @@ export default function EditTemplateTitle( { template } ) {
 		<TextControl
 			label={ __( 'Title' ) }
 			value={ forceEmpty ? '' : title }
-			help={ __(
-				'Give the template a title that indicates its purpose, e.g. "Full Width".'
-			) }
+			help={
+				template.type !== 'wp_template_part'
+					? __(
+							'Give the template a title that indicates its purpose, e.g. "Full Width".'
+					  )
+					: null
+			}
 			onChange={ ( newTitle ) => {
 				if ( ! newTitle && ! forceEmpty ) {
 					setForceEmpty( true );

package/src/components/template-details/index.js

@@ -6,7 +6,7 @@ import {
 	Button,
 	MenuGroup,
 	MenuItem,
-	__experimentalHeading as Heading,
+	__experimentalVStack as VStack,
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -20,6 +20,7 @@ import { store as editSiteStore } from '../../store';
 import TemplateAreas from './template-areas';
 import EditTemplateTitle from './edit-template-title';
 import { useLink } from '../routes/link';
+import TemplatePartAreaSelector from './template-part-area-selector';
 
 export default function TemplateDetails( { template, onClose } ) {
 	const { title, description } = useSelect(
@@ -35,8 +36,13 @@ export default function TemplateDetails( { template, onClose } ) {
 		postId: undefined,
 	} );
 
+	const isTemplatePart = template.type === 'wp_template_part';
+
 	// Only user-created and non-default templates can change the name.
-	const canEditTitle = template.is_custom && ! template.has_theme_file;
+	// But any user-created template part can be renamed.
+	const canEditTitle = isTemplatePart
+		? ! template.has_theme_file
+		: template.is_custom && ! template.has_theme_file;
 
 	if ( ! template ) {
 		return null;
@@ -49,17 +55,18 @@ export default function TemplateDetails( { template, onClose } ) {
 
 	return (
 		<div className="edit-site-template-details">
-			<div className="edit-site-template-details__group">
+			<VStack className="edit-site-template-details__group" spacing={ 3 }>
 				{ canEditTitle ? (
 					<EditTemplateTitle template={ template } />
 				) : (
-					<Heading
-						level={ 4 }
+					<Text
+						size={ 16 }
 						weight={ 600 }
 						className="edit-site-template-details__title"
+						as="p"
 					>
 						{ title }
-					</Heading>
+					</Text>
 				) }
 
 				{ description && (
@@ -71,7 +78,13 @@ export default function TemplateDetails( { template, onClose } ) {
 						{ description }
 					</Text>
 				) }
-			</div>
+			</VStack>
+
+			{ isTemplatePart && (
+				<div className="edit-site-template-details__group">
+					<TemplatePartAreaSelector id={ template.id } />
+				</div>
+			) }
 
 			<TemplateAreas closeTemplateDetailsDropdown={ onClose } />
 
@@ -79,7 +92,9 @@ export default function TemplateDetails( { template, onClose } ) {
 				<MenuGroup className="edit-site-template-details__group edit-site-template-details__revert">
 					<MenuItem
 						className="edit-site-template-details__revert-button"
-						info={ __( 'Restore template to default state' ) }
+						info={ __(
+							'Use the template as supplied by the theme.'
+						) }
 						onClick={ revert }
 					>
 						{ __( 'Clear customizations' ) }

package/src/components/template-details/style.scss

@@ -8,12 +8,7 @@
 		border-top: $border-width solid $gray-400;
 	}
 
-	.edit-site-template-details__title {
-		margin: 0;
-	}
-
 	.edit-site-template-details__description {
-		margin: $grid-unit-15 0 0;
 		color: $gray-700;
 	}
 

package/src/components/template-details/template-areas.js

@@ -59,7 +59,9 @@ function TemplatePartItemMore( {
 			{ isTemplateRevertable( templatePart ) && (
 				<MenuGroup>
 					<MenuItem
-						info={ __( 'Restore template to default state' ) }
+						info={ __(
+							'Use the template part as supplied by the theme.'
+						) }
 						onClick={ clearCustomizations }
 					>
 						{ __( 'Clear customizations' ) }

package/src/components/template-details/template-part-area-selector.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { SelectControl } from '@wordpress/components';
+import { useEntityProp } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+
+export default function TemplatePartAreaSelector( { id } ) {
+	const [ area, setArea ] = useEntityProp(
+		'postType',
+		'wp_template_part',
+		'area',
+		id
+	);
+
+	const definedAreas = useSelect(
+		( select ) =>
+			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+		[]
+	);
+
+	const areaOptions = definedAreas.map( ( { label, area: _area } ) => ( {
+		label,
+		value: _area,
+	} ) );
+
+	return (
+		<SelectControl
+			label={ __( 'Area' ) }
+			labelPosition="top"
+			options={ areaOptions }
+			value={ area }
+			onChange={ setArea }
+		/>
+	);
+}

package/src/components/template-part-converter/convert-to-template-part.js

@@ -17,6 +17,7 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+import { symbolFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -65,11 +66,12 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 			<BlockSettingsMenuControls>
 				{ () => (
 					<MenuItem
+						icon={ symbolFilled }
 						onClick={ () => {
 							setIsModalOpen( true );
 						} }
 					>
-						{ __( 'Make template part' ) }
+						{ __( 'Create Template part' ) }
 					</MenuItem>
 				) }
 			</BlockSettingsMenuControls>

package/src/index.js

@@ -65,7 +65,7 @@ export function reinitializeEditor( target, settings ) {
 			keepCaretInsideBlock: false,
 			welcomeGuide: true,
 			welcomeGuideStyles: true,
-			shouldListViewOpenByDefault: false,
+			showListViewByDefault: false,
 		} );
 
 		// Check if the block list view should be open by default.