@wordpress/edit-site 4.12.0 → 4.12.1-next.d6164808d3.0

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

@@ -10,9 +10,9 @@ import {
 import {
 	PanelBody,
 	FontSizePicker,
-	__experimentalSpacer as Spacer,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalGrid as Grid,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
@@ -144,109 +144,111 @@ export default function TypographyPanel( { name, element } ) {
 			>
 				Aa
 			</div>
-			{ element === 'heading' && (
-				<div>
-					<h4>{ __( 'Select heading level' ) }</h4>
-					<ToggleGroupControl
-						label={ __( 'Select heading level' ) }
-						hideLabelFromVision={ true }
-						value={ selectedLevel }
-						onChange={ setCurrentTab }
-						isBlock
-						size="__unstable-large"
-					>
-						<ToggleGroupControlOption
-							value="heading"
-							/* translators: 'All' refers to selecting all heading levels 
+			<Grid columns={ 2 } rowGap={ 16 } columnGap={ 8 }>
+				{ element === 'heading' && (
+					<div className="edit-site-typography-panel__full-width-control">
+						<ToggleGroupControl
+							label={ __( 'Select heading level' ) }
+							hideLabelFromVision
+							value={ selectedLevel }
+							onChange={ setCurrentTab }
+							isBlock
+							size="__unstable-large"
+							__nextHasNoMarginBottom
+						>
+							<ToggleGroupControlOption
+								value="heading"
+								/* translators: 'All' refers to selecting all heading levels 
 							and applying the same style to h1-h6. */
-							label={ __( 'All' ) }
-						/>
-						<ToggleGroupControlOption
-							value="h1"
-							label={ __( 'H1' ) }
-						/>
-						<ToggleGroupControlOption
-							value="h2"
-							label={ __( 'H2' ) }
-						/>
-						<ToggleGroupControlOption
-							value="h3"
-							label={ __( 'H3' ) }
-						/>
-						<ToggleGroupControlOption
-							value="h4"
-							label={ __( 'H4' ) }
-						/>
-						<ToggleGroupControlOption
-							value="h5"
-							label={ __( 'H5' ) }
-						/>
-						<ToggleGroupControlOption
-							value="h6"
-							label={ __( 'H6' ) }
+								label={ __( 'All' ) }
+							/>
+							<ToggleGroupControlOption
+								value="h1"
+								label={ __( 'H1' ) }
+							/>
+							<ToggleGroupControlOption
+								value="h2"
+								label={ __( 'H2' ) }
+							/>
+							<ToggleGroupControlOption
+								value="h3"
+								label={ __( 'H3' ) }
+							/>
+							<ToggleGroupControlOption
+								value="h4"
+								label={ __( 'H4' ) }
+							/>
+							<ToggleGroupControlOption
+								value="h5"
+								label={ __( 'H5' ) }
+							/>
+							<ToggleGroupControlOption
+								value="h6"
+								label={ __( 'H6' ) }
+							/>
+						</ToggleGroupControl>
+					</div>
+				) }
+				{ supports.includes( 'fontFamily' ) && (
+					<div className="edit-site-typography-panel__full-width-control">
+						<FontFamilyControl
+							fontFamilies={ fontFamilies }
+							value={ fontFamily }
+							onChange={ setFontFamily }
+							size="__unstable-large"
+							__nextHasNoMarginBottom
 						/>
-					</ToggleGroupControl>
-				</div>
-			) }
-			{ supports.includes( 'fontFamily' ) && (
-				<FontFamilyControl
-					fontFamilies={ fontFamilies }
-					value={ fontFamily }
-					onChange={ setFontFamily }
-					size="__unstable-large"
-				/>
-			) }
-			{ hasFontSizeEnabled && (
-				<FontSizePicker
-					value={ fontSize }
-					onChange={ setFontSize }
-					fontSizes={ fontSizes }
-					disableCustomFontSizes={ disableCustomFontSizes }
-					size="__unstable-large"
-				/>
-			) }
-			{ hasLineHeightEnabled && (
-				<div className="edit-site-typography-panel__half-width-control">
-					<Spacer marginBottom={ 6 }>
-						<LineHeightControl
-							__nextHasNoMarginBottom={ true }
-							__unstableInputWidth="auto"
-							value={ lineHeight }
-							onChange={ setLineHeight }
+					</div>
+				) }
+				{ hasFontSizeEnabled && (
+					<div className="edit-site-typography-panel__full-width-control">
+						<FontSizePicker
+							value={ fontSize }
+							onChange={ setFontSize }
+							fontSizes={ fontSizes }
+							disableCustomFontSizes={ disableCustomFontSizes }
 							size="__unstable-large"
+							__nextHasNoMarginBottom
 						/>
-					</Spacer>
-				</div>
-			) }
-			{ hasAppearanceControl && (
-				<FontAppearanceControl
-					value={ {
-						fontStyle,
-						fontWeight,
-					} }
-					onChange={ ( {
-						fontStyle: newFontStyle,
-						fontWeight: newFontWeight,
-					} ) => {
-						setFontStyle( newFontStyle );
-						setFontWeight( newFontWeight );
-					} }
-					hasFontStyles={ hasFontStyles }
-					hasFontWeights={ hasFontWeights }
-					size="__unstable-large"
-					__nextUnconstrainedWidth
-				/>
-			) }
-			{ hasLetterSpacingControl && (
-				<div className="edit-site-typography-panel__half-width-control">
+					</div>
+				) }
+				{ hasAppearanceControl && (
+					<FontAppearanceControl
+						value={ {
+							fontStyle,
+							fontWeight,
+						} }
+						onChange={ ( {
+							fontStyle: newFontStyle,
+							fontWeight: newFontWeight,
+						} ) => {
+							setFontStyle( newFontStyle );
+							setFontWeight( newFontWeight );
+						} }
+						hasFontStyles={ hasFontStyles }
+						hasFontWeights={ hasFontWeights }
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					/>
+				) }
+				{ hasLineHeightEnabled && (
+					<LineHeightControl
+						__nextHasNoMarginBottom
+						__unstableInputWidth="auto"
+						value={ lineHeight }
+						onChange={ setLineHeight }
+						size="__unstable-large"
+					/>
+				) }
+				{ hasLetterSpacingControl && (
 					<LetterSpacingControl
 						value={ letterSpacing }
 						onChange={ setLetterSpacing }
 						size="__unstable-large"
 						__unstableInputWidth="auto"
 					/>
-				</div>
-			) }
+				) }
+			</Grid>
 		</PanelBody>
 	);
 }

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

@@ -49,7 +49,8 @@ function compileStyleValue( uncompiledValue ) {
 	const VARIABLE_REFERENCE_PREFIX = 'var:';
 	const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
 	const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
-	if ( uncompiledValue?.startsWith( VARIABLE_REFERENCE_PREFIX ) ) {
+
+	if ( uncompiledValue?.startsWith?.( VARIABLE_REFERENCE_PREFIX ) ) {
 		const variable = uncompiledValue
 			.slice( VARIABLE_REFERENCE_PREFIX.length )
 			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
@@ -189,12 +190,15 @@ function flattenTree( input = {}, prefix, token ) {
  *
  * @param {boolean} useRootPaddingAlign Whether to use CSS custom properties in root selector.
  *
+ * @param {Object}  tree                A theme.json tree containing layout definitions.
+ *
  * @return {Array} An array of style declarations.
  */
 export function getStylesDeclarations(
 	blockStyles = {},
 	selector = '',
-	useRootPaddingAlign
+	useRootPaddingAlign,
+	tree = {}
 ) {
 	const isRoot = ROOT_BLOCK_SELECTOR === selector;
 	const output = reduce(
@@ -269,7 +273,19 @@ export function getStylesDeclarations(
 		const cssProperty = rule.key.startsWith( '--' )
 			? rule.key
 			: kebabCase( rule.key );
-		output.push( `${ cssProperty }: ${ compileStyleValue( rule.value ) }` );
+
+		let ruleValue = rule.value;
+		if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
+			const refPath = ruleValue.ref.split( '.' );
+			ruleValue = get( tree, refPath );
+			// Presence of another ref indicates a reference to another dynamic value.
+			// Pointing to another dynamic value is not supported.
+			if ( ! ruleValue || !! ruleValue?.ref ) {
+				return;
+			}
+		}
+
+		output.push( `${ cssProperty }: ${ ruleValue }` );
 	} );
 
 	return output;
@@ -564,6 +580,7 @@ export const toStyles = (
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
 	const useRootPaddingAlign = tree?.settings?.useRootPaddingAwareAlignments;
+	const { contentSize, wideSize } = tree?.settings?.layout || {};
 
 	/*
 	 * Reset default browser margin on the root body element.
@@ -573,13 +590,23 @@ export const toStyles = (
 	 * user-generated values take precedence in the CSS cascade.
 	 * @link https://github.com/WordPress/gutenberg/issues/36147.
 	 */
-	let ruleset = 'body {margin: 0;}';
+	let ruleset = 'body {margin: 0;';
+
+	if ( contentSize ) {
+		ruleset += ` --wp--style--global--content-size: ${ contentSize };`;
+	}
+
+	if ( wideSize ) {
+		ruleset += ` --wp--style--global--wide-size: ${ wideSize };`;
+	}
 
 	if ( useRootPaddingAlign ) {
-		ruleset =
-			'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
+		ruleset +=
+			'padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left);';
 	}
 
+	ruleset += '}';
+
 	nodesWithStyles.forEach(
 		( {
 			selector,
@@ -624,14 +651,13 @@ export const toStyles = (
 			if ( duotoneSelector ) {
 				const duotoneDeclarations =
 					getStylesDeclarations( duotoneStyles );
-				if ( duotoneDeclarations.length === 0 ) {
-					return;
+				if ( duotoneDeclarations.length > 0 ) {
+					ruleset =
+						ruleset +
+						`${ duotoneSelector }{${ duotoneDeclarations.join(
+							';'
+						) };}`;
 				}
-				ruleset =
-					ruleset +
-					`${ duotoneSelector }{${ duotoneDeclarations.join(
-						';'
-					) };}`;
 			}
 
 			// Process blockGap and layout styles.
@@ -653,7 +679,8 @@ export const toStyles = (
 			const declarations = getStylesDeclarations(
 				styles,
 				selector,
-				useRootPaddingAlign
+				useRootPaddingAlign,
+				tree
 			);
 			if ( declarations?.length ) {
 				ruleset =

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

@@ -77,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 = {
@@ -195,7 +202,7 @@ function getValueFromPresetVariable(
 	}
 
 	const presetObject = findInPresetsBy(
-		features,
+		features.settings,
 		blockName,
 		metadata.path,
 		'slug',
@@ -213,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;
 	}
@@ -222,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

@@ -177,6 +177,9 @@ export default function Header( {
 								onClick={ toggleListView }
 								shortcut={ listViewShortcut }
 								showTooltip={ ! showIconLabels }
+								variant={
+									showIconLabels ? 'tertiary' : undefined
+								}
 							/>
 						</>
 					) }
@@ -232,7 +235,7 @@ export default function Header( {
 						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/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/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/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 } />
 

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