@wordpress/edit-site 5.28.5 → 5.30.0

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

@@ -4,18 +4,23 @@
 import { __, _x } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
-import { external } from '@wordpress/icons';
-import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
+import { external, moreVertical } from '@wordpress/icons';
 import {
-	ActionItem,
-	MoreMenuDropdown,
-	store as interfaceStore,
-} from '@wordpress/interface';
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+	DropdownMenu,
+} from '@wordpress/components';
+import { ActionItem, store as interfaceStore } from '@wordpress/interface';
 import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
 } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -32,8 +37,9 @@ import ToolsMoreMenuGroup from '../tools-more-menu-group';
 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 editSiteStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
+
+const { ModeSwitcher } = unlock( editorPrivateApis );
 
 export default function MoreMenu( { showIconLabels } ) {
 	const { openModal } = useDispatch( interfaceStore );
@@ -42,7 +48,7 @@ export default function MoreMenu( { showIconLabels } ) {
 		return select( coreStore ).getCurrentTheme().is_block_theme;
 	}, [] );
 
-	const { toggleDistractionFree } = useDispatch( editSiteStore );
+	const { toggleDistractionFree } = useDispatch( editorStore );
 
 	const turnOffDistractionFree = () => {
 		setPreference( 'core', 'distractionFree', false );
@@ -50,10 +56,18 @@ export default function MoreMenu( { showIconLabels } ) {
 
 	return (
 		<>
-			<MoreMenuDropdown
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'Options' ) }
+				popoverProps={ {
+					placement: 'bottom-end',
+					className: 'more-menu-dropdown__content',
+				} }
 				toggleProps={ {
 					showTooltip: ! showIconLabels,
 					...( showIconLabels && { variant: 'tertiary' } ),
+					tooltipPosition: 'bottom',
+					size: 'compact',
 				} }
 			>
 				{ ( { onClose } ) => (
@@ -157,7 +171,7 @@ export default function MoreMenu( { showIconLabels } ) {
 						</MenuGroup>
 					</>
 				) }
-			</MoreMenuDropdown>
+			</DropdownMenu>
 			<KeyboardShortcutHelpModal />
 			<EditSitePreferencesModal />
 		</>

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

@@ -256,3 +256,7 @@ $header-toolbar-min-width: 335px;
 .edit-site-header-edit-mode__block-tools-toggle {
 	margin-left: 2px; // Allow focus ring to be fully visible
 }
+
+.components-popover.more-menu-dropdown__content {
+	z-index: z-index(".components-popover.more-menu__content");
+}

package/src/components/keyboard-shortcuts/edit-mode.js

@@ -15,7 +15,6 @@ import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
 import { STORE_NAME } from '../../store/constants';
 
 function KeyboardShortcutsEditMode() {
-	const { getEditorMode } = useSelect( editSiteStore );
 	const isBlockInspectorOpen = useSelect(
 		( select ) =>
 			select( interfaceStore ).getActiveComplementaryArea(
@@ -23,8 +22,6 @@ function KeyboardShortcutsEditMode() {
 			) === SIDEBAR_BLOCK,
 		[]
 	);
-	const { switchEditorMode, toggleDistractionFree } =
-		useDispatch( editSiteStore );
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
@@ -71,10 +68,6 @@ function KeyboardShortcutsEditMode() {
 		}
 	} );
 
-	useShortcut( 'core/edit-site/toggle-mode', () => {
-		switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
-	} );
-
 	useShortcut( 'core/edit-site/transform-heading-to-paragraph', ( event ) =>
 		handleTextLevelShortcut( event, 0 )
 	);
@@ -89,10 +82,6 @@ function KeyboardShortcutsEditMode() {
 		);
 	} );
 
-	useShortcut( 'core/edit-site/toggle-distraction-free', () => {
-		toggleDistractionFree();
-	} );
-
 	return null;
 }
 

package/src/components/keyboard-shortcuts/register.js

@@ -75,15 +75,6 @@ function KeyboardShortcutsRegister() {
 				},
 			],
 		} );
-		registerShortcut( {
-			name: 'core/edit-site/toggle-mode',
-			category: 'global',
-			description: __( 'Switch between visual editor and code editor.' ),
-			keyCombination: {
-				modifier: 'secondary',
-				character: 'm',
-			},
-		} );
 
 		registerShortcut( {
 			name: 'core/edit-site/transform-heading-to-paragraph',
@@ -106,16 +97,6 @@ function KeyboardShortcutsRegister() {
 				},
 			} );
 		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/toggle-distraction-free',
-			category: 'global',
-			description: __( 'Toggle distraction free mode.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: '\\',
-			},
-		} );
 	}, [ registerShortcut ] );
 
 	return null;

package/src/components/layout/index.js

@@ -28,7 +28,6 @@ import {
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	privateApis as blockEditorPrivateApis,
-	useBlockCommands,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
@@ -66,12 +65,12 @@ export default function Layout() {
 	useCommands();
 	useEditModeCommands();
 	useCommonCommands();
-	useBlockCommands();
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
 	const {
 		isDistractionFree,
+		isZoomOutMode,
 		hasFixedToolbar,
 		hasBlockSelected,
 		canvasMode,
@@ -98,6 +97,9 @@ export default function Layout() {
 				'core',
 				'distractionFree'
 			),
+			isZoomOutMode:
+				select( blockEditorStore ).__unstableGetEditorMode() ===
+				'zoom-out',
 			hasBlockSelected:
 				select( blockEditorStore ).getBlockSelectionStart(),
 		};
@@ -174,6 +176,7 @@ export default function Layout() {
 						'is-full-canvas': canvasMode === 'edit',
 						'has-fixed-toolbar': hasFixedToolbar,
 						'is-block-toolbar-visible': hasBlockSelected,
+						'is-zoom-out': isZoomOutMode,
 					}
 				) }
 			>

package/src/components/page-patterns/dataviews-pattern-actions.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { paramCase as kebabCase } from 'change-case';
+import { downloadZip } from 'client-zip';
 
 /**
  * WordPress dependencies
@@ -41,21 +42,51 @@ const { useHistory } = unlock( routerPrivateApis );
 const { CreatePatternModalContents, useDuplicatePatternProps } =
 	unlock( patternsPrivateApis );
 
-export const exportJSONaction = {
-	id: 'export-pattern',
-	label: __( 'Export as JSON' ),
-	isEligible: ( item ) => item.type === PATTERN_TYPES.user,
-	callback: ( [ item ] ) => {
-		const json = {
+function getJsonFromItem( item ) {
+	return JSON.stringify(
+		{
 			__file: item.type,
 			title: item.title || item.name,
 			content: item.patternPost.content.raw,
 			syncStatus: item.patternPost.wp_pattern_sync_status,
-		};
+		},
+		null,
+		2
+	);
+}
+
+export const exportJSONaction = {
+	id: 'export-pattern',
+	label: __( 'Export as JSON' ),
+	supportsBulk: true,
+	isEligible: ( item ) => item.type === PATTERN_TYPES.user,
+	callback: async ( items ) => {
+		if ( items.length === 1 ) {
+			return downloadBlob(
+				`${ kebabCase( items[ 0 ].title || items[ 0 ].name ) }.json`,
+				getJsonFromItem( items[ 0 ] ),
+				'application/json'
+			);
+		}
+		const nameCount = {};
+		const filesToZip = items.map( ( item ) => {
+			const name = kebabCase( item.title || item.name );
+			nameCount[ name ] = ( nameCount[ name ] || 0 ) + 1;
+			return {
+				name: `${
+					name +
+					( nameCount[ name ] > 1
+						? '-' + ( nameCount[ name ] - 1 )
+						: '' )
+				}.json`,
+				lastModified: new Date(),
+				input: getJsonFromItem( item ),
+			};
+		} );
 		return downloadBlob(
-			`${ kebabCase( item.title || item.name ) }.json`,
-			JSON.stringify( json, null, 2 ),
-			'application/json'
+			__( 'patterns-export' ) + '.zip',
+			await downloadZip( filesToZip ).blob(),
+			'application/zip'
 		);
 	},
 };

package/src/components/page-patterns/header.js

@@ -69,6 +69,7 @@ export default function PatternsHeader( {
 								__( 'Action menu for %s pattern category' ),
 								title
 							),
+							size: 'compact',
 						} }
 					>
 						{ ( { onClose } ) => (

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

@@ -391,7 +391,6 @@ export default function DataviewsPatterns() {
 	// Wrap everything in a block editor provider.
 	// This ensures 'styles' that are needed for the previews are synced
 	// from the site editor store to the block editor store.
-	// TODO: check if I add the provider in every preview like in templates...
 	return (
 		<ExperimentalBlockEditorProvider settings={ settings }>
 			<Page
@@ -414,7 +413,7 @@ export default function DataviewsPatterns() {
 					isLoading={ isResolving }
 					view={ view }
 					onChangeView={ onChangeView }
-					deferredRendering={ true }
+					deferredRendering
 					supportedLayouts={ [ LAYOUT_GRID ] }
 				/>
 			</Page>

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

@@ -1,70 +1,3 @@
-.edit-site-patterns {
-	background: #1e1e1e;
-	border-left: 1px solid $gray-800;
-	margin: $header-height 0 0;
-	border-radius: 0;
-	padding: 0;
-	overflow-x: auto;
-	min-height: 100%;
-
-	.components-base-control {
-		width: 100%;
-		@include break-medium {
-			width: auto;
-		}
-	}
-
-	.components-text {
-		color: $gray-600;
-	}
-
-	.components-heading {
-		color: $gray-200;
-	}
-
-	@include break-medium {
-		margin: 0;
-	}
-
-	.edit-site-patterns__search-block {
-		min-width: fit-content;
-		flex-grow: 1;
-	}
-
-	// TODO: Consider using the Theme component to automatically adapt to a dark background.
-	.edit-site-patterns__search {
-		--wp-components-color-foreground: #{$gray-200};
-
-		.components-input-control__container {
-			background: $gray-800;
-		}
-
-		svg {
-			fill: $gray-600;
-		}
-	}
-
-	.edit-site-patterns__sync-status-filter {
-		background: $gray-800;
-		border: none;
-		height: $button-size-next-default-40px;
-		min-width: max-content;
-		width: 100%;
-		max-width: 100%;
-
-		@include break-medium {
-			width: 300px;
-		}
-	}
-	.edit-site-patterns__sync-status-filter-option:not([aria-checked="true"]) {
-		color: $gray-600;
-	}
-	.edit-site-patterns__sync-status-filter-option:active {
-		background: $gray-700;
-		color: $gray-100;
-	}
-}
-
 .edit-site-patterns__header {
 	position: sticky;
 	top: 0;
@@ -77,97 +10,13 @@
 	}
 }
 
-.edit-site-patterns__section {
-	padding: $grid-unit-30 $grid-unit-40;
-	flex: 1;
-}
-
 .edit-site-patterns__section-header {
 	.screen-reader-shortcut:focus {
 		top: 0;
 	}
 }
 
-.edit-site-patterns__grid {
-	display: grid;
-	grid-template-columns: 1fr;
-	gap: $grid-unit-40;
-	margin-top: 0;
-	margin-bottom: 0;
-	@include break-large {
-		grid-template-columns: 1fr 1fr;
-	}
-	@include break-huge {
-		grid-template-columns: 1fr 1fr 1fr;
-	}
-	@include break-xhuge {
-		grid-template-columns: 1fr 1fr 1fr 1fr;
-	}
-	.edit-site-patterns__pattern {
-		break-inside: avoid-column;
-		display: flex;
-		flex-direction: column;
-		.edit-site-patterns__preview {
-			box-shadow: none;
-			border: none;
-			padding: 0;
-			background-color: unset;
-			box-sizing: border-box;
-			border-radius: 4px;
-			cursor: pointer;
-			overflow: hidden;
-
-			&:focus {
-				box-shadow: inset 0 0 0 0 $white, 0 0 0 2px var(--wp-admin-theme-color);
-				// Windows High Contrast mode will show this outline, but not the box-shadow.
-				outline: 2px solid transparent;
-			}
-
-			&.is-inactive {
-				cursor: default;
-			}
-			&.is-inactive:focus {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-800;
-				opacity: 0.8;
-			}
-		}
-
-		.edit-site-patterns__footer,
-		.edit-site-patterns__button {
-			color: $gray-600;
-		}
-
-		.edit-site-patterns__dropdown {
-			flex-shrink: 0;
-		}
-
-		&.is-placeholder .edit-site-patterns__preview {
-			min-height: $grid-unit-80;
-			color: $gray-600;
-			border: 1px dashed $gray-800;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			&:focus {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			}
-		}
-	}
-
-	.edit-site-patterns__preview {
-		flex: 0 1 auto;
-		margin-bottom: $grid-unit-15;
-	}
-}
-
-.edit-site-patterns__load-more {
-	align-self: center;
-}
-
 .edit-site-patterns__pattern-title {
-	color: $gray-200;
-
 	.is-link {
 		text-decoration: none;
 		color: $gray-200;
@@ -189,41 +38,10 @@
 	}
 }
 
-.edit-site-patterns__no-results {
-	color: $gray-600;
-}
-
 .edit-site-patterns__delete-modal {
 	width: $modal-width-small;
 }
 
-.edit-site-patterns__pagination {
-	padding: $grid-unit-30 $grid-unit-40;
-	border-top: 1px solid $gray-800;
-	background: $gray-900;
-	position: sticky;
-	bottom: 0;
-	color: $gray-100;
-	z-index: z-index(".edit-site-patterns__grid-pagination");
-	.components-button.is-tertiary {
-		background-color: $gray-800;
-		color: $gray-100;
-
-		&:disabled {
-			color: $gray-600;
-			background: none;
-		}
-
-		&:hover:not(:disabled) {
-			background-color: $gray-700;
-		}
-	}
-}
-
-/**
- * DataViews patterns styles.
- * TODO: when this becomes stable, consolidate styles with the above.
- */
 .edit-site-page-patterns-dataviews {
 	margin-top: 60px;
 

package/src/components/{list/added-by.js → page-templates-template-parts/hooks.js}

@@ -1,28 +1,19 @@
-// @ts-check
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { Icon, __experimentalHStack as HStack } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
 import {
 	commentAuthorAvatar as authorIcon,
 	layout as themeIcon,
 	plugins as pluginIcon,
 	globe as globeIcon,
 } from '@wordpress/icons';
-import { _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { TEMPLATE_POST_TYPE, TEMPLATE_ORIGINS } from '../../utils/constants';
+import { TEMPLATE_ORIGINS } from '../../utils/constants';
 
 /** @typedef {'wp_template'|'wp_template_part'} TemplateType */
 
@@ -107,59 +98,3 @@ export function useAddedBy( postType, postId ) {
 		[ postType, postId ]
 	);
 }
-
-/**
- * @param {Object} props
- * @param {string} props.imageUrl
- */
-export function AvatarImage( { imageUrl } ) {
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-
-	return (
-		<div
-			className={ classnames( 'edit-site-list-added-by__avatar', {
-				'is-loaded': isImageLoaded,
-			} ) }
-		>
-			<img
-				onLoad={ () => setIsImageLoaded( true ) }
-				alt=""
-				src={ imageUrl }
-			/>
-		</div>
-	);
-}
-
-/**
- * @param {Object}       props
- * @param {TemplateType} props.postType The template post type.
- * @param {number}       props.postId   The template post id.
- */
-export default function AddedBy( { postType, postId } ) {
-	const { text, icon, imageUrl, isCustomized } = useAddedBy(
-		postType,
-		postId
-	);
-
-	return (
-		<HStack alignment="left">
-			{ imageUrl ? (
-				<AvatarImage imageUrl={ imageUrl } />
-			) : (
-				<div className="edit-site-list-added-by__icon">
-					<Icon icon={ icon } />
-				</div>
-			) }
-			<span>
-				{ text }
-				{ isCustomized && (
-					<span className="edit-site-list-added-by__customized-info">
-						{ postType === TEMPLATE_POST_TYPE
-							? _x( 'Customized', 'template' )
-							: _x( 'Customized', 'template part' ) }
-					</span>
-				) }
-			</span>
-		</HStack>
-	);
-}

package/src/components/page-templates-template-parts/index.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import removeAccents from 'remove-accents';
 
 /**
@@ -34,7 +35,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import Page from '../page';
 import { default as Link, useLink } from '../routes/link';
 import AddNewTemplate from '../add-new-template';
-import { useAddedBy, AvatarImage } from '../list/added-by';
+import { useAddedBy } from './hooks';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
@@ -124,14 +125,30 @@ function Title( { item, viewType } ) {
 }
 
 function AuthorField( { item, viewType } ) {
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
 	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
 	const withIcon = viewType !== LAYOUT_LIST;
 
 	return (
 		<HStack alignment="left" spacing={ 1 }>
-			{ withIcon && imageUrl && <AvatarImage imageUrl={ imageUrl } /> }
+			{ withIcon && imageUrl && (
+				<div
+					className={ classnames(
+						'page-templates-author-field__avatar',
+						{
+							'is-loaded': isImageLoaded,
+						}
+					) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt=""
+						src={ imageUrl }
+					/>
+				</div>
+			) }
 			{ withIcon && ! imageUrl && (
-				<div className="edit-site-list-added-by__icon">
+				<div className="page-templates-author-field__icon">
 					<Icon icon={ icon } />
 				</div>
 			) }

package/src/components/page-templates-template-parts/style.scss

@@ -64,3 +64,51 @@
 		z-index: z-index(".edit-site-templates__dataviews-list-pagination");
 	}
 }
+
+
+.page-templates-author-field__avatar {
+	flex-shrink: 0;
+	overflow: hidden;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+	align-items: center;
+	justify-content: center;
+	display: flex;
+
+	img {
+		width: 20px;
+		height: 20px;
+		object-fit: cover;
+		opacity: 0;
+		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
+		border-radius: 100%;
+	}
+
+	&.is-loaded {
+		img {
+			opacity: 1;
+		}
+	}
+}
+
+.page-templates-author-field__icon {
+	display: flex;
+	flex-shrink: 0;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+
+	svg {
+		fill: currentColor;
+	}
+}
+
+.edit-site-list__rename-modal {
+	// The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher.
+	z-index: z-index(".edit-site-list__rename-modal");
+	.components-base-control {
+		@include break-medium() {
+			width: $grid-unit * 40;
+		}
+	}
+}

package/src/components/revisions/index.js

@@ -66,7 +66,7 @@ function Revisions( { userConfig, blocks } ) {
 		<EditorCanvasContainer
 			title={ __( 'Revisions' ) }
 			closeButtonLabel={ __( 'Close revisions' ) }
-			enableResizing={ true }
+			enableResizing
 		>
 			<Iframe
 				className="edit-site-revisions__iframe"