@wordpress/edit-site 5.2.0 → 5.3.0

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

@@ -27,6 +27,11 @@
 		height: 100%;
 	}
 
+	.edit-site-visual-editor__editor-canvas {
+		height: 100%;
+		background: $white;
+	}
+
 	&.is-focus-mode {
 		.edit-site-layout.is-full-canvas & {
 			padding: $grid-unit-60;
@@ -97,13 +102,16 @@
 
 	&.is-variation-separator {
 		height: 100%;
+		width: $grid-unit-30;
+		right: 0;
 
 		&::after {
-			width: 1px;
+			width: 2px;
 			border-radius: 0;
-			background: $gray-800;
-			left: auto;
-			right: 50%;
+			background: transparent;
+			left: 50%;
+			transform: translateX(-1px);
+			right: 0;
 			transition: all ease 0.2s;
 			transition-delay: 0.1s;
 			@include reduce-motion;
@@ -112,10 +120,10 @@
 
 	&::after {
 		position: absolute;
-		top: 0;
+		top: $grid-unit-30;
 		left: $grid-unit-05;
 		right: 0;
-		bottom: 0;
+		bottom: $grid-unit-30;
 		content: "";
 		width: $grid-unit-05;
 		background: $gray-600;
@@ -137,7 +145,6 @@
 			background: $gray-400;
 		}
 		&.is-variation-separator::after {
-			width: 2px;
 			background: var(--wp-admin-theme-color);
 		}
 	}
@@ -145,4 +152,9 @@
 	&:focus::after {
 		box-shadow: 0 0 0 1px $gray-800, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
 	}
+
+	&.is-variation-separator:focus::after {
+		border-radius: $radius-block-ui;
+		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+	}
 }

package/src/components/canvas-spinner/index.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Spinner } from '@wordpress/components';
+
+export default function CanvasSpinner() {
+	return (
+		<div className="edit-site-canvas-spinner">
+			<Spinner />
+		</div>
+	);
+}

package/src/components/canvas-spinner/style.scss

@@ -0,0 +1,7 @@
+.edit-site-canvas-spinner {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}

package/src/components/create-template-part-modal/index.js

@@ -13,6 +13,7 @@ import {
 	Modal,
 	__experimentalRadioGroup as RadioGroup,
 	__experimentalRadio as Radio,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
@@ -40,7 +41,6 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 	return (
 		<Modal
 			title={ __( 'Create a template part' ) }
-			closeLabel={ __( 'Close' ) }
 			onRequestClose={ closeModal }
 			overlayClassName="edit-site-create-template-part-modal"
 		>
@@ -54,76 +54,84 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 					await onCreate( { title, area } );
 				} }
 			>
-				<TextControl
-					label={ __( 'Name' ) }
-					value={ title }
-					onChange={ setTitle }
-					required
-				/>
-				<BaseControl
-					label={ __( 'Area' ) }
-					id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
-					className="edit-site-create-template-part-modal__area-base-control"
-				>
-					<RadioGroup
+				<VStack spacing="4">
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						required
+					/>
+					<BaseControl
 						label={ __( 'Area' ) }
-						className="edit-site-create-template-part-modal__area-radio-group"
 						id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
-						onChange={ setArea }
-						checked={ area }
+						className="edit-site-create-template-part-modal__area-base-control"
 					>
-						{ templatePartAreas.map(
-							( { icon, label, area: value, description } ) => (
-								<Radio
-									key={ label }
-									value={ value }
-									className="edit-site-create-template-part-modal__area-radio"
-								>
-									<Flex align="start" justify="start">
-										<FlexItem>
-											<Icon icon={ icon } />
-										</FlexItem>
-										<FlexBlock className="edit-site-create-template-part-modal__option-label">
-											{ label }
-											<div>{ description }</div>
-										</FlexBlock>
-
-										<FlexItem className="edit-site-create-template-part-modal__checkbox">
-											{ area === value && (
-												<Icon icon={ check } />
-											) }
-										</FlexItem>
-									</Flex>
-								</Radio>
-							)
-						) }
-					</RadioGroup>
-				</BaseControl>
-				<Flex
-					className="edit-site-create-template-part-modal__modal-actions"
-					justify="flex-end"
-				>
-					<FlexItem>
-						<Button
-							variant="secondary"
-							onClick={ () => {
-								closeModal();
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-					</FlexItem>
-					<FlexItem>
-						<Button
-							variant="primary"
-							type="submit"
-							disabled={ ! title }
-							isBusy={ isSubmitting }
+						<RadioGroup
+							label={ __( 'Area' ) }
+							className="edit-site-create-template-part-modal__area-radio-group"
+							id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
+							onChange={ setArea }
+							checked={ area }
 						>
-							{ __( 'Create' ) }
-						</Button>
-					</FlexItem>
-				</Flex>
+							{ templatePartAreas.map(
+								( {
+									icon,
+									label,
+									area: value,
+									description,
+								} ) => (
+									<Radio
+										key={ label }
+										value={ value }
+										className="edit-site-create-template-part-modal__area-radio"
+									>
+										<Flex align="start" justify="start">
+											<FlexItem>
+												<Icon icon={ icon } />
+											</FlexItem>
+											<FlexBlock className="edit-site-create-template-part-modal__option-label">
+												{ label }
+												<div>{ description }</div>
+											</FlexBlock>
+
+											<FlexItem className="edit-site-create-template-part-modal__checkbox">
+												{ area === value && (
+													<Icon icon={ check } />
+												) }
+											</FlexItem>
+										</Flex>
+									</Radio>
+								)
+							) }
+						</RadioGroup>
+					</BaseControl>
+					<Flex
+						className="edit-site-create-template-part-modal__modal-actions"
+						justify="flex-end"
+					>
+						<FlexItem>
+							<Button
+								variant="secondary"
+								onClick={ () => {
+									closeModal();
+								} }
+							>
+								{ __( 'Cancel' ) }
+							</Button>
+						</FlexItem>
+						<FlexItem>
+							<Button
+								variant="primary"
+								type="submit"
+								disabled={ ! title }
+								isBusy={ isSubmitting }
+							>
+								{ __( 'Create' ) }
+							</Button>
+						</FlexItem>
+					</Flex>
+				</VStack>
 			</form>
 		</Modal>
 	);

package/src/components/create-template-part-modal/style.scss

@@ -8,16 +8,6 @@
 	}
 }
 
-
-.edit-site-create-template-part-modal__modal-actions {
-	padding-top: $grid-unit-15;
-}
-
-.edit-site-create-template-part-modal__area-base-control .components-base-control__label {
-	margin: $grid-unit-20 0 $grid-unit-10;
-	cursor: auto;
-}
-
 .edit-site-create-template-part-modal__area-radio-group {
 	width: 100%;
 	border: $border-width solid $gray-700;

package/src/components/editor/index.js

@@ -37,6 +37,7 @@ import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
 import useTitle from '../routes/use-title';
+import CanvasSpinner from '../canvas-spinner';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
@@ -149,7 +150,7 @@ export default function Editor() {
 	useTitle( isReady && __( 'Editor (beta)' ) );
 
 	if ( ! isReady ) {
-		return null;
+		return <CanvasSpinner />;
 	}
 
 	return (
@@ -179,7 +180,8 @@ export default function Editor() {
 											<BlockEditor />
 										) }
 										{ editorMode === 'text' &&
-											editedPost && <CodeEditor /> }
+											editedPost &&
+											isEditMode && <CodeEditor /> }
 										{ hasLoadedPost && ! editedPost && (
 											<Notice
 												status="warning"

package/src/components/error-boundary/index.js

@@ -14,8 +14,6 @@ export default class ErrorBoundary extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.reboot = this.reboot.bind( this );
-
 		this.state = {
 			error: null,
 		};
@@ -29,13 +27,8 @@ export default class ErrorBoundary extends Component {
 		return { error };
 	}
 
-	reboot() {
-		this.props.onError();
-	}
-
 	render() {
-		const { error } = this.state;
-		if ( ! error ) {
+		if ( ! this.state.error ) {
 			return this.props.children;
 		}
 
@@ -44,8 +37,7 @@ export default class ErrorBoundary extends Component {
 				message={ __(
 					'The editor has encountered an unexpected error.'
 				) }
-				error={ error }
-				reboot={ this.reboot }
+				error={ this.state.error }
 			/>
 		);
 	}

package/src/components/error-boundary/warning.js

@@ -15,41 +15,12 @@ function CopyButton( { text, children } ) {
 	);
 }
 
-export default function ErrorBoundaryWarning( {
-	message,
-	error,
-	reboot,
-	dashboardLink,
-} ) {
-	const actions = [];
-
-	if ( reboot ) {
-		actions.push(
-			<Button key="recovery" onClick={ reboot } variant="secondary">
-				{ __( 'Attempt Recovery' ) }
-			</Button>
-		);
-	}
-
-	if ( error ) {
-		actions.push(
-			<CopyButton key="copy-error" text={ error.stack }>
-				{ __( 'Copy Error' ) }
-			</CopyButton>
-		);
-	}
-
-	if ( dashboardLink ) {
-		actions.push(
-			<Button
-				key="back-to-dashboard"
-				variant="secondary"
-				href={ dashboardLink }
-			>
-				{ __( 'Back to dashboard' ) }
-			</Button>
-		);
-	}
+export default function ErrorBoundaryWarning( { message, error } ) {
+	const actions = [
+		<CopyButton key="copy-error" text={ error.stack }>
+			{ __( 'Copy Error' ) }
+		</CopyButton>,
+	];
 
 	return (
 		<Warning className="editor-error-boundary" actions={ actions }>

package/src/components/global-styles/README.md

@@ -1,6 +1,6 @@
 # Global Styles
 
-This folder contains all the necessary APIs to render the global styles UI and to manipulate the global styles data. It can be potentially extracted to its own package.
+This folder contains the global styles UI.
 
 # Available public APIs
 
@@ -15,77 +15,3 @@ function MyComponent() {
 	return <GlobalStylesUI />;
 }
 ```
-
-## useGlobalStylesReset
-
-A React hook used to retrieve whether the Global Styles have been edited and a callback to reset to the default theme values.
-
-```js
-import { useGlobalStylesReset } from './global-styles';
-
-function MyComponent() {
-	const [ canReset, reset ] = useGlobalStylesReset();
-
-	return canReset 
-		? <Button onClick={ () => reset() }>Reset</Button> 
-		: null;
-}
-```
-
-## useGlobalStylesOutput
-
-A React hook used to retrieve the styles array and settings to provide for block editor instances based on the current global styles.
-
-```js
-import { useGlobalStylesOutput } from './global-styles';
-import { BlockEditorProvider, BlockList } from '@wordpress/block-editor';
-
-function MyComponent() {
-	const [ styles, settings ] = useGlobalStylesOutput();
-
-	return <BlockEditorProvider settings={{
-		styles,
-		__experimentalFeatures: settings
-	}}>
-		<BlockList />
-	</BlockEditorProvider>
-}
-```
-
-## useStyle
-
-A react hook used to retrieve the style applied to a given context.
-
-```js
-import { useStyle } from './global-styles';
-
-function MyComponent() {
-	// Text color for the site root.
-	const [ color, setColor ] = useStyle( 'color.text' ); 
-
-	// The user modified color for the core paragraph block.
-	const [ pColor, setPColor ] = useStyle( 'color.text', 'core/paragraph', 'user' ); 
-
-	return "Something";
-}
-```
-
-## useSetting
-
-A react hook used to retrieve the setting applied to a given context.
-
-```js
-import { useSetting } from './global-styles';
-
-function MyComponent() {
-	// The default color palette.
-	const [ colorPalette, setColorPalette ] = useSetting( 'color.palette' ); 
-
-	// The base (theme + core) color palette for the paragraph block,
-	// ignoring user provided palette.
-	// If the palette is not defined for the paragraph block, the root one is returned.
-	const [ pColor, setPColor ] = useSetting( 'color.palette', 'core/paragraph', 'base' ); 
-
-	return "Something";
-}
-```

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

@@ -36,8 +36,8 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 				<BlockPreview
 					blocks={ blocks }
 					viewportWidth={ viewportWidth }
-					__experimentalMinHeight={ minHeight }
-					__experimentalStyles={ [
+					minHeight={ minHeight }
+					additionalStyles={ [
 						{
 							css: `
 								body{

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

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalBorderRadiusControl as BorderRadiusControl } from '@wordpress/block-editor';
+import {
+	__experimentalBorderRadiusControl as BorderRadiusControl,
+	experiments as blockEditorExperiments,
+} from '@wordpress/block-editor';
 import {
 	__experimentalBorderBoxControl as BorderBoxControl,
 	__experimentalHasSplitBorders as hasSplitBorders,
@@ -15,12 +18,10 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import {
-	getSupportedGlobalStylesPanels,
-	useColorsPerOrigin,
-	useSetting,
-	useStyle,
-} from './hooks';
+import { getSupportedGlobalStylesPanels, useColorsPerOrigin } from './hooks';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
 export function useHasBorderPanel( name ) {
 	const controls = [
@@ -36,7 +37,7 @@ export function useHasBorderPanel( name ) {
 function useHasBorderColorControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	return (
-		useSetting( 'border.color', name )[ 0 ] &&
+		useGlobalSetting( 'border.color', name )[ 0 ] &&
 		supports.includes( 'borderColor' )
 	);
 }
@@ -44,7 +45,7 @@ function useHasBorderColorControl( name ) {
 function useHasBorderRadiusControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	return (
-		useSetting( 'border.radius', name )[ 0 ] &&
+		useGlobalSetting( 'border.radius', name )[ 0 ] &&
 		supports.includes( 'borderRadius' )
 	);
 }
@@ -52,7 +53,7 @@ function useHasBorderRadiusControl( name ) {
 function useHasBorderStyleControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	return (
-		useSetting( 'border.style', name )[ 0 ] &&
+		useGlobalSetting( 'border.style', name )[ 0 ] &&
 		supports.includes( 'borderStyle' )
 	);
 }
@@ -60,7 +61,7 @@ function useHasBorderStyleControl( name ) {
 function useHasBorderWidthControl( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	return (
-		useSetting( 'border.width', name )[ 0 ] &&
+		useGlobalSetting( 'border.width', name )[ 0 ] &&
 		supports.includes( 'borderWidth' )
 	);
 }
@@ -94,15 +95,16 @@ function applyAllFallbackStyles( border ) {
 	return applyFallbackStyle( border );
 }
 
-export default function BorderPanel( { name, variationPath = '' } ) {
+export default function BorderPanel( { name, variation = '' } ) {
+	const prefix = variation ? `variations.${ variation }.` : '';
 	// 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(
-		`${ variationPath }border`,
+	const [ userBorderStyles ] = useGlobalStyle(
+		`${ prefix }border`,
 		name,
 		'user'
 	);
-	const [ border, setBorder ] = useStyle( `${ variationPath }border`, name );
+	const [ border, setBorder ] = useGlobalStyle( `${ prefix }border`, name );
 	const colors = useColorsPerOrigin( name );
 
 	const showBorderColor = useHasBorderColorControl( name );
@@ -111,8 +113,8 @@ export default function BorderPanel( { name, variationPath = '' } ) {
 
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( name );
-	const [ borderRadiusValues, setBorderRadius ] = useStyle(
-		`${ variationPath }border.radius`,
+	const [ borderRadiusValues, setBorderRadius ] = useGlobalStyle(
+		`${ prefix }border.radius`,
 		name
 	);
 	const hasBorderRadius = () => {

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

@@ -6,37 +6,40 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { experiments as blockEditorExperiments } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { useSetting } from './hooks';
+import { unlock } from '../../experiments';
+
+const { useGlobalSetting } = unlock( blockEditorExperiments );
 
 export default function ColorPalettePanel( { name } ) {
-	const [ themeColors, setThemeColors ] = useSetting(
+	const [ themeColors, setThemeColors ] = useGlobalSetting(
 		'color.palette.theme',
 		name
 	);
-	const [ baseThemeColors ] = useSetting(
+	const [ baseThemeColors ] = useGlobalSetting(
 		'color.palette.theme',
 		name,
 		'base'
 	);
-	const [ defaultColors, setDefaultColors ] = useSetting(
+	const [ defaultColors, setDefaultColors ] = useGlobalSetting(
 		'color.palette.default',
 		name
 	);
-	const [ baseDefaultColors ] = useSetting(
+	const [ baseDefaultColors ] = useGlobalSetting(
 		'color.palette.default',
 		name,
 		'base'
 	);
-	const [ customColors, setCustomColors ] = useSetting(
+	const [ customColors, setCustomColors ] = useGlobalSetting(
 		'color.palette.custom',
 		name
 	);
 
-	const [ defaultPaletteEnabled ] = useSetting(
+	const [ defaultPaletteEnabled ] = useGlobalSetting(
 		'color.defaultPalette',
 		name
 	);