@wordpress/edit-post 8.32.0 → 8.32.1-next.ff1cebbba.0

package/build-style/style.css

@@ -1,11 +1,5 @@
 /**
- * Colors
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
- * Colors
+ * Typography
  */
 /**
  * SCSS Variables.
@@ -14,51 +8,9 @@
  * 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.
  */
@@ -109,9 +61,6 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
-/**
- * Typography
- */
 /**
  * Breakpoint mixins
  */
@@ -134,6 +83,25 @@
 /**
  * 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-editor-canvas-background: #ddd;
+  --wp-admin-theme-color: #007cba;
+  --wp-admin-theme-color--rgb: 0, 124, 186;
+  --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
+  --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
+  --wp-admin-theme-color-darker-20: #005a87;
+  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
+  --wp-admin-border-width-focus: 2px;
+}
+@media (min-resolution: 192dpi) {
+  :root {
+    --wp-admin-border-width-focus: 1.5px;
+  }
+}
+
 /**
  * Colors
  */
@@ -179,6 +147,9 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoints & Media Queries
  */
@@ -194,9 +165,6 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
-/**
- * Typography
- */
 /**
  * Breakpoint mixins
  */
@@ -219,23 +187,74 @@
 /**
  * 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;
-  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
-  --wp-admin-theme-color-darker-20: #005a87;
-  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
-  --wp-admin-border-width-focus: 2px;
+.admin-ui-page {
+  display: flex;
+  height: 100%;
+  background-color: #fff;
+  color: #2f2f2f;
+  position: relative;
+  z-index: 1;
+  flex-flow: column;
+  container: admin-ui-page/inline-size;
 }
-@media (min-resolution: 192dpi) {
-  :root {
-    --wp-admin-border-width-focus: 1.5px;
+
+@media not (prefers-reduced-motion) {
+  .admin-ui-page {
+    transition: width ease-out 0.2s;
+  }
+}
+.admin-ui-page__header {
+  padding: 16px 48px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fff;
+  position: sticky;
+  top: 0;
+}
+
+@container (max-width: 430px) {
+  .admin-ui-page__header {
+    padding: 16px 24px;
+  }
+}
+.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;
+  margin: 0;
+}
+
+.admin-ui-page__content {
+  flex-grow: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.admin-ui-page__content.has-padding {
+  padding: 16px 20px;
+}
+
+@container (max-width: 430px) {
+  .admin-ui-page__content.has-padding {
+    padding: 16px 24px;
   }
 }
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
+  width: auto;
+  padding: 0 8px;
+}
+
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
+  display: none;
+}
+
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
+  content: attr(aria-label);
+  font-size: 12px;
+}
 
 .edit-post-fullscreen-mode-close__view-mode-toggle {
   top: 0;
@@ -306,14 +325,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: hsl(0deg, 0%, 80%);
+  background-color: hsl(0, 0%, 80%);
   pointer-events: none;
 }
 .edit-post-fullscreen-mode-close__back-icon svg {
   fill: currentColor;
 }
 .edit-post-fullscreen-mode-close__back-icon.has-site-icon {
-  background-color: hsla(0deg, 0%, 100%, 0.6);
+  background-color: hsla(0, 0%, 100%, 0.6);
   backdrop-filter: saturate(180%) blur(15px);
 }
 
@@ -414,12 +433,12 @@
     height: 36px;
   }
 }
-.edit-post-meta-boxes-main__liner {
-  isolation: isolate;
-}
 .edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner {
   overflow: auto;
 }
+.edit-post-meta-boxes-main__liner {
+  isolation: isolate;
+}
 .is-resizing.edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner {
   display: unset;
 }
@@ -489,8 +508,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
    * other elements (such as .button) are unaffected by Gutenberg's style
    * because of their higher specificity.
    */
