@wordpress/edit-site 6.41.0 → 6.41.1-next.v.202603161435.0

package/build-style/style.css

@@ -107,100 +107,11 @@
   }
 }
 
-/**
- * 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.
- */
-/**
- * Typography
- */
-/**
- * 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.
- */
-/**
- * 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.
- */
-/**
- * Creates a checkerboard pattern background to indicate transparency.
- * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
- */
 .admin-ui-page {
   display: flex;
   height: 100%;
-  background-color: #fff;
-  color: #2f2f2f;
+  background-color: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
+  color: var(--wpds-color-fg-content-neutral, #1e1e1e);
   position: relative;
   z-index: 1;
   flex-flow: column;
@@ -208,25 +119,34 @@
 }
 
 .admin-ui-page__header {
-  padding: 16px 24px;
-  border-bottom: 1px solid #f0f0f0;
-  background: #fff;
+  padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
+  border-bottom: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
+  background: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
   position: sticky;
   top: 0;
   z-index: 1;
 }
 
+.admin-ui-page__header-title {
+  font-family: var(--wpds-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
+  font-size: var(--wpds-font-size-xl, 20px);
+  font-weight: var(--wpds-font-weight-medium, 499);
+  line-height: var(--wpds-font-line-height-xl, 32px);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .admin-ui-page__sidebar-toggle-slot:empty {
   display: none;
 }
 
 .admin-ui-page__header-subtitle {
-  padding-block-end: 8px;
-  color: #757575;
-  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 20px;
+  padding-block-end: var(--wpds-dimension-padding-xs, 4px);
+  color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d);
+  font-size: var(--wpds-font-size-md, 13px);
+  line-height: var(--wpds-font-line-height-md, 24px);
   margin: 0;
 }
 
@@ -238,12 +158,12 @@
 }
 
 .admin-ui-page__content.has-padding {
-  padding: 16px 24px;
+  padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
 }
 
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
   width: auto;
-  padding: 0 8px;
+  padding: 0 var(--wpds-dimension-padding-xs, 4px);
 }
 
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
@@ -252,9 +172,54 @@
 
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
   content: attr(aria-label);
-  font-size: 12px;
+  font-size: var(--wpds-font-size-sm, 12px);
 }
 
+/**
+ * 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.
+ */
+/**
+ * Colors
+ */
+/**
+ * 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.
+ */
 .admin-ui-breadcrumbs__list {
   list-style: none;
   padding: 0;
@@ -367,7 +332,6 @@
 .dataviews-wrapper,
 .dataviews-picker-wrapper {
   height: 100%;
-  overflow: auto;
   box-sizing: border-box;
   scroll-padding-bottom: 64px;
   /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
@@ -516,6 +480,15 @@
   min-height: 32px;
 }
 
+.dataviews-layout__container {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  background-color: inherit;
+}
+
 .dataviews-filters__button {
   position: relative;
 }
@@ -1256,7 +1229,7 @@
 .dataviews-view-grid-items {
   margin-bottom: auto;
   display: grid;
-  gap: 32px;
+  gap: 24px;
   grid-template-rows: max-content;
   grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
   padding: 0 24px 24px;
@@ -1268,11 +1241,19 @@
     transition: padding ease-out 0.1s;
   }
 }
+.dataviews-view-grid-items.has-compact-density {
+  gap: 16px;
+}
+
+.dataviews-view-grid-items.has-comfortable-density {
+  gap: 32px;
+}
+
 .dataviews-view-grid {
   padding: 0 24px 24px;
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 24px;
   container-type: inline-size;
   margin-bottom: auto;
 }
@@ -1282,9 +1263,25 @@
     transition: padding ease-out 0.1s;
   }
 }
+.dataviews-view-grid.has-compact-density {
+  gap: 16px;
+}
+
+.dataviews-view-grid.has-compact-density .dataviews-view-grid__row {
+  gap: 16px;
+}
+
+.dataviews-view-grid.has-comfortable-density {
+  gap: 32px;
+}
+
+.dataviews-view-grid.has-comfortable-density .dataviews-view-grid__row {
+  gap: 32px;
+}
+
 .dataviews-view-grid .dataviews-view-grid__row {
   display: grid;
-  gap: 32px;
+  gap: 24px;
 }
 
 .dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell {
@@ -1920,6 +1917,17 @@ div.dataviews-view-list {
   background-color: inherit;
 }
 
+.dataviews-view-table thead.dataviews-view-table__thead--stuck::after {
+  display: block;
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: #f0f0f0;
+}
+
 .dataviews-view-table thead tr {
   border: 0;
 }
@@ -2091,6 +2099,14 @@ div.dataviews-view-list {
     animation: dataviews-pulse 1s ease-in-out infinite;
   }
 }
+.dataviews-view-picker-grid.has-compact-density .dataviews-view-grid-items {
+  gap: 16px;
+}
+
+.dataviews-view-picker-grid.has-comfortable-density .dataviews-view-grid-items {
+  gap: 32px;
+}
+
 .dataviews-view-picker-grid .dataviews-view-picker-grid__card {
   height: 100%;
   justify-content: flex-start;
@@ -2683,7 +2699,7 @@ div.dataviews-view-list {
 }
 
 .dataforms-layouts-panel__field-dropdown .components-popover__content {
-  min-width: 320px;
+  min-width: 256px;
   padding: 16px;
 }
 
@@ -3242,6 +3258,50 @@ fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields_
   aspect-ratio: var(--fields-media-edit-expanded-multiple-aspect-ratio, 3/2);
 }
 
+.fields-controls__author-avatar {
+  flex-shrink: 0;
+  overflow: hidden;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: left;
+  display: flex;
+}
+
+.fields-controls__author-avatar img {
+  width: 16px;
+  height: 16px;
+  object-fit: cover;
+  opacity: 0;
+  border-radius: 100%;
+}
+
+@media not (prefers-reduced-motion) {
+  .fields-controls__author-avatar img {
+    transition: opacity 0.1s linear;
+  }
+}
+.fields-controls__author-avatar.is-loaded img {
+  opacity: 1;
+}
+
+.fields-controls__author-icon {
+  display: flex;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+}
+
+.fields-controls__author-icon svg {
+  margin-left: -4px;
+  fill: currentColor;
+}
+
+.fields-controls__author-name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .fields-controls__slug {
   border: 0;
   padding: 0;
@@ -3294,6 +3354,16 @@ fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields_
   margin: 0;
 }
 
+.fields-controls__status-icon {
+  height: 24px;
+  width: 24px;
+}
+
+.fields-controls__status-icon svg {
+  fill: currentColor;
+  margin-left: -4px;
+}
+
 .fields-field__title > span:first-child {
   text-overflow: ellipsis;
   overflow: hidden;
@@ -4390,47 +4460,6 @@ button.font-library__upload-area {
   z-index: 2;
 }
 
-.page-templates-author-field__avatar {
-  flex-shrink: 0;
-  overflow: hidden;
-  width: 24px;
-  height: 24px;
-  align-items: center;
-  justify-content: left;
-  display: flex;
-}
-.page-templates-author-field__avatar img {
-  width: 16px;
-  height: 16px;
-  object-fit: cover;
-  opacity: 0;
-  border-radius: 100%;
-}
-@media not (prefers-reduced-motion) {
-  .page-templates-author-field__avatar img {
-    transition: opacity 0.1s linear;
-  }
-}
-.page-templates-author-field__avatar.is-loaded img {
-  opacity: 1;
-}
-
-.page-templates-author-field__icon {
-  display: flex;
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-}
-.page-templates-author-field__icon svg {
-  margin-left: -4px;
-  fill: currentColor;
-}
-
-.page-templates-author-field__name {
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
 .edit-site-list__rename-modal {
   z-index: 1000001;
 }
@@ -5360,15 +5389,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
 
-.edit-site-post-list__status-icon {
-  height: 24px;
-  width: 24px;
-}
-.edit-site-post-list__status-icon svg {
-  fill: currentColor;
-  margin-left: -4px;
-}
-
 .fields-controls__password {
   border-top: 1px solid #e0e0e0;
   padding-top: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.41.0",
+	"version": "6.41.1-next.v.202603161435.0+ab4981c4f",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -48,50 +48,50 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.41.0",
-		"@wordpress/admin-ui": "^1.9.0",
-		"@wordpress/api-fetch": "^7.41.0",
-		"@wordpress/base-styles": "^6.17.0",
-		"@wordpress/blob": "^4.41.0",
-		"@wordpress/block-editor": "^15.14.0",
-		"@wordpress/block-library": "^9.41.0",
-		"@wordpress/blocks": "^15.14.0",
-		"@wordpress/commands": "^1.41.0",
-		"@wordpress/components": "^32.3.0",
-		"@wordpress/compose": "^7.41.0",
-		"@wordpress/core-data": "^7.41.0",
-		"@wordpress/data": "^10.41.0",
-		"@wordpress/dataviews": "^13.0.0",
-		"@wordpress/date": "^5.41.0",
-		"@wordpress/deprecated": "^4.41.0",
-		"@wordpress/dom": "^4.41.0",
-		"@wordpress/editor": "^14.41.0",
-		"@wordpress/element": "^6.41.0",
-		"@wordpress/escape-html": "^3.41.0",
-		"@wordpress/fields": "^0.33.0",
-		"@wordpress/global-styles-engine": "^1.8.0",
-		"@wordpress/global-styles-ui": "^1.8.0",
-		"@wordpress/hooks": "^4.41.0",
-		"@wordpress/html-entities": "^4.41.0",
-		"@wordpress/i18n": "^6.14.0",
-		"@wordpress/icons": "^11.8.0",
-		"@wordpress/keyboard-shortcuts": "^5.41.0",
-		"@wordpress/keycodes": "^4.41.0",
-		"@wordpress/media-utils": "^5.41.0",
-		"@wordpress/notices": "^5.41.0",
-		"@wordpress/patterns": "^2.41.0",
-		"@wordpress/plugins": "^7.41.0",
-		"@wordpress/preferences": "^4.41.0",
-		"@wordpress/primitives": "^4.41.0",
-		"@wordpress/private-apis": "^1.41.0",
-		"@wordpress/reusable-blocks": "^5.41.0",
-		"@wordpress/router": "^1.41.0",
-		"@wordpress/style-engine": "^2.41.0",
-		"@wordpress/url": "^4.41.0",
-		"@wordpress/viewport": "^6.41.0",
-		"@wordpress/views": "^1.8.0",
-		"@wordpress/widgets": "^4.41.0",
-		"@wordpress/wordcount": "^4.41.0",
+		"@wordpress/a11y": "^4.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/admin-ui": "^1.9.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/api-fetch": "^7.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/base-styles": "^6.17.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/blob": "^4.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/block-editor": "^15.14.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/block-library": "^9.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/blocks": "^15.14.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/commands": "^1.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/components": "^32.4.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/compose": "^7.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/core-data": "^7.41.2-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/data": "^10.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/dataviews": "^13.1.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/date": "^5.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/deprecated": "^4.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/dom": "^4.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/editor": "^14.41.2-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/element": "^6.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/escape-html": "^3.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/fields": "^0.33.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/global-styles-engine": "^1.8.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/global-styles-ui": "^1.8.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/hooks": "^4.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/html-entities": "^4.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/i18n": "^6.14.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/icons": "^12.0.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/keyboard-shortcuts": "^5.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/keycodes": "^4.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/media-utils": "^5.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/notices": "^5.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/patterns": "^2.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/plugins": "^7.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/preferences": "^4.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/primitives": "^4.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/private-apis": "^1.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/reusable-blocks": "^5.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/router": "^1.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/style-engine": "^2.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/url": "^4.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/viewport": "^6.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/views": "^1.8.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/widgets": "^4.41.1-next.v.202603161435.0+ab4981c4f",
+		"@wordpress/wordcount": "^4.41.1-next.v.202603161435.0+ab4981c4f",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -106,5 +106,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "8bfc179b9aed74c0a6dd6e8edf7a49e40e4f87cc"
+	"gitHead": "748f4e4564fcc0e6ae90200d90bb993a3cef5828"
 }

package/src/components/layout/index.js

@@ -138,7 +138,8 @@ function Layout() {
 										<SidebarNavigationProvider>
 											<SidebarContent
 												shouldAnimate={
-													routeKey !== 'styles'
+													routeKey !== 'styles' &&
+													routeKey !== 'identity'
 												}
 												routeKey={ routeKey }
 											>

package/src/components/page-patterns/fields.js

@@ -126,7 +126,7 @@ function AuthorField( { item } ) {
 		<HStack alignment="left" spacing={ 0 }>
 			{ imageUrl && (
 				<div
-					className={ clsx( 'page-templates-author-field__avatar', {
+					className={ clsx( 'fields-controls__author-avatar', {
 						'is-loaded': isImageLoaded,
 					} ) }
 				>
@@ -138,11 +138,11 @@ function AuthorField( { item } ) {
 				</div>
 			) }
 			{ ! imageUrl && (
-				<div className="page-templates-author-field__icon">
+				<div className="fields-controls__author-icon">
 					<Icon icon={ icon } />
 				</div>
 			) }
-			<span className="page-templates-author-field__name">{ text }</span>
+			<span className="fields-controls__author-name">{ text }</span>
 		</HStack>
 	);
 }

package/src/components/page-patterns/use-pattern-settings.js

@@ -4,6 +4,7 @@
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { generateGlobalStyles } from '@wordpress/global-styles-engine';
 
@@ -15,6 +16,7 @@ import { store as editSiteStore } from '../../store';
 import { filterOutDuplicatesByName } from './utils';
 
 const { useGlobalStyles } = unlock( editorPrivateApis );
+const { globalStylesDataKey } = unlock( blockEditorPrivateApis );
 
 export default function usePatternSettings() {
 	/*
@@ -66,10 +68,17 @@ export default function usePatternSettings() {
 			...restStoredSettings,
 			styles: globalStyles,
 			__experimentalFeatures: globalSettings,
+			[ globalStylesDataKey ]: mergedConfig.styles ?? {},
 			__experimentalBlockPatterns: blockPatterns,
 			isPreviewMode: true,
 		};
-	}, [ storedSettings, blockPatterns, globalStyles, globalSettings ] );
+	}, [
+		storedSettings,
+		blockPatterns,
+		globalStyles,
+		globalSettings,
+		mergedConfig,
+	] );
 
 	return settings;
 }

package/src/components/page-templates/fields.js

@@ -125,7 +125,7 @@ function AuthorField( { item } ) {
 		<HStack alignment="left" spacing={ 0 }>
 			{ imageUrl && (
 				<div
-					className={ clsx( 'page-templates-author-field__avatar', {
+					className={ clsx( 'fields-controls__author-avatar', {
 						'is-loaded': isImageLoaded,
 					} ) }
 				>
@@ -137,11 +137,11 @@ function AuthorField( { item } ) {
 				</div>
 			) }
 			{ ! imageUrl && (
-				<div className="page-templates-author-field__icon">
+				<div className="fields-controls__author-icon">
 					<Icon icon={ icon } />
 				</div>
 			) }
-			<span className="page-templates-author-field__name">{ text }</span>
+			<span className="fields-controls__author-name">{ text }</span>
 		</HStack>
 	);
 }