@wordpress/edit-site 6.17.0 → 6.18.0

package/build-style/style-rtl.css

@@ -1836,9 +1836,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 +2190,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 +2285,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: "";
@@ -2716,6 +2725,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 
+.edit-site-layout__area__404 {
+  margin: 16px;
+}
+
 .edit-site .components-editor-notices__snackbar {
   position: fixed;
   left: 0;
@@ -2760,7 +2773,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _z491t_slide-from-right {
+@keyframes _gbjfm_slide-from-right {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2770,7 +2783,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _z491t_slide-from-left {
+@keyframes _gbjfm_slide-from-left {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2826,10 +2839,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: _gbjfm_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _z491t_slide-from-right;
+  animation-name: _gbjfm_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2905,26 +2918,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

@@ -1837,9 +1837,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 +2191,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 +2286,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: "";
@@ -2717,6 +2726,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 
+.edit-site-layout__area__404 {
+  margin: 16px;
+}
+
 .edit-site .components-editor-notices__snackbar {
   position: fixed;
   right: 0;
@@ -2761,7 +2774,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _z491t_slide-from-right {
+@keyframes _gbjfm_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2771,7 +2784,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _z491t_slide-from-left {
+@keyframes _gbjfm_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2827,10 +2840,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: _gbjfm_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _z491t_slide-from-right;
+  animation-name: _gbjfm_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2906,26 +2919,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.0",
+	"version": "6.18.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.0",
-		"@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.18.0",
+		"@wordpress/api-fetch": "^7.18.0",
+		"@wordpress/blob": "^4.18.0",
+		"@wordpress/block-editor": "^14.13.0",
+		"@wordpress/block-library": "^9.18.0",
+		"@wordpress/blocks": "^14.7.0",
+		"@wordpress/commands": "^1.18.0",
+		"@wordpress/components": "^29.4.0",
+		"@wordpress/compose": "^7.18.0",
+		"@wordpress/core-commands": "^1.18.0",
+		"@wordpress/core-data": "^7.18.0",
+		"@wordpress/data": "^10.18.0",
+		"@wordpress/dataviews": "^4.14.0",
+		"@wordpress/date": "^5.18.0",
+		"@wordpress/deprecated": "^4.18.0",
+		"@wordpress/dom": "^4.18.0",
+		"@wordpress/editor": "^14.18.0",
+		"@wordpress/element": "^6.18.0",
+		"@wordpress/escape-html": "^3.18.0",
+		"@wordpress/fields": "^0.10.0",
+		"@wordpress/hooks": "^4.18.0",
+		"@wordpress/html-entities": "^4.18.0",
+		"@wordpress/i18n": "^5.18.0",
+		"@wordpress/icons": "^10.18.0",
+		"@wordpress/keyboard-shortcuts": "^5.18.0",
+		"@wordpress/keycodes": "^4.18.0",
+		"@wordpress/media-utils": "^5.18.0",
+		"@wordpress/notices": "^5.18.0",
+		"@wordpress/patterns": "^2.18.0",
+		"@wordpress/plugins": "^7.18.0",
+		"@wordpress/preferences": "^4.18.0",
+		"@wordpress/primitives": "^4.18.0",
+		"@wordpress/private-apis": "^1.18.0",
+		"@wordpress/reusable-blocks": "^5.18.0",
+		"@wordpress/router": "^1.18.0",
+		"@wordpress/style-engine": "^2.18.0",
+		"@wordpress/url": "^4.18.0",
+		"@wordpress/viewport": "^6.18.0",
+		"@wordpress/widgets": "^4.18.0",
+		"@wordpress/wordcount": "^4.18.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "68a831c3178197fe87db284d4b94e5743bfb6b6c"
+	"gitHead": "afe4fb333177642180ac020f1030c5685eab7183"
 }

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

@@ -262,6 +262,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	}
 }
 
+.edit-site-layout__area__404 {
+	margin: $canvas-padding;
+}
+
 .edit-site .components-editor-notices__snackbar {
 	position: fixed;
 	right: 0;

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

@@ -9,7 +9,6 @@ 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
@@ -34,7 +33,7 @@ import {
 } from './fields';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
-const { usePostActions } = unlock( editorPrivateApis );
+const { usePostActions, patternTitleField } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];

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

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

@@ -7,7 +7,6 @@ import { privateApis as corePrivateApis } from '@wordpress/core-data';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { templateTitleField } from '@wordpress/fields';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -27,7 +26,7 @@ import { useEditPostAction } from '../dataviews-actions';
 import { authorField, descriptionField, previewField } from './fields';
 import { useEvent } from '@wordpress/compose';
 
-const { usePostActions } = unlock( editorPrivateApis );
+const { usePostActions, templateTitleField } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
 

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

@@ -23,6 +23,8 @@
 		position: relative;
 		width: 120px;
 		max-height: 160px;
+		text-wrap: balance; // Fallback for Safari.
+		text-wrap: pretty;
 
 		&::after {
 			content: "";

package/src/components/resizable-frame/index.js

@@ -254,7 +254,7 @@ function ResizableFrame( {
 				}
 			} }
 			whileHover={
-				canvas === 'view'
+				canvas === 'view' && isBlockTheme
 					? {
 							scale: 1.005,
 							transition: {