@wordpress/edit-site 5.15.0 → 5.17.0

package/src/components/editor/index.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import { EntityProvider } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -58,9 +59,10 @@ const interfaceLabels = {
 };
 
 const typeLabels = {
-	wp_template: __( 'Template Part' ),
+	wp_template: __( 'Template' ),
 	wp_template_part: __( 'Template Part' ),
 	wp_block: __( 'Pattern' ),
+	wp_navigation: __( 'Navigation' ),
 };
 
 // Prevent accidental removal of certain blocks, asking the user for
@@ -165,12 +167,11 @@ export default function Editor( { isLoading } ) {
 
 	let title;
 	if ( hasLoadedPost ) {
-		const type = typeLabels[ editedPostType ] ?? __( 'Template' );
 		title = sprintf(
 			// translators: A breadcrumb trail in browser tab. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
 			__( '%1$s ‹ %2$s ‹ Editor' ),
 			getTitle(),
-			type
+			typeLabels[ editedPostType ] ?? typeLabels.wp_template
 		);
 	}
 
@@ -178,9 +179,21 @@ export default function Editor( { isLoading } ) {
 	// action in <URLQueryController> from double-announcing.
 	useTitle( hasLoadedPost && title );
 
+	const loadingProgressId = useInstanceId(
+		CanvasSpinner,
+		'edit-site-editor__loading-progress'
+	);
+
+	const contentProps = isLoading
+		? {
+				'aria-busy': 'true',
+				'aria-describedby': loadingProgressId,
+		  }
+		: undefined;
+
 	return (
 		<>
-			{ isLoading ? <CanvasSpinner /> : null }
+			{ isLoading ? <CanvasSpinner id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			<EntityProvider kind="root" type="site">
 				<EntityProvider
@@ -232,6 +245,7 @@ export default function Editor( { isLoading } ) {
 									) }
 								</>
 							}
+							contentProps={ contentProps }
 							secondarySidebar={
 								isEditMode &&
 								( ( shouldShowInserter && (

package/src/components/global-styles/block-preview-panel.js

@@ -4,26 +4,37 @@
 import { BlockPreview } from '@wordpress/block-editor';
 import { getBlockType, getBlockFromExample } from '@wordpress/blocks';
 import { __experimentalSpacer as Spacer } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
 
 const BlockPreviewPanel = ( { name, variation = '' } ) => {
 	const blockExample = getBlockType( name )?.example;
-	const blockExampleWithVariation = {
-		...blockExample,
-		attributes: {
-			...blockExample?.attributes,
-			className: 'is-style-' + variation,
-		},
-	};
-	const blocks =
-		blockExample &&
-		getBlockFromExample(
-			name,
-			variation ? blockExampleWithVariation : blockExample
-		);
-	const viewportWidth = blockExample?.viewportWidth || null;
+	const blocks = useMemo( () => {
+		if ( ! blockExample ) {
+			return null;
+		}
+
+		let example = blockExample;
+		if ( variation ) {
+			example = {
+				...example,
+				attributes: {
+					...example.attributes,
+					className: 'is-style-' + variation,
+				},
+			};
+		}
+
+		return getBlockFromExample( name, example );
+	}, [ name, blockExample, variation ] );
+
+	const viewportWidth = blockExample?.viewportWidth ?? null;
 	const previewHeight = '150px';
 
-	return ! blockExample ? null : (
+	if ( ! blockExample ) {
+		return null;
+	}
+
+	return (
 		<Spacer marginX={ 4 } marginBottom={ 4 }>
 			<div
 				className="edit-site-global-styles__block-preview-panel"

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

@@ -31,7 +31,7 @@ export function mergeBaseAndUserConfigs( base, user ) {
 }
 
 function useGlobalStylesUserConfig() {
-	const { globalStylesId, isReady, settings, styles } = useSelect(
+	const { globalStylesId, isReady, settings, styles, behaviors } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
@@ -65,6 +65,7 @@ function useGlobalStylesUserConfig() {
 				isReady: hasResolved,
 				settings: record?.settings,
 				styles: record?.styles,
+				behaviors: record?.behaviors,
 			};
 		},
 		[]
@@ -76,8 +77,9 @@ function useGlobalStylesUserConfig() {
 		return {
 			settings: settings ?? {},
 			styles: styles ?? {},
+			behaviors: behaviors ?? {},
 		};
-	}, [ settings, styles ] );
+	}, [ settings, styles, behaviors ] );
 
 	const setConfig = useCallback(
 		( callback, options = {} ) => {
@@ -89,6 +91,7 @@ function useGlobalStylesUserConfig() {
 			const currentConfig = {
 				styles: record?.styles ?? {},
 				settings: record?.settings ?? {},
+				behaviors: record?.behaviors ?? {},
 			};
 			const updatedConfig = callback( currentConfig );
 			editEntityRecord(
@@ -98,6 +101,8 @@ function useGlobalStylesUserConfig() {
 				{
 					styles: cleanEmptyObject( updatedConfig.styles ) || {},
 					settings: cleanEmptyObject( updatedConfig.settings ) || {},
+					behaviors:
+						cleanEmptyObject( updatedConfig.behaviors ) || {},
 				},
 				options
 			);

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

@@ -16,7 +16,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
@@ -52,6 +52,32 @@ export function useColorRandomizer( name ) {
 		: [];
 }
 
+export function useStylesPreviewColors() {
+	const [ textColor = 'black' ] = useGlobalStyle( 'color.text' );
+	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const [ headingColor = textColor ] = useGlobalStyle(
+		'elements.h1.color.text'
+	);
+	const [ coreColors ] = useGlobalSetting( 'color.palette.core' );
+	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
+	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
+
+	const paletteColors = ( themeColors ?? [] )
+		.concat( customColors ?? [] )
+		.concat( coreColors ?? [] );
+	const highlightedColors = paletteColors
+		.filter(
+			// we exclude these two colors because they are already visible in the preview.
+			( { color } ) => color !== backgroundColor && color !== headingColor
+		)
+		.slice( 0, 2 );
+
+	return {
+		paletteColors,
+		highlightedColors,
+	};
+}
+
 export function useSupportedStyles( name, element ) {
 	const { supportedPanels } = useSelect(
 		( select ) => {

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

@@ -18,8 +18,9 @@ import { useState, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import { useStylesPreviewColors } from './hooks';
 
-const { useGlobalSetting, useGlobalStyle, useGlobalStylesOutput } = unlock(
+const { useGlobalStyle, useGlobalStylesOutput } = unlock(
 	blockEditorPrivateApis
 );
 
@@ -76,22 +77,11 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
 	const [ styles ] = useGlobalStylesOutput();
 	const disableMotion = useReducedMotion();
-	const [ coreColors ] = useGlobalSetting( 'color.palette.core' );
-	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
-	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ containerResizeListener, { width } ] = useResizeObserver();
 	const ratio = width ? width / normalizedWidth : 1;
 
-	const paletteColors = ( themeColors ?? [] )
-		.concat( customColors ?? [] )
-		.concat( coreColors ?? [] );
-	const highlightedColors = paletteColors
-		.filter(
-			// we exclude these two colors because they are already visible in the preview.
-			( { color } ) => color !== backgroundColor && color !== headingColor
-		)
-		.slice( 0, 2 );
+	const { paletteColors, highlightedColors } = useStylesPreviewColors();
 
 	// Reset leaked styles from WP common.css and remove main content layout padding and border.
 	const editorStyles = useMemo( () => {

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

@@ -61,12 +61,15 @@ const {
 	useHasDimensionsPanel,
 	useHasTypographyPanel,
 	useHasBorderPanel,
+	__experimentalUseHasBehaviorsPanel: useHasBehaviorsPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
 	useHasColorPanel,
 	useHasEffectsPanel,
 	useHasFiltersPanel,
 	useGlobalStyle,
+	__experimentalUseGlobalBehaviors: useGlobalBehaviors,
+	__experimentalBehaviorsPanel: StylesBehaviorsPanel,
 	BorderPanel: StylesBorderPanel,
 	ColorPanel: StylesColorPanel,
 	TypographyPanel: StylesTypographyPanel,
@@ -91,10 +94,14 @@ function ScreenBlock( { name, variation } ) {
 	} );
 	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
+	const { inheritedBehaviors, setBehavior } = useGlobalBehaviors( name );
+	const { behavior } = useGlobalBehaviors( name, 'user' );
+
 	const blockType = getBlockType( name );
 	const blockVariations = useBlockVariations( name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
+	const hasBehaviorsPanel = useHasBehaviorsPanel( rawSettings, name );
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasEffectsPanel = useHasEffectsPanel( settings );
@@ -267,6 +274,14 @@ function ScreenBlock( { name, variation } ) {
 						onChange={ setStyle }
 						inheritedValue={ inheritedStyle }
 					/>
+					{ hasBehaviorsPanel && (
+						<StylesBehaviorsPanel
+							value={ behavior }
+							onChange={ setBehavior }
+							behaviors={ inheritedBehaviors }
+							blockName={ name }
+						></StylesBehaviorsPanel>
+					) }
 				</PanelBody>
 			) }
 		</>

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

@@ -10,7 +10,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import ScreenHeader from './header';
 import Palette from './palette';
-import BlockPreviewPanel from './block-preview-panel';
 import { unlock } from '../../lock-unlock';
 
 const {
@@ -38,9 +37,6 @@ function ScreenColors() {
 					'Manage palettes and the default color of different global elements on the site.'
 				) }
 			/>
-
-			<BlockPreviewPanel />
-
 			<div className="edit-site-global-styles-screen-colors">
 				<VStack spacing={ 10 }>
 					<Palette />

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

@@ -9,7 +9,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import DimensionsPanel from './dimensions-panel';
 import ScreenHeader from './header';
-import BlockPreviewPanel from './block-preview-panel';
 import { unlock } from '../../lock-unlock';
 
 const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
@@ -22,7 +21,6 @@ function ScreenLayout() {
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
-			<BlockPreviewPanel />
 			{ hasDimensionsPanel && <DimensionsPanel /> }
 		</>
 	);

package/src/components/global-styles/screen-revisions/index.js

@@ -7,6 +7,7 @@ import {
 	__experimentalUseNavigator as useNavigator,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Spinner,
+	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useContext, useState, useEffect } from '@wordpress/element';
@@ -70,6 +71,7 @@ function ScreenRevisions() {
 		setUserConfig( () => ( {
 			styles: revision?.styles,
 			settings: revision?.settings,
+			behaviors: revision?.behaviors,
 		} ) );
 		setIsLoadingRevisionWithUnsavedChanges( false );
 		onCloseRevisions();
@@ -77,8 +79,9 @@ function ScreenRevisions() {
 
 	const selectRevision = ( revision ) => {
 		setGlobalStylesRevision( {
-			styles: revision?.styles,
-			settings: revision?.settings,
+			styles: revision?.styles || {},
+			settings: revision?.settings || {},
+			behaviors: revision?.behaviors || {},
 			id: revision?.id,
 		} );
 		setSelectedRevisionId( revision?.id );
@@ -87,6 +90,7 @@ function ScreenRevisions() {
 	const isLoadButtonEnabled =
 		!! globalStylesRevision?.id &&
 		! areGlobalStyleConfigsEqual( globalStylesRevision, userConfig );
+	const shouldShowRevisions = ! isLoading && revisions.length;
 
 	return (
 		<>
@@ -99,68 +103,72 @@ function ScreenRevisions() {
 			{ isLoading && (
 				<Spinner className="edit-site-global-styles-screen-revisions__loading" />
 			) }
-			{ ! isLoading && (
-				<Revisions
-					blocks={ blocks }
-					userConfig={ globalStylesRevision }
-					onClose={ onCloseRevisions }
-				/>
-			) }
-			<div className="edit-site-global-styles-screen-revisions">
-				<RevisionsButtons
-					onChange={ selectRevision }
-					selectedRevisionId={ selectedRevisionId }
-					userRevisions={ revisions }
-				/>
-				{ isLoadButtonEnabled && (
-					<SidebarFixedBottom>
-						<Button
-							variant="primary"
-							className="edit-site-global-styles-screen-revisions__button"
-							disabled={
-								! globalStylesRevision?.id ||
-								globalStylesRevision?.id === 'unsaved'
+			{ shouldShowRevisions ? (
+				<>
+					<Revisions
+						blocks={ blocks }
+						userConfig={ globalStylesRevision }
+						onClose={ onCloseRevisions }
+					/>
+					<div className="edit-site-global-styles-screen-revisions">
+						<RevisionsButtons
+							onChange={ selectRevision }
+							selectedRevisionId={ selectedRevisionId }
+							userRevisions={ revisions }
+						/>
+						{ isLoadButtonEnabled && (
+							<SidebarFixedBottom>
+								<Button
+									variant="primary"
+									className="edit-site-global-styles-screen-revisions__button"
+									disabled={
+										! globalStylesRevision?.id ||
+										globalStylesRevision?.id === 'unsaved'
+									}
+									onClick={ () => {
+										if ( hasUnsavedChanges ) {
+											setIsLoadingRevisionWithUnsavedChanges(
+												true
+											);
+										} else {
+											restoreRevision(
+												globalStylesRevision
+											);
+										}
+									} }
+								>
+									{ globalStylesRevision?.id === 'parent'
+										? __( 'Reset to defaults' )
+										: __( 'Apply' ) }
+								</Button>
+							</SidebarFixedBottom>
+						) }
+					</div>
+					{ isLoadingRevisionWithUnsavedChanges && (
+						<ConfirmDialog
+							isOpen={ isLoadingRevisionWithUnsavedChanges }
+							confirmButtonText={ __( 'Apply' ) }
+							onConfirm={ () =>
+								restoreRevision( globalStylesRevision )
+							}
+							onCancel={ () =>
+								setIsLoadingRevisionWithUnsavedChanges( false )
 							}
-							onClick={ () => {
-								if ( hasUnsavedChanges ) {
-									setIsLoadingRevisionWithUnsavedChanges(
-										true
-									);
-								} else {
-									restoreRevision( globalStylesRevision );
-								}
-							} }
 						>
-							{ __( 'Apply' ) }
-						</Button>
-					</SidebarFixedBottom>
-				) }
-			</div>
-			{ isLoadingRevisionWithUnsavedChanges && (
-				<ConfirmDialog
-					title={ __(
-						'Loading this revision will discard all unsaved changes.'
-					) }
-					isOpen={ isLoadingRevisionWithUnsavedChanges }
-					confirmButtonText={ __( ' Discard unsaved changes' ) }
-					onConfirm={ () => restoreRevision( globalStylesRevision ) }
-					onCancel={ () =>
-						setIsLoadingRevisionWithUnsavedChanges( false )
-					}
-				>
-					<>
-						<h2>
-							{ __(
-								'Loading this revision will discard all unsaved changes.'
-							) }
-						</h2>
-						<p>
 							{ __(
-								'Do you want to replace your unsaved changes in the editor?'
+								'Any unsaved changes will be lost when you apply this revision.'
 							) }
-						</p>
-					</>
-				</ConfirmDialog>
+						</ConfirmDialog>
+					) }
+				</>
+			) : (
+				<Spacer marginX={ 4 } data-testid="global-styles-no-revisions">
+					{
+						// Adding an existing translation here in case these changes are shipped to WordPress 6.3.
+						// Later we could update to something better, e.g., "There are currently no style revisions.".
+						__( 'No results found.' )
+					}
+				</Spacer>
 			) }
 		</>
 	);

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -9,6 +9,8 @@ import classnames from 'classnames';
 import { __, sprintf } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Returns a button label for the revision.
@@ -19,15 +21,18 @@ import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
 function getRevisionLabel( revision ) {
 	const authorDisplayName = revision?.author?.name || __( 'User' );
 
+	if ( 'parent' === revision?.id ) {
+		return __( 'Reset the styles to the theme defaults' );
+	}
+
 	if ( 'unsaved' === revision?.id ) {
 		return sprintf(
-			/* translators: %(name)s author display name */
-			__( 'Unsaved changes by %(name)s' ),
-			{
-				name: authorDisplayName,
-			}
+			/* translators: %s author display name */
+			__( 'Unsaved changes by %s' ),
+			authorDisplayName
 		);
 	}
+
 	const formattedDate = dateI18n(
 		getSettings().formats.datetimeAbbreviated,
 		getDate( revision?.modified )
@@ -35,20 +40,16 @@ function getRevisionLabel( revision ) {
 
 	return revision?.isLatest
 		? sprintf(
-				/* translators: %(name)s author display name, %(date)s: revision creation date */
-				__( 'Changes saved by %(name)s on %(date)s (current)' ),
-				{
-					name: authorDisplayName,
-					date: formattedDate,
-				}
+				/* translators: %1$s author display name, %2$s: revision creation date */
+				__( 'Changes saved by %1$s on %2$s (current)' ),
+				authorDisplayName,
+				formattedDate
 		  )
 		: sprintf(
-				/* translators: %(name)s author display name, %(date)s: revision creation date */
-				__( 'Changes saved by %(name)s on %(date)s' ),
-				{
-					name: authorDisplayName,
-					date: formattedDate,
-				}
+				/* translators: %1$s author display name, %2$s: revision creation date */
+				__( 'Changes saved by %1$s on %2$s' ),
+				authorDisplayName,
+				formattedDate
 		  );
 }
 
@@ -64,6 +65,10 @@ function getRevisionLabel( revision ) {
  * @return {JSX.Element} The modal component.
  */
 function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
+	const currentTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme(),
+		[]
+	);
 	return (
 		<ol
 			className="edit-site-global-styles-screen-revisions__revisions-list"
@@ -78,6 +83,7 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 				const isSelected = selectedRevisionId
 					? selectedRevisionId === revision?.id
 					: index === 0;
+				const isReset = 'parent' === revision?.id;
 
 				return (
 					<li
@@ -85,6 +91,7 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 							'edit-site-global-styles-screen-revisions__revision-item',
 							{
 								'is-selected': isSelected,
+								'is-reset': isReset,
 							}
 						) }
 						key={ id }
@@ -97,37 +104,41 @@ function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 							} }
 							label={ getRevisionLabel( revision ) }
 						>
-							<span className="edit-site-global-styles-screen-revisions__description">
-								<time dateTime={ modified }>
-									{ humanTimeDiff( modified ) }
-								</time>
-								<span className="edit-site-global-styles-screen-revisions__meta">
-									{ isUnsaved
-										? sprintf(
-												/* translators: %(name)s author display name */
-												__(
-													'Unsaved changes by %(name)s'
-												),
-												{
-													name: authorDisplayName,
-												}
-										  )
-										: sprintf(
-												/* translators: %(name)s author display name */
-												__(
-													'Changes saved by %(name)s'
-												),
-												{
-													name: authorDisplayName,
-												}
-										  ) }
+							{ isReset ? (
+								<span className="edit-site-global-styles-screen-revisions__description">
+									{ __( 'Default styles' ) }
+									<span className="edit-site-global-styles-screen-revisions__meta">
+										{ currentTheme?.name?.rendered ||
+											currentTheme?.stylesheet }
+									</span>
+								</span>
+							) : (
+								<span className="edit-site-global-styles-screen-revisions__description">
+									<time dateTime={ modified }>
+										{ humanTimeDiff( modified ) }
+									</time>
+									<span className="edit-site-global-styles-screen-revisions__meta">
+										{ isUnsaved
+											? sprintf(
+													/* translators: %s author display name */
+													__(
+														'Unsaved changes by %s'
+													),
+													authorDisplayName
+											  )
+											: sprintf(
+													/* translators: %s author display name */
+													__( 'Changes saved by %s' ),
+													authorDisplayName
+											  ) }
 
-									<img
-										alt={ author?.name }
-										src={ authorAvatar }
-									/>
+										<img
+											alt={ author?.name }
+											src={ authorAvatar }
+										/>
+									</span>
 								</span>
-							</span>
+							) }
 						</Button>
 					</li>
 				);