@wordpress/edit-site 6.6.1 → 6.7.0

package/src/components/global-styles/typeset-button.js

@@ -23,14 +23,20 @@ import { getFontFamilies } from './utils';
 import { NavigationButtonAsItem } from './navigation-button';
 import Subtitle from './subtitle';
 import { unlock } from '../../lock-unlock';
-import { filterObjectByProperties } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import {
+	filterObjectByProperties,
+	useCurrentMergeThemeStyleVariationsWithUserConfig,
+} from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 function TypesetButton() {
-	const { base } = useContext( GlobalStylesContext );
-	const { user: userConfig } = useContext( GlobalStylesContext );
+	const propertiesToFilter = [ 'typography' ];
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
+	const hasTypographyVariations = typographyVariations?.length > 1;
+	const { base, user: userConfig } = useContext( GlobalStylesContext );
 	const config = mergeBaseAndUserConfigs( base, userConfig );
 	const allFontFamilies = getFontFamilies( config );
 	const hasFonts =
@@ -63,6 +69,7 @@ function TypesetButton() {
 	}, [ allFontFamilies, userTypographyConfig, variations ] );
 
 	return (
+		hasTypographyVariations &&
 		hasFonts && (
 			<VStack spacing={ 2 }>
 				<HStack justify="space-between">

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

@@ -1,11 +1,10 @@
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
 	// To round the outline in Windows 10 high contrast mode.
-	border-radius: $radius-block-ui;
 	cursor: pointer;
 
 	.edit-site-global-styles-variations_item-preview {
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 		outline: $border-width solid rgba($black, 0.1);
 		outline-offset: -$border-width;
 		overflow: hidden;

package/src/components/layout/index.js

@@ -81,7 +81,6 @@ export default function Layout( { route } ) {
 	} );
 	const disableMotion = useReducedMotion();
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
-	const [ fullResizer ] = useResizeObserver();
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
@@ -113,7 +112,6 @@ export default function Layout( { route } ) {
 			<CommandMenu />
 			<KeyboardShortcutsRegister />
 			<KeyboardShortcutsGlobal />
-			{ fullResizer }
 			<div
 				{ ...navigateRegionsProps }
 				ref={ navigateRegionsProps.ref }

package/src/components/layout/style.scss

@@ -120,7 +120,7 @@
 			overflow: hidden;
 
 			.edit-site-layout:not(.is-full-canvas) & {
-				border-radius: $radius-block-ui * 4;
+				border-radius: $radius-large;
 			}
 		}
 	}
@@ -200,7 +200,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 		right: 9px;
 		bottom: 9px;
 		left: 9px;
-		border-radius: $radius-block-ui + $border-width + $border-width;
+		border-radius: $radius-medium;
 		box-shadow: none;
 	}
 
@@ -259,25 +259,3 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	padding-left: 16px;
 	padding-right: 16px;
 }
-
-.edit-site-layout.is-full-canvas {
-	.edit-site-layout__view-mode-toggle.components-button {
-		&:focus-visible,
-		&:focus {
-
-			box-shadow: none;
-			outline: none;
-			outline-offset: 0;
-
-			.edit-site-site-icon svg {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9);
-				outline: 3px solid #0000;
-				height: 40px;
-				width: 40px;
-				padding: 2px;
-				border-radius: 2px;
-			}
-
-		}
-	}
-}

package/src/components/page/style.scss

