@wordpress/edit-site 3.0.24 → 4.0.0

package/src/components/code-editor/style.scss

@@ -0,0 +1,100 @@
+.edit-site-code-editor {
+	position: relative;
+	width: 100%;
+	background-color: $white;
+	flex-grow: 1;
+
+	&__body {
+		width: 100%;
+		padding: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
+		max-width: $break-xlarge;
+		margin-left: auto;
+		margin-right: auto;
+
+		@include break-large() {
+			padding: $grid-unit-20 $grid-unit-30 #{ $grid-unit-60 * 2 } $grid-unit-30;
+			padding: 0 $grid-unit-30 $grid-unit-30 $grid-unit-30;
+		}
+	}
+
+	// Exit code editor toolbar.
+	&__toolbar {
+		position: sticky;
+		z-index: z-index(".edit-site-code-editor__toolbar");
+		top: 0;
+		left: 0;
+		right: 0;
+		display: flex;
+		background: rgba($white, 0.8);
+		padding: $grid-unit-05 $grid-unit-15;
+
+		@include break-small() {
+			padding: $grid-unit-15;
+		}
+
+		@include break-large() {
+			padding: $grid-unit-15 $grid-unit-30;
+		}
+
+		h2 {
+			line-height: $button-size;
+			margin: 0 auto 0 0;
+			font-size: $default-font-size;
+			color: $gray-900;
+		}
+
+		.components-button svg {
+			order: 1;
+		}
+	}
+}
+
+textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area {
+	border: $border-width solid $gray-600;
+	border-radius: 0;
+	display: block;
+	margin: 0;
+	width: 100%;
+	box-shadow: none;
+	resize: none;
+	overflow: hidden;
+	font-family: $editor-html-font;
+	line-height: 2.4;
+	min-height: 200px;
+	transition: border 0.1s ease-out, box-shadow 0.1s linear;
+	@include reduce-motion("transition");
+
+	// Same padding as title.
+	padding: $grid-unit-20;
+	@include break-small() {
+		padding: $grid-unit-30;
+	}
+
+	/* Fonts smaller than 16px causes mobile safari to zoom. */
+	font-size: $mobile-text-min-font-size !important;
+	@include break-small {
+		font-size: $text-editor-font-size !important;
+	}
+
+	&:focus {
+		border-color: var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+		// Elevate the z-index on focus so the focus style is uncropped.
+		position: relative;
+	}
+
+	&::-webkit-input-placeholder {
+		color: $dark-gray-placeholder;
+	}
+
+	&::-moz-placeholder {
+		color: $dark-gray-placeholder;
+		// Override Firefox default.
+		opacity: 1;
+	}
+
+	&:-ms-input-placeholder {
+		color: $dark-gray-placeholder;
+	}
+}

package/src/components/editor/index.js

