@wordpress/edit-site 6.13.0 → 6.13.1-next.a9f418477.0

package/src/components/global-styles/{preview-iframe.js → preview-wrapper.js}

@@ -1,27 +1,21 @@
 /**
  * WordPress dependencies
  */
-import {
-	__unstableIframe as Iframe,
-	__unstableEditorStyles as EditorStyles,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { __unstableMotion as motion } from '@wordpress/components';
 import {
 	useThrottle,
 	useReducedMotion,
 	useResizeObserver,
 } from '@wordpress/compose';
-import { useLayoutEffect, useState, useMemo } from '@wordpress/element';
+import { useLayoutEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 
-const { useGlobalStyle, useGlobalStylesOutput } = unlock(
-	blockEditorPrivateApis
-);
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 const normalizedWidth = 248;
 const normalizedHeight = 152;
@@ -33,7 +27,7 @@ const THROTTLE_OPTIONS = {
 	trailing: true,
 };
 
-export default function PreviewIframe( {
+export default function PreviewWrapper( {
 	children,
 	label,
 	isFocused,
@@ -41,7 +35,6 @@ export default function PreviewIframe( {
 } ) {
 	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
-	const [ styles ] = useGlobalStylesOutput();
 	const disableMotion = useReducedMotion();
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ containerResizeListener, { width } ] = useResizeObserver();
@@ -54,7 +47,7 @@ export default function PreviewIframe( {
 		THROTTLE_OPTIONS
 	);
 
-	// Must use useLayoutEffect to avoid a flash of the iframe at the wrong
+	// Must use useLayoutEffect to avoid a flash of the container  at the wrong
 	// size before the width is set.
 	useLayoutEffect( () => {
 		if ( width ) {
@@ -62,7 +55,7 @@ export default function PreviewIframe( {
 		}
 	}, [ width, setThrottledWidth ] );
 
-	// Must use useLayoutEffect to avoid a flash of the iframe at the wrong
+	// Must use useLayoutEffect to avoid a flash of the container at the wrong
 	// size before the width is set.
 	useLayoutEffect( () => {
 		const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;
@@ -89,24 +82,6 @@ export default function PreviewIframe( {
 	 */
 	const ratio = ratioState ? ratioState : fallbackRatio;
 
-	/*
-	 * Reset leaked styles from WP common.css and remove main content layout padding and border.
-	 * Add pointer cursor to the body to indicate the iframe is interactive,
-	 * similar to Typography variation previews.
-	 */
-	const editorStyles = useMemo( () => {
-		if ( styles ) {
-			return [
-				...styles,
-				{
-					css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;cursor: pointer;}',
-					isGlobalStyles: true,
-				},
-			];
-		}
-
-		return styles;
-	}, [ styles ] );
 	const isReady = !! width;
 
 	return (
@@ -115,8 +90,8 @@ export default function PreviewIframe( {
 				{ containerResizeListener }
 			</div>
 			{ isReady && (
-				<Iframe
-					className="edit-site-global-styles-preview__iframe"
+				<div
+					className="edit-site-global-styles-preview__wrapper"
 					style={ {
 						height: normalizedHeight * ratio,
 					} }
@@ -124,7 +99,6 @@ export default function PreviewIframe( {
 					onMouseLeave={ () => setIsHovered( false ) }
 					tabIndex={ -1 }
 				>
-					<EditorStyles styles={ editorStyles } />
 					<motion.div
 						style={ {
 							height: normalizedHeight * ratio,
@@ -145,7 +119,7 @@ export default function PreviewIframe( {
 							.concat( children ) // This makes sure children is always an array.
 							.map( ( child, key ) => child( { ratio, key } ) ) }
 					</motion.div>
-				</Iframe>
+				</div>
 			) }
 		</>
 	);

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

@@ -6,7 +6,7 @@
 	cursor: pointer;
 }
 
-.edit-site-global-styles-preview__iframe {
+.edit-site-global-styles-preview__wrapper {
 	max-width: 100%;
 	display: block;
 	width: 100%;
@@ -211,6 +211,10 @@
 	flex-direction: column;
 }
 
+.edit-site-global-styles-sidebar__navigator-screen .single-column {
+	grid-column: span 1;
+}
+
 .edit-site-global-styles-screen-root.edit-site-global-styles-screen-root,
 .edit-site-global-styles-screen-style-variations.edit-site-global-styles-screen-style-variations {
 	background: unset;

package/src/components/global-styles/typography-example.js

@@ -14,7 +14,9 @@ import { unlock } from '../../lock-unlock';
 import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
 import { getFontFamilies } from './utils';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { useGlobalStyle, GlobalStylesContext } = unlock(
+	blockEditorPrivateApis
+);
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 export default function PreviewTypography( { fontSize, variation } ) {
@@ -23,6 +25,9 @@ export default function PreviewTypography( { fontSize, variation } ) {
 	if ( variation ) {
 		config = mergeBaseAndUserConfigs( base, variation );
 	}
+
+	const [ textColor ] = useGlobalStyle( 'color.text' );
+
 	const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );
 	const bodyPreviewStyle = bodyFontFamilies
 		? getFamilyPreviewStyle( bodyFontFamilies )
@@ -31,6 +36,11 @@ export default function PreviewTypography( { fontSize, variation } ) {
 		? getFamilyPreviewStyle( headingFontFamilies )
 		: {};
 
+	if ( textColor ) {
+		bodyPreviewStyle.color = textColor;
+		headingPreviewStyle.color = textColor;
+	}
+
 	if ( fontSize ) {
 		bodyPreviewStyle.fontSize = fontSize;
 		headingPreviewStyle.fontSize = fontSize;
@@ -52,6 +62,7 @@ export default function PreviewTypography( { fontSize, variation } ) {
 			} }
 			style={ {
 				textAlign: 'center',
+				lineHeight: 1,
 			} }
 		>
 			<span style={ headingPreviewStyle }>

package/src/components/global-styles-sidebar/index.js

@@ -28,8 +28,8 @@ const { interfaceStore } = unlock( editorPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
 export default function GlobalStylesSidebar() {
-	const { params } = useLocation();
-	const { canvas = 'view', path } = params;
+	const { query } = useLocation();
+	const { canvas = 'view', name } = query;
 	const {
 		shouldClearCanvasContainerView,
 		isStyleBookOpened,
@@ -133,14 +133,14 @@ export default function GlobalStylesSidebar() {
 	const previousActiveAreaRef = useRef( null );
 
 	useEffect( () => {
-		if ( path?.startsWith( '/wp_global_styles' ) && canvas === 'edit' ) {
+		if ( name === 'styles' && canvas === 'edit' ) {
 			previousActiveAreaRef.current =
 				getActiveComplementaryArea( 'core' );
 			enableComplementaryArea( 'core', 'edit-site/global-styles' );
 		} else if ( previousActiveAreaRef.current ) {
 			enableComplementaryArea( 'core', previousActiveAreaRef.current );
 		}
-	}, [ path, enableComplementaryArea, canvas, getActiveComplementaryArea ] );
+	}, [ name, enableComplementaryArea, canvas, getActiveComplementaryArea ] );
 
 	return (
 		<DefaultSidebar

package/src/components/layout/index.js

@@ -10,6 +10,7 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 	__unstableUseNavigateRegions as useNavigateRegions,
+	SlotFillProvider,
 } from '@wordpress/components';
 import {
 	useReducedMotion,
@@ -17,21 +18,25 @@ import {
 	useResizeObserver,
 	usePrevious,
 } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { CommandMenu } from '@wordpress/commands';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
 	EditorSnackbars,
+	UnsavedChangesWarning,
+	ErrorBoundary,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { PluginArea } from '@wordpress/plugins';
+import { store as noticesStore } from '@wordpress/notices';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import ErrorBoundary from '../error-boundary';
 import { default as SiteHub, SiteHubMobile } from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import { unlock } from '../../lock-unlock';
@@ -44,14 +49,14 @@ import SavePanel from '../save-panel';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-const { NavigableRegion } = unlock( editorPrivateApis );
+const { NavigableRegion, GlobalStylesProvider } = unlock( editorPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 
-export default function Layout( { route } ) {
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+function Layout() {
+	const { query, name: routeKey, areas, widths } = useLocation();
+	const { canvas = 'view' } = query;
 	useCommands();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const toggleRef = useRef();
@@ -61,7 +66,6 @@ export default function Layout( { route } ) {
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const { name: routeKey, areas, widths } = route;
 	const animationRef = useMovingAnimation( {
 		triggerAnimationOnChange: routeKey + '-' + canvas,
 	} );
@@ -78,6 +82,7 @@ export default function Layout( { route } ) {
 
 	return (
 		<>
+			<UnsavedChangesWarning />
 			<CommandMenu />
 			{ canvas === 'view' && <SaveKeyboardShortcut /> }
 			<div
@@ -131,7 +136,9 @@ export default function Layout( { route } ) {
 											}
 											routeKey={ routeKey }
 										>
-											{ areas.sidebar }
+											<ErrorBoundary>
+												{ areas.sidebar }
+											</ErrorBoundary>
 										</SidebarContent>
 										<SaveHub />
 										<SavePanel />
@@ -155,7 +162,7 @@ export default function Layout( { route } ) {
 									/>
 								</SidebarContent>
 							) }
-							{ areas.mobile }
+							<ErrorBoundary>{ areas.mobile }</ErrorBoundary>
 						</div>
 					) }
 
@@ -168,7 +175,7 @@ export default function Layout( { route } ) {
 									maxWidth: widths?.content,
 								} }
 							>
-								{ areas.content }
+								<ErrorBoundary>{ areas.content }</ErrorBoundary>
 							</div>
 						) }
 
@@ -179,7 +186,7 @@ export default function Layout( { route } ) {
 								maxWidth: widths?.edit,
 							} }
 						>
-							{ areas.edit }
+							<ErrorBoundary>{ areas.edit }</ErrorBoundary>
 						</div>
 					) }
 
@@ -231,3 +238,28 @@ export default function Layout( { route } ) {
 		</>
 	);
 }
+
+export default function LayoutWithGlobalStylesProvider( props ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+	function onPluginAreaError( name ) {
+		createErrorNotice(
+			sprintf(
+				/* translators: %s: plugin name */
+				__(
+					'The "%s" plugin has encountered an error and cannot be rendered.'
+				),
+				name
+			)
+		);
+	}
+
+	return (
+		<SlotFillProvider>
+			<GlobalStylesProvider>
+				{ /** This needs to be within the SlotFillProvider */ }
+				<PluginArea onError={ onPluginAreaError } />
+				<Layout { ...props } />
+			</GlobalStylesProvider>
+		</SlotFillProvider>
+	);
+}

package/src/components/page-patterns/delete-category-menu-item.js

@@ -59,10 +59,9 @@ export default function DeleteCategoryMenuItem( { category, onClose } ) {
 			);
 
 			onClose?.();
-			history.push( {
-				postType: PATTERN_TYPES.user,
-				categoryId: PATTERN_DEFAULT_CATEGORY,
-			} );
+			history.navigate(
+				`/pattern?categoryId=${ PATTERN_DEFAULT_CATEGORY }`
+			);
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'

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

@@ -6,21 +6,16 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalHStack as HStack,
-	Button,
-	Tooltip,
-	FlexBlock,
-} from '@wordpress/components';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo, useId } from '@wordpress/element';
 import {
 	BlockPreview,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { Icon, lockSmall } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
 import { parse } from '@wordpress/blocks';
-import { decodeEntities } from '@wordpress/html-entities';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -32,10 +27,10 @@ import {
 	OPERATOR_IS,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
-import { useLink } from '../routes/link';
 import { useAddedBy } from '../page-templates/hooks';
 import { defaultGetTitle } from './search-items';
 
+const { useLink } = unlock( routerPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
@@ -59,11 +54,11 @@ function PreviewField( { item } ) {
 	const isUserPattern = item.type === PATTERN_TYPES.user;
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const { onClick } = useLink( {
-		postType: item.type,
-		postId: isUserPattern || isTemplatePart ? item.id : item.name,
-		canvas: 'edit',
-	} );
+	const { onClick } = useLink(
+		`/${ item.type }/${
+			isUserPattern || isTemplatePart ? item.id : item.name
+		}?canvas=edit`
+	);
 	const blocks = useMemo( () => {
 		return (
 			item.blocks ??
@@ -111,57 +106,6 @@ export const previewField = {
 	enableSorting: false,
 };
 
-function TitleField( { item } ) {
-	const isUserPattern = item.type === PATTERN_TYPES.user;
-	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const { onClick } = useLink( {
-		postType: item.type,
-		postId: isUserPattern || isTemplatePart ? item.id : item.name,
-		canvas: 'edit',
-	} );
-	const title = decodeEntities( defaultGetTitle( item ) );
-	return (
-		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
-			<FlexBlock className="edit-site-patterns__pattern-title">
-				{ item.type === PATTERN_TYPES.theme ? (
-					title
-				) : (
-					<Button
-						__next40pxDefaultSize
-						variant="link"
-						onClick={ onClick }
-						// Required for the grid's roving tab index system.
-						// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
-						tabIndex="-1"
-					>
-						{ title }
-					</Button>
-				) }
-			</FlexBlock>
-			{ item.type === PATTERN_TYPES.theme && (
-				<Tooltip
-					placement="top"
-					text={ __( 'This pattern cannot be edited.' ) }
-				>
-					<Icon
-						className="edit-site-patterns__pattern-lock-icon"
-						icon={ lockSmall }
-						size={ 24 }
-					/>
-				</Tooltip>
-			) }
-		</HStack>
-	);
-}
-
-export const titleField = {
-	label: __( 'Title' ),
-	id: 'title',
-	getValue: ( { item } ) => item.title?.raw || item.title,
-	render: TitleField,
-	enableHiding: false,
-};
-
 const SYNC_FILTERS = [
 	{
 		value: PATTERN_SYNC_TYPES.full,

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

@@ -9,6 +9,7 @@ import { usePrevious } from '@wordpress/compose';
 import { useEntityRecords } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { patternTitleField } from '@wordpress/fields';
 
 /**
  * Internal dependencies
@@ -29,23 +30,18 @@ import { useEditPostAction } from '../dataviews-actions';
 import {
 	patternStatusField,
 	previewField,
-	titleField,
 	templatePartAuthorField,
 } from './fields';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { usePostActions } = unlock( editorPrivateApis );
-const { useLocation } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		layout: {
-			primaryField: 'title',
 			styles: {
-				preview: {
-					width: '1%',
-				},
 				author: {
 					width: '1%',
 				},
@@ -54,8 +50,6 @@ const defaultLayouts = {
 	},
 	[ LAYOUT_GRID ]: {
 		layout: {
-			mediaField: 'preview',
-			primaryField: 'title',
 			badgeFields: [ 'sync-status' ],
 		},
 	},
@@ -65,24 +59,26 @@ const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 20,
-	layout: defaultLayouts[ LAYOUT_GRID ].layout,
-	fields: [ 'title', 'sync-status' ],
+	titleField: 'title',
+	mediaField: 'preview',
+	fields: [ 'sync-status' ],
 	filters: [],
+	...defaultLayouts[ LAYOUT_GRID ],
 };
 
 export default function DataviewsPatterns() {
 	const {
-		params: { postType, categoryId: categoryIdFromURL },
+		query: { postType = 'wp_block', categoryId: categoryIdFromURL },
 	} = useLocation();
-	const type = postType || PATTERN_TYPES.user;
+	const history = useHistory();
 	const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY;
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const previousCategoryId = usePrevious( categoryId );
-	const previousPostType = usePrevious( type );
+	const previousPostType = usePrevious( postType );
 	const viewSyncStatus = view.filters?.find(
 		( { field } ) => field === 'sync-status'
 	)?.value;
-	const { patterns, isResolving } = usePatterns( type, categoryId, {
+	const { patterns, isResolving } = usePatterns( postType, categoryId, {
 		search: view.search,
 		syncStatus: viewSyncStatus,
 	} );
@@ -106,11 +102,11 @@ export default function DataviewsPatterns() {
 	}, [ records ] );
 
 	const fields = useMemo( () => {
-		const _fields = [ previewField, titleField ];
+		const _fields = [ previewField, patternTitleField ];
 
-		if ( type === PATTERN_TYPES.user ) {
+		if ( postType === PATTERN_TYPES.user ) {
 			_fields.push( patternStatusField );
-		} else if ( type === TEMPLATE_PART_POST_TYPE ) {
+		} else if ( postType === TEMPLATE_PART_POST_TYPE ) {
 			_fields.push( {
 				...templatePartAuthorField,
 				elements: authors,
@@ -118,24 +114,27 @@ export default function DataviewsPatterns() {
 		}
 
 		return _fields;
-	}, [ type, authors ] );
+	}, [ postType, authors ] );
 
 	// Reset the page number when the category changes.
 	useEffect( () => {
-		if ( previousCategoryId !== categoryId || previousPostType !== type ) {
+		if (
+			previousCategoryId !== categoryId ||
+			previousPostType !== postType
+		) {
 			setView( ( prevView ) => ( { ...prevView, page: 1 } ) );
 		}
-	}, [ categoryId, previousCategoryId, previousPostType, type ] );
+	}, [ categoryId, previousCategoryId, previousPostType, postType ] );
 	const { data, paginationInfo } = useMemo( () => {
 		// Search is managed server-side as well as filters for patterns.
 		// However, the author filter in template parts is done client-side.
 		const viewWithoutFilters = { ...view };
 		delete viewWithoutFilters.search;
-		if ( type !== TEMPLATE_PART_POST_TYPE ) {
+		if ( postType !== TEMPLATE_PART_POST_TYPE ) {
 			viewWithoutFilters.filters = [];
 		}
 		return filterSortAndPaginate( patterns, viewWithoutFilters, fields );
-	}, [ patterns, view, fields, type ] );
+	}, [ patterns, view, fields, postType ] );
 
 	const dataWithPermissions = useAugmentPatternsWithPermissions( data );
 
@@ -150,11 +149,11 @@ export default function DataviewsPatterns() {
 	const editAction = useEditPostAction();
 
 	const actions = useMemo( () => {
-		if ( type === TEMPLATE_PART_POST_TYPE ) {
+		if ( postType === TEMPLATE_PART_POST_TYPE ) {
 			return [ editAction, ...templatePartActions ].filter( Boolean );
 		}
 		return [ editAction, ...patternActions ].filter( Boolean );
-	}, [ editAction, type, templatePartActions, patternActions ] );
+	}, [ editAction, postType, templatePartActions, patternActions ] );
 	const id = useId();
 	const settings = usePatternSettings();
 	// Wrap everything in a block editor provider.
@@ -169,7 +168,7 @@ export default function DataviewsPatterns() {
 			>
 				<PatternsHeader
 					categoryId={ categoryId }
-					type={ type }
+					type={ postType }
 					titleId={ `${ id }-title` }
 					descriptionId={ `${ id }-description` }
 				/>
@@ -181,6 +180,21 @@ export default function DataviewsPatterns() {
 					data={ dataWithPermissions || EMPTY_ARRAY }
 					getItemId={ ( item ) => item.name ?? item.id }
 					isLoading={ isResolving }
+					isItemClickable={ ( item ) =>
+						item.type !== PATTERN_TYPES.theme
+					}
+					onClickItem={ ( item ) => {
+						history.navigate(
+							`/${ item.type }/${
+								[
+									PATTERN_TYPES.user,
+									TEMPLATE_PART_POST_TYPE,
+								].includes( item.type )
+									? item.id
+									: item.name
+							}?canvas=edit`
+						);
+					} }
 					view={ view }
 					onChangeView={ setView }
 					defaultLayouts={ defaultLayouts }

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

@@ -71,34 +71,6 @@
 	}
 }
 
-.edit-site-patterns__pattern-title {
-	display: block;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	color: inherit;
-
-	.is-link {
-		text-decoration: none;
-		color: $gray-200;
-
-		&:hover,
-		&:focus {
-			color: $white;
-		}
-	}
-
-	.edit-site-patterns__pattern-icon {
-		border-radius: $grid-unit-05;
-		background: var(--wp-block-synced-color);
-		fill: $white;
-	}
-
-	.edit-site-patterns__pattern-lock-icon {
-		fill: currentcolor;
-	}
-}
-
 .edit-site-page-patterns-dataviews {
 	.dataviews-view-grid__badge-fields {
 		.dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {