@wordpress/edit-site 5.34.0 → 5.35.0

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

@@ -9,7 +9,7 @@ import {
 /**
  * Internal dependencies
  */
-import HighlightedColors from './highlighted-colors';
+import PresetColors from './preset-colors';
 import PreviewIframe from './preview-iframe';
 
 const firstFrameVariants = {
@@ -30,7 +30,7 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 			isFocused={ isFocused }
 			withHoverView={ withHoverView }
 		>
-			{ ( { ratio, key } ) => (
+			{ ( { key } ) => (
 				<motion.div
 					key={ key }
 					variants={ firstFrameVariants }
@@ -40,17 +40,14 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 					} }
 				>
 					<HStack
-						spacing={ 5 * ratio }
+						spacing={ 0 }
 						justify="center"
 						style={ {
 							height: '100%',
 							overflow: 'hidden',
 						} }
 					>
-						<HighlightedColors
-							normalizedColorSwatchSize={ 56 }
-							ratio={ ratio }
-						/>
+						<PresetColors />
 					</HStack>
 				</motion.div>
 			) }

package/src/components/global-styles/screen-color-palette.js

@@ -18,17 +18,17 @@ function ScreenColorPalette( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				title={ __( 'Palette' ) }
+				title={ __( 'Edit palette' ) }
 				description={ __(
-					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'
+					'The combination of colors used across the site and in color pickers.'
 				) }
 			/>
 			<Tabs>
 				<Tabs.TabList>
-					<Tabs.Tab tabId="solid">{ __( 'Solid' ) }</Tabs.Tab>
+					<Tabs.Tab tabId="color">{ __( 'Color' ) }</Tabs.Tab>
 					<Tabs.Tab tabId="gradient">{ __( 'Gradient' ) }</Tabs.Tab>
 				</Tabs.TabList>
-				<Tabs.TabPanel tabId="solid" focusable={ false }>
+				<Tabs.TabPanel tabId="color" focusable={ false }>
 					<ColorPalettePanel name={ name } />
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId="gradient" focusable={ false }>

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

@@ -11,7 +11,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import Palette from './palette';
 import { unlock } from '../../lock-unlock';
-import ColorVariations from './variations/variations-color';
 
 const {
 	useGlobalStyle,
@@ -40,7 +39,6 @@ function ScreenColors() {
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					<ColorVariations title={ __( 'Presets' ) } />
 					<Palette />
 					<StylesColorPanel
 						inheritedValue={ inheritedStyle }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -150,7 +150,7 @@ function RevisionsButtons( {
 
 				return (
 					<li
-						className={ classnames(
+						className={ clsx(
 							'edit-site-global-styles-screen-revisions__revision-item',
 							{
 								'is-selected': isSelected,

package/src/components/global-styles/stories/index.story.js

@@ -2,15 +2,16 @@
  * WordPress dependencies
  */
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from '../global-styles-provider';
 import { default as GlobalStylesUIComponent } from '../ui';
 import { unlock } from '../../../lock-unlock';
 
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 const { GlobalStylesContext, ExperimentalBlockEditorProvider } = unlock(
 	blockEditorPrivateApis
 );

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

@@ -5,16 +5,17 @@ import { useContext } from '@wordpress/element';
 import { __unstableMotion as motion } from '@wordpress/components';
 import { _x } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import { unlock } from '../../lock-unlock';
 import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
 import { getFontFamilies } from './utils';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 export default function PreviewTypography( { fontSize, variation } ) {
 	const { base } = useContext( GlobalStylesContext );

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

@@ -76,7 +76,11 @@ function GlobalStylesActionMenu() {
 
 	return (
 		<GlobalStylesMenuFill>
-			<DropdownMenu icon={ moreVertical } label={ __( 'More' ) }>
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'More' ) }
+				toggleProps={ { size: 'compact' } }
+			>
 				{ ( { onClose } ) => (
 					<>
 						<MenuGroup>

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

@@ -6,48 +6,32 @@
 
 	.edit-site-global-styles-variations_item-preview {
 		border-radius: $radius-block-ui;
-		// Shown in Windows 10 high contrast mode.
-		outline: 1px solid transparent;
+		outline: $border-width solid rgba($black, 0.15);
+		outline-offset: -$border-width;
 		position: relative;
 		// Add the same transition that block style variations and other buttons have.
-		transition: box-shadow 0.1s linear;
+		transition: outline 0.1s linear;
 		@include reduce-motion("transition");
 
-		&::after {
-			content: "";
-			position: absolute;
-			top: -$border-width;
-			left: -$border-width;
-			bottom: -$border-width;
-			right: -$border-width;
-			// Visually resembles the $radius-block-ui.
-			border-radius: $radius-block-ui + $border-width;
-			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
-			// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
-			border: $border-width solid transparent;
-			box-sizing: inherit;
-			// Add the same transition that block style variations and other buttons have.
-			transition: box-shadow 0.1s linear;
-			@include reduce-motion("transition");
-		}
-
-		.edit-site-global-styles-color-variations & {
-			padding: $grid-unit-10;
+		&.is-pill {
+			height: $button-size-next-default-40px;
+			border-radius: 100px;
+			overflow: hidden;
 		}
 	}
 
-	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview::after {
-		box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.4);
+	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
+		outline-color: rgba($black, 0.3);
 	}
 
 	&.is-active .edit-site-global-styles-variations_item-preview,
 	&:focus-visible .edit-site-global-styles-variations_item-preview {
-		box-shadow: inset 0 0 0 $border-width $white, 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
-		// Shown in Windows 10 high contrast mode.
-		outline-width: 3px;
+		outline-color: $gray-900;
+		outline-offset: $border-width;
+		outline-width: var(--wp-admin-border-width-focus);
+	}
 
-		&::after {
-			box-shadow: inset 0 0 0 1px $white;
-		}
+	&:focus-visible .edit-site-global-styles-variations_item-preview {
+		outline-color: var(--wp-admin-theme-color);
 	}
 }

package/src/components/global-styles/variations/variation.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -10,18 +10,19 @@ import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from '../global-styles-provider';
 import { unlock } from '../../../lock-unlock';
 
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
 );
 
-export default function Variation( { variation, children } ) {
+export default function Variation( { variation, children, isPill } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 	const context = useMemo(
@@ -69,12 +70,9 @@ export default function Variation( { variation, children } ) {
 	return (
 		<GlobalStylesContext.Provider value={ context }>
 			<div
-				className={ classnames(
-					'edit-site-global-styles-variations_item',
-					{
-						'is-active': isActive,
-					}
-				) }
+				className={ clsx( 'edit-site-global-styles-variations_item', {
+					'is-active': isActive,
+				} ) }
 				role="button"
 				onClick={ selectVariation }
 				onKeyDown={ selectOnEnter }
@@ -84,7 +82,12 @@ export default function Variation( { variation, children } ) {
 				onFocus={ () => setIsFocused( true ) }
 				onBlur={ () => setIsFocused( false ) }
 			>
-				<div className="edit-site-global-styles-variations_item-preview">
+				<div
+					className={ clsx(
+						'edit-site-global-styles-variations_item-preview',
+						{ 'is-pill': isPill }
+					) }
+				>
 					{ children( isFocused ) }
 				</div>
 			</div>

package/src/components/global-styles/variations/variations-color.js

@@ -1,18 +1,15 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalGrid as Grid,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { __experimentalVStack as VStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import Variation from './variation';
 import StylesPreviewColors from '../preview-colors';
 import { useColorVariations } from '../hooks';
 import Subtitle from '../subtitle';
+import Variation from './variation';
 
 export default function ColorVariations( { title, gap = 2 } ) {
 	const colorVariations = useColorVariations();
@@ -24,13 +21,13 @@ export default function ColorVariations( { title, gap = 2 } ) {
 	return (
 		<VStack spacing={ 3 }>
 			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
-			<Grid columns={ 3 } gap={ gap }>
+			<VStack spacing={ gap }>
 				{ colorVariations.map( ( variation, index ) => (
-					<Variation key={ index } variation={ variation }>
+					<Variation key={ index } variation={ variation } isPill>
 						{ () => <StylesPreviewColors /> }
 					</Variation>
 				) ) }
-			</Grid>
+			</VStack>
 		</VStack>
 	);
 }

package/src/components/{sidebar-edit-mode/global-styles-sidebar.js → global-styles-sidebar/index.js}

@@ -21,12 +21,12 @@ import {
 /**
  * Internal dependencies
  */
-import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI } from '../global-styles';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesMenuSlot } from '../global-styles/ui';
 import { unlock } from '../../lock-unlock';
 import { store as coreStore } from '@wordpress/core-data';
+import DefaultSidebar from './default-sidebar';
 
 const { interfaceStore } = unlock( editorPrivateApis );
 
@@ -136,7 +136,10 @@ export default function GlobalStylesSidebar() {
 			closeLabel={ __( 'Close Styles' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
-				<Flex className="edit-site-global-styles-sidebar__header">
+				<Flex
+					className="edit-site-global-styles-sidebar__header"
+					gap={ 1 }
+				>
 					<FlexBlock style={ { minWidth: 'min-content' } }>
 						<h2 className="edit-site-global-styles-sidebar__header-title">
 							{ __( 'Styles' ) }
@@ -151,6 +154,7 @@ export default function GlobalStylesSidebar() {
 							}
 							disabled={ shouldClearCanvasContainerView }
 							onClick={ toggleStyleBook }
+							size="compact"
 						/>
 					</FlexItem>
 					<FlexItem>
@@ -162,6 +166,7 @@ export default function GlobalStylesSidebar() {
 							isPressed={
 								isRevisionsOpened || isRevisionsStyleBookOpened
 							}
+							size="compact"
 						/>
 					</FlexItem>
 					<GlobalStylesMenuSlot />

package/src/components/{sidebar-edit-mode → global-styles-sidebar}/style.scss

@@ -38,14 +38,6 @@
 	margin: 0;
 }
 
-.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
-	margin-left: 0;
-}
-
-.edit-site-global-styles-sidebar__reset-button.components-button {
-	margin-left: auto;
-}
-
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
 	font-size: $default-font-size * 1.2;
 	font-weight: 500;
@@ -104,6 +96,3 @@
 	}
 }
 
-.edit-site-sidebar__panel {
-	margin-top: -1px;
-}

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

@@ -1,190 +1,51 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { __unstableMotion as motion } from '@wordpress/components';
-import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	DocumentBar,
-	PostSavedState,
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import SiteEditorMoreMenuItems from './more-menu';
+import SiteEditorMoreMenu from './more-menu';
+import { unlock } from '../../lock-unlock';
 import SaveButton from '../save-button';
-import DocumentTools from './document-tools';
-import { store as editSiteStore } from '../../store';
+import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 import {
 	getEditorCanvasContainerTitle,
 	useHasEditorCanvasContainer,
 } from '../editor-canvas-container';
-import { unlock } from '../../lock-unlock';
-import { FOCUSABLE_ENTITIES } from '../../utils/constants';
-import { isPreviewingTheme } from '../../utils/is-previewing-theme';
-
-const {
-	CollapsableBlockToolbar,
-	MoreMenu,
-	PostViewLink,
-	PreviewDropdown,
-	PinnedItems,
-	PostPublishButtonOrToggle,
-} = unlock( editorPrivateApis );
+import { store as editSiteStore } from '../../store';
 
-export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
-	const {
-		templateType,
-		isDistractionFree,
-		blockEditorMode,
-		showIconLabels,
-		editorCanvasView,
-		isFixedToolbar,
-		isPublishSidebarOpened,
-	} = useSelect( ( select ) => {
-		const { getEditedPostType } = select( editSiteStore );
-		const { __unstableGetEditorMode } = select( blockEditorStore );
-		const { get: getPreference } = select( preferencesStore );
-		const { getDeviceType } = select( editorStore );
+const { Header: EditorHeader } = unlock( editorPrivateApis );
 
+function Header( { setEntitiesSavedStatesCallback } ) {
+	const _isPreviewingTheme = isPreviewingTheme();
+	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
+	const { editorCanvasView } = useSelect( ( select ) => {
 		return {
-			deviceType: getDeviceType(),
-			templateType: getEditedPostType(),
-			blockEditorMode: __unstableGetEditorMode(),
-			showIconLabels: getPreference( 'core', 'showIconLabels' ),
 			editorCanvasView: unlock(
 				select( editSiteStore )
 			).getEditorCanvasContainerView(),
-			isDistractionFree: getPreference( 'core', 'distractionFree' ),
-			isFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
-			isPublishSidebarOpened:
-				select( editorStore ).isPublishSidebarOpened(),
 		};
 	}, [] );
 
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const showTopToolbar =
-		isLargeViewport && isFixedToolbar && blockEditorMode !== 'zoom-out';
-	const disableMotion = useReducedMotion();
-
-	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
-
-	const isFocusMode = FOCUSABLE_ENTITIES.includes( templateType );
-
-	const isZoomedOutView = blockEditorMode === 'zoom-out';
-
-	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
-		useState( true );
-
-	const toolbarVariants = {
-		isDistractionFree: { y: '-50px' },
-		isDistractionFreeHovering: { y: 0 },
-		view: { y: 0 },
-		edit: { y: 0 },
-	};
-
-	const toolbarTransition = {
-		type: 'tween',
-		duration: disableMotion ? 0 : 0.2,
-		ease: 'easeOut',
-	};
-
-	const _isPreviewingTheme = isPreviewingTheme();
 	return (
-		<div
-			className={ classnames( 'edit-site-header-edit-mode', {
-				'show-icon-labels': showIconLabels,
-				'show-block-toolbar': ! isBlockToolsCollapsed && showTopToolbar,
-			} ) }
+		<EditorHeader
+			setEntitiesSavedStatesCallback={ setEntitiesSavedStatesCallback }
+			customSaveButton={
+				_isPreviewingTheme && <SaveButton size="compact" />
+			}
+			forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
+			title={
+				! hasDefaultEditorCanvasView
+					? getEditorCanvasContainerTitle( editorCanvasView )
+					: undefined
+			}
 		>
-			{ hasDefaultEditorCanvasView && (
-				<motion.div
-					className="edit-site-header-edit-mode__start"
-					variants={ toolbarVariants }
-					transition={ toolbarTransition }
-				>
-					<DocumentTools
-						blockEditorMode={ blockEditorMode }
-						isDistractionFree={ isDistractionFree }
-					/>
-					{ showTopToolbar && (
-						<CollapsableBlockToolbar
-							isCollapsed={ isBlockToolsCollapsed }
-							onToggle={ setIsBlockToolsCollapsed }
-						/>
-					) }
-				</motion.div>
-			) }
-
-			{ ! isDistractionFree && (
-				<div className="edit-site-header-edit-mode__center">
-					{ ! hasDefaultEditorCanvasView ? (
-						getEditorCanvasContainerTitle( editorCanvasView )
-					) : (
-						<DocumentBar />
-					) }
-				</div>
-			) }
-
-			<div className="edit-site-header-edit-mode__end">
-				<motion.div
-					className="edit-site-header-edit-mode__actions"
-					variants={ toolbarVariants }
-					transition={ toolbarTransition }
-				>
-					{ isLargeViewport && (
-						<div
-							className={ classnames(
-								'edit-site-header-edit-mode__preview-options',
-								{ 'is-zoomed-out': isZoomedOutView }
-							) }
-						>
-							<PreviewDropdown
-								disabled={
-									isFocusMode || ! hasDefaultEditorCanvasView
-								}
-							/>
-						</div>
-					) }
-					<PostViewLink />
-					{
-						// TODO: For now we conditionally render the Save/Publish buttons based on
-						// some specific site editor extra handling. Examples are when we're previewing
-						// a theme, handling of global styles changes or when we're in 'view' mode,
-						// which opens the save panel in a Modal.
-					 }
-					{ ! _isPreviewingTheme && ! isPublishSidebarOpened && (
-						// This button isn't completely hidden by the publish sidebar.
-						// We can't hide the whole toolbar when the publish sidebar is open because
-						// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
-						// We track that DOM node to return focus to the PostPublishButtonOrToggle
-						// when the publish sidebar has been closed.
-						<PostSavedState />
-					) }
-					{ ! _isPreviewingTheme && (
-						<PostPublishButtonOrToggle
-							setEntitiesSavedStatesCallback={
-								setEntitiesSavedStatesCallback
-							}
-						/>
-					) }
-					{ _isPreviewingTheme && <SaveButton size="compact" /> }
-					{ ! isDistractionFree && <PinnedItems.Slot scope="core" /> }
-					<MoreMenu />
-					<SiteEditorMoreMenuItems />
-				</motion.div>
-			</div>
-		</div>
+			<SiteEditorMoreMenu />
+		</EditorHeader>
 	);
 }
+
+export default Header;