-  /* Match width and positioning of the meta boxes. Override default styles. */
-  /* Override Default meta box stylings */
 }
 .edit-post-meta-boxes-area__container,
 .edit-post-meta-boxes-area .inside {
@@ -504,11 +521,17 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   border-top: 1px solid #ddd;
   border-bottom: 0;
 }
+.edit-post-meta-boxes-area {
+  /* Match width and positioning of the meta boxes. Override default styles. */
+}
 .edit-post-meta-boxes-area #poststuff {
   margin: 0 auto;
   padding-top: 0;
   min-width: auto;
 }
+.edit-post-meta-boxes-area {
+  /* Override Default meta box stylings */
+}
 .edit-post-meta-boxes-area #poststuff h3.hndle,
 .edit-post-meta-boxes-area #poststuff .stuffbox > h3,
 .edit-post-meta-boxes-area #poststuff h2.hndle { /* WordPress selectors yolo */
@@ -610,8 +633,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 
 body.js.block-editor-page {
   background: #fff;
-  /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
-     Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
 }
 body.js.block-editor-page #wpcontent {
   padding-left: 0;
@@ -619,6 +640,10 @@ body.js.block-editor-page #wpcontent {
 body.js.block-editor-page #wpbody-content {
   padding-bottom: 0;
 }
+body.js.block-editor-page {
+  /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
+     Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
+}
 body.js.block-editor-page #wpbody-content > div:not(.block-editor):not(#screen-meta) {
   display: none;
 }
