@wordpress/edit-site 5.27.2 → 5.28.1

package/src/components/global-styles/font-library-modal/style.scss

@@ -65,6 +65,19 @@
 	margin-top: -1px; /* To collapse the margin with the previous element */
 }
 
+.font-library-modal__font-variant_demo-image {
+	display: block;
+	height: $grid-unit-30;
+	width: auto;
+}
+
+.font-library-modal__font-variant_demo-text {
+	white-space: nowrap;
+	flex-shrink: 0;
+	transition: opacity 0.3s ease-in-out;
+	@include reduce-motion("transition");
+}
+
 .font-library-modal__font-variant {
 	border-bottom: 1px solid $gray-200;
 	padding-bottom: $grid-unit-20;
@@ -103,23 +116,6 @@ button.font-library-modal__upload-area {
 	}
 }
 
-.font-library-modal__font-variant_demo-wrapper {
-	white-space: nowrap;
-	overflow: hidden;
-	width: 100%;
-	position: relative;
-
-	&::after {
-		content: "";
-		position: absolute;
-		bottom: 0;
-		right: 0;
-		width: 30vw;
-		height: 100%;
-		background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-	}
-}
-
 .font-library__google-fonts-confirm {
 	display: flex;
 	justify-content: center;

package/src/components/global-styles/font-library-modal/tab-panel-layout.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useContext } from '@wordpress/element';
 import {
 	__experimentalText as Text,
 	__experimentalHeading as Heading,
@@ -12,6 +13,12 @@ import {
 	FlexBlock,
 } from '@wordpress/components';
 import { chevronLeft } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './context';
 
 function TabPanelLayout( {
 	title,
@@ -21,6 +28,8 @@ function TabPanelLayout( {
 	children,
 	footer,
 } ) {
+	const { setNotice } = useContext( FontLibraryContext );
+
 	return (
 		<div className="font-library-modal__tabpanel-layout">
 			<Spacer margin={ 4 } />
@@ -33,6 +42,7 @@ function TabPanelLayout( {
 								onClick={ handleBack }
 								icon={ chevronLeft }
 								size="small"
+								label={ __( 'Back' ) }
 							/>
 						) }
 						{ title && (
@@ -51,7 +61,7 @@ function TabPanelLayout( {
 							<Spacer margin={ 1 } />
 							<Notice
 								status={ notice.type }
-								onRemove={ notice.onRemove }
+								onRemove={ () => setNotice( null ) }
 							>
 								{ notice.message }
 							</Notice>

package/src/components/global-styles/font-library-modal/upload-fonts.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	DropZone,
@@ -30,11 +30,6 @@ const { ProgressBar } = unlock( componentsPrivateApis );
 function UploadFonts() {
 	const { installFont, notice, setNotice } = useContext( FontLibraryContext );
 	const [ isUploading, setIsUploading ] = useState( false );
-	const supportedFormats =
-		ALLOWED_FILE_EXTENSIONS.slice( 0, -1 )
-			.map( ( extension ) => `.${ extension }` )
-			.join( ', ' ) +
-		` ${ __( 'and' ) } .${ ALLOWED_FILE_EXTENSIONS.slice( -1 ) }`;
 
 	const handleDropZone = ( files ) => {
 		handleFilesUpload( files );
@@ -68,6 +63,12 @@ function UploadFonts() {
 		} );
 		if ( allowedFiles.length > 0 ) {
 			loadFiles( allowedFiles );
+		} else {
+			setNotice( {
+				type: 'error',
+				message: __( 'No fonts found to install.' ),
+			} );
+			setIsUploading( false );
 		}
 	};
 
@@ -192,19 +193,15 @@ function UploadFonts() {
 								className="font-library-modal__upload-area"
 								onClick={ openFileDialog }
 							>
-								<span>{ __( 'Upload font' ) }</span>
+								{ __( 'Upload font' ) }
 							</Button>
 						) }
 					/>
 				) }
 				<Spacer margin={ 2 } />
 				<Text className="font-library-modal__upload-area__text">
-					{ sprintf(
-						/* translators: %s: supported font formats: ex: .ttf, .woff and .woff2 */
-						__(
-							'Uploaded fonts appear in your library and can be used in your theme. Supported formats: %s.'
-						),
-						supportedFormats
+					{ __(
+						'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .tff, .otf, .woff, and .woff2.'
 					) }
 				</Text>
 			</VStack>

package/src/components/global-styles/font-library-modal/utils/index.js

@@ -161,7 +161,8 @@ export function makeFontFamilyFormData( fontFamily ) {
 
 export function makeFontFacesFormData( font ) {
 	if ( font?.fontFace ) {
-		const fontFacesFormData = font.fontFace.map( ( face, faceIndex ) => {
+		const fontFacesFormData = font.fontFace.map( ( item, faceIndex ) => {
+			const face = { ...item };
 			const formData = new FormData();
 			if ( face.file ) {
 				// Normalize to an array, since face.file may be a single file or an array of files.

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

@@ -64,7 +64,6 @@ const {
 	useGlobalSetting,
 	useSettingsForBlockElement,
 	useHasColorPanel,
-	useHasEffectsPanel,
 	useHasFiltersPanel,
 	useHasImageSettingsPanel,
 	useGlobalStyle,
@@ -72,7 +71,6 @@ const {
 	ColorPanel: StylesColorPanel,
 	TypographyPanel: StylesTypographyPanel,
 	DimensionsPanel: StylesDimensionsPanel,
-	EffectsPanel: StylesEffectsPanel,
 	FiltersPanel: StylesFiltersPanel,
 	ImageSettingsPanel,
 	AdvancedPanel: StylesAdvancedPanel,
@@ -124,7 +122,6 @@ function ScreenBlock( { name, variation } ) {
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	const hasEffectsPanel = useHasEffectsPanel( settings );
 	const hasFiltersPanel = useHasFiltersPanel( settings );
 	const hasImageSettingsPanel = useHasImageSettingsPanel(
 		name,
@@ -279,15 +276,6 @@ function ScreenBlock( { name, variation } ) {
 					settings={ settings }
 				/>
 			) }
-			{ hasEffectsPanel && (
-				<StylesEffectsPanel
-					inheritedValue={ inheritedStyleWithLayout }
-					value={ styleWithLayout }
-					onChange={ setStyle }
-					settings={ settings }
-					includeLayoutControls
-				/>
-			) }
 			{ hasFiltersPanel && (
 				<StylesFiltersPanel
 					inheritedValue={ inheritedStyleWithLayout }

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

@@ -36,7 +36,7 @@ function ChangesSummary( { revision, previousRevision } ) {
 			data-testid="global-styles-revision-changes"
 			className="edit-site-global-styles-screen-revisions__changes"
 		>
-			{ changes.join( ', ' ) }
+			{ changes.join( ', ' ) }.
 		</span>
 	);
 }

package/src/components/global-styles/screen-revisions/style.scss

@@ -41,6 +41,7 @@
 		// This border serves as a background color in Windows High Contrast mode.
 		border: 4px solid transparent;
 	}
+
 	&.is-selected {
 		border-radius: $radius-block-ui;
 
@@ -48,9 +49,26 @@
 		outline: 3px solid transparent;
 		outline-offset: -2px;
 
+		color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+
+		.edit-site-global-styles-screen-revisions__revision-button {
+			opacity: 1;
+		}
+
+		.edit-site-global-styles-screen-revisions__date {
+			color: var(--wp-admin-theme-color);
+		}
+
 		&::before {
 			background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 		}
+
+		.edit-site-global-styles-screen-revisions__changes,
+		.edit-site-global-styles-screen-revisions__meta,
+		.edit-site-global-styles-screen-revisions__applied-text {
+			color: $gray-900;
+		}
 	}
 
 	&::after {
@@ -81,17 +99,6 @@
 	}
 }
 
-.is-selected {
-	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-	background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-	.edit-site-global-styles-screen-revisions__revision-button {
-		opacity: 1;
-	}
-	.edit-site-global-styles-screen-revisions__date {
-		color: var(--wp-admin-theme-color);
-	}
-}
-
 .edit-site-global-styles-screen-revisions__apply-button.is-primary,
 .edit-site-global-styles-screen-revisions__applied-text {
 	align-self: flex-start;
@@ -99,10 +106,11 @@
 	margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-50;
 }
 
+.edit-site-global-styles-screen-revisions__changes,
+.edit-site-global-styles-screen-revisions__meta,
 .edit-site-global-styles-screen-revisions__applied-text {
-	color: $gray-600;
+	color: $gray-700;
 	font-size: 12px;
-	font-style: italic;
 }
 
 .edit-site-global-styles-screen-revisions__description {
@@ -119,12 +127,10 @@
 
 .edit-site-global-styles-screen-revisions__changes,
 .edit-site-global-styles-screen-revisions__meta {
-	color: $gray-600;
 	display: flex;
 	justify-content: start;
 	width: 100%;
 	align-items: flex-start;
-	font-size: 12px;
 	text-align: left;
 	img {
 		width: $grid-unit-20;

package/src/components/global-styles/screen-typography-element.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -67,9 +67,7 @@ function ScreenTypographyElement( { element } ) {
 					>
 						<ToggleGroupControlOption
 							value="heading"
-							/* translators: 'All' refers to selecting all heading levels 
-							and applying the same style to h1-h6. */
-							label={ __( 'All' ) }
+							label={ _x( 'All', 'heading levels' ) }
 						/>
 						<ToggleGroupControlOption
 							value="h1"

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

@@ -46,6 +46,10 @@
 	color: $gray-700;
 }
 
+.edit-site-global-styles-font-families__add-fonts {
+	justify-content: center;
+}
+
 .edit-site-global-styles-screen-colors {
 	margin: $grid-unit-20;
 

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { useDispatch, useRegistry } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { external } from '@wordpress/icons';
 import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
@@ -15,7 +15,7 @@ import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
 } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -33,25 +33,16 @@ import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 import CopyContentMenuItem from './copy-content-menu-item';
 import ModeSwitcher from '../mode-switcher';
-import { store as siteEditorStore } from '../../../store';
+import { store as editSiteStore } from '../../../store';
 
 export default function MoreMenu( { showIconLabels } ) {
-	const registry = useRegistry();
-
-	const { closeGeneralSidebar } = useDispatch( siteEditorStore );
-	const { setIsInserterOpened, setIsListViewOpened } =
-		useDispatch( editorStore );
 	const { openModal } = useDispatch( interfaceStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
+	const isBlockBasedTheme = useSelect( ( select ) => {
+		return select( coreStore ).getCurrentTheme().is_block_theme;
+	}, [] );
 
-	const toggleDistractionFree = () => {
-		registry.batch( () => {
-			setPreference( 'core', 'fixedToolbar', true );
-			setIsInserterOpened( false );
-			setIsListViewOpened( false );
-			closeGeneralSidebar();
-		} );
-	};
+	const { toggleDistractionFree } = useDispatch( editSiteStore );
 
 	const turnOffDistractionFree = () => {
 		setPreference( 'core', 'distractionFree', false );
@@ -86,9 +77,10 @@ export default function MoreMenu( { showIconLabels } ) {
 							<PreferenceToggleMenuItem
 								scope="core"
 								name="distractionFree"
-								onToggle={ toggleDistractionFree }
 								label={ __( 'Distraction free' ) }
 								info={ __( 'Write with calmness' ) }
+								handleToggling={ false }
+								onToggle={ toggleDistractionFree }
 								messageActivated={ __(
 									'Distraction free mode activated'
 								) }
@@ -120,7 +112,7 @@ export default function MoreMenu( { showIconLabels } ) {
 							fillProps={ { onClick: onClose } }
 						/>
 						<MenuGroup label={ __( 'Tools' ) }>
-							<SiteExport />
+							{ isBlockBasedTheme && <SiteExport /> }
 							<MenuItem
 								onClick={ () =>
 									openModal(

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

@@ -86,7 +86,13 @@ $header-toolbar-min-width: 335px;
 .edit-site-header-edit-mode__actions {
 	display: inline-flex;
 	align-items: center;
-	padding-right: $grid-unit-10;
+	flex-wrap: nowrap;
+	padding-right: $grid-unit-05;
+
+	@include break-small () {
+		padding-right: $grid-unit-10;
+	}
+
 	gap: $grid-unit-10;
 }
 
@@ -149,9 +155,9 @@ $header-toolbar-min-width: 335px;
 		&::before {
 			content: "";
 			width: $border-width;
-			margin-top: $grid-unit-15;
-			margin-bottom: $grid-unit-15;
+			height: $grid-unit-30;
 			background-color: $gray-300;
+			margin-top: $grid-unit-05;
 			margin-left: $grid-unit;
 		}
 
@@ -168,10 +174,36 @@ $header-toolbar-min-width: 335px;
 
 .has-fixed-toolbar {
 	.selected-block-tools-wrapper {
-		overflow-x: scroll;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		height: $header-height;
 
 		.block-editor-block-contextual-toolbar {
 			border-bottom: 0;
+			height: 100%;
+		}
+
+		// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
+		.block-editor-block-toolbar {
+			height: 100%;
+			// Push down so that buttons are centered vertically.
+			// It should be 14px (60px header height - 32px compact button height = 28 / 2),
+			// but there is a -1px top-margin down the stack that affects this.
+			padding-top: math.div($header-height - $button-size-compact, 2) + 1;
+
+			// Match the height of other buttons in the header toolbar.
+			.components-button:not(.block-editor-block-mover-button) {
+				height: $button-size-compact;
+			}
+		}
+
+		&::after {
+			content: "";
+			width: $border-width;
+			height: $grid-unit-30;
+			background-color: $gray-300;
+			margin-left: $grid-unit;
 		}
 
 		// Modified group borders.
@@ -182,9 +214,9 @@ $header-toolbar-min-width: 335px;
 			&::after {
 				content: "";
 				width: $border-width;
-				margin-top: $grid-unit-15;
-				margin-bottom: $grid-unit-15;
+				height: $grid-unit-30;
 				background-color: $gray-300;
+				margin-top: $grid-unit-05;
 				margin-left: $grid-unit;
 			}
 
@@ -195,6 +227,22 @@ $header-toolbar-min-width: 335px;
 			}
 		}
 
+		.block-editor-block-mover {
+			// Match the height of other buttons in the header toolbar.
+			&.is-horizontal .block-editor-block-mover-button {
+				height: $button-size-compact;
+				overflow: visible;
+			}
+
+			// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+			@include break-small() {
+				&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+					position: relative;
+					top: -10px;
+				}
+			}
+		}
+
 		&.is-collapsed {
 			display: none;
 		}

package/src/components/layout/style.scss

@@ -19,15 +19,10 @@
 	}
 
 	.edit-site-layout.is-full-canvas & {
-		padding-right: $grid-unit-20;
+		padding-right: 0;
 		border-radius: 0;
-		width: 100vw;
+		width: $header-height;
 		box-shadow: none;
-
-		@include break-medium {
-			width: $header-height;
-			padding-right: 0;
-		}
 	}
 }
 

package/src/components/page/style.scss

@@ -27,7 +27,6 @@
 .edit-site-page-content {
 	height: 100%;
 	display: flex;
-	overflow: auto;
 	flex-flow: column;
 	position: relative;
 	z-index: z-index(".edit-site-page-content");

package/src/components/page-pages/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -62,6 +67,9 @@ function useView( postType ) {
 			return {
 				...defaultView,
 				type: layout,
+				layout: {
+					...( DEFAULT_CONFIG_PER_VIEW_TYPE[ layout ] || {} ),
+				},
 			};
 		}
 		return defaultView;
@@ -161,32 +169,32 @@ function FeaturedImage( { item, viewType } ) {
 		canvas: 'edit',
 	} );
 	const hasMedia = !! item.featured_media;
+	const size =
+		viewType === LAYOUT_GRID
+			? [ 'large', 'full', 'medium', 'thumbnail' ]
+			: [ 'thumbnail', 'medium', 'large', 'full' ];
+	const media = hasMedia ? (
+		<Media
+			className="edit-site-page-pages__featured-image"
+			id={ item.featured_media }
+			size={ size }
+		/>
+	) : null;
+	if ( viewType === LAYOUT_LIST ) {
+		return media;
+	}
 	return (
-		<span
-			className={ {
+		<button
+			className={ classNames( 'page-pages-preview-field__button', {
 				'edit-site-page-pages__media-wrapper':
 					viewType === LAYOUT_TABLE,
-			} }
+			} ) }
+			type="button"
+			onClick={ onClick }
+			aria-label={ item.title?.rendered || __( '(no title)' ) }
 		>
-			<button
-				className="page-pages-preview-field__button"
-				type="button"
-				onClick={ onClick }
-				aria-label={ item.title?.rendered || __( '(no title)' ) }
-			>
-				{ hasMedia && (
-					<Media
-						className="edit-site-page-pages__featured-image"
-						id={ item.featured_media }
-						size={
-							viewType === LAYOUT_GRID
-								? [ 'large', 'full', 'medium', 'thumbnail' ]
-								: [ 'thumbnail', 'medium', 'large', 'full' ]
-						}
-					/>
-				) }
-			</button>
-		</span>
+			{ media }
+		</button>
 	);
 }
 
@@ -274,6 +282,7 @@ export default function PagePages() {
 					<FeaturedImage item={ item } viewType={ view.type } />
 				),
 				enableSorting: false,
+				width: '1%',
 			},
 			{
 				header: __( 'Title' ),
@@ -298,7 +307,7 @@ export default function PagePages() {
 							__( '(no title)' )
 					);
 				},
-				maxWidth: 400,
+				maxWidth: 300,
 				enableHiding: false,
 			},
 			{

package/src/components/page-pages/style.scss

@@ -1,30 +1,3 @@
-.edit-site-page-pages__media-wrapper {
-	width: $grid-unit-50;
-	height: $grid-unit-50;
-	display: block;
-	border-radius: $grid-unit-05;
-	position: relative;
-	background-color: $gray-100;
-	overflow: hidden;
-
-	.edit-site-page-pages__featured-image {
-		height: 100%;
-		object-fit: cover;
-		width: 100%;
-	}
-
-	&::after {
-		border-radius: 4px;
-		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-		content: "";
-		height: 100%;
-		left: 0;
-		position: absolute;
-		top: 0;
-		width: 100%;
-	}
-}
-
 .page-pages-preview-field__button {
 	box-shadow: none;
 	border: none;
@@ -42,4 +15,32 @@
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;
 	}
+
+	&.edit-site-page-pages__media-wrapper {
+		width: $grid-unit-40;
+		height: $grid-unit-40;
+		display: block;
+		border-radius: $grid-unit-05;
+		position: relative;
+		background-color: $gray-100;
+		overflow: hidden;
+		flex-grow: 0 !important;
+
+		.edit-site-page-pages__featured-image {
+			height: 100%;
+			object-fit: cover;
+			width: 100%;
+		}
+
+		&::after {
+			border-radius: 4px;
+			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+			content: "";
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+			width: 100%;
+		}
+	}
 }