@wordpress/edit-site 3.0.26 → 3.1.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

@@ -30,6 +30,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 +61,7 @@ function Editor( { onError } ) {
 		isNavigationOpen,
 		previousShortcut,
 		nextShortcut,
+		editorMode,
 	} = useSelect( ( select ) => {
 		const {
 			isInserterOpened,
@@ -69,6 +71,7 @@ function Editor( { onError } ) {
 			getEditedPostId,
 			getPage,
 			isNavigationOpened,
+			getEditorMode,
 		} = select( editSiteStore );
 		const { hasFinishedResolution, getEntityRecord } = select( coreStore );
 		const postType = getEditedPostType();
@@ -102,6 +105,7 @@ function Editor( { onError } ) {
 			nextShortcut: select(
 				keyboardShortcutsStore
 			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
+			editorMode: getEditorMode(),
 		};
 	}, [] );
 	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
@@ -220,13 +224,18 @@ function Editor( { onError } ) {
 											content={
 												<>
 													<EditorNotices />
-													{ template && (
-														<BlockEditor
-															setIsInserterOpen={
-																setIsInserterOpened
-															}
-														/>
-													) }
+													{ editorMode === 'visual' &&
+														template && (
+															<BlockEditor
+																setIsInserterOpen={
+																	setIsInserterOpened
+																}
+															/>
+														) }
+													{ editorMode === 'text' &&
+														template && (
+															<CodeEditor />
+														) }
 													{ templateResolved &&
 														! template &&
 														settings?.siteUrl &&

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>
@@ -31,5 +24,16 @@ function NavigationButton( {
 		</Item>
 	);
 }
+function NavigationButton( { path, ...props } ) {
+	const { push } = useNavigator();
+	return (
+		<GenericNavigationButton onClick={ () => push( path ) } { ...props } />
+	);
+}
+
+function NavigationBackButton( { ...props } ) {
+	const { pop } = useNavigator();
+	return <GenericNavigationButton onClick={ pop } { ...props } />;
+}
 
-export default NavigationButton;
+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 = [];

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

package/src/components/global-styles/screen-background-color.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -17,7 +17,6 @@ import {
 } from './hooks';
 
 function ScreenBackgroundColor( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ gradients ] = useSetting( 'color.gradients', name );
@@ -55,7 +54,6 @@ function ScreenBackgroundColor( { name } ) {
 		return null;
 	}
 
-	const settings = [];
 	let backgroundSettings = {};
 	if ( hasBackgroundColor ) {
 		backgroundSettings = {
@@ -79,25 +77,21 @@ function ScreenBackgroundColor( { name } ) {
 		}
 	}
 
-	settings.push( {
+	const controlProps = {
 		...backgroundSettings,
 		...gradientSettings,
-		label: __( 'Background color' ),
-	} );
+	};
 
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Background' ) }
 				description={ __(
-					'Set a background color or gradient for the whole website.'
+					'Set a background color or gradient for the whole site.'
 				) }
 			/>
-
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				settings={ settings }
+			<ColorGradientControl
+				className="edit-site-screen-background-color__control"
 				colors={ colorsPerOrigin }
 				gradients={ gradientsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
@@ -106,6 +100,7 @@ function ScreenBackgroundColor( { name } ) {
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				{ ...controlProps }
 			/>
 		</>
 	);

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

@@ -17,7 +17,7 @@ import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
 import ScreenHeader from './header';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 
 function BlockMenuItem( { block } ) {
 	const hasTypographyPanel = useHasTypographyPanel( block.name );
@@ -48,7 +48,6 @@ function ScreenBlockList() {
 	return (
 		<>
 			<ScreenHeader
-				back="/"
 				title={ __( 'Blocks' ) }
 				description={ __(
 					'Customize the appearance of specific blocks and for the whole site.'

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

@@ -14,7 +14,7 @@ function ScreenBlock( { name } ) {
 
 	return (
 		<>
-			<ScreenHeader back="/blocks" title={ blockType.title } />
+			<ScreenHeader title={ blockType.title } />
 			<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />
 		</>
 	);

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

@@ -17,12 +17,10 @@ import ScreenHeader from './header';
 
 function ScreenColorPalette( { name } ) {
 	const [ currentTab, setCurrentTab ] = useState( 'solid' );
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Palette' ) }
 				description={ __(
 					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'

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

@@ -15,7 +15,7 @@ import {
  */
 import ScreenHeader from './header';
 import Palette from './palette';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 
@@ -93,10 +93,9 @@ function ScreenColors( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu ? parentMenu : '/' }
 				title={ __( 'Colors' ) }
 				description={ __(
-					'Manage palettes and the default color of different global elements on the website.'
+					'Manage palettes and the default color of different global elements on the site.'
 				) }
 			/>