@@ -1,11 +1,15 @@
 .edit-site-page {
 	color: $gray-800;
 	background: $white;
-	height: 100%;
+	height: calc(100% - #{$header-height});
 	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
 	container: edit-site-page / inline-size;
 	transition: width ease-out 0.2s;
 	@include reduce-motion("transition");
+
+	@include break-medium() {
+		height: 100%;
+	}
 }
 
 .edit-site-page-header {

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

@@ -126,13 +126,15 @@ function TitleField( { item } ) {
 			<Flex
 				as="div"
 				gap={ 0 }
-				justify="left"
+				justify="flex-start"
 				className="edit-site-patterns__pattern-title"
 			>
 				{ item.type === PATTERN_TYPES.theme ? (
 					title
 				) : (
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="link"
 						onClick={ onClick }
 						// Required for the grid's roving tab index system.

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

@@ -11,11 +11,6 @@
 	.dataviews-view-table & {
 		width: 96px;
 		flex-grow: 0;
-		border-radius: 2px;
-
-		.page-patterns-preview-field__button {
-			border-radius: 2px;
-		}
 	}
 
 	.page-patterns-preview-field__button {
@@ -110,10 +105,6 @@
 }
 
 .edit-site-page-patterns-dataviews {
-	.dataviews-pagination {
-		z-index: z-index(".edit-site-patterns__dataviews-list-pagination");
-	}
-
 	.dataviews-view-grid__badge-fields {
 		.dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
 			background: rgba(var(--wp-block-synced-color--rgb), 0.04);
@@ -135,8 +126,8 @@
 	.components-form-token-field__suggestions-list:not(:empty) {
 		position: absolute;
 		border: $border-width solid var(--wp-admin-theme-color);
-		border-bottom-left-radius: $radius-block-ui;
-		border-bottom-right-radius: $radius-block-ui;
+		border-bottom-left-radius: $radius-small;
+		border-bottom-right-radius: $radius-small;
 		box-shadow: 0 0 0.5px 0.5px var(--wp-admin-theme-color);
 		box-sizing: border-box;
 		z-index: 1;

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

@@ -36,7 +36,6 @@
 	}
 
 	.dataviews-view-table & {
-		border-radius: $radius-block-ui;
 		position: relative;
 		width: 120px;
 		max-height: 160px;
@@ -49,7 +48,7 @@
 			width: 100%;
 			height: 100%;
 			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-			border-radius: $radius-block-ui;
+			border-radius: $radius-medium;
 		}
 	}
 }

package/src/components/pagination/index.js

@@ -11,7 +11,7 @@ import {
 	__experimentalText as Text,
 	Button,
 } from '@wordpress/components';
-import { __, _x, _n, sprintf } from '@wordpress/i18n';
+import { __, _x, _n, sprintf, isRTL } from '@wordpress/i18n';
 import { previous, chevronLeft, chevronRight, next } from '@wordpress/icons';
 
 export default function Pagination( {
@@ -50,7 +50,7 @@ export default function Pagination( {
 					accessibleWhenDisabled
 					disabled={ disabled || currentPage === 1 }
 					label={ __( 'First page' ) }
-					icon={ previous }
+					icon={ isRTL() ? next : previous }
 					size="compact"
 				/>
 				<Button
@@ -59,7 +59,7 @@ export default function Pagination( {
 					accessibleWhenDisabled
 					disabled={ disabled || currentPage === 1 }
 					label={ __( 'Previous page' ) }
-					icon={ chevronLeft }
+					icon={ isRTL() ? chevronRight : chevronLeft }
 					size="compact"
 				/>
 			</HStack>
@@ -78,7 +78,7 @@ export default function Pagination( {
 					accessibleWhenDisabled
 					disabled={ disabled || currentPage === numPages }
 					label={ __( 'Next page' ) }
-					icon={ chevronRight }
+					icon={ isRTL() ? chevronLeft : chevronRight }
 					size="compact"
 				/>
 				<Button
@@ -87,7 +87,7 @@ export default function Pagination( {
 					accessibleWhenDisabled
 					disabled={ disabled || currentPage === numPages }
 					label={ __( 'Last page' ) }
-					icon={ next }
+					icon={ isRTL() ? previous : next }
 					size="compact"
 				/>
 			</HStack>

package/src/components/post-list/style.scss

@@ -68,7 +68,7 @@
 	background: $gray-100;
 	color: $gray-700;
 	padding: 0 $grid-unit-05;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	font-size: 12px;
 	font-weight: 400;
 	flex-shrink: 0;

package/src/components/save-panel/index.js

@@ -150,6 +150,8 @@ export default function SavePanel() {
 				} ) }
 			>
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					variant="secondary"
 					className="edit-site-editor__toggle-save-panel-button"
 					onClick={ () => setIsSaveViewOpened( true ) }

package/src/components/sidebar-button/index.js

@@ -11,6 +11,8 @@ import { Button } from '@wordpress/components';
 export default function SidebarButton( props ) {
 	return (
 		<Button
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			{ ...props }
 			className={ clsx( 'edit-site-sidebar-button', props.className ) }
 		/>

package/src/components/sidebar-dataviews/add-new-view.js

@@ -88,6 +88,8 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 				/>
 				<HStack justify="right">
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="tertiary"
 						onClick={ () => {
 							setIsAdding( false );
@@ -97,6 +99,8 @@ function AddNewItemModalContent( { type, setIsAdding } ) {
 					</Button>
 
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="primary"
 						type="submit"
 						aria-disabled={ ! title || isSaving }

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

@@ -8,7 +8,7 @@
 }
 
 .edit-site-sidebar-dataviews-dataview-item {
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	padding-right: $grid-unit-10;
 
 	.edit-site-sidebar-dataviews-dataview-item__dropdown-menu {

package/src/components/sidebar-navigation-item/style.scss

@@ -4,7 +4,6 @@
 	padding: $grid-unit-10 6px $grid-unit-10 $grid-unit-20;
 	border: none;
 	min-height: $grid-unit-50;
-	border-radius: $radius-block-ui;
 
 	&:hover,
 	&:focus,

package/src/components/sidebar-navigation-screen/style.scss

@@ -146,7 +146,6 @@
 	.components-input-control__input {
 		color: $gray-200 !important;
 		background: $gray-800 !important;
-		border-radius: $radius-block-ui;
 	}
 	.components-input-control__backdrop {
 		border: 4px !important;

package/src/components/site-hub/index.js

@@ -36,15 +36,12 @@ const SiteHub = memo(
 		const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {
 			const { getSettings } = unlock( select( editSiteStore ) );
 
-			const {
-				getSite,
-				getUnstableBase, // Site index.
-			} = select( coreStore );
-			const _site = getSite();
+			const { getEntityRecord } = select( coreStore );
+			const _site = getEntityRecord( 'root', 'site' );
 			return {
 				dashboardLink:
 					getSettings().__experimentalDashboardLink || 'index.php',
-				homeUrl: getUnstableBase()?.home,
+				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
 				siteTitle:
 					! _site?.title && !! _site?.url
 						? filterURLForDisplay( _site?.url )
@@ -65,6 +62,8 @@ const SiteHub = memo(
 						) }
 					>
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							ref={ ref }
 							href={ dashboardLink }
 							label={ __( 'Go to the Dashboard' ) }
@@ -81,6 +80,8 @@ const SiteHub = memo(
 					<HStack>
 						<div className="edit-site-site-hub__title">
 							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								variant="link"
 								href={ homeUrl }
 								target="_blank"
@@ -100,6 +101,8 @@ const SiteHub = memo(
 							className="edit-site-site-hub__actions"
 						>
 							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								className="edit-site-site-hub_toggle-command-center"
 								icon={ search }
 								onClick={ () => openCommandCenter() }
@@ -122,13 +125,10 @@ export const SiteHubMobile = memo(
 		const { navigate } = useContext( SidebarNavigationContext );
 
 		const { homeUrl, siteTitle } = useSelect( ( select ) => {
-			const {
-				getSite,
-				getUnstableBase, // Site index.
-			} = select( coreStore );
-			const _site = getSite();
+			const { getEntityRecord } = select( coreStore );
+			const _site = getEntityRecord( 'root', 'site' );
 			return {
-				homeUrl: getUnstableBase()?.home,
+				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
 				siteTitle:
 					! _site?.title && !! _site?.url
 						? filterURLForDisplay( _site?.url )
@@ -149,6 +149,8 @@ export const SiteHubMobile = memo(
 						) }
 					>
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							ref={ ref }
 							label={ __( 'Go to Site Editor' ) }
 							className="edit-site-layout__view-mode-toggle"
@@ -168,6 +170,8 @@ export const SiteHubMobile = memo(
 					<HStack>
 						<div className="edit-site-site-hub__title">
 							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								variant="link"
 								href={ homeUrl }
 								target="_blank"
@@ -182,6 +186,8 @@ export const SiteHubMobile = memo(
 							className="edit-site-site-hub__actions"
 						>
 							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								className="edit-site-site-hub_toggle-command-center"
 								icon={ search }
 								onClick={ () => openCommandCenter() }

package/src/components/style-book/index.js

@@ -48,7 +48,6 @@ const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 const {
 	CompositeV2: Composite,
 	CompositeItemV2: CompositeItem,
-	useCompositeStoreV2: useCompositeStore,
 	Tabs,
 } = unlock( componentsPrivateApis );
 
@@ -383,11 +382,9 @@ const StyleBookBody = ( {
 
 const Examples = memo(
 	( { className, examples, category, label, isSelected, onSelect } ) => {
-		const compositeStore = useCompositeStore( { orientation: 'vertical' } );
-
 		return (
 			<Composite
-				store={ compositeStore }
+				orientation="vertical"
 				className={ className }
 				aria-label={ label }
 				role="grid"

package/src/components/style-book/style.scss

@@ -3,13 +3,13 @@
 	// This is useful when the style book is used to fill a frame.
 	height: 100%;
 	&.is-button {
-		border-radius: $radius-block-ui * 4;
+		border-radius: $radius-large;
 	}
 }
 
 .edit-site-style-book__iframe {
 	&.is-button {
-		border-radius: $radius-block-ui * 4;
+		border-radius: $radius-large;
 	}
 	&.is-focused {
 		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -37,10 +37,9 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 		url,
 		frontPageTemplateId,
 	} = useSelect( ( select ) => {
-		const { getSite, getUnstableBase, getEntityRecords } =
-			select( coreDataStore );
-		const siteData = getSite();
-		const base = getUnstableBase();
+		const { getEntityRecord, getEntityRecords } = select( coreDataStore );
+		const siteData = getEntityRecord( 'root', 'site' );
+		const base = getEntityRecord( 'root', '__unstableBase' );
 		const templates = getEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
 			per_page: -1,
 		} );

package/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js

@@ -21,48 +21,51 @@ export default function useSyncCanvasModeWithURL() {
 		[]
 	);
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const currentCanvasMode = useRef( canvasMode );
+	const currentCanvasModeRef = useRef( canvasMode );
 	const { canvas: canvasInUrl } = params;
-	const currentCanvasInUrl = useRef( canvasInUrl );
-	const currentUrlParams = useRef( params );
+	const currentCanvasInUrlRef = useRef( canvasInUrl );
+	const currentUrlParamsRef = useRef( params );
 	useEffect( () => {
-		currentUrlParams.current = params;
+		currentUrlParamsRef.current = params;
 	}, [ params ] );
 
 	useEffect( () => {
-		currentCanvasMode.current = canvasMode;
+		currentCanvasModeRef.current = canvasMode;
 		if ( canvasMode === 'init' ) {
 			return;
 		}
 
 		if (
 			canvasMode === 'edit' &&
-			currentCanvasInUrl.current !== canvasMode
+			currentCanvasInUrlRef.current !== canvasMode
 		) {
 			history.push( {
-				...currentUrlParams.current,
+				...currentUrlParamsRef.current,
 				canvas: 'edit',
 			} );
 		}
 
 		if (
 			canvasMode === 'view' &&
-			currentCanvasInUrl.current !== undefined
+			currentCanvasInUrlRef.current !== undefined
 		) {
 			history.push( {
-				...currentUrlParams.current,
+				...currentUrlParamsRef.current,
 				canvas: undefined,
 			} );
 		}
 	}, [ canvasMode, history ] );
 
 	useEffect( () => {
-		currentCanvasInUrl.current = canvasInUrl;
-		if ( canvasInUrl !== 'edit' && currentCanvasMode.current !== 'view' ) {
+		currentCanvasInUrlRef.current = canvasInUrl;
+		if (
+			canvasInUrl !== 'edit' &&
+			currentCanvasModeRef.current !== 'view'
+		) {
 			setCanvasMode( 'view' );
 		} else if (
 			canvasInUrl === 'edit' &&
-			currentCanvasMode.current !== 'edit'
+			currentCanvasModeRef.current !== 'edit'
 		) {
 			setCanvasMode( 'edit' );
 		}

package/src/components/welcome-guide/template.js

@@ -10,29 +10,23 @@ import { store as editorStore } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
+import useEditedEntityRecord from '../use-edited-entity-record';
 
 export default function WelcomeGuideTemplate() {
 	const { toggle } = useDispatch( preferencesStore );
 
-	const isVisible = useSelect( ( select ) => {
-		const isTemplateActive = !! select( preferencesStore ).get(
-			'core/edit-site',
-			'welcomeGuideTemplate'
-		);
-		const isEditorActive = !! select( preferencesStore ).get(
-			'core/edit-site',
-			'welcomeGuide'
-		);
-		const { isPage } = select( editSiteStore );
-		const { getCurrentPostType } = select( editorStore );
-		return (
-			isTemplateActive &&
-			! isEditorActive &&
-			isPage() &&
-			getCurrentPostType() === 'wp_template'
-		);
+	const { isLoaded, record } = useEditedEntityRecord();
+	const isPostTypeTemplate = isLoaded && record.type === 'wp_template';
+	const { isActive, hasPreviousEntity } = useSelect( ( select ) => {
+		const { getEditorSettings } = select( editorStore );
+		const { get } = select( preferencesStore );
+		return {
+			isActive: get( 'core/edit-site', 'welcomeGuideTemplate' ),
+			hasPreviousEntity:
+				!! getEditorSettings().onNavigateToPreviousEntityRecord,
+		};
 	}, [] );
+	const isVisible = isActive && isPostTypeTemplate && hasPreviousEntity;
 
 	if ( ! isVisible ) {
 		return null;

package/src/hooks/commands/use-common-commands.js

@@ -287,11 +287,9 @@ function useGlobalStylesOpenRevisionsCommands() {
 
 export function useCommonCommands() {
 	const homeUrl = useSelect( ( select ) => {
-		const {
-			getUnstableBase, // Site index.
-		} = select( coreStore );
-
-		return getUnstableBase()?.home;
+		// Site index.
+		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			?.home;
 	}, [] );
 
 	useCommand( {