@wordpress/edit-site 6.17.1 → 6.19.0

package/build-style/style-rtl.css

@@ -448,7 +448,6 @@
   color: rgba(30, 30, 30, 0.62);
 }
 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
-  opacity: 1;
   color: rgba(30, 30, 30, 0.62);
 }
 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:-ms-input-placeholder {
@@ -1000,6 +999,7 @@ div.dataviews-view-list {
 .dataviews-view-table td.dataviews-view-table__checkbox-column,
 .dataviews-view-table th.dataviews-view-table__checkbox-column {
   padding-left: 0;
+  width: 1%;
 }
 .dataviews-view-table tr {
   border-top: 1px solid #f0f0f0;
@@ -1012,9 +1012,7 @@ div.dataviews-view-list {
   padding-right: 48px;
 }
 .dataviews-view-table tr td:first-child .dataviews-view-table-header-button,
-.dataviews-view-table tr td:first-child .dataviews-view-table-header,
-.dataviews-view-table tr th:first-child .dataviews-view-table-header-button,
-.dataviews-view-table tr th:first-child .dataviews-view-table-header {
+.dataviews-view-table tr th:first-child .dataviews-view-table-header-button {
   margin-right: -8px;
 }
 .dataviews-view-table tr td:last-child,
@@ -1836,9 +1834,14 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   margin: 24px 16px;
 }
 
+.edit-site-global-styles-sidebar__navigator-provider {
+  height: 100%;
+}
+
 .edit-site-global-styles-sidebar__navigator-screen {
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 .edit-site-global-styles-sidebar__navigator-screen .single-column {
@@ -2185,6 +2188,8 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
 .dataviews-view-table .page-patterns-preview-field {
   width: 96px;
   flex-grow: 0;
+  text-wrap: balance;
+  text-wrap: pretty;
 }
 
 .edit-site-patterns__pattern-icon {
@@ -2278,6 +2283,8 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   position: relative;
   width: 120px;
   max-height: 160px;
+  text-wrap: balance;
+  text-wrap: pretty;
 }
 .dataviews-view-table .page-templates-preview-field::after {
   content: "";
@@ -2538,6 +2545,9 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
 .edit-site-layout__mobile .edit-site-sidebar__screen-wrapper {
   padding: 0;
 }
+.edit-site-layout__mobile .edit-site-sidebar-navigation-screen__main {
+  padding: 0 12px;
+}
 
 .edit-site-layout__canvas-container {
   position: relative;
@@ -2760,7 +2770,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _z491t_slide-from-right {
+@keyframes _xk1qy_slide-from-right {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2770,7 +2780,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _z491t_slide-from-left {
+@keyframes _xk1qy_slide-from-left {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2826,10 +2836,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _z491t_slide-from-left;
+  animation-name: _xk1qy_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _z491t_slide-from-right;
+  animation-name: _xk1qy_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2905,26 +2915,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   margin-bottom: 8px;
 }
 
-.edit-site-sidebar-navigation-screen__meta {
-  margin: 0 16px 16px 0;
-  color: #ccc;
-}
-.edit-site-sidebar-navigation-screen__meta .components-text {
-  color: #ccc;
-}
-
-.edit-site-sidebar-navigation-screen__page-link {
-  color: #949494;
-  display: inline-block;
-  word-break: break-word;
-}
-.edit-site-sidebar-navigation-screen__page-link:hover, .edit-site-sidebar-navigation-screen__page-link:focus {
-  color: #fff;
-}
-.edit-site-sidebar-navigation-screen__page-link .components-external-link__icon {
-  margin-right: 4px;
-}
-
 .edit-site-sidebar-navigation-screen__title-icon {
   position: sticky;
   top: 0;

package/build-style/style.css

@@ -448,7 +448,6 @@
   color: rgba(30, 30, 30, 0.62);
 }
 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
-  opacity: 1;
   color: rgba(30, 30, 30, 0.62);
 }
 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input:-ms-input-placeholder {
@@ -1000,6 +999,7 @@ div.dataviews-view-list {
 .dataviews-view-table td.dataviews-view-table__checkbox-column,
 .dataviews-view-table th.dataviews-view-table__checkbox-column {
   padding-right: 0;
+  width: 1%;
 }
 .dataviews-view-table tr {
   border-top: 1px solid #f0f0f0;
@@ -1012,9 +1012,7 @@ div.dataviews-view-list {
   padding-left: 48px;
 }
 .dataviews-view-table tr td:first-child .dataviews-view-table-header-button,
-.dataviews-view-table tr td:first-child .dataviews-view-table-header,
-.dataviews-view-table tr th:first-child .dataviews-view-table-header-button,
-.dataviews-view-table tr th:first-child .dataviews-view-table-header {
+.dataviews-view-table tr th:first-child .dataviews-view-table-header-button {
   margin-left: -8px;
 }
 .dataviews-view-table tr td:last-child,
@@ -1837,9 +1835,14 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   margin: 24px 16px;
 }
 
+.edit-site-global-styles-sidebar__navigator-provider {
+  height: 100%;
+}
+
 .edit-site-global-styles-sidebar__navigator-screen {
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 .edit-site-global-styles-sidebar__navigator-screen .single-column {
@@ -2186,6 +2189,8 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
 .dataviews-view-table .page-patterns-preview-field {
   width: 96px;
   flex-grow: 0;
+  text-wrap: balance;
+  text-wrap: pretty;
 }
 
 .edit-site-patterns__pattern-icon {
@@ -2279,6 +2284,8 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   position: relative;
   width: 120px;
   max-height: 160px;
+  text-wrap: balance;
+  text-wrap: pretty;
 }
 .dataviews-view-table .page-templates-preview-field::after {
   content: "";
@@ -2539,6 +2546,9 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
 .edit-site-layout__mobile .edit-site-sidebar__screen-wrapper {
   padding: 0;
 }
+.edit-site-layout__mobile .edit-site-sidebar-navigation-screen__main {
+  padding: 0 12px;
+}
 
 .edit-site-layout__canvas-container {
   position: relative;
@@ -2761,7 +2771,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _z491t_slide-from-right {
+@keyframes _xk1qy_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2771,7 +2781,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _z491t_slide-from-left {
+@keyframes _xk1qy_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2827,10 +2837,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _z491t_slide-from-left;
+  animation-name: _xk1qy_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _z491t_slide-from-right;
+  animation-name: _xk1qy_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2906,26 +2916,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   margin-bottom: 8px;
 }
 
-.edit-site-sidebar-navigation-screen__meta {
-  margin: 0 0 16px 16px;
-  color: #ccc;
-}
-.edit-site-sidebar-navigation-screen__meta .components-text {
-  color: #ccc;
-}
-
-.edit-site-sidebar-navigation-screen__page-link {
-  color: #949494;
-  display: inline-block;
-  word-break: break-word;
-}
-.edit-site-sidebar-navigation-screen__page-link:hover, .edit-site-sidebar-navigation-screen__page-link:focus {
-  color: #fff;
-}
-.edit-site-sidebar-navigation-screen__page-link .components-external-link__icon {
-  margin-left: 4px;
-}
-
 .edit-site-sidebar-navigation-screen__title-icon {
   position: sticky;
   top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.17.1",
+	"version": "6.19.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,46 +30,46 @@
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.17.0",
-		"@wordpress/api-fetch": "^7.17.0",
-		"@wordpress/blob": "^4.17.0",
-		"@wordpress/block-editor": "^14.12.0",
-		"@wordpress/block-library": "^9.17.0",
-		"@wordpress/blocks": "^14.6.0",
-		"@wordpress/commands": "^1.17.0",
-		"@wordpress/components": "^29.3.0",
-		"@wordpress/compose": "^7.17.0",
-		"@wordpress/core-commands": "^1.17.0",
-		"@wordpress/core-data": "^7.17.0",
-		"@wordpress/data": "^10.17.0",
-		"@wordpress/dataviews": "^4.13.0",
-		"@wordpress/date": "^5.17.0",
-		"@wordpress/deprecated": "^4.17.0",
-		"@wordpress/dom": "^4.17.0",
-		"@wordpress/editor": "^14.17.1",
-		"@wordpress/element": "^6.17.0",
-		"@wordpress/escape-html": "^3.17.0",
-		"@wordpress/fields": "^0.9.0",
-		"@wordpress/hooks": "^4.17.0",
-		"@wordpress/html-entities": "^4.17.0",
-		"@wordpress/i18n": "^5.17.0",
-		"@wordpress/icons": "^10.17.0",
-		"@wordpress/keyboard-shortcuts": "^5.17.0",
-		"@wordpress/keycodes": "^4.17.0",
-		"@wordpress/media-utils": "^5.17.0",
-		"@wordpress/notices": "^5.17.0",
-		"@wordpress/patterns": "^2.17.0",
-		"@wordpress/plugins": "^7.17.0",
-		"@wordpress/preferences": "^4.17.0",
-		"@wordpress/primitives": "^4.17.0",
-		"@wordpress/private-apis": "^1.17.0",
-		"@wordpress/reusable-blocks": "^5.17.0",
-		"@wordpress/router": "^1.17.0",
-		"@wordpress/style-engine": "^2.17.0",
-		"@wordpress/url": "^4.17.0",
-		"@wordpress/viewport": "^6.17.0",
-		"@wordpress/widgets": "^4.17.0",
-		"@wordpress/wordcount": "^4.17.0",
+		"@wordpress/a11y": "^4.19.0",
+		"@wordpress/api-fetch": "^7.19.0",
+		"@wordpress/blob": "^4.19.0",
+		"@wordpress/block-editor": "^14.14.0",
+		"@wordpress/block-library": "^9.19.0",
+		"@wordpress/blocks": "^14.8.0",
+		"@wordpress/commands": "^1.19.0",
+		"@wordpress/components": "^29.5.0",
+		"@wordpress/compose": "^7.19.0",
+		"@wordpress/core-commands": "^1.19.0",
+		"@wordpress/core-data": "^7.19.0",
+		"@wordpress/data": "^10.19.0",
+		"@wordpress/dataviews": "^4.15.0",
+		"@wordpress/date": "^5.19.0",
+		"@wordpress/deprecated": "^4.19.0",
+		"@wordpress/dom": "^4.19.0",
+		"@wordpress/editor": "^14.19.0",
+		"@wordpress/element": "^6.19.0",
+		"@wordpress/escape-html": "^3.19.0",
+		"@wordpress/fields": "^0.11.0",
+		"@wordpress/hooks": "^4.19.0",
+		"@wordpress/html-entities": "^4.19.0",
+		"@wordpress/i18n": "^5.19.0",
+		"@wordpress/icons": "^10.19.0",
+		"@wordpress/keyboard-shortcuts": "^5.19.0",
+		"@wordpress/keycodes": "^4.19.0",
+		"@wordpress/media-utils": "^5.19.0",
+		"@wordpress/notices": "^5.19.0",
+		"@wordpress/patterns": "^2.19.0",
+		"@wordpress/plugins": "^7.19.0",
+		"@wordpress/preferences": "^4.19.0",
+		"@wordpress/primitives": "^4.19.0",
+		"@wordpress/private-apis": "^1.19.0",
+		"@wordpress/reusable-blocks": "^5.19.0",
+		"@wordpress/router": "^1.19.0",
+		"@wordpress/style-engine": "^2.19.0",
+		"@wordpress/url": "^4.19.0",
+		"@wordpress/viewport": "^6.19.0",
+		"@wordpress/widgets": "^4.19.0",
+		"@wordpress/wordcount": "^4.19.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "05adbeff7892ddc5d5a52b816503d722ae7fc3e0"
+	"gitHead": "d6b0b20fa927b110140dc7fdd906a7e0bf662004"
 }

package/src/components/add-new-template/add-custom-generic-template-modal-content.js

@@ -51,6 +51,7 @@ function AddCustomGenericTemplateModalContent( { onClose, createTemplate } ) {
 					placeholder={ defaultTitle }
 					disabled={ isBusy }
 					help={ __(
+						// eslint-disable-next-line no-restricted-syntax -- 'sidebar' is a common web design term for layouts
 						'Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.'
 					) }
 				/>

package/src/components/editor/index.js

@@ -23,6 +23,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Icon, arrowUpLeft } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -53,7 +54,7 @@ import {
 	useResolveEditedEntity,
 	useSyncDeprecatedEntityIntoState,
 } from './use-resolve-edited-entity';
-import { addQueryArgs } from '@wordpress/url';
+import SitePreview from './site-preview';
 
 const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -117,7 +118,10 @@ function getNavigationPath( location, postType ) {
 	return addQueryArgs( path, { canvas: undefined } );
 }
 
-export default function EditSiteEditor( { isPostsList = false } ) {
+export default function EditSiteEditor( {
+	isHomeRoute = false,
+	isPostsList = false,
+} ) {
 	const disableMotion = useReducedMotion();
 	const location = useLocation();
 	const { canvas = 'view' } = location.query;
@@ -128,7 +132,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 	useSyncDeprecatedEntityIntoState( entity );
 	const { postType, postId, context } = entity;
 	const {
-		supportsGlobalStyles,
+		isBlockBasedTheme,
 		editorCanvasView,
 		currentPostIsTrashed,
 		hasSiteIcon,
@@ -140,7 +144,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
 		return {
-			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
+			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
 			editorCanvasView: getEditorCanvasContainerView(),
 			currentPostIsTrashed:
 				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
@@ -244,7 +248,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		duration: disableMotion ? 0 : 0.2,
 	};
 
-	return (
+	return ! isBlockBasedTheme && isHomeRoute ? (
+		<SitePreview />
+	) : (
 		<>
 			<GlobalStylesRenderer
 				disableRootPadding={ postType !== TEMPLATE_POST_TYPE }
@@ -349,7 +355,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 						</BackButton>
 					) }
 					<SiteEditorMoreMenu />
-					{ supportsGlobalStyles && <GlobalStylesSidebar /> }
+					{ isBlockBasedTheme && <GlobalStylesSidebar /> }
 				</Editor>
 			) }
 		</>

package/src/components/{maybe-editor/index.js → editor/site-preview.js}

@@ -1,32 +1,19 @@
 /**
  * WordPress dependencies
  */
-
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
-/**
- * Internal dependencies
- */
-
-import Editor from '../editor';
-
-export function MaybeEditor( { showEditor = true } ) {
-	const { isBlockBasedTheme, siteUrl } = useSelect( ( select ) => {
-		const { getEntityRecord, getCurrentTheme } = select( coreStore );
+export default function SitePreview() {
+	const siteUrl = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
 		const siteData = getEntityRecord( 'root', '__unstableBase' );
-
-		return {
-			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
-			siteUrl: siteData?.home,
-		};
+		return siteData?.home;
 	}, [] );
 
 	// If theme is block based, return the Editor, otherwise return the site preview.
-	return isBlockBasedTheme || showEditor ? (
-		<Editor />
-	) : (
+	return (
 		<iframe
 			src={ siteUrl }
 			title={ __( 'Site Preview' ) }

package/src/components/global-styles/font-library-modal/collection-font-variant.js

@@ -1,20 +1,14 @@
 /**
  * WordPress dependencies
  */
-import {
-	CheckboxControl,
-	Flex,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { useId } from '@wordpress/element';
+import { CheckboxControl, Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { getFontFaceVariantName } from './utils';
 import FontDemo from './font-demo';
-import { unlock } from '../../../lock-unlock';
-
-const { kebabCase } = unlock( componentsPrivateApis );
 
 function CollectionFontVariant( {
 	face,
@@ -31,9 +25,7 @@ function CollectionFontVariant( {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const checkboxId = kebabCase(
-		`${ font.slug }-${ getFontFaceVariantName( face ) }`
-	);
+	const checkboxId = useId();
 
 	return (
 		<div className="font-library-modal__font-card">

package/src/components/global-styles/font-library-modal/library-font-variant.js

@@ -1,12 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
-import {
-	CheckboxControl,
-	Flex,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { useContext, useId } from '@wordpress/element';
+import { CheckboxControl, Flex } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -14,9 +10,6 @@ import {
 import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
 import FontDemo from './font-demo';
-import { unlock } from '../../../lock-unlock';
-
-const { kebabCase } = unlock( componentsPrivateApis );
 
 function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
@@ -41,9 +34,7 @@ function LibraryFontVariant( { face, font } ) {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const checkboxId = kebabCase(
-		`${ font.slug }-${ getFontFaceVariantName( face ) }`
-	);
+	const checkboxId = useId();
 
 	return (
 		<div className="font-library-modal__font-card">

package/src/components/global-styles/screen-block-list.js

@@ -7,6 +7,7 @@ import {
 	FlexItem,
 	SearchControl,
 	__experimentalHStack as HStack,
+	__experimentalText as Text,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import {
@@ -137,13 +138,21 @@ function BlockList( { filterValue } ) {
 		<div
 			ref={ blockTypesListRef }
 			className="edit-site-block-types-item-list"
+			// By default, BlockMenuItem has a role=listitem so this div must have a list role.
+			role="list"
 		>
-			{ filteredBlockTypes.map( ( block ) => (
-				<BlockMenuItem
-					block={ block }
-					key={ 'menu-itemblock-' + block.name }
-				/>
-			) ) }
+			{ filteredBlockTypes.length === 0 ? (
+				<Text align="center" as="p">
+					{ __( 'No blocks found.' ) }
+				</Text>
+			) : (
+				filteredBlockTypes.map( ( block ) => (
+					<BlockMenuItem
+						block={ block }
+						key={ 'menu-itemblock-' + block.name }
+					/>
+				) )
+			) }
 		</div>
 	);
 }

package/src/components/global-styles/screen-css.js

@@ -4,11 +4,13 @@
 import { __ } from '@wordpress/i18n';
 import { ExternalLink } from '@wordpress/components';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
 import ScreenHeader from './header';
 
 const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
@@ -26,6 +28,10 @@ function ScreenCSS() {
 		shouldDecodeEncode: false,
 	} );
 
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+
 	return (
 		<>
 			<ScreenHeader
@@ -44,6 +50,9 @@ function ScreenCSS() {
 						</ExternalLink>
 					</>
 				}
+				onBack={ () => {
+					setEditorCanvasContainerView( undefined );
+				} }
 			/>
 			<div className="edit-site-global-styles-screen-css">
 				<StylesAdvancedPanel

package/src/components/global-styles/screen-root.js

@@ -55,6 +55,7 @@ function ScreenRoot() {
 	return (
 		<Card
 			size="small"
+			isBorderless
 			className="edit-site-global-styles-screen-root"
 			isRounded={ false }
 		>

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

@@ -228,9 +228,14 @@
 	}
 }
 
+.edit-site-global-styles-sidebar__navigator-provider {
+	height: 100%;
+}
+
 .edit-site-global-styles-sidebar__navigator-screen {
 	display: flex;
 	flex-direction: column;
+	height: 100%;
 }
 
 .edit-site-global-styles-sidebar__navigator-screen .single-column {

package/src/components/layout/style.scss

@@ -68,6 +68,10 @@
 	.edit-site-sidebar__screen-wrapper {
 		padding: 0;
 	}
+
+	.edit-site-sidebar-navigation-screen__main {
+		padding: 0 $grid-unit-15;
+	}
 }
 
 .edit-site-layout__canvas-container {

package/src/components/media/index.js

@@ -6,11 +6,11 @@ import { useEntityRecord } from '@wordpress/core-data';
 function Media( { id, size = [ 'large', 'medium', 'thumbnail' ], ...props } ) {
 	const { record: media } = useEntityRecord( 'root', 'media', id );
 	const currentSize = size.find(
-		( s ) => !! media?.media_details?.sizes[ s ]
+		( s ) => !! media?.media_details?.sizes?.[ s ]
 	);
 
 	const mediaUrl =
-		media?.media_details?.sizes[ currentSize ]?.source_url ||
+		media?.media_details?.sizes?.[ currentSize ]?.source_url ||
 		media?.source_url;
 
 	if ( ! mediaUrl ) {

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

@@ -19,6 +19,8 @@
 	.dataviews-view-table & {
 		width: 96px;
 		flex-grow: 0;
+		text-wrap: balance; // Fallback for Safari.
+		text-wrap: pretty;
 	}
 }