@wordpress/edit-site 3.0.17 → 3.0.18-next.33ec3857e2.0

package/build-style/style.css

@@ -468,10 +468,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   border-radius: 2px;
 }
 
-.edit-site-visual-editor__editor-canvas {
-  border-radius: 2px 2px 0 0;
-}
-
 .edit-site-visual-editor__back-button {
   position: absolute;
   top: 8px;
@@ -492,28 +488,24 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   bottom: 0;
   padding: 0;
   margin: auto 0;
-  width: 8px;
+  width: 4px;
   height: 100px;
   -webkit-appearance: none;
           appearance: none;
-  cursor: grab;
+  cursor: ew-resize;
   outline: none;
-  background: #757575;
-  border-radius: 4px;
+  background: #949494;
+  border-radius: 2px;
   border: 0;
 }
 .resizable-editor__drag-handle.is-left {
-  left: -28px;
+  left: -16px;
 }
 .resizable-editor__drag-handle.is-right {
-  right: -28px;
+  right: -16px;
 }
-.resizable-editor__drag-handle:hover {
-  background: #949494;
-}
-.resizable-editor__drag-handle:active {
-  cursor: grabbing;
-  background: #949494;
+.resizable-editor__drag-handle:hover, .resizable-editor__drag-handle:active {
+  background: #ccc;
 }
 .resizable-editor__drag-handle:focus {
   box-shadow: 0 0 0 1px #2f2f2f, 0 0 0 calc(var(--wp-admin-border-width-focus) + 1px) var(--wp-admin-theme-color);
@@ -526,14 +518,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   min-height: 152px;
   line-height: 1;
 }
-.edit-site-global-styles-preview .component-color-indicator {
-  border-radius: 50%;
-  border: 0;
-  height: 36px;
-  width: 36px;
-  margin-left: 0;
-  padding: 0;
-}
 
 .edit-site-typography-panel__preview {
   display: flex;
@@ -563,13 +547,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin: 16px;
 }
 .edit-site-global-styles-screen-colors .component-color-indicator {
-  margin-left: 0;
-  display: block;
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  padding: 0;
-  border: 1px solid #ddd;
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
@@ -600,6 +577,12 @@ h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-he
   margin-bottom: 8px;
 }
 
+.edit-site-screen-text-color__control,
+.edit-site-screen-link-color__control,
+.edit-site-screen-background-color__control {
+  padding: 16px;
+}
+
 .edit-site-header {
   align-items: center;
   background-color: #fff;
@@ -628,6 +611,8 @@ body.is-fullscreen-mode .edit-site-header {
   display: flex;
   align-items: center;
   height: 100%;
+  flex-grow: 1;
+  justify-content: center;
   min-width: 0;
 }
 .edit-site-header .edit-site-header_end {
@@ -705,7 +690,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
 .edit-site-header__actions {
   display: inline-flex;
   align-items: center;
-  flex-wrap: wrap;
   padding-right: 4px;
 }
 .edit-site-header__actions .interface-pinned-items {
@@ -760,6 +744,7 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding: 0 8px;
   height: 100%;
   min-width: 0;
 }
@@ -786,17 +771,6 @@ body.is-navigation-sidebar-open .edit-site-header .edit-site-header_end .compone
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 120px;
-}
-@media (min-width: 782px) {
-  .edit-site-document-actions .edit-site-document-actions__title {
-    max-width: 75px;
-  }
-}
-@media (min-width: 1080px) {
-  .edit-site-document-actions .edit-site-document-actions__title {
-    max-width: 180px;
-  }
 }
 .edit-site-document-actions .edit-site-document-actions__secondary-item {
   white-space: nowrap;
@@ -1288,6 +1262,20 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
+.edit-site-global-styles-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.edit-site-global-styles-sidebar__panel, .edit-site-global-styles-sidebar__navigator-provider {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.edit-site-global-styles-sidebar__navigator-screen {
+  flex: 1;
+}
+
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
   margin-left: 0;
 }
@@ -1296,18 +1284,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin-left: auto;
 }
 
-.edit-site-global-styles-sidebar__border-controls-row {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-.edit-site-global-styles-sidebar__border-controls-row > * {
-  width: calc(50% - 8px);
-}
-.edit-site-global-styles-sidebar__border-controls-row .components-border-style-control__buttons {
-  margin-bottom: 0;
-}
-
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
   font-size: 15.6px;
   font-weight: 500;
@@ -1322,6 +1298,10 @@ body.is-fullscreen-mode .edit-site-list-header {
   border: 0;
 }
 
+.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
+  grid-column: span 1;
+}
+
 .edit-site-global-styles-sidebar__blocks-group {
   padding-top: 24px;
   border-top: 1px solid #e0e0e0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "3.0.17",
+	"version": "3.0.18-next.33ec3857e2.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,32 +27,32 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.2.4",
-		"@wordpress/api-fetch": "^5.2.6",
-		"@wordpress/block-editor": "^8.0.11",
-		"@wordpress/block-library": "^6.0.15",
-		"@wordpress/blocks": "^11.1.4",
-		"@wordpress/components": "^19.1.5",
-		"@wordpress/compose": "^5.0.6",
-		"@wordpress/core-data": "^4.0.8",
-		"@wordpress/data": "^6.1.4",
-		"@wordpress/data-controls": "^2.2.7",
-		"@wordpress/editor": "^12.0.14",
-		"@wordpress/element": "^4.0.4",
-		"@wordpress/hooks": "^3.2.2",
-		"@wordpress/html-entities": "^3.2.3",
-		"@wordpress/i18n": "^4.2.4",
-		"@wordpress/icons": "^6.1.1",
-		"@wordpress/interface": "^4.1.13",
-		"@wordpress/keyboard-shortcuts": "^3.0.6",
-		"@wordpress/keycodes": "^3.2.4",
-		"@wordpress/media-utils": "^3.0.5",
-		"@wordpress/notices": "^3.2.7",
-		"@wordpress/plugins": "^4.0.6",
-		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/reusable-blocks": "^3.0.17",
-		"@wordpress/url": "^3.3.1",
-		"@wordpress/viewport": "^4.0.6",
+		"@wordpress/a11y": "^3.2.5-next.33ec3857e2.0",
+		"@wordpress/api-fetch": "^5.2.7-next.33ec3857e2.0",
+		"@wordpress/block-editor": "^8.0.12-next.33ec3857e2.0",
+		"@wordpress/block-library": "^6.0.17-next.33ec3857e2.0",
+		"@wordpress/blocks": "^11.1.5-next.33ec3857e2.0",
+		"@wordpress/components": "^19.2.1-next.33ec3857e2.0",
+		"@wordpress/compose": "^5.0.7-next.33ec3857e2.0",
+		"@wordpress/core-data": "^4.0.10-next.33ec3857e2.0",
+		"@wordpress/data": "^6.1.6-next.33ec3857e2.0",
+		"@wordpress/data-controls": "^2.2.8-next.33ec3857e2.0",
+		"@wordpress/editor": "^12.0.15-next.33ec3857e2.0",
+		"@wordpress/element": "^4.0.6-next.33ec3857e2.0",
+		"@wordpress/hooks": "^3.2.3-next.33ec3857e2.0",
+		"@wordpress/html-entities": "^3.2.4-next.33ec3857e2.0",
+		"@wordpress/i18n": "^4.2.5-next.33ec3857e2.0",
+		"@wordpress/icons": "^6.1.2-next.33ec3857e2.0",
+		"@wordpress/interface": "^4.1.14-next.33ec3857e2.0",
+		"@wordpress/keyboard-shortcuts": "^3.0.7-next.33ec3857e2.0",
+		"@wordpress/keycodes": "^3.2.5-next.33ec3857e2.0",
+		"@wordpress/media-utils": "^3.0.6-next.33ec3857e2.0",
+		"@wordpress/notices": "^3.2.8-next.33ec3857e2.0",
+		"@wordpress/plugins": "^4.0.7-next.33ec3857e2.0",
+		"@wordpress/primitives": "^3.0.5-next.33ec3857e2.0",
+		"@wordpress/reusable-blocks": "^3.0.18-next.33ec3857e2.0",
+		"@wordpress/url": "^3.3.2-next.33ec3857e2.0",
+		"@wordpress/viewport": "^4.0.7-next.33ec3857e2.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"file-saver": "^2.0.2",
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "3665e3e1b121046300d8b2fa35074d748f16dbc2"
+	"gitHead": "51c7917ea7fac72953702f24d6daac87d99e7617"
 }

package/src/components/block-editor/resizable-editor.js

@@ -137,6 +137,7 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
 						}</style>
 					</>
 				}
+				assets={ settings.__unstableResolvedAssets }
 				ref={ ref }
 				name="editor-canvas"
 				className="edit-site-visual-editor__editor-canvas"

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

@@ -19,18 +19,14 @@
 	align-items: center;
 
 	&.is-focus-mode {
-		padding: 48px;
+		padding: $grid-unit-60;
 
 		.edit-site-visual-editor__editor-canvas {
-			border-radius: 2px;
+			border-radius: $radius-block-ui;
 		}
 	}
 }
 
-.edit-site-visual-editor__editor-canvas {
-	border-radius: 2px 2px 0 0;
-}
-
 .edit-site-visual-editor__back-button {
 	position: absolute;
 	top: $grid-unit-10;
@@ -55,30 +51,26 @@
 	bottom: 0;
 	padding: 0;
 	margin: auto 0;
-	width: $grid-unit-10;
+	width: $grid-unit-05;
 	height: $height;
 	appearance: none;
-	cursor: grab;
+	cursor: ew-resize;
 	outline: none;
-	background: $gray-700;
-	border-radius: 4px;
+	background: $gray-600;
+	border-radius: 2px;
 	border: 0;
 
 	&.is-left {
-		left: #{-$grid-unit-30 - $grid-unit-05};
+		left: -$grid-unit-20;
 	}
 
 	&.is-right {
-		right: #{-$grid-unit-30 - $grid-unit-05};
-	}
-
-	&:hover {
-		background: $gray-600;
+		right: -$grid-unit-20;
 	}
 
+	&:hover,
 	&:active {
-		cursor: grabbing;
-		background: $gray-600;
+		background: $gray-400;
 	}
 
 	&:focus {

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/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
@@ -55,7 +55,6 @@ function ScreenBackgroundColor( { name } ) {
 		return null;
 	}
 
-	const settings = [];
 	let backgroundSettings = {};
 	if ( hasBackgroundColor ) {
 		backgroundSettings = {
@@ -79,11 +78,10 @@ function ScreenBackgroundColor( { name } ) {
 		}
 	}
 
-	settings.push( {
+	const controlProps = {
 		...backgroundSettings,
 		...gradientSettings,
-		label: __( 'Background color' ),
-	} );
+	};
 
 	return (
 		<>
@@ -91,13 +89,11 @@ function ScreenBackgroundColor( { name } ) {
 				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 +102,7 @@ function ScreenBackgroundColor( { name } ) {
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				{ ...controlProps }
 			/>
 		</>
 	);

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

@@ -96,7 +96,7 @@ function ScreenColors( { name } ) {
 				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.'
 				) }
 			/>
 

package/src/components/global-styles/screen-link-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
@@ -44,15 +44,6 @@ function ScreenLinkColor( { name } ) {
 		return null;
 	}
 
-	const settings = [
-		{
-			colorValue: linkColor,
-			onColorChange: setLinkColor,
-			label: __( 'Link color' ),
-			clearable: linkColor === userLinkColor,
-		},
-	];
-
 	return (
 		<>
 			<ScreenHeader
@@ -62,16 +53,17 @@ function ScreenLinkColor( { name } ) {
 					'Set the default color used for links across the site.'
 				) }
 			/>
-
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				settings={ settings }
+			<ColorGradientControl
+				className="edit-site-screen-link-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				colorValue={ linkColor }
+				onColorChange={ setLinkColor }
+				clearable={ linkColor === userLinkColor }
 			/>
 		</>
 	);

package/src/components/global-styles/screen-text-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
@@ -36,15 +36,6 @@ function ScreenTextColor( { name } ) {
 		return null;
 	}
 
-	const settings = [
-		{
-			colorValue: color,
-			onColorChange: setColor,
-			label: __( 'Text color' ),
-			clearable: color === userColor,
-		},
-	];
-
 	return (
 		<>
 			<ScreenHeader
@@ -54,16 +45,17 @@ function ScreenTextColor( { name } ) {
 					'Set the default color used for text across the site.'
 				) }
 			/>
-
-			<PanelColorGradientSettings
-				title={ __( 'Color' ) }
-				settings={ settings }
+			<ColorGradientControl
+				className="edit-site-screen-text-color__control"
 				colors={ colorsPerOrigin }
 				disableCustomColors={ ! areCustomSolidsEnabled }
 				__experimentalHasMultipleOrigins
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				colorValue={ color }
+				onColorChange={ setColor }
+				clearable={ color === userColor }
 			/>
 		</>
 	);