@wordpress/edit-site 5.28.3 → 5.29.0

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,7 +65,6 @@ export default function Layout() {
 	useCommands();
 	useEditModeCommands();
 	useCommonCommands();
-	useBlockCommands();
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 

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

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/save-button/index.js

@@ -22,6 +22,7 @@ export default function SaveButton( {
 	showTooltip = true,
 	defaultLabel,
 	icon,
+	size,
 	__next40pxDefaultSize = false,
 } ) {
 	const { isDirty, isSaving, isSaveViewOpen, previewingThemeName } =
@@ -119,7 +120,7 @@ export default function SaveButton( {
 			showTooltip={ showTooltip }
 			icon={ icon }
 			__next40pxDefaultSize={ __next40pxDefaultSize }
-			size="compact"
+			size={ size }
 		>
 			{ label }
 		</Button>

package/src/components/save-hub/style.scss

@@ -3,7 +3,7 @@
 	border-top: 1px solid $gray-800;
 	flex-shrink: 0;
 	margin: 0;
-	padding: $grid-unit-20 + $grid-unit-05 $canvas-padding;
+	padding: $grid-unit-20 $canvas-padding;
 }
 
 .edit-site-save-hub__button {

package/src/components/sidebar/index.js

@@ -12,8 +12,8 @@ import {
 	__experimentalNavigatorScreen as NavigatorScreen,
 } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -76,6 +76,7 @@ function SidebarScreens() {
 				<SidebarNavigationScreen
 					title={ __( 'Pages' ) }
 					content={ <DataViewsSidebarContent /> }
+					backPath="/page"
 				/>
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/page/:postId">

package/src/components/sidebar-button/style.scss

@@ -10,7 +10,7 @@
 	&:focus-visible:not(:disabled) {
 		box-shadow:
 			0 0 0 var(--wp-admin-border-width-focus)
-			var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+			var(--wp-admin-theme-color);
 		outline: 3px solid transparent;
 	}
 

package/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -41,7 +41,7 @@ export default function GlobalStylesSidebar() {
 		);
 		const canvasContainerView = getEditorCanvasContainerView();
 		const _isVisualEditorMode =
-			'visual' === select( editSiteStore ).getEditorMode();
+			'visual' === select( editorStore ).getEditorMode();
 		const _isEditCanvasMode = 'edit' === getCanvasMode();
 		const _showListViewByDefault = select( preferencesStore ).get(
 			'core',
@@ -132,13 +132,11 @@ export default function GlobalStylesSidebar() {
 			closeLabel={ __( 'Close Styles' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
-				<Flex
-					className="edit-site-global-styles-sidebar__header"
-					role="menubar"
-					aria-label={ __( 'Styles actions' ) }
-				>
+				<Flex className="edit-site-global-styles-sidebar__header">
 					<FlexBlock style={ { minWidth: 'min-content' } }>
-						<strong>{ __( 'Styles' ) }</strong>
+						<h2 className="edit-site-global-styles-sidebar__header-title">
+							{ __( 'Styles' ) }
+						</h2>
 					</FlexBlock>
 					<FlexItem>
 						<Button

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

@@ -34,6 +34,10 @@
 	}
 }
 
+.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__header-title {
+	margin: 0;
+}
+
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
 	margin-left: 0;
 }

package/src/components/sidebar-edit-mode/template-panel/hooks.js

@@ -36,7 +36,14 @@ function injectThemeAttributeInBlockTemplateContent(
 	return block;
 }
 
-function preparePatterns( patterns, template, currentThemeStylesheet ) {
+/**
+ * Filter all patterns and return only the ones that are compatible with the current template.
+ *
+ * @param {Array}  patterns An array of patterns.
+ * @param {Object} template The current template.
+ * @return {Array} Array of patterns that are compatible with the current template.
+ */
+function filterPatterns( patterns, template ) {
 	// Filter out duplicates.
 	const filterOutDuplicatesByName = ( currentItem, index, items ) =>
 		index === items.findIndex( ( item ) => currentItem.name === item.name );
@@ -45,30 +52,35 @@ function preparePatterns( patterns, template, currentThemeStylesheet ) {
 	const filterOutExcludedPatternSources = ( pattern ) =>
 		! EXCLUDED_PATTERN_SOURCES.includes( pattern.source );
 
-	// Filter only the patterns that are compatible with the current template.
+	// Looks for patterns that have the same template type as the current template,
+	// or have a block type that matches the current template area.
 	const filterCompatiblePatterns = ( pattern ) =>
-		pattern.templateTypes?.includes( template.slug );
+		pattern.templateTypes?.includes( template.slug ) ||
+		pattern.blockTypes?.includes( 'core/template-part/' + template.area );
+
+	return patterns.filter( ( pattern, index, items ) => {
+		return (
+			filterOutDuplicatesByName( pattern, index, items ) &&
+			filterOutExcludedPatternSources( pattern ) &&
+			filterCompatiblePatterns( pattern )
+		);
+	} );
+}
 
-	return patterns
-		.filter(
-			( pattern, index, items ) =>
-				filterOutExcludedPatternSources( pattern ) &&
-				filterOutDuplicatesByName( pattern, index, items ) &&
-				filterCompatiblePatterns( pattern )
-		)
-		.map( ( pattern ) => ( {
-			...pattern,
-			keywords: pattern.keywords || [],
-			type: PATTERN_TYPES.theme,
-			blocks: parse( pattern.content, {
-				__unstableSkipMigrationLogs: true,
-			} ).map( ( block ) =>
-				injectThemeAttributeInBlockTemplateContent(
-					block,
-					currentThemeStylesheet
-				)
-			),
-		} ) );
+function preparePatterns( patterns, template, currentThemeStylesheet ) {
+	return patterns.map( ( pattern ) => ( {
+		...pattern,
+		keywords: pattern.keywords || [],
+		type: PATTERN_TYPES.theme,
+		blocks: parse( pattern.content, {
+			__unstableSkipMigrationLogs: true,
+		} ).map( ( block ) =>
+			injectThemeAttributeInBlockTemplateContent(
+				block,
+				currentThemeStylesheet
+			)
+		),
+	} ) );
 }
 
 export function useAvailablePatterns( template ) {
@@ -92,8 +104,9 @@ export function useAvailablePatterns( template ) {
 			...( blockPatterns || [] ),
 			...( restBlockPatterns || [] ),
 		];
+		const filteredPatterns = filterPatterns( mergedPatterns, template );
 		return preparePatterns(
-			mergedPatterns,
+			filteredPatterns,
 			template,
 			currentThemeStylesheet
 		);