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

package/src/components/global-styles/style.scss

@@ -4,15 +4,6 @@
 	justify-content: center;
 	min-height: 152px;
 	line-height: 1;
-
-	.component-color-indicator {
-		border-radius: 50%;
-		border: 0;
-		height: 36px;
-		width: 36px;
-		margin-left: 0;
-		padding: 0;
-	}
 }
 
 .edit-site-typography-panel__preview {
@@ -43,14 +34,6 @@
 	margin: $grid-unit-20;
 
 	.component-color-indicator {
-		margin-left: 0;
-		display: block;
-		border-radius: 50%;
-		height: 24px;
-		width: 24px;
-		padding: 0;
-		border: $border-width solid $gray-300;
-
 		// Show a diagonal line (crossed out) for empty swatches.
 		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 	}
@@ -83,3 +66,9 @@ h2.edit-site-global-styles-gradient-palette-panel__duotone-heading.components-he
 	font-size: 11px;
 	margin-bottom: $grid-unit-10;
 }
+
+.edit-site-screen-text-color__control,
+.edit-site-screen-link-color__control,
+.edit-site-screen-background-color__control {
+	padding: $grid-unit-20;
+}

package/src/components/global-styles/test/use-global-styles-output.js

@@ -217,10 +217,16 @@ describe( 'global styles renderer', () => {
 									slug: 'black',
 									color: 'black',
 								},
+								{
+									name: 'White to Black',
+									slug: 'white2black',
+									color: 'value',
+								},
 							],
 						},
 					},
 					custom: {
+						white2black: 'value',
 						'font-primary': 'value',
 						'line-height': {
 							body: 1.7,
@@ -257,7 +263,7 @@ describe( 'global styles renderer', () => {
 			};
 
 			expect( toCustomProperties( tree, blockSelectors ) ).toEqual(
-				'body{--wp--preset--color--white: white;--wp--preset--color--black: black;--wp--custom--font-primary: value;--wp--custom--line-height--body: 1.7;--wp--custom--line-height--heading: 1.3;}h1,h2,h3,h4,h5,h6{--wp--preset--font-size--small: 12px;--wp--preset--font-size--medium: 23px;}'
+				'body{--wp--preset--color--white: white;--wp--preset--color--black: black;--wp--preset--color--white-2-black: value;--wp--custom--white-2-black: value;--wp--custom--font-primary: value;--wp--custom--line-height--body: 1.7;--wp--custom--line-height--heading: 1.3;}h1,h2,h3,h4,h5,h6{--wp--preset--font-size--small: 12px;--wp--preset--font-size--medium: 23px;}'
 			);
 		} );
 	} );

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

@@ -22,46 +22,68 @@ import ScreenTextColor from './screen-text-color';
 import ScreenLinkColor from './screen-link-color';
 import ScreenLayout from './screen-layout';
 
+function GlobalStylesNavigationScreen( { className, ...props } ) {
+	return (
+		<NavigatorScreen
+			className={ [
+				'edit-site-global-styles-sidebar__navigator-screen',
+				className,
+			]
+				.filter( Boolean )
+				.join( ' ' ) }
+			{ ...props }
+		/>
+	);
+}
+
 function ContextScreens( { name } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
 	return (
 		<>
-			<NavigatorScreen path={ parentMenu + '/typography' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
 				<ScreenTypography name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/typography/text' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/text' }
+			>
 				<ScreenTypographyElement name={ name } element="text" />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/typography/link' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/link' }
+			>
 				<ScreenTypographyElement name={ name } element="link" />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
 				<ScreenColors name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/palette' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/palette' }
+			>
 				<ScreenColorPalette name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/background' }>
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/colors/background' }
+			>
 				<ScreenBackgroundColor name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/text' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
 				<ScreenTextColor name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/colors/link' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>
 				<ScreenLinkColor name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path={ parentMenu + '/layout' }>
+			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 		</>
 	);
 }
@@ -70,22 +92,25 @@ function GlobalStylesUI() {
 	const blocks = getBlockTypes();
 
 	return (
-		<NavigatorProvider initialPath="/">
-			<NavigatorScreen path="/">
+		<NavigatorProvider
+			className="edit-site-global-styles-sidebar__navigator-provider"
+			initialPath="/"
+		>
+			<GlobalStylesNavigationScreen path="/">
 				<ScreenRoot />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
-			<NavigatorScreen path="/blocks">
+			<GlobalStylesNavigationScreen path="/blocks">
 				<ScreenBlockList />
-			</NavigatorScreen>
+			</GlobalStylesNavigationScreen>
 
 			{ blocks.map( ( block ) => (
-				<NavigatorScreen
+				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }
 					path={ '/blocks/' + block.name }
 				>
 					<ScreenBlock name={ block.name } />
-				</NavigatorScreen>
+				</GlobalStylesNavigationScreen>
 			) ) }
 
 			<ContextScreens />

package/src/components/header/document-actions/style.scss

@@ -2,6 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
+	padding: 0 $grid-unit;
 	height: 100%;
 	// Flex items will, by default, refuse to shrink below a minimum
 	// intrinsic width. In order to shrink this flexbox item, and
@@ -40,15 +41,6 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		max-width: 120px;
-
-		@include break-medium() {
-			max-width: 75px;
-		}
-
-		@include break-xlarge() {
-			max-width: 180px;
-		}
 	}
 
 	.edit-site-document-actions__secondary-item {

package/src/components/header/style.scss

@@ -25,6 +25,8 @@ $header-toolbar-min-width: 335px;
 		display: flex;
 		align-items: center;
 		height: 100%;
+		flex-grow: 1;
+		justify-content: center;
 		// Flex items will, by default, refuse to shrink below a minimum
 		// intrinsic width. In order to shrink this flexbox item, and
 		// subsequently truncate child text, we set an explicit min-width.
@@ -109,7 +111,6 @@ body.is-navigation-sidebar-open {
 .edit-site-header__actions {
 	display: inline-flex;
 	align-items: center;
-	flex-wrap: wrap;
 	padding-right: $grid-unit-05;
 
 	.interface-pinned-items {

package/src/components/list/actions/index.js

@@ -68,6 +68,7 @@ export default function Actions( { template } ) {
 							/>
 							<MenuItem
 								isDestructive
+								isTertiary
 								onClick={ () => {
 									removeTemplate( template );
 									onClose();

package/src/components/navigation-sidebar/navigation-toggle/index.js

@@ -79,6 +79,8 @@ function NavigationToggle( { icon } ) {
 			<Button
 				className="edit-site-navigation-toggle__button has-icon"
 				label={ __( 'Toggle navigation' ) }
+				// isPressed will add unwanted styles.
+				aria-pressed={ isNavigationOpen }
 				onClick={ toggleNavigationPanel }
 				showTooltip
 			>

package/src/components/sidebar/default-sidebar.js

@@ -15,6 +15,7 @@ export default function DefaultSidebar( {
 	closeLabel,
 	header,
 	headerClassName,
+	panelClassName,
 } ) {
 	return (
 		<>
@@ -27,6 +28,7 @@ export default function DefaultSidebar( {
 				closeLabel={ closeLabel }
 				header={ header }
 				headerClassName={ headerClassName }
+				panelClassName={ panelClassName }
 			>
 				{ children }
 			</ComplementaryArea>

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

@@ -24,6 +24,7 @@ export default function GlobalStylesSidebar() {
 			title={ __( 'Styles' ) }
 			icon={ styles }
 			closeLabel={ __( 'Close global styles sidebar' ) }
+			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
 				<Flex>
 					<FlexBlock>

package/src/components/sidebar/style.scss

@@ -17,6 +17,23 @@
 	}
 }
 
+.edit-site-global-styles-sidebar {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	&__panel,
+	&__navigator-provider {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+	}
+
+	&__navigator-screen {
+		flex: 1;
+	}
+}
+
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
 	margin-left: 0;
 }
@@ -25,20 +42,6 @@
 	margin-left: auto;
 }
 
-.edit-site-global-styles-sidebar__border-controls-row {
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: $grid-unit-15;
-
-	> * {
-		width: calc(50% - #{ $grid-unit-10 });
-	}
-
-	.components-border-style-control__buttons {
-		margin-bottom: 0;
-	}
-}
-
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
 	font-size: $default-font-size * 1.2;
 	font-weight: 500;
@@ -53,6 +56,10 @@
 	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: $grid-unit-30;
 	border-top: $border-width solid $gray-200;

package/src/plugins/site-export.js

@@ -25,7 +25,11 @@ export default function SiteExport() {
 			const blob = await response.blob();
 
 			downloadjs( blob, 'edit-site-export.zip', 'application/zip' );
-		} catch ( error ) {
+		} catch ( errorResponse ) {
+			let error = {};
+			try {
+				error = await errorResponse.json();
+			} catch ( e ) {}
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message