@@ -682,10 +707,10 @@ body.js.block-editor-page .media-frame select.attachment-filters:last-of-type {
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;
-  --wp-admin-theme-color-darker-10: #0073a1;
-  --wp-admin-theme-color-darker-10--rgb: 0, 115, 161;
-  --wp-admin-theme-color-darker-20: #006187;
-  --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
+  --wp-admin-theme-color-darker-10: rgb(0, 114.7661290323, 160.5);
+  --wp-admin-theme-color-darker-10--rgb: 0, 114.7661290323, 160.5;
+  --wp-admin-theme-color-darker-20: rgb(0, 96.5322580645, 135);
+  --wp-admin-theme-color-darker-20--rgb: 0, 96.5322580645, 135;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
@@ -697,10 +722,10 @@ body.admin-color-light {
 body.admin-color-modern {
   --wp-admin-theme-color: #3858e9;
   --wp-admin-theme-color--rgb: 56, 88, 233;
-  --wp-admin-theme-color-darker-10: #2145e6;
-  --wp-admin-theme-color-darker-10--rgb: 33, 69, 230;
-  --wp-admin-theme-color-darker-20: #183ad6;
-  --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
+  --wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);
+  --wp-admin-theme-color-darker-10--rgb: 33.0384615385, 68.7307692308, 230.4615384615;
+  --wp-admin-theme-color-darker-20: rgb(23.6923076923, 58.1538461538, 214.3076923077);
+  --wp-admin-theme-color-darker-20--rgb: 23.6923076923, 58.1538461538, 214.3076923077;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
@@ -712,10 +737,10 @@ body.admin-color-modern {
 body.admin-color-blue {
   --wp-admin-theme-color: #096484;
   --wp-admin-theme-color--rgb: 9, 100, 132;
-  --wp-admin-theme-color-darker-10: #07526c;
-  --wp-admin-theme-color-darker-10--rgb: 7, 82, 108;
-  --wp-admin-theme-color-darker-20: #064054;
-  --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
+  --wp-admin-theme-color-darker-10: rgb(7.3723404255, 81.914893617, 108.1276595745);
+  --wp-admin-theme-color-darker-10--rgb: 7.3723404255, 81.914893617, 108.1276595745;
+  --wp-admin-theme-color-darker-20: rgb(5.7446808511, 63.829787234, 84.2553191489);
+  --wp-admin-theme-color-darker-20--rgb: 5.7446808511, 63.829787234, 84.2553191489;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
@@ -727,10 +752,10 @@ body.admin-color-blue {
 body.admin-color-coffee {
   --wp-admin-theme-color: #46403c;
   --wp-admin-theme-color--rgb: 70, 64, 60;
-  --wp-admin-theme-color-darker-10: #383330;
-  --wp-admin-theme-color-darker-10--rgb: 56, 51, 48;
-  --wp-admin-theme-color-darker-20: #2b2724;
-  --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
+  --wp-admin-theme-color-darker-10: rgb(56.2692307692, 51.4461538462, 48.2307692308);
+  --wp-admin-theme-color-darker-10--rgb: 56.2692307692, 51.4461538462, 48.2307692308;
+  --wp-admin-theme-color-darker-20: rgb(42.5384615385, 38.8923076923, 36.4615384615);
+  --wp-admin-theme-color-darker-20--rgb: 42.5384615385, 38.8923076923, 36.4615384615;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
@@ -742,10 +767,10 @@ body.admin-color-coffee {
 body.admin-color-ectoplasm {
   --wp-admin-theme-color: #523f6d;
   --wp-admin-theme-color--rgb: 82, 63, 109;
-  --wp-admin-theme-color-darker-10: #46365d;
-  --wp-admin-theme-color-darker-10--rgb: 70, 54, 93;
-  --wp-admin-theme-color-darker-20: #3a2c4d;
-  --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
+  --wp-admin-theme-color-darker-10: rgb(69.8430232558, 53.6598837209, 92.8401162791);
+  --wp-admin-theme-color-darker-10--rgb: 69.8430232558, 53.6598837209, 92.8401162791;
+  --wp-admin-theme-color-darker-20: rgb(57.6860465116, 44.3197674419, 76.6802325581);
+  --wp-admin-theme-color-darker-20--rgb: 57.6860465116, 44.3197674419, 76.6802325581;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
@@ -757,10 +782,10 @@ body.admin-color-ectoplasm {
 body.admin-color-midnight {
   --wp-admin-theme-color: #e14d43;
   --wp-admin-theme-color--rgb: 225, 77, 67;
-  --wp-admin-theme-color-darker-10: #dd382d;
-  --wp-admin-theme-color-darker-10--rgb: 221, 56, 45;
-  --wp-admin-theme-color-darker-20: #d02c21;
-  --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
+  --wp-admin-theme-color-darker-10: rgb(221.4908256881, 56.1788990826, 45.0091743119);
+  --wp-admin-theme-color-darker-10--rgb: 221.4908256881, 56.1788990826, 45.0091743119;
+  --wp-admin-theme-color-darker-20: rgb(207.8348623853, 44.2201834862, 33.1651376147);
+  --wp-admin-theme-color-darker-20--rgb: 207.8348623853, 44.2201834862, 33.1651376147;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
@@ -772,10 +797,10 @@ body.admin-color-midnight {
 body.admin-color-ocean {
   --wp-admin-theme-color: #627c83;
   --wp-admin-theme-color--rgb: 98, 124, 131;
-  --wp-admin-theme-color-darker-10: #576e74;
-  --wp-admin-theme-color-darker-10--rgb: 87, 110, 116;
-  --wp-admin-theme-color-darker-20: #4c6066;
-  --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
+  --wp-admin-theme-color-darker-10: rgb(87.0873362445, 110.192139738, 116.4126637555);
+  --wp-admin-theme-color-darker-10--rgb: 87.0873362445, 110.192139738, 116.4126637555;
+  --wp-admin-theme-color-darker-20: rgb(76.1746724891, 96.384279476, 101.8253275109);
+  --wp-admin-theme-color-darker-20--rgb: 76.1746724891, 96.384279476, 101.8253275109;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
@@ -787,10 +812,10 @@ body.admin-color-ocean {
 body.admin-color-sunrise {
   --wp-admin-theme-color: #dd823b;
   --wp-admin-theme-color--rgb: 221, 130, 59;
-  --wp-admin-theme-color-darker-10: #d97426;
-  --wp-admin-theme-color-darker-10--rgb: 217, 116, 38;
-  --wp-admin-theme-color-darker-20: #c36922;
-  --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
+  --wp-admin-theme-color-darker-10: rgb(216.8782608696, 116.1847826087, 37.6217391304);
+  --wp-admin-theme-color-darker-10--rgb: 216.8782608696, 116.1847826087, 37.6217391304;
+  --wp-admin-theme-color-darker-20: rgb(195.147826087, 104.5434782609, 33.852173913);
+  --wp-admin-theme-color-darker-20--rgb: 195.147826087, 104.5434782609, 33.852173913;
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "8.32.0",
+	"version": "8.32.1-next.ff1cebbba.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -25,38 +25,46 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"exports": {
+		".": {
+			"import": "./build-module/index.js",
+			"default": "./build/index.js"
+		},
+		"./package.json": "./package.json"
+	},
 	"react-native": "src/index",
 	"wpScript": true,
 	"dependencies": {
-		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.32.0",
-		"@wordpress/api-fetch": "^7.32.0",
-		"@wordpress/block-editor": "^15.5.0",
-		"@wordpress/block-library": "^9.32.0",
-		"@wordpress/blocks": "^15.5.0",
-		"@wordpress/commands": "^1.32.0",
-		"@wordpress/components": "^30.5.0",
-		"@wordpress/compose": "^7.32.0",
-		"@wordpress/core-data": "^7.32.0",
-		"@wordpress/data": "^10.32.0",
-		"@wordpress/deprecated": "^4.32.0",
-		"@wordpress/dom": "^4.32.0",
-		"@wordpress/editor": "^14.32.0",
-		"@wordpress/element": "^6.32.0",
-		"@wordpress/hooks": "^4.32.0",
-		"@wordpress/html-entities": "^4.32.0",
-		"@wordpress/i18n": "^6.5.0",
-		"@wordpress/icons": "^10.32.0",
-		"@wordpress/keyboard-shortcuts": "^5.32.0",
-		"@wordpress/keycodes": "^4.32.0",
-		"@wordpress/notices": "^5.32.0",
-		"@wordpress/plugins": "^7.32.0",
-		"@wordpress/preferences": "^4.32.0",
-		"@wordpress/private-apis": "^1.32.0",
-		"@wordpress/url": "^4.32.0",
-		"@wordpress/viewport": "^6.32.0",
-		"@wordpress/warning": "^3.32.0",
-		"@wordpress/widgets": "^4.32.0",
+		"@wordpress/a11y": "^4.32.1-next.ff1cebbba.0",
+		"@wordpress/admin-ui": "^1.0.1-next.ff1cebbba.0",
+		"@wordpress/api-fetch": "^7.32.1-next.ff1cebbba.0",
+		"@wordpress/base-styles": "^6.8.1-next.ff1cebbba.0",
+		"@wordpress/block-editor": "^15.5.1-next.ff1cebbba.0",
+		"@wordpress/block-library": "^9.33.1-next.ff1cebbba.0",
+		"@wordpress/blocks": "^15.5.1-next.ff1cebbba.0",
+		"@wordpress/commands": "^1.32.1-next.ff1cebbba.0",
+		"@wordpress/components": "^30.6.1-next.ff1cebbba.0",
+		"@wordpress/compose": "^7.32.1-next.ff1cebbba.0",
+		"@wordpress/core-data": "^7.32.1-next.ff1cebbba.0",
+		"@wordpress/data": "^10.32.1-next.ff1cebbba.0",
+		"@wordpress/deprecated": "^4.32.1-next.ff1cebbba.0",
+		"@wordpress/dom": "^4.32.1-next.ff1cebbba.0",
+		"@wordpress/editor": "^14.32.1-next.ff1cebbba.0",
+		"@wordpress/element": "^6.32.1-next.ff1cebbba.0",
+		"@wordpress/hooks": "^4.32.1-next.ff1cebbba.0",
+		"@wordpress/html-entities": "^4.32.1-next.ff1cebbba.0",
+		"@wordpress/i18n": "^6.5.1-next.ff1cebbba.0",
+		"@wordpress/icons": "^11.0.1-next.ff1cebbba.0",
+		"@wordpress/keyboard-shortcuts": "^5.32.1-next.ff1cebbba.0",
+		"@wordpress/keycodes": "^4.32.1-next.ff1cebbba.0",
+		"@wordpress/notices": "^5.32.1-next.ff1cebbba.0",
+		"@wordpress/plugins": "^7.32.1-next.ff1cebbba.0",
+		"@wordpress/preferences": "^4.32.1-next.ff1cebbba.0",
+		"@wordpress/private-apis": "^1.32.1-next.ff1cebbba.0",
+		"@wordpress/url": "^4.32.1-next.ff1cebbba.0",
+		"@wordpress/viewport": "^6.32.1-next.ff1cebbba.0",
+		"@wordpress/warning": "^3.32.1-next.ff1cebbba.0",
+		"@wordpress/widgets": "^4.32.1-next.ff1cebbba.0",
 		"clsx": "^2.1.1",
 		"memize": "^2.1.0"
 	},
@@ -67,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a030b4c0e0695239b942c7dc18511782b64f10ed"
+	"gitHead": "c5b659710aff01d40d2eb97b211eb2cec9c07d3b"
 }

package/src/classic.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 // Provide baseline auto margin for centering blocks.
 // Specificity is kept at this level as many classic themes output
 // rules like figure { margin: 0; } which would break centering.

package/src/components/back-button/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 // Developer notes: these rules are copied from the site editor.
 // They need to be updated in both places.
 

package/src/components/layout/index.js

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
+import { NavigableRegion } from '@wordpress/admin-ui';
 import {
 	AutosaveMonitor,
 	LocalAutosaveMonitor,
@@ -76,7 +77,7 @@ import { useMetaBoxInitialization } from '../meta-boxes/use-meta-box-initializat
 
 const { getLayoutStyles } = unlock( blockEditorPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
-const { Editor, FullscreenMode, NavigableRegion } = unlock( editorPrivateApis );
+const { Editor, FullscreenMode } = unlock( editorPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 const DESIGN_POST_TYPES = [
 	'wp_template',
@@ -265,7 +266,7 @@ function MetaBoxesMain( { isLegacy } ) {
 		<div
 			// The class name 'edit-post-layout__metaboxes' is retained because some plugins use it.
 			className="edit-post-layout__metaboxes edit-post-meta-boxes-main__liner"
-			hidden={ ! isOpen }
+			hidden={ ! isLegacy && ! isOpen }
 		>
 			<MetaBoxes location="normal" />
 			<MetaBoxes location="advanced" />

package/src/components/layout/style.scss

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-post-meta-boxes-main {
 	filter: drop-shadow(0 -1px rgba($color: #000, $alpha: 0.133)); // 0.133 = $gray-200 but with alpha.
 	// Windows High Contrast mode will show this outline, but not the shadow.

package/src/components/meta-boxes/meta-boxes-area/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
 
 .edit-post-meta-boxes-area {
 	position: relative;

package/src/components/welcome-guide/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-post-welcome-guide,
 .edit-template-welcome-guide {
 	width: 312px;

package/src/style.scss

@@ -1,7 +1,11 @@
-@import "./components/back-button/style.scss";
-@import "./components/layout/style.scss";
-@import "./components/meta-boxes/meta-boxes-area/style.scss";
-@import "./components/welcome-guide/style.scss";
+@use "@wordpress/base-styles/default-custom-properties";
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/admin-ui/build-style/style.css" as *;
+@use "./components/back-button/style.scss" as *;
+@use "./components/layout/style.scss" as *;
+@use "./components/meta-boxes/meta-boxes-area/style.scss" as *;
+@use "./components/welcome-guide/style.scss" as *;
 
 body.js.block-editor-page {
 	@include wp-admin-reset( ".block-editor" );