@wordpress/edit-site 6.13.1-next.cd6172eb0.0 → 6.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.13.1-next.cd6172eb0.0",
+	"version": "6.14.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,45 +30,45 @@
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/api-fetch": "^7.13.1-next.cd6172eb0.0",
-		"@wordpress/blob": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/block-editor": "^14.8.1-next.cd6172eb0.0",
-		"@wordpress/block-library": "^9.13.1-next.cd6172eb0.0",
-		"@wordpress/blocks": "^14.2.1-next.cd6172eb0.0",
-		"@wordpress/commands": "^1.13.1-next.cd6172eb0.0",
+		"@wordpress/a11y": "*",
+		"@wordpress/api-fetch": "*",
+		"@wordpress/blob": "*",
+		"@wordpress/block-editor": "*",
+		"@wordpress/block-library": "*",
+		"@wordpress/blocks": "*",
+		"@wordpress/commands": "*",
 		"@wordpress/components": "*",
-		"@wordpress/compose": "^7.13.1-next.cd6172eb0.0",
-		"@wordpress/core-commands": "^1.13.1-next.cd6172eb0.0",
-		"@wordpress/core-data": "^7.13.1-next.cd6172eb0.0",
-		"@wordpress/data": "^10.13.1-next.cd6172eb0.0",
-		"@wordpress/dataviews": "^4.9.1-next.cd6172eb0.0",
-		"@wordpress/date": "^5.13.1-next.cd6172eb0.0",
-		"@wordpress/deprecated": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/dom": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/editor": "^14.13.1-next.cd6172eb0.0",
-		"@wordpress/element": "^6.13.1-next.cd6172eb0.0",
-		"@wordpress/escape-html": "^3.13.1-next.cd6172eb0.0",
-		"@wordpress/fields": "^0.5.1-next.cd6172eb0.0",
-		"@wordpress/hooks": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/html-entities": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/i18n": "^5.13.1-next.cd6172eb0.0",
-		"@wordpress/icons": "^10.13.1-next.cd6172eb0.0",
-		"@wordpress/keyboard-shortcuts": "^5.13.1-next.cd6172eb0.0",
-		"@wordpress/keycodes": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/notices": "^5.13.1-next.cd6172eb0.0",
-		"@wordpress/patterns": "^2.13.1-next.cd6172eb0.0",
-		"@wordpress/plugins": "^7.13.1-next.cd6172eb0.0",
-		"@wordpress/preferences": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/primitives": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/private-apis": "^1.13.1-next.cd6172eb0.0",
-		"@wordpress/reusable-blocks": "^5.13.1-next.cd6172eb0.0",
-		"@wordpress/router": "^1.13.1-next.cd6172eb0.0",
-		"@wordpress/style-engine": "^2.13.1-next.cd6172eb0.0",
-		"@wordpress/url": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/viewport": "^6.13.1-next.cd6172eb0.0",
-		"@wordpress/widgets": "^4.13.1-next.cd6172eb0.0",
-		"@wordpress/wordcount": "^4.13.1-next.cd6172eb0.0",
+		"@wordpress/compose": "*",
+		"@wordpress/core-commands": "*",
+		"@wordpress/core-data": "*",
+		"@wordpress/data": "*",
+		"@wordpress/dataviews": "*",
+		"@wordpress/date": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/dom": "*",
+		"@wordpress/editor": "*",
+		"@wordpress/element": "*",
+		"@wordpress/escape-html": "*",
+		"@wordpress/fields": "*",
+		"@wordpress/hooks": "*",
+		"@wordpress/html-entities": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/keyboard-shortcuts": "*",
+		"@wordpress/keycodes": "*",
+		"@wordpress/notices": "*",
+		"@wordpress/patterns": "*",
+		"@wordpress/plugins": "*",
+		"@wordpress/preferences": "*",
+		"@wordpress/primitives": "*",
+		"@wordpress/private-apis": "*",
+		"@wordpress/reusable-blocks": "*",
+		"@wordpress/router": "*",
+		"@wordpress/style-engine": "*",
+		"@wordpress/url": "*",
+		"@wordpress/viewport": "*",
+		"@wordpress/widgets": "*",
+		"@wordpress/wordcount": "*",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4cc93dc1781d8a7bc2bbde265913917920e2bd45"
+	"gitHead": "b432c18934c9db866b6dba7d37517a4e97d642e3"
 }

package/src/components/add-new-post/index.js

@@ -45,7 +45,7 @@ export default function AddNewPostModal( { postType, onSave, onClose } ) {
 				{
 					status: 'draft',
 					title,
-					slug: title || __( 'No title' ),
+					slug: title ?? undefined,
 					content:
 						!! postTypeObject.template &&
 						postTypeObject.template.length

package/src/components/global-styles/preview-colors.js

@@ -10,7 +10,7 @@ import {
  * Internal dependencies
  */
 import PresetColors from './preset-colors';
-import PreviewIframe from './preview-iframe';
+import PreviewWrapper from './preview-wrapper';
 
 const firstFrameVariants = {
 	start: {
@@ -25,7 +25,7 @@ const firstFrameVariants = {
 
 const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 	return (
-		<PreviewIframe
+		<PreviewWrapper
 			label={ label }
 			isFocused={ isFocused }
 			withHoverView={ withHoverView }
@@ -51,7 +51,7 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 					</HStack>
 				</motion.div>
 			) }
-		</PreviewIframe>
+		</PreviewWrapper>
 	);
 };
 

package/src/components/global-styles/preview-styles.js

@@ -15,7 +15,7 @@ import { unlock } from '../../lock-unlock';
 import { useStylesPreviewColors } from './hooks';
 import TypographyExample from './typography-example';
 import HighlightedColors from './highlighted-colors';
-import PreviewIframe from './preview-iframe';
+import PreviewWrapper from './preview-wrapper';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
@@ -67,7 +67,7 @@ const PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {
 	const { paletteColors } = useStylesPreviewColors();
 
 	return (
-		<PreviewIframe
+		<PreviewWrapper
 			label={ label }
 			isFocused={ isFocused }
 			withHoverView={ withHoverView }
@@ -178,7 +178,7 @@ const PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {
 					</VStack>
 				</motion.div>
 			) }
-		</PreviewIframe>
+		</PreviewWrapper>
 	);
 };
 

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

@@ -7,11 +7,11 @@ import { __experimentalHStack as HStack } from '@wordpress/components';
  * Internal dependencies
  */
 import TypographyExample from './typography-example';
-import PreviewIframe from './preview-iframe';
+import PreviewWrapper from './preview-wrapper';
 
 const StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {
 	return (
-		<PreviewIframe
+		<PreviewWrapper
 			label={ variation.title }
 			isFocused={ isFocused }
 			withHoverView={ withHoverView }
@@ -32,7 +32,7 @@ const StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {
 					/>
 				</HStack>
 			) }
-		</PreviewIframe>
+		</PreviewWrapper>
 	);
 };
 

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/shadows-edit-panel.js

@@ -35,7 +35,7 @@ import {
 	reset,
 	moreVertical,
 } from '@wordpress/icons';
-import { useState, useMemo, useEffect } from '@wordpress/element';
+import { useState, useMemo, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -300,6 +300,7 @@ function ShadowsPreview( { shadow } ) {
 }
 
 function ShadowEditor( { shadow, onChange } ) {
+	const addShadowButtonRef = useRef();
 	const shadowParts = useMemo( () => getShadowParts( shadow ), [ shadow ] );
 
 	const onChangeShadowPart = ( index, part ) => {
@@ -314,6 +315,7 @@ function ShadowEditor( { shadow, onChange } ) {
 
 	const onRemoveShadowPart = ( index ) => {
 		onChange( shadowParts.filter( ( p, i ) => i !== index ).join( ', ' ) );
+		addShadowButtonRef.current.focus();
 	};
 
 	return (
@@ -334,6 +336,7 @@ function ShadowEditor( { shadow, onChange } ) {
 							onClick={ () => {
 								onAddShadowPart();
 							} }
+							ref={ addShadowButtonRef }
 						/>
 					</FlexItem>
 				</HStack>
@@ -393,28 +396,24 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 				};
 
 				return (
-					<HStack align="center" justify="flex-start" spacing={ 0 }>
-						<FlexItem style={ { flexGrow: 1 } }>
-							<Button
-								__next40pxDefaultSize
-								icon={ shadowIcon }
-								{ ...toggleProps }
-							>
-								{ shadowObj.inset
-									? __( 'Inner shadow' )
-									: __( 'Drop shadow' ) }
-							</Button>
-						</FlexItem>
+					<>
+						<Button
+							__next40pxDefaultSize
+							icon={ shadowIcon }
+							{ ...toggleProps }
+						>
+							{ shadowObj.inset
+								? __( 'Inner shadow' )
+								: __( 'Drop shadow' ) }
+						</Button>
 						{ canRemove && (
-							<FlexItem>
-								<Button
-									__next40pxDefaultSize
-									icon={ reset }
-									{ ...removeButtonProps }
-								/>
-							</FlexItem>
+							<Button
+								size="small"
+								icon={ reset }
+								{ ...removeButtonProps }
+							/>
 						) }
-					</HStack>
+					</>
 				);
 			} }
 			renderContent={ () => (

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%;
@@ -146,20 +146,34 @@
 
 .edit-site-global-styles__shadow-editor__dropdown {
 	width: 100%;
+	position: relative;
+}
 
-	.edit-site-global-styles__shadow-editor__dropdown-toggle,
-	.edit-site-global-styles__shadow-editor__remove-button {
-		width: 100%;
-		height: auto;
-		padding-top: $grid-unit;
-		padding-bottom: $grid-unit;
-		text-align: left;
-		border-radius: inherit;
-
-		&.is-open {
-			background: $gray-100;
-			color: var(--wp-admin-theme-color);
-		}
+.edit-site-global-styles__shadow-editor__dropdown-toggle {
+	width: 100%;
+	height: auto;
+	padding-top: $grid-unit;
+	padding-bottom: $grid-unit;
+	text-align: left;
+	border-radius: inherit;
+
+	&.is-open {
+		background: $gray-100;
+		color: var(--wp-admin-theme-color);
+	}
+}
+
+.edit-site-global-styles__shadow-editor__remove-button {
+	position: absolute;
+	right: $grid-unit;
+	top: $grid-unit;
+	opacity: 0;
+
+	.edit-site-global-styles__shadow-editor__dropdown-toggle:hover + &,
+	&:focus,
+	&:hover {
+		border: none;
+		opacity: 1;
 	}
 }
 
@@ -211,6 +225,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;
@@ -226,10 +244,6 @@
 	// The &#{&} is a workaround for the specificity of the Card component.
 	&#{&},
 	&#{&} .edit-site-global-styles-screen-root__active-style-tile-preview {
-		box-shadow: none;
 		border-radius: $radius-small;
-		.block-editor-iframe__container {
-			border: 1px solid $gray-200;
-		}
 	}
 }

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

@@ -25,6 +25,7 @@ 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';
@@ -36,7 +37,6 @@ 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';
@@ -132,11 +132,13 @@ function Layout() {
 										/>
 										<SidebarContent
 											shouldAnimate={
-												routeKey !== 'styles-view'
+												routeKey !== 'styles'
 											}
 											routeKey={ routeKey }
 										>
-											{ areas.sidebar }
+											<ErrorBoundary>
+												{ areas.sidebar }
+											</ErrorBoundary>
 										</SidebarContent>
 										<SaveHub />
 										<SavePanel />
@@ -160,7 +162,7 @@ function Layout() {
 									/>
 								</SidebarContent>
 							) }
-							{ areas.mobile }
+							<ErrorBoundary>{ areas.mobile }</ErrorBoundary>
 						</div>
 					) }
 
@@ -173,7 +175,7 @@ function Layout() {
 									maxWidth: widths?.content,
 								} }
 							>
-								{ areas.content }
+								<ErrorBoundary>{ areas.content }</ErrorBoundary>
 							</div>
 						) }
 
@@ -184,7 +186,7 @@ function Layout() {
 								maxWidth: widths?.edit,
 							} }
 						>
-							{ areas.edit }
+							<ErrorBoundary>{ areas.edit }</ErrorBoundary>
 						</div>
 					) }
 

package/src/components/maybe-editor/index.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+import Editor from '../editor';
+
+export function MaybeEditor( { showEditor = true } ) {
+	const { isBlockBasedTheme, siteUrl } = useSelect( ( select ) => {
+		const { getEntityRecord, getCurrentTheme } = select( coreStore );
+		const siteData = getEntityRecord( 'root', '__unstableBase' );
+
+		return {
+			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
+			siteUrl: siteData?.home,
+		};
+	}, [] );
+
+	// If theme is block based, return the Editor, otherwise return the site preview.
+	return isBlockBasedTheme || showEditor ? (
+		<Editor />
+	) : (
+		<iframe
+			src={ siteUrl }
+			title={ __( 'Site Preview' ) }
+			style={ {
+				display: 'block',
+				width: '100%',
+				height: '100%',
+				backgroundColor: '#fff',
+			} }
+			onLoad={ ( event ) => {
+				// Hide the admin bar in the front-end preview.
+				const document = event.target.contentDocument;
+				document.getElementById( 'wpadminbar' ).remove();
+				document
+					.getElementsByTagName( 'html' )[ 0 ]
+					.setAttribute( 'style', 'margin-top: 0 !important;' );
+				// Make interactive elements unclickable.
+				const interactiveElements = document.querySelectorAll(
+					'a, button, input, details, audio'
+				);
+				interactiveElements.forEach( ( element ) => {
+					element.style.pointerEvents = 'none';
+					element.tabIndex = -1;
+					element.setAttribute( 'aria-hidden', 'true' );
+				} );
+			} }
+		/>
+	);
+}