@@ -16,12 +16,13 @@ import {
 	EditorSnackbars,
 	EntitiesSavedStates,
 } from '@wordpress/editor';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
 import {
 	ShortcutProvider,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -30,6 +31,7 @@ import Header from '../header';
 import { SidebarComplementaryAreaFills } from '../sidebar';
 import NavigationSidebar from '../navigation-sidebar';
 import BlockEditor from '../block-editor';
+import CodeEditor from '../code-editor';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 import URLQueryController from '../url-query-controller';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
@@ -60,6 +62,7 @@ function Editor( { onError } ) {
 		isNavigationOpen,
 		previousShortcut,
 		nextShortcut,
+		editorMode,
 	} = useSelect( ( select ) => {
 		const {
 			isInserterOpened,
@@ -69,6 +72,7 @@ function Editor( { onError } ) {
 			getEditedPostId,
 			getPage,
 			isNavigationOpened,
+			getEditorMode,
 		} = select( editSiteStore );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
 		const postType = getEditedPostType();
@@ -102,9 +106,12 @@ function Editor( { onError } ) {
 			nextShortcut: select(
 				keyboardShortcutsStore
 			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
+			editorMode: getEditorMode(),
 		};
 	}, [] );
 	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
 
 	const [
 		isEntitiesSavedStatesOpen,
@@ -147,6 +154,19 @@ function Editor( { onError } ) {
 		}
 	}, [ isNavigationOpen ] );
 
+	useEffect(
+		function openGlobalStylesOnLoad() {
+			const searchParams = new URLSearchParams( window.location.search );
+			if ( searchParams.get( 'styles' ) === 'open' ) {
+				enableComplementaryArea(
+					'core/edit-site',
+					'edit-site/global-styles'
+				);
+			}
+		},
+		[ enableComplementaryArea ]
+	);
+
 	// Don't render the Editor until the settings are set and loaded
 	const isReady =
 		settings?.siteUrl &&
@@ -163,6 +183,18 @@ function Editor( { onError } ) {
 		return null;
 	};
 
+	function onPluginAreaError( name ) {
+		createErrorNotice(
+			sprintf(
+				/* translators: %s: plugin name */
+				__(
+					'The "%s" plugin has encountered an error and cannot be rendered.'
+				),
+				name
+			)
+		);
+	}
+
 	// Only announce the title once the editor is ready to prevent "Replace"
 	// action in <URlQueryController> from double-announcing.
 	useTitle( isReady && __( 'Editor (beta)' ) );
@@ -206,13 +238,18 @@ function Editor( { onError } ) {
 											content={
 												<>
 													<EditorNotices />
-													{ template && (
-														<BlockEditor
-															setIsInserterOpen={
-																setIsInserterOpened
-															}
-														/>
-													) }
+													{ editorMode === 'visual' &&
+														template && (
+															<BlockEditor
+																setIsInserterOpen={
+																	setIsInserterOpened
+																}
+															/>
+														) }
+													{ editorMode === 'text' &&
+														template && (
+															<CodeEditor />
+														) }
 													{ templateResolved &&
 														! template &&
 														settings?.siteUrl &&
@@ -263,7 +300,13 @@ function Editor( { onError } ) {
 													) }
 												</>
 											}
-											footer={ <BlockBreadcrumb /> }
+											footer={
+												<BlockBreadcrumb
+													rootLabelText={ __(
+														'Template'
+													) }
+												/>
+											}
 											shortcuts={ {
 												previous: previousShortcut,
 												next: nextShortcut,
@@ -271,7 +314,9 @@ function Editor( { onError } ) {
 										/>
 										<WelcomeGuide />
 										<Popover.Slot />
-										<PluginArea />
+										<PluginArea
+											onError={ onPluginAreaError }
+										/>
 									</ErrorBoundary>
 								</BlockContextProvider>
 							</GlobalStylesProvider>

package/src/components/global-styles/border-panel.js

@@ -7,7 +7,8 @@ import {
 	__experimentalColorGradientControl as ColorGradientControl,
 } from '@wordpress/block-editor';
 import {
-	PanelBody,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
@@ -68,6 +69,18 @@ function useHasBorderWidthControl( name ) {
 }
 
 export default function BorderPanel( { name } ) {
+	// To better reflect if the user has customized a value we need to
+	// ensure the style value being checked is from the `user` origin.
+	const [ userBorderStyles ] = useStyle( 'border', name, 'user' );
+	const createHasValueCallback = ( feature ) => () =>
+		!! userBorderStyles?.[ feature ];
+
+	const createResetCallback = ( setStyle ) => () => setStyle( undefined );
+
+	const handleOnChange = ( setStyle ) => ( value ) => {
+		setStyle( value || undefined );
+	};
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' )[ 0 ] || [
 			'px',
@@ -77,70 +90,121 @@ export default function BorderPanel( { name } ) {
 	} );
 
 	// Border width.
-	const hasBorderWidth = useHasBorderWidthControl( name );
+	const showBorderWidth = useHasBorderWidthControl( name );
 	const [ borderWidthValue, setBorderWidth ] = useStyle(
 		'border.width',
 		name
 	);
 
 	// Border style.
-	const hasBorderStyle = useHasBorderStyleControl( name );
+	const showBorderStyle = useHasBorderStyleControl( name );
 	const [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );
 
 	// Border color.
+	const showBorderColor = useHasBorderColorControl( name );
+	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
 	const [ colors = EMPTY_ARRAY ] = useSetting( 'color.palette' );
 	const disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];
 	const disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];
-	const hasBorderColor = useHasBorderColorControl( name );
-	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
 
 	// Border radius.
-	const hasBorderRadius = useHasBorderRadiusControl( name );
+	const showBorderRadius = useHasBorderRadiusControl( name );
 	const [ borderRadiusValues, setBorderRadius ] = useStyle(
 		'border.radius',
 		name
 	);
+	const hasBorderRadius = () => {
+		const borderValues = userBorderStyles?.radius;
+		if ( typeof borderValues === 'object' ) {
+			return Object.entries( borderValues ).some( Boolean );
+		}
+		return !! borderValues;
+	};
+
+	const resetAll = () => {
+		setBorderColor( undefined );
+		setBorderRadius( undefined );
+		setBorderStyle( undefined );
+		setBorderWidth( undefined );
+	};
+
+	// When we set a border color or width ensure we have a style so the user
+	// can see a visible border.
+	const handleOnChangeWithStyle = ( setStyle ) => ( value ) => {
+		if ( !! value && ! borderStyle ) {
+			setBorderStyle( 'solid' );
+		}
+
+		setStyle( value || undefined );
+	};
 
 	return (
-		<PanelBody title={ __( 'Border' ) } initialOpen={ true }>
-			{ ( hasBorderWidth || hasBorderStyle ) && (
-				<div className="edit-site-global-styles-sidebar__border-controls-row">
-					{ hasBorderWidth && (
-						<UnitControl
-							value={ borderWidthValue }
-							label={ __( 'Width' ) }
-							min={ MIN_BORDER_WIDTH }
-							onChange={ ( value ) => {
-								setBorderWidth( value || undefined );
-							} }
-							units={ units }
-						/>
-					) }
-					{ hasBorderStyle && (
-						<BorderStyleControl
-							value={ borderStyle }
-							onChange={ setBorderStyle }
-						/>
-					) }
-				</div>
+		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
+			{ showBorderWidth && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ createHasValueCallback( 'width' ) }
+					label={ __( 'Width' ) }
+					onDeselect={ createResetCallback( setBorderWidth ) }
+					isShownByDefault={ true }
+				>
+					<UnitControl
+						value={ borderWidthValue }
+						label={ __( 'Width' ) }
+						min={ MIN_BORDER_WIDTH }
+						onChange={ handleOnChangeWithStyle( setBorderWidth ) }
+						units={ units }
+					/>
+				</ToolsPanelItem>
+			) }
+			{ showBorderStyle && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ createHasValueCallback( 'style' ) }
+					label={ __( 'Style' ) }
+					onDeselect={ createResetCallback( setBorderStyle ) }
+					isShownByDefault={ true }
+				>
+					<BorderStyleControl
+						value={ borderStyle }
+						onChange={ handleOnChange( setBorderStyle ) }
+					/>
+				</ToolsPanelItem>
 			) }
-			{ hasBorderColor && (
-				<ColorGradientControl
+			{ showBorderColor && (
+				<ToolsPanelItem
+					hasValue={ createHasValueCallback( 'color' ) }
 					label={ __( 'Color' ) }
-					colorValue={ borderColor }
-					colors={ colors }
-					gradients={ undefined }
-					disableCustomColors={ disableCustomColors }
-					disableCustomGradients={ disableCustomGradients }
-					onColorChange={ setBorderColor }
-				/>
+					onDeselect={ createResetCallback( setBorderColor ) }
+					isShownByDefault={ true }
+				>
+					<ColorGradientControl
+						label={ __( 'Color' ) }
+						colorValue={ borderColor }
+						colors={ colors }
+						gradients={ undefined }
+						disableCustomColors={ disableCustomColors }
+						disableCustomGradients={ disableCustomGradients }
+						onColorChange={ handleOnChangeWithStyle(
+							setBorderColor
+						) }
+						clearable={ false }
+					/>
+				</ToolsPanelItem>
 			) }
-			{ hasBorderRadius && (
-				<BorderRadiusControl
-					values={ borderRadiusValues }
-					onChange={ setBorderRadius }
-				/>
+			{ showBorderRadius && (
+				<ToolsPanelItem
+					hasValue={ hasBorderRadius }
+					label={ __( 'Radius' ) }
+					onDeselect={ createResetCallback( setBorderRadius ) }
+					isShownByDefault={ true }
+				>
+					<BorderRadiusControl
+						values={ borderRadiusValues }
+						onChange={ handleOnChange( setBorderRadius ) }
+					/>
+				</ToolsPanelItem>
 			) }
-		</PanelBody>
+		</ToolsPanel>
 	);
 }

package/src/components/global-styles/context-menu.js

@@ -12,7 +12,7 @@ import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( name );

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

@@ -31,7 +31,7 @@ function mergeTreesCustomizer( _, srcValue ) {
 	}
 }
 
-function mergeBaseAndUserConfigs( base, user ) {
+export function mergeBaseAndUserConfigs( base, user ) {
 	return mergeWith( {}, base, user, mergeTreesCustomizer );
 }
 
@@ -67,7 +67,6 @@ function useGlobalStylesUserConfig() {
 
 	const { getEditedEntityRecord } = useSelect( coreStore );
 	const { editEntityRecord } = useDispatch( coreStore );
-
 	const config = useMemo( () => {
 		return {
 			settings: settings ?? {},

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

@@ -14,15 +14,14 @@ import { chevronRight, chevronLeft, Icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import NavigationButton from './navigation-button';
+import { NavigationBackButton } from './navigation-button';
 
-function ScreenHeader( { back, title, description } ) {
+function ScreenHeader( { title, description } ) {
 	return (
 		<VStack spacing={ 2 }>
 			<HStack spacing={ 2 }>
 				<View>
-					<NavigationButton
-						path={ back }
+					<NavigationBackButton
 						icon={
 							<Icon
 								icon={ isRTL() ? chevronRight : chevronLeft }
@@ -30,7 +29,6 @@ function ScreenHeader( { back, title, description } ) {
 							/>
 						}
 						size="small"
-						isBack
 						aria-label={ __( 'Navigate to the previous view' ) }
 					/>
 				</View>

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

@@ -9,16 +9,9 @@ import {
 } from '@wordpress/components';
 import { Icon } from '@wordpress/icons';
 
-function NavigationButton( {
-	path,
-	icon,
-	children,
-	isBack = false,
-	...props
-} ) {
-	const navigator = useNavigator();
+function GenericNavigationButton( { icon, children, ...props } ) {
 	return (
-		<Item onClick={ () => navigator.push( path, { isBack } ) } { ...props }>
+		<Item { ...props }>
 			{ icon && (
 				<HStack justify="flex-start">
 					<FlexItem>
@@ -32,4 +25,32 @@ function NavigationButton( {
 	);
 }
 
-export default NavigationButton;
+function NavigationButton( { path, ...props } ) {
+	const { goTo } = useNavigator();
+
+	const dataAttrName = 'data-navigator-focusable-id';
+	const dataAttrValue = path;
+
+	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
+
+	const buttonProps = {
+		...props,
+		[ dataAttrName ]: dataAttrValue,
+	};
+
+	return (
+		<GenericNavigationButton
+			onClick={ () =>
+				goTo( path, { focusTargetSelector: dataAttrCssSelector } )
+			}
+			{ ...buttonProps }
+		/>
+	);
+}
+
+function NavigationBackButton( { ...props } ) {
+	const { goBack } = useNavigator();
+	return <GenericNavigationButton onClick={ goBack } { ...props } />;
+}
+
+export { NavigationButton, NavigationBackButton };

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

@@ -17,7 +17,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import Subtitle from './subtitle';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { useSetting } from './hooks';
 
 const EMPTY_COLORS = [];
@@ -59,7 +59,11 @@ function Palette( { name } ) {
 			<Subtitle>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
 				<NavigationButton path={ screenPath }>
-					<HStack isReversed={ colors.length === 0 }>
+					<HStack
+						direction={
+							colors.length === 0 ? 'row-reverse' : 'row'
+						}
+					>
 						<FlexBlock>
 							<ZStack isLayered={ false } offset={ -8 }>
 								{ colors.slice( 0, 5 ).map( ( { color } ) => (

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

@@ -2,41 +2,69 @@
  * WordPress dependencies
  */
 import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	Card,
-	ColorIndicator,
-} from '@wordpress/components';
+	__unstableIframe as Iframe,
+	__unstableEditorStyles as EditorStyles,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { useStyle } from './hooks';
+import { useGlobalStylesOutput } from './use-global-styles-output';
 
-const StylesPreview = () => {
+const StylesPreview = ( { height = 150 } ) => {
 	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
 	const [ textColor = 'black' ] = useStyle( 'color.text' );
 	const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );
 	const [ backgroundColor = 'white' ] = useStyle( 'color.background' );
 	const [ gradientValue ] = useStyle( 'color.gradient' );
+	const [ styles ] = useGlobalStylesOutput();
 
 	return (
-		<Card
-			className="edit-site-global-styles-preview"
-			style={ { background: gradientValue ?? backgroundColor } }
+		<Iframe
+			className="edit-site-global-styles-preview__iframe"
+			head={ <EditorStyles styles={ styles } /> }
+			style={ { height } }
 		>
-			<HStack spacing={ 5 }>
+			<div
+				style={ {
+					display: 'flex',
+					gap: 20,
+					alignItems: 'center',
+					justifyContent: 'center',
+					height: '100%',
+					transform: `scale(${ height / 150 })`,
+					background: gradientValue ?? backgroundColor,
+					cursor: 'pointer',
+				} }
+			>
+				<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
 				<div
-					style={ { fontFamily, fontSize: '80px', color: textColor } }
+					style={ {
+						display: 'flex',
+						gap: 20,
+						flexDirection: 'column',
+					} }
 				>
-					Aa
+					<div
+						style={ {
+							height: 40,
+							width: 40,
+							background: textColor,
+							borderRadius: 20,
+						} }
+					/>{ ' ' }
+					<div
+						style={ {
+							height: 40,
+							width: 40,
+							background: linkColor,
+							borderRadius: 20,
+						} }
+					/>
 				</div>
-				<VStack spacing={ 2 }>
-					<ColorIndicator colorValue={ textColor } />
-					<ColorIndicator colorValue={ linkColor } />
-				</VStack>
-			</HStack>
-		</Card>
+			</div>
+		</Iframe>
 	);
 };