@wordpress/edit-site 5.28.2 → 5.29.0

package/src/components/layout/router.js

@@ -23,13 +23,21 @@ const { useLocation } = unlock( routerPrivateApis );
 export default function useLayoutAreas() {
 	const isSiteEditorLoading = useIsSiteEditorLoading();
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom } = params ?? {};
+	const { postType, postId, path, layout, isCustom, canvas } = params ?? {};
+
+	// Note: Since "sidebar" is not yet supported here,
+	// returning undefined from "mobile" means show the sidebar.
+
 	// Regular page
 	if ( path === '/page' ) {
 		return {
 			areas: {
 				content: undefined,
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
+				mobile:
+					canvas === 'edit' ? (
+						<Editor isLoading={ isSiteEditorLoading } />
+					) : undefined,
 			},
 			widths: {
 				content: undefined,
@@ -63,6 +71,10 @@ export default function useLayoutAreas() {
 		return {
 			areas: {
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
+				mobile:
+					canvas === 'edit' ? (
+						<Editor isLoading={ isSiteEditorLoading } />
+					) : undefined,
 			},
 		};
 	}
@@ -79,6 +91,11 @@ export default function useLayoutAreas() {
 				preview: isListLayout && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
+				mobile: (
+					<PageTemplatesTemplateParts
+						postType={ TEMPLATE_POST_TYPE }
+					/>
+				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -98,6 +115,11 @@ export default function useLayoutAreas() {
 				preview: isListLayout && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
+				mobile: (
+					<PageTemplatesTemplateParts
+						postType={ TEMPLATE_PART_POST_TYPE }
+					/>
+				),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -110,12 +132,19 @@ export default function useLayoutAreas() {
 		return {
 			areas: {
 				content: <PagePatterns />,
+				mobile: <PagePatterns />,
 			},
 		};
 	}
 
 	// Fallback shows the home page preview
 	return {
-		areas: { preview: <Editor isLoading={ isSiteEditorLoading } /> },
+		areas: {
+			preview: <Editor isLoading={ isSiteEditorLoading } />,
+			mobile:
+				canvas === 'edit' ? (
+					<Editor isLoading={ isSiteEditorLoading } />
+				) : undefined,
+		},
 	};
 }

package/src/components/layout/style.scss

@@ -83,6 +83,12 @@
 	flex-direction: column;
 }
 
+.edit-site-layout__mobile {
+	position: relative;
+	width: 100%;
+	z-index: z-index(".edit-site-layout__canvas-container");
+}
+
 .edit-site-layout__canvas-container {
 	position: relative;
 	flex-grow: 1;
@@ -147,6 +153,7 @@
 }
 
 // This shouldn't be necessary (we should have a way to say that a skeletton is relative
+.edit-site-layout__mobile .interface-interface-skeleton,
 .edit-site-layout__canvas .interface-interface-skeleton,
 .edit-site-template-pages-preview .interface-interface-skeleton {
 	position: relative !important;

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,42 +38,17 @@
 	}
 }
 
-.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;
-		}
+.edit-site-page-patterns-dataviews {
+	margin-top: 60px;
 
-		&:hover:not(:disabled) {
-			background-color: $gray-700;
-		}
+	@include break-medium {
+		margin-top: 0;
 	}
-}
 
-/**
- * DataViews patterns styles.
- * TODO: when this becomes stable, consolidate styles with the above.
- */
-.edit-site-page-patterns-dataviews {
 	.page-patterns-preview-field {
 		display: flex;
 		flex-direction: column;
@@ -283,6 +107,10 @@
 		text-overflow: ellipsis;
 		color: inherit;
 	}
+
+	.dataviews-pagination {
+		z-index: z-index(".edit-site-patterns__dataviews-list-pagination");
+	}
 }
 
 .dataviews-action-modal__duplicate-pattern {

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

@@ -111,6 +111,7 @@ const selectTemplatePartsAsPatterns = createSelector(
 const selectThemePatterns = createSelector(
 	( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
+		const { getIsResolving } = select( coreStore );
 		const settings = getSettings();
 		const blockPatterns =
 			settings.__experimentalAdditionalBlockPatterns ??
@@ -136,19 +137,23 @@ const selectThemePatterns = createSelector(
 					__unstableSkipMigrationLogs: true,
 				} ),
 			} ) );
-
-		return { patterns, isResolving: false };
+		return { patterns, isResolving: getIsResolving( 'getBlockPatterns' ) };
 	},
 	( select ) => [
 		select( coreStore ).getBlockPatterns(),
+		select( coreStore ).getIsResolving( 'getBlockPatterns' ),
 		unlock( select( editSiteStore ) ).getSettings(),
 	]
 );
 
 const selectPatterns = createSelector(
 	( select, categoryId, syncStatus, search = '' ) => {
-		const { patterns: themePatterns } = selectThemePatterns( select );
-		const { patterns: userPatterns } = selectUserPatterns( select );
+		const {
+			patterns: themePatterns,
+			isResolving: isResolvingThemePatterns,
+		} = selectThemePatterns( select );
+		const { patterns: userPatterns, isResolving: isResolvingUserPatterns } =
+			selectUserPatterns( select );
 
 		let patterns = [
 			...( themePatterns || [] ),
@@ -176,7 +181,10 @@ const selectPatterns = createSelector(
 				hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
 			} );
 		}
-		return { patterns, isResolving: false };
+		return {
+			patterns,
+			isResolving: isResolvingThemePatterns || isResolvingUserPatterns,
+		};
 	},
 	( select ) => [
 		selectThemePatterns( select ),

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

@@ -429,6 +429,7 @@ export default function PageTemplatesTemplateParts( { postType } ) {
 
 	return (
 		<Page
+			className="edit-site-page-template-template-parts-dataviews"
 			title={
 				postType === TEMPLATE_POST_TYPE
 					? __( 'Templates' )

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

@@ -58,3 +58,9 @@
 .page-templates-description {
 	white-space: normal;
 }
+
+.edit-site-page-template-template-parts-dataviews {
+	.dataviews-pagination {
+		z-index: z-index(".edit-site-templates__dataviews-list-pagination");
+	}
+}

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,6 +12,7 @@ import {
 	__experimentalNavigatorScreen as NavigatorScreen,
 } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useViewportMatch } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -52,6 +53,7 @@ function SidebarScreenWrapper( { className, ...props } ) {
 
 function SidebarScreens() {
 	useSyncPathWithURL();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
 	return (
 		<>
@@ -74,6 +76,7 @@ function SidebarScreens() {
 				<SidebarNavigationScreen
 					title={ __( 'Pages' ) }
 					content={ <DataViewsSidebarContent /> }
+					backPath="/page"
 				/>
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/page/:postId">
@@ -82,9 +85,11 @@ function SidebarScreens() {
 			<SidebarScreenWrapper path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
 			</SidebarScreenWrapper>
-			<SidebarScreenWrapper path="/patterns">
-				<SidebarNavigationScreenPatterns />
-			</SidebarScreenWrapper>
+			{ ! isMobileViewport && (
+				<SidebarScreenWrapper path="/patterns">
+					<SidebarNavigationScreenPatterns />
+				</SidebarScreenWrapper>
+			) }
 			<SidebarScreenWrapper path="/:postType(wp_template|wp_template_part)/all">
 				<SidebarNavigationScreenTemplatesBrowse />
 			</SidebarScreenWrapper>

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
 		);