@wordpress/edit-site 5.24.1 → 5.25.0

package/src/components/global-styles/screen-revisions/test/get-revision-changes.js

@@ -0,0 +1,191 @@
+/**
+ * Internal dependencies
+ */
+import getRevisionChanges from '../get-revision-changes';
+
+describe( 'getRevisionChanges', () => {
+	const revision = {
+		id: 10,
+		styles: {
+			typography: {
+				fontSize: 'var(--wp--preset--font-size--potato)',
+				fontStyle: 'normal',
+				fontWeight: '600',
+				lineHeight: '1.85',
+				fontFamily: 'var(--wp--preset--font-family--asparagus)',
+			},
+			spacing: {
+				padding: {
+					top: '36px',
+					right: '89px',
+					bottom: '133px',
+					left: 'var(--wp--preset--spacing--20)',
+				},
+				blockGap: '114px',
+			},
+			elements: {
+				heading: {
+					typography: {
+						letterSpacing: '37px',
+					},
+				},
+				caption: {
+					color: {
+						text: 'var(--wp--preset--color--pineapple)',
+					},
+				},
+			},
+			color: {
+				text: 'var(--wp--preset--color--tomato)',
+			},
+			blocks: {
+				'core/paragraph': {
+					color: {
+						text: '#000000',
+					},
+				},
+			},
+		},
+		settings: {
+			color: {
+				palette: {
+					theme: [
+						{
+							slug: 'one',
+							color: 'pink',
+						},
+					],
+				},
+			},
+		},
+	};
+	const previousRevision = {
+		id: 9,
+		styles: {
+			typography: {
+				fontSize: 'var(--wp--preset--font-size--fungus)',
+				fontStyle: 'normal',
+				fontWeight: '600',
+				lineHeight: '1.85',
+				fontFamily: 'var(--wp--preset--font-family--grapes)',
+			},
+			spacing: {
+				padding: {
+					top: '36px',
+					right: '89px',
+					bottom: '133px',
+					left: 'var(--wp--preset--spacing--20)',
+				},
+				blockGap: '114px',
+			},
+			elements: {
+				heading: {
+					typography: {
+						letterSpacing: '37px',
+					},
+				},
+				caption: {
+					typography: {
+						fontSize: '1.11rem',
+						fontStyle: 'normal',
+						fontWeight: '600',
+					},
+				},
+				link: {
+					typography: {
+						lineHeight: 2,
+						textDecoration: 'line-through',
+					},
+					color: {
+						text: 'var(--wp--preset--color--egg)',
+					},
+				},
+			},
+			color: {
+				text: 'var(--wp--preset--color--tomato)',
+				background: 'var(--wp--preset--color--pumpkin)',
+			},
+			blocks: {
+				'core/paragraph': {
+					color: {
+						text: '#fff',
+					},
+				},
+			},
+		},
+		settings: {
+			color: {
+				palette: {
+					theme: [
+						{
+							slug: 'one',
+							color: 'blue',
+						},
+					],
+				},
+			},
+		},
+	};
+	const blockNames = {
+		'core/paragraph': 'Paragraph',
+	};
+	it( 'returns a list of changes and caches them', () => {
+		const resultA = getRevisionChanges(
+			revision,
+			previousRevision,
+			blockNames
+		);
+		expect( resultA ).toEqual( [
+			'Colors',
+			'Typography',
+			'Paragraph block',
+			'Caption element',
+			'Link element',
+			'Color settings',
+		] );
+
+		const resultB = getRevisionChanges(
+			revision,
+			previousRevision,
+			blockNames
+		);
+
+		expect( resultA ).toBe( resultB );
+	} );
+
+	it( 'skips unknown and unchanged keys', () => {
+		const result = getRevisionChanges(
+			{
+				styles: {
+					frogs: {
+						legs: 'green',
+					},
+					typography: {
+						fontSize: '1rem',
+					},
+					settings: {
+						'': {
+							'': 'foo',
+						},
+					},
+				},
+			},
+			{
+				styles: {
+					frogs: {
+						legs: 'yellow',
+					},
+					typography: {
+						fontSize: '1rem',
+					},
+					settings: {
+						'': {
+							'': 'bar',
+						},
+					},
+				},
+			}
+		);
+		expect( result ).toEqual( [] );
+	} );
+} );

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

@@ -14,6 +14,7 @@ import { _x, __ } from '@wordpress/i18n';
 import { listView, plus, chevronUpDown } from '@wordpress/icons';
 import { Button, ToolbarItem } from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -39,18 +40,13 @@ export default function DocumentTools( {
 	const inserterButton = useRef();
 	const { isInserterOpen, isListViewOpen, listViewShortcut, isVisualMode } =
 		useSelect( ( select ) => {
-			const {
-				__experimentalGetPreviewDeviceType,
-				isInserterOpened,
-				isListViewOpened,
-				getEditorMode,
-			} = select( editSiteStore );
+			const { isInserterOpened, isListViewOpened, getEditorMode } =
+				select( editSiteStore );
 			const { getShortcutRepresentation } = select(
 				keyboardShortcutsStore
 			);
 
 			return {
-				deviceType: __experimentalGetPreviewDeviceType(),
 				isInserterOpen: isInserterOpened(),
 				isListViewOpen: isListViewOpened(),
 				listViewShortcut: getShortcutRepresentation(
@@ -60,12 +56,10 @@ export default function DocumentTools( {
 			};
 		}, [] );
 
-	const {
-		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
-		setIsInserterOpened,
-		setIsListViewOpened,
-	} = useDispatch( editSiteStore );
+	const { setIsInserterOpened, setIsListViewOpened } =
+		useDispatch( editSiteStore );
 	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { setDeviceType } = useDispatch( editorStore );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
@@ -130,6 +124,7 @@ export default function DocumentTools( {
 						label={ showIconLabels ? shortLabel : longLabel }
 						showTooltip={ ! showIconLabels }
 						aria-expanded={ isInserterOpen }
+						size="compact"
 					/>
 				) }
 				{ isLargeViewport && (
@@ -142,17 +137,20 @@ export default function DocumentTools( {
 									showIconLabels ? 'tertiary' : undefined
 								}
 								disabled={ ! isVisualMode }
+								size="compact"
 							/>
 						) }
 						<ToolbarItem
 							as={ UndoButton }
 							showTooltip={ ! showIconLabels }
 							variant={ showIconLabels ? 'tertiary' : undefined }
+							size="compact"
 						/>
 						<ToolbarItem
 							as={ RedoButton }
 							showTooltip={ ! showIconLabels }
 							variant={ showIconLabels ? 'tertiary' : undefined }
+							size="compact"
 						/>
 						{ ! isDistractionFree && (
 							<ToolbarItem
@@ -171,6 +169,7 @@ export default function DocumentTools( {
 									showIconLabels ? 'tertiary' : undefined
 								}
 								aria-expanded={ isListViewOpen }
+								size="compact"
 							/>
 						) }
 						{ isZoomedOutViewExperimentEnabled &&
@@ -184,13 +183,14 @@ export default function DocumentTools( {
 									/* translators: button label text should, if possible, be under 16 characters. */
 									label={ __( 'Zoom-out View' ) }
 									onClick={ () => {
-										setPreviewDeviceType( 'Desktop' );
+										setDeviceType( 'Desktop' );
 										__unstableSetEditorMode(
 											isZoomedOutView
 												? 'edit'
 												: 'zoom-out'
 										);
 									} }
+									size="compact"
 								/>
 							) }
 					</>

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

@@ -7,33 +7,32 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useViewportMatch, useReducedMotion } from '@wordpress/compose';
-import { store as coreStore } from '@wordpress/core-data';
 import {
-	__experimentalPreviewOptions as PreviewOptions,
-	privateApis as blockEditorPrivateApis,
+	BlockToolbar,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { PinnedItems } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
-import { external, next, previous } from '@wordpress/icons';
+import { next, previous } from '@wordpress/icons';
 import {
 	Button,
 	__unstableMotion as motion,
-	MenuGroup,
-	MenuItem,
 	Popover,
-	VisuallyHidden,
 } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	DocumentBar,
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import MoreMenu from './more-menu';
 import SaveButton from '../save-button';
-import DocumentActions from './document-actions';
 import DocumentTools from './document-tools';
 import { store as editSiteStore } from '../../store';
 import {
@@ -43,40 +42,30 @@ import {
 import { unlock } from '../../lock-unlock';
 import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
-const { BlockContextualToolbar } = unlock( blockEditorPrivateApis );
+const { PreviewDropdown } = unlock( editorPrivateApis );
 
 export default function HeaderEditMode( { setListViewToggleElement } ) {
 	const {
-		deviceType,
 		templateType,
 		isDistractionFree,
 		blockEditorMode,
 		blockSelectionStart,
-		homeUrl,
 		showIconLabels,
 		editorCanvasView,
 		hasFixedToolbar,
 		isZoomOutMode,
 	} = useSelect( ( select ) => {
-		const { __experimentalGetPreviewDeviceType, getEditedPostType } =
-			select( editSiteStore );
+		const { getEditedPostType } = select( editSiteStore );
 		const { getBlockSelectionStart, __unstableGetEditorMode } =
 			select( blockEditorStore );
-
-		const postType = getEditedPostType();
-
-		const {
-			getUnstableBase, // Site index.
-		} = select( coreStore );
-
 		const { get: getPreference } = select( preferencesStore );
+		const { getDeviceType } = select( editorStore );
 
 		return {
-			deviceType: __experimentalGetPreviewDeviceType(),
-			templateType: postType,
+			deviceType: getDeviceType(),
+			templateType: getEditedPostType(),
 			blockEditorMode: __unstableGetEditorMode(),
 			blockSelectionStart: getBlockSelectionStart(),
-			homeUrl: getUnstableBase()?.home,
 			showIconLabels: getPreference(
 				editSiteStore.name,
 				'showIconLabels'
@@ -99,9 +88,6 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isTopToolbar = ! isZoomOutMode && hasFixedToolbar && isLargeViewport;
 	const blockToolbarRef = useRef();
-
-	const { __experimentalSetPreviewDeviceType: setPreviewDeviceType } =
-		useDispatch( editSiteStore );
 	const disableMotion = useReducedMotion();
 
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
@@ -163,7 +149,7 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 									}
 								) }
 							>
-								<BlockContextualToolbar isFixed />
+								<BlockToolbar hideDragHandle />
 							</div>
 							<Popover.Slot
 								ref={ blockToolbarRef }
@@ -205,7 +191,7 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 					{ ! hasDefaultEditorCanvasView ? (
 						getEditorCanvasContainerTitle( editorCanvasView )
 					) : (
-						<DocumentActions />
+						<DocumentBar />
 					) }
 				</div>
 			) }
@@ -216,41 +202,21 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 					variants={ toolbarVariants }
 					transition={ toolbarTransition }
 				>
-					<div
-						className={ classnames(
-							'edit-site-header-edit-mode__preview-options',
-							{ 'is-zoomed-out': isZoomedOutView }
-						) }
-					>
-						<PreviewOptions
-							deviceType={ deviceType }
-							setDeviceType={ setPreviewDeviceType }
-							label={ __( 'View' ) }
-							isEnabled={
-								! isFocusMode && hasDefaultEditorCanvasView
-							}
-							showIconLabels={ showIconLabels }
-						>
-							{ ( { onClose } ) => (
-								<MenuGroup>
-									<MenuItem
-										href={ homeUrl }
-										target="_blank"
-										icon={ external }
-										onClick={ onClose }
-									>
-										{ __( 'View site' ) }
-										<VisuallyHidden as="span">
-											{
-												/* translators: accessibility text */
-												__( '(opens in a new tab)' )
-											}
-										</VisuallyHidden>
-									</MenuItem>
-								</MenuGroup>
+					{ isLargeViewport && (
+						<div
+							className={ classnames(
+								'edit-site-header-edit-mode__preview-options',
+								{ 'is-zoomed-out': isZoomedOutView }
 							) }
-						</PreviewOptions>
-					</div>
+						>
+							<PreviewDropdown
+								showIconLabels={ showIconLabels }
+								disabled={
+									isFocusMode || ! hasDefaultEditorCanvasView
+								}
+							/>
+						</div>
+					) }
 					<SaveButton />
 					{ ! isDistractionFree && (
 						<PinnedItems.Slot scope="core/edit-site" />

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch, useRegistry } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { external } from '@wordpress/icons';
 import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
@@ -36,14 +36,6 @@ import { store as siteEditorStore } from '../../../store';
 
 export default function MoreMenu( { showIconLabels } ) {
 	const registry = useRegistry();
-	const isDistractionFree = useSelect(
-		( select ) =>
-			select( preferencesStore ).get(
-				'core/edit-site',
-				'distractionFree'
-			),
-		[]
-	);
 
 	const { setIsInserterOpened, setIsListViewOpened, closeGeneralSidebar } =
 		useDispatch( siteEditorStore );
@@ -59,6 +51,10 @@ export default function MoreMenu( { showIconLabels } ) {
 		} );
 	};
 
+	const turnOffDistractionFree = () => {
+		setPreference( 'core/edit-site', 'distractionFree', false );
+	};
+
 	return (
 		<>
 			<MoreMenuDropdown
@@ -73,7 +69,7 @@ export default function MoreMenu( { showIconLabels } ) {
 							<PreferenceToggleMenuItem
 								scope="core/edit-site"
 								name="fixedToolbar"
-								disabled={ isDistractionFree }
+								onToggle={ turnOffDistractionFree }
 								label={ __( 'Top toolbar' ) }
 								info={ __(
 									'Access all block and document tools in a single place'
@@ -85,18 +81,6 @@ export default function MoreMenu( { showIconLabels } ) {
 									'Top toolbar deactivated'
 								) }
 							/>
-							<PreferenceToggleMenuItem
-								scope="core/edit-site"
-								name="focusMode"
-								label={ __( 'Spotlight mode' ) }
-								info={ __( 'Focus on one block at a time' ) }
-								messageActivated={ __(
-									'Spotlight mode activated'
-								) }
-								messageDeactivated={ __(
-									'Spotlight mode deactivated'
-								) }
-							/>
 							<PreferenceToggleMenuItem
 								scope="core/edit-site"
 								name="distractionFree"
@@ -113,6 +97,18 @@ export default function MoreMenu( { showIconLabels } ) {
 									'\\'
 								) }
 							/>
+							<PreferenceToggleMenuItem
+								scope="core/edit-site"
+								name="focusMode"
+								label={ __( 'Spotlight mode' ) }
+								info={ __( 'Focus on one block at a time' ) }
+								messageActivated={ __(
+									'Spotlight mode activated'
+								) }
+								messageDeactivated={ __(
+									'Spotlight mode deactivated'
+								) }
+							/>
 						</MenuGroup>
 						<ModeSwitcher />
 						<ActionItem.Slot

package/src/components/header-edit-mode/style.scss

@@ -25,7 +25,9 @@ $header-toolbar-min-width: 335px;
 		// is visible on toolbar buttons.
 		height: 100%;
 		// Allow focus ring to be fully visible on furthest right button.
-		padding-right: 2px;
+		@include break-medium() {
+			padding-right: 2px;
+		}
 	}
 
 	.edit-site-header-edit-mode__end {
@@ -38,7 +40,7 @@ $header-toolbar-min-width: 335px;
 		align-items: center;
 		height: 100%;
 		flex-grow: 1;
-		margin: 0 $grid-unit-10;
+		margin: 0 $grid-unit-20;
 		justify-content: center;
 		// Flex items will, by default, refuse to shrink below a minimum
 		// intrinsic width. In order to shrink this flexbox item, and
@@ -47,18 +49,16 @@ $header-toolbar-min-width: 335px;
 		min-width: 0;
 	}
 
-	.block-editor-block-contextual-toolbar.is-fixed {
-		border: none;
-	}
 }
 
 .edit-site-header-edit-mode__toolbar {
 	display: flex;
 	align-items: center;
-	padding-left: $grid-unit-10;
+	padding-left: $grid-unit-20;
+	gap: $grid-unit-10;
 
-	@include break-small() {
-		padding-left: $grid-unit-30;
+	@include break-medium() {
+		padding-left: $grid-unit-50 * 0.5;
 	}
 
 	@include break-wide() {
@@ -66,12 +66,6 @@ $header-toolbar-min-width: 335px;
 	}
 
 	.edit-site-header-edit-mode__inserter-toggle {
-		margin-right: $grid-unit-10;
-		min-width: $grid-unit-40;
-		width: $grid-unit-40;
-		height: $grid-unit-40;
-		padding: 0;
-
 		svg {
 			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
 			@include reduce-motion("transition");
@@ -92,17 +86,8 @@ $header-toolbar-min-width: 335px;
 .edit-site-header-edit-mode__actions {
 	display: inline-flex;
 	align-items: center;
-	padding-right: $grid-unit-05;
-
-	@include break-small () {
-		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
-	}
-
-	gap: $grid-unit-05;
-
-	@include break-small() {
-		gap: $grid-unit-10;
-	}
+	padding-right: $grid-unit-10;
+	gap: $grid-unit-10;
 }
 
 .edit-site-header-edit-mode__preview-options {
@@ -122,9 +107,12 @@ $header-toolbar-min-width: 335px;
 	// here to the original button styles
 	.edit-site-header-edit-mode__toolbar > .components-button.has-icon,
 	.edit-site-header-edit-mode__toolbar > .components-dropdown > .components-button.has-icon {
-		height: $button-size;
-		min-width: $button-size;
-		padding: 6px;
+		// @todo: override toolbar group inherited paddings from components/block-tools/style.scss.
+		// This is best fixed by making the mover control area a proper single toolbar group.
+		// It needs specificity due to style inherited from .components-accessible-toolbar .components-button.has-icon.has-icon.
+		height: $button-size-compact;
+		min-width: $button-size-compact;
+		padding: 4px;
 
 		&.is-pressed {
 			background: $gray-900;
@@ -132,7 +120,7 @@ $header-toolbar-min-width: 335px;
 
 		&:focus:not(:disabled) {
 			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
-			outline: 1px solid transparent;
+			outline: $border-width solid transparent;
 		}
 
 		&::before {
@@ -141,11 +129,10 @@ $header-toolbar-min-width: 335px;
 	}
 
 	.edit-site-header-edit-mode__toolbar > .edit-site-header-edit-mode__inserter-toggle.has-icon {
-		margin-right: $grid-unit-10;
 		// Special dimensions for this button.
-		min-width: 32px;
-		width: 32px;
-		height: 32px;
+		min-width: $button-size-compact;
+		width: $button-size-compact;
+		height: $button-size-compact;
 		padding: 0;
 	}
 
@@ -201,12 +188,50 @@ $header-toolbar-min-width: 335px;
 	.edit-site-header-edit-mode__document-tools .edit-site-header-edit-mode__toolbar > * + * {
 		margin-left: $grid-unit-10;
 	}
+
+	.block-editor-block-mover {
+		border-left: none;
+
+		&::before {
+			content: "";
+			width: $border-width;
+			margin-top: $grid-unit + $grid-unit-05;
+			margin-bottom: $grid-unit + $grid-unit-05;
+			background-color: $gray-300;
+			margin-left: $grid-unit;
+		}
+	}
 }
 
 .has-fixed-toolbar {
 	.selected-block-tools-wrapper {
 		overflow-x: scroll;
 
+		.block-editor-block-contextual-toolbar {
+			border-bottom: 0;
+		}
+
+		// Modified group borders
+		.components-toolbar-group,
+		.components-toolbar {
+			border-right: none;
+
+			&::after {
+				content: "";
+				width: $border-width;
+				margin-top: $grid-unit + $grid-unit-05;
+				margin-bottom: $grid-unit + $grid-unit-05;
+				background-color: $gray-300;
+				margin-left: $grid-unit;
+			}
+
+			& .components-toolbar-group.components-toolbar-group {
+				&::after {
+					display: none;
+				}
+			}
+		}
+
 		&.is-collapsed {
 			display: none;
 		}