@wordpress/edit-site 6.22.0 → 6.24.0

package/build-style/style.css

@@ -1,16 +1,13 @@
 @charset "UTF-8";
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
 /**
  * Colors
  */
 /**
  * Breakpoints & Media Queries
  */
+/**
+ * Colors
+ */
 /**
  * SCSS Variables.
  *
@@ -18,15 +15,136 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Colors
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Typography
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
 /**
  * Colors
  */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
 /**
  * Fonts & basic variables.
  */
@@ -62,6 +180,9 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *
@@ -100,6 +221,9 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 :root {
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: var(--wp-block-synced-color);
   --wp-admin-theme-color: #007cba;
   --wp-admin-theme-color--rgb: 0, 124, 186;
   --wp-admin-theme-color-darker-10: #006ba1;
@@ -107,9 +231,6 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
-  --wp-block-synced-color: #7a00df;
-  --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -409,13 +530,13 @@
 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
+  box-shadow: 0 0 0 transparent;
+  border-radius: 2px;
+  border: 1px solid #949494;
   display: block;
   padding: 0 32px 0 8px;
   background: #f0f0f0;
@@ -2782,7 +2903,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _6kpm0_slide-from-right {
+@keyframes _r2pke_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2792,7 +2913,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _6kpm0_slide-from-left {
+@keyframes _r2pke_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2848,10 +2969,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _6kpm0_slide-from-left;
+  animation-name: _r2pke_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _6kpm0_slide-from-right;
+  animation-name: _r2pke_slide-from-right;
 }
 
 .edit-site-sidebar-button {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.22.0",
+	"version": "6.24.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,46 +30,46 @@
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.22.0",
-		"@wordpress/api-fetch": "^7.22.0",
-		"@wordpress/blob": "^4.22.0",
-		"@wordpress/block-editor": "^14.17.0",
-		"@wordpress/block-library": "^9.22.0",
-		"@wordpress/blocks": "^14.11.0",
-		"@wordpress/commands": "^1.22.0",
-		"@wordpress/components": "^29.8.0",
-		"@wordpress/compose": "^7.22.0",
-		"@wordpress/core-commands": "^1.22.0",
-		"@wordpress/core-data": "^7.22.0",
-		"@wordpress/data": "^10.22.0",
-		"@wordpress/dataviews": "^4.18.0",
-		"@wordpress/date": "^5.22.0",
-		"@wordpress/deprecated": "^4.22.0",
-		"@wordpress/dom": "^4.22.0",
-		"@wordpress/editor": "^14.22.0",
-		"@wordpress/element": "^6.22.0",
-		"@wordpress/escape-html": "^3.22.0",
-		"@wordpress/fields": "^0.14.0",
-		"@wordpress/hooks": "^4.22.0",
-		"@wordpress/html-entities": "^4.22.0",
-		"@wordpress/i18n": "^5.22.0",
-		"@wordpress/icons": "^10.22.0",
-		"@wordpress/keyboard-shortcuts": "^5.22.0",
-		"@wordpress/keycodes": "^4.22.0",
-		"@wordpress/media-utils": "^5.22.0",
-		"@wordpress/notices": "^5.22.0",
-		"@wordpress/patterns": "^2.22.0",
-		"@wordpress/plugins": "^7.22.0",
-		"@wordpress/preferences": "^4.22.0",
-		"@wordpress/primitives": "^4.22.0",
-		"@wordpress/private-apis": "^1.22.0",
-		"@wordpress/reusable-blocks": "^5.22.0",
-		"@wordpress/router": "^1.22.0",
-		"@wordpress/style-engine": "^2.22.0",
-		"@wordpress/url": "^4.22.0",
-		"@wordpress/viewport": "^6.22.0",
-		"@wordpress/widgets": "^4.22.0",
-		"@wordpress/wordcount": "^4.22.0",
+		"@wordpress/a11y": "^4.24.0",
+		"@wordpress/api-fetch": "^7.24.0",
+		"@wordpress/blob": "^4.24.0",
+		"@wordpress/block-editor": "^14.19.0",
+		"@wordpress/block-library": "^9.24.0",
+		"@wordpress/blocks": "^14.13.0",
+		"@wordpress/commands": "^1.24.0",
+		"@wordpress/components": "^29.10.0",
+		"@wordpress/compose": "^7.24.0",
+		"@wordpress/core-commands": "^1.24.0",
+		"@wordpress/core-data": "^7.24.0",
+		"@wordpress/data": "^10.24.0",
+		"@wordpress/dataviews": "^4.20.0",
+		"@wordpress/date": "^5.24.0",
+		"@wordpress/deprecated": "^4.24.0",
+		"@wordpress/dom": "^4.24.0",
+		"@wordpress/editor": "^14.24.0",
+		"@wordpress/element": "^6.24.0",
+		"@wordpress/escape-html": "^3.24.0",
+		"@wordpress/fields": "^0.16.0",
+		"@wordpress/hooks": "^4.24.0",
+		"@wordpress/html-entities": "^4.24.0",
+		"@wordpress/i18n": "^5.24.0",
+		"@wordpress/icons": "^10.24.0",
+		"@wordpress/keyboard-shortcuts": "^5.24.0",
+		"@wordpress/keycodes": "^4.24.0",
+		"@wordpress/media-utils": "^5.24.0",
+		"@wordpress/notices": "^5.24.0",
+		"@wordpress/patterns": "^2.24.0",
+		"@wordpress/plugins": "^7.24.0",
+		"@wordpress/preferences": "^4.24.0",
+		"@wordpress/primitives": "^4.24.0",
+		"@wordpress/private-apis": "^1.24.0",
+		"@wordpress/reusable-blocks": "^5.24.0",
+		"@wordpress/router": "^1.24.0",
+		"@wordpress/style-engine": "^2.24.0",
+		"@wordpress/url": "^4.24.0",
+		"@wordpress/viewport": "^6.24.0",
+		"@wordpress/widgets": "^4.24.0",
+		"@wordpress/wordcount": "^4.24.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "01a314d7e46a50101e328fdb11959c441e49372d"
+	"gitHead": "9c03d1458cae76792ae15e67b421205836bf4393"
 }

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

@@ -5,15 +5,18 @@ import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalPaletteEdit as PaletteEdit,
 	__experimentalVStack as VStack,
+	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { shuffle } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import ColorVariations from './variations/variations-color';
+import { useColorRandomizer } from './hooks';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
@@ -49,22 +52,37 @@ export default function ColorPalettePanel( { name } ) {
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
 
+	const [ randomizeThemeColors ] = useColorRandomizer();
+
 	return (
 		<VStack
 			className="edit-site-global-styles-color-palette-panel"
 			spacing={ 8 }
 		>
-			{ !! themeColors && !! themeColors.length && (
-				<PaletteEdit
-					canReset={ themeColors !== baseThemeColors }
-					canOnlyChangeValues
-					colors={ themeColors }
-					onChange={ setThemeColors }
-					paletteLabel={ __( 'Theme' ) }
-					paletteLabelHeadingLevel={ 3 }
-					popoverProps={ popoverProps }
-				/>
-			) }
+			<VStack spacing={ 4 }>
+				{ !! themeColors && !! themeColors.length && (
+					<PaletteEdit
+						canReset={ themeColors !== baseThemeColors }
+						canOnlyChangeValues
+						colors={ themeColors }
+						onChange={ setThemeColors }
+						paletteLabel={ __( 'Theme' ) }
+						paletteLabelHeadingLevel={ 3 }
+						popoverProps={ popoverProps }
+					/>
+				) }
+				{ window.__experimentalEnableColorRandomizer &&
+					themeColors?.length > 0 && (
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							icon={ shuffle }
+							onClick={ randomizeThemeColors }
+						>
+							{ __( 'Randomize colors' ) }
+						</Button>
+					) }
+			</VStack>
 			{ !! defaultColors &&
 				!! defaultColors.length &&
 				!! defaultPaletteEnabled && (

package/src/components/global-styles/font-library-modal/font-collection.js

@@ -344,7 +344,7 @@ function FontCollection( { slug } ) {
 								! fonts.length && (
 									<Text>
 										{ __(
-											'No fonts found. Try with a different search term'
+											'No fonts found. Try with a different search term.'
 										) }
 									</Text>
 								) }

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

@@ -8,10 +8,9 @@ import {
 	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
 	ColorIndicator,
-	Button,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
-import { Icon, shuffle, chevronLeft, chevronRight } from '@wordpress/icons';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -20,7 +19,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
-import { useColorRandomizer } from './hooks';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 import { unlock } from '../../lock-unlock';
 
@@ -38,8 +36,6 @@ function Palette( { name } ) {
 		name
 	);
 
-	const [ randomizeThemeColors ] = useColorRandomizer();
-
 	const colors = useMemo(
 		() => [
 			...( customColors || EMPTY_COLORS ),
@@ -87,17 +83,6 @@ function Palette( { name } ) {
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>
-			{ window.__experimentalEnableColorRandomizer &&
-				themeColors?.length > 0 && (
-					<Button
-						__next40pxDefaultSize
-						variant="secondary"
-						icon={ shuffle }
-						onClick={ randomizeThemeColors }
-					>
-						{ __( 'Randomize colors' ) }
-					</Button>
-				) }
 		</VStack>
 	);
 }

package/src/components/more-menu/index.js

@@ -1,8 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
@@ -15,14 +13,10 @@ import { unlock } from '../../lock-unlock';
 const { ToolsMoreMenuGroup, PreferencesModal } = unlock( editorPrivateApis );
 
 export default function MoreMenu() {
-	const isBlockBasedTheme = useSelect( ( select ) => {
-		return select( coreStore ).getCurrentTheme().is_block_theme;
-	}, [] );
-
 	return (
 		<>
 			<ToolsMoreMenuGroup>
-				{ isBlockBasedTheme && <SiteExport /> }
+				<SiteExport />
 				<WelcomeGuideMenuItem />
 			</ToolsMoreMenuGroup>
 			<PreferencesModal />

package/src/components/more-menu/site-export.js

@@ -5,13 +5,26 @@ import { __, _x } from '@wordpress/i18n';
 import { MenuItem } from '@wordpress/components';
 import apiFetch from '@wordpress/api-fetch';
 import { download } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { downloadBlob } from '@wordpress/blob';
+import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 
 export default function SiteExport() {
+	const canExport = useSelect( ( select ) => {
+		const targetHints =
+			select( coreStore ).getCurrentTheme()?._links?.[
+				'wp:export-theme'
+			]?.[ 0 ]?.targetHints ?? {};
+
+		return !! targetHints.allow?.includes( 'GET' );
+	}, [] );
 	const { createErrorNotice } = useDispatch( noticesStore );
 
+	if ( ! canExport ) {
+		return null;
+	}
+
 	async function handleExport() {
 		try {
 			const response = await apiFetch( {

package/src/components/sidebar-navigation-screen-main/index.js

@@ -22,6 +22,13 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 		<ItemGroup className="edit-site-sidebar-navigation-screen-main">
 			{ isBlockBasedTheme && (
 				<>
+					<SidebarNavigationItemGlobalStyles
+						to="/styles"
+						uid="global-styles-navigation-item"
+						icon={ styles }
+					>
+						{ __( 'Styles' ) }
+					</SidebarNavigationItemGlobalStyles>
 					<SidebarNavigationItem
 						uid="navigation-navigation-item"
 						to="/navigation"
@@ -30,13 +37,6 @@ export function MainSidebarNavigationContent( { isBlockBasedTheme = true } ) {
 					>
 						{ __( 'Navigation' ) }
 					</SidebarNavigationItem>
-					<SidebarNavigationItemGlobalStyles
-						to="/styles"
-						uid="global-styles-navigation-item"
-						icon={ styles }
-					>
-						{ __( 'Styles' ) }
-					</SidebarNavigationItemGlobalStyles>
 					<SidebarNavigationItem
 						uid="page-navigation-item"
 						to="/page"