@wordpress/interface 9.17.0 → 9.17.1-next.47f435fc9.0

package/build-style/style.css

@@ -1,9 +1,3 @@
-/**
- * Colors
- */
-/**
- * Breakpoints & Media Queries
- */
 /**
  * Colors
  */
@@ -49,51 +43,9 @@
  * 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
  */
@@ -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,75 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.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 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;
+}
+
 /**
  * Colors
  */
@@ -179,6 +197,18 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+.interface-complementary-area-header {
+  background: #fff;
+  padding-right: 8px;
+  gap: 4px;
+}
+.interface-complementary-area-header .interface-complementary-area-header__title {
+  margin: 0 auto 0 0;
+}
+
+/**
+ * Typography
+ */
 /**
  * Breakpoints & Media Queries
  */
@@ -194,9 +224,6 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
-/**
- * Typography
- */
 /**
  * Breakpoint mixins
  */
@@ -219,33 +246,6 @@
 /**
  * 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;
-}
-@media (min-resolution: 192dpi) {
-  :root {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-.interface-complementary-area-header {
-  background: #fff;
-  padding-right: 8px;
-  gap: 4px;
-}
-.interface-complementary-area-header .interface-complementary-area-header__title {
-  margin: 0 auto 0 0;
-}
-
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
@@ -322,11 +322,11 @@
     height: calc(100% + 32px);
   }
   body.js.is-fullscreen-mode #adminmenumain,
-body.js.is-fullscreen-mode #wpadminbar {
+  body.js.is-fullscreen-mode #wpadminbar {
     display: none;
   }
   body.js.is-fullscreen-mode #wpcontent,
-body.js.is-fullscreen-mode #wpfooter {
+  body.js.is-fullscreen-mode #wpfooter {
     margin-left: 0;
   }
 }
@@ -444,7 +444,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 @media (min-width: 782px) {
   .interface-interface-skeleton__secondary-sidebar,
-.interface-interface-skeleton__sidebar {
+  .interface-interface-skeleton__sidebar {
     position: relative !important;
   }
 }
@@ -543,7 +543,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .interface-pinned-items {
   display: flex;
-  gap: 8px;
 }
 .interface-pinned-items .components-button {
   display: none;
@@ -560,4 +559,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   .interface-pinned-items .components-button {
     display: flex;
   }
+}
+.interface-pinned-items {
+  gap: 8px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "9.17.0",
+	"version": "9.17.1-next.47f435fc9.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -25,26 +25,32 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"exports": {
+		".": {
+			"import": "./build-module/index.js",
+			"require": "./build/index.js"
+		},
+		"./package.json": "./package.json"
+	},
 	"react-native": "src/index",
-	"wpScript": true,
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
 		"{src,build,build-module}/{index.js,store/index.js}"
 	],
 	"dependencies": {
-		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.32.0",
-		"@wordpress/components": "^30.5.0",
-		"@wordpress/compose": "^7.32.0",
-		"@wordpress/data": "^10.32.0",
-		"@wordpress/deprecated": "^4.32.0",
-		"@wordpress/element": "^6.32.0",
-		"@wordpress/i18n": "^6.5.0",
-		"@wordpress/icons": "^10.32.0",
-		"@wordpress/plugins": "^7.32.0",
-		"@wordpress/preferences": "^4.32.0",
-		"@wordpress/viewport": "^6.32.0",
+		"@wordpress/a11y": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/admin-ui": "^1.0.1-next.47f435fc9.0",
+		"@wordpress/components": "^30.6.1-next.47f435fc9.0",
+		"@wordpress/compose": "^7.32.1-next.47f435fc9.0",
+		"@wordpress/data": "^10.32.1-next.47f435fc9.0",
+		"@wordpress/deprecated": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/element": "^6.32.1-next.47f435fc9.0",
+		"@wordpress/i18n": "^6.5.1-next.47f435fc9.0",
+		"@wordpress/icons": "^11.0.1-next.47f435fc9.0",
+		"@wordpress/plugins": "^7.32.1-next.47f435fc9.0",
+		"@wordpress/preferences": "^4.32.1-next.47f435fc9.0",
+		"@wordpress/viewport": "^6.32.1-next.47f435fc9.0",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -54,5 +60,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a030b4c0e0695239b942c7dc18511782b64f10ed"
+	"gitHead": "9720f22c138771d2ed1a0522725c3cdf1c242953"
 }

package/src/components/complementary-area/style.scss

@@ -1,3 +1,8 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 .interface-complementary-area {
 	background: $white;
 	color: $gray-900;

package/src/components/complementary-area-header/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .interface-complementary-area-header {
 	background: $white;
 	padding-right: $grid-unit-10; // Reduced padding to account for close buttons.

package/src/components/fullscreen-mode/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 body.js.is-fullscreen-mode {
 
 	@include break-medium {

package/src/components/index.js

@@ -4,4 +4,3 @@ export { default as FullscreenMode } from './fullscreen-mode';
 export { default as InterfaceSkeleton } from './interface-skeleton';
 export { default as PinnedItems } from './pinned-items';
 export { default as ActionItem } from './action-item';
-export { default as NavigableRegion } from './navigable-region';

package/src/components/interface-skeleton/index.js

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
+import { NavigableRegion } from '@wordpress/admin-ui';
 import { forwardRef, useEffect } from '@wordpress/element';
 import {
 	__unstableMotion as motion,
@@ -18,11 +19,6 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
-import NavigableRegion from '../navigable-region';
-
 const ANIMATION_DURATION = 0.25;
 const commonTransition = {
 	type: 'tween',

package/src/components/interface-skeleton/style.scss

@@ -1,3 +1,9 @@
+@use "@wordpress/base-styles/breakpoints" as *;
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 // On Mobile devices, swiping the HTML element should not scroll.
 // By making it fixed, we prevent that.
 html.interface-interface-skeleton__html-container {

package/src/components/pinned-items/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .interface-pinned-items {
 	display: flex;
 

package/src/style.scss

@@ -1,5 +1,6 @@
-@import "./components/complementary-area-header/style.scss";
-@import "./components/complementary-area/style.scss";
-@import "./components/fullscreen-mode/style.scss";
-@import "./components/interface-skeleton/style.scss";
-@import "./components/pinned-items/style.scss";
+@use "@wordpress/admin-ui/build-style/style.css" as *;
+@use "./components/complementary-area-header/style.scss" as *;
+@use "./components/complementary-area/style.scss" as *;
+@use "./components/fullscreen-mode/style.scss" as *;
+@use "./components/interface-skeleton/style.scss" as *;
+@use "./components/pinned-items/style.scss" as *;

package/build/components/index.native.js

@@ -1,21 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ComplementaryArea", {
-  enumerable: true,
-  get: function () {
-    return _complementaryArea.default;
-  }
-});
-Object.defineProperty(exports, "PinnedItems", {
-  enumerable: true,
-  get: function () {
-    return _pinnedItems.default;
-  }
-});
-var _complementaryArea = _interopRequireDefault(require("./complementary-area"));
-var _pinnedItems = _interopRequireDefault(require("./pinned-items"));
-//# sourceMappingURL=index.native.js.map

package/build/components/index.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_complementaryArea","_interopRequireDefault","require","_pinnedItems"],"sources":["@wordpress/interface/src/components/index.native.js"],"sourcesContent":["export { default as ComplementaryArea } from './complementary-area';\nexport { default as PinnedItems } from './pinned-items';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAF,sBAAA,CAAAC,OAAA","ignoreList":[]}

package/build/components/navigable-region/index.js

@@ -1,38 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _element = require("@wordpress/element");
-var _clsx = _interopRequireDefault(require("clsx"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * External dependencies
- */
-
-const NavigableRegion = (0, _element.forwardRef)(({
-  children,
-  className,
-  ariaLabel,
-  as: Tag = 'div',
-  ...props
-}, ref) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
-    ref: ref,
-    className: (0, _clsx.default)('interface-navigable-region', className),
-    "aria-label": ariaLabel,
-    role: "region",
-    tabIndex: "-1",
-    ...props,
-    children: children
-  });
-});
-NavigableRegion.displayName = 'NavigableRegion';
-var _default = exports.default = NavigableRegion;
-//# sourceMappingURL=index.js.map

package/build/components/navigable-region/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_element","require","_clsx","_interopRequireDefault","_jsxRuntime","NavigableRegion","forwardRef","children","className","ariaLabel","as","Tag","props","ref","jsx","clsx","role","tabIndex","displayName","_default","exports","default"],"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\nconst NavigableRegion = forwardRef(\n\t( { children, className, ariaLabel, as: Tag = 'div', ...props }, ref ) => {\n\t\treturn (\n\t\t\t<Tag\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx( 'interface-navigable-region', className ) }\n\t\t\t\taria-label={ ariaLabel }\n\t\t\t\trole=\"region\"\n\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Tag>\n\t\t);\n\t}\n);\n\nNavigableRegion.displayName = 'NavigableRegion';\nexport default NavigableRegion;\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAwB,IAAAG,WAAA,GAAAH,OAAA;AARxB;AACA;AACA;;AAGA;AACA;AACA;;AAGA,MAAMI,eAAe,GAAG,IAAAC,mBAAU,EACjC,CAAE;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,SAAS;EAAEC,EAAE,EAAEC,GAAG,GAAG,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAM;EACzE,oBACC,IAAAT,WAAA,CAAAU,GAAA,EAACH,GAAG;IACHE,GAAG,EAAGA,GAAK;IACXL,SAAS,EAAG,IAAAO,aAAI,EAAE,4BAA4B,EAAEP,SAAU,CAAG;IAC7D,cAAaC,SAAW;IACxBO,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAC,IAAI;IAAA,GACRL,KAAK;IAAAL,QAAA,EAERA;EAAQ,CACN,CAAC;AAER,CACD,CAAC;AAEDF,eAAe,CAACa,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACjChB,eAAe","ignoreList":[]}

package/build-module/components/index.native.js

@@ -1,3 +0,0 @@
-export { default as ComplementaryArea } from './complementary-area';
-export { default as PinnedItems } from './pinned-items';
-//# sourceMappingURL=index.native.js.map

package/build-module/components/index.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["default","ComplementaryArea","PinnedItems"],"sources":["@wordpress/interface/src/components/index.native.js"],"sourcesContent":["export { default as ComplementaryArea } from './complementary-area';\nexport { default as PinnedItems } from './pinned-items';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAAiB,QAAQ,sBAAsB;AACnE,SAASD,OAAO,IAAIE,WAAW,QAAQ,gBAAgB","ignoreList":[]}

package/build-module/components/navigable-region/index.js

@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-import { jsx as _jsx } from "react/jsx-runtime";
-const NavigableRegion = forwardRef(({
-  children,
-  className,
-  ariaLabel,
-  as: Tag = 'div',
-  ...props
-}, ref) => {
-  return /*#__PURE__*/_jsx(Tag, {
-    ref: ref,
-    className: clsx('interface-navigable-region', className),
-    "aria-label": ariaLabel,
-    role: "region",
-    tabIndex: "-1",
-    ...props,
-    children: children
-  });
-});
-NavigableRegion.displayName = 'NavigableRegion';
-export default NavigableRegion;
-//# sourceMappingURL=index.js.map

package/build-module/components/navigable-region/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["forwardRef","clsx","jsx","_jsx","NavigableRegion","children","className","ariaLabel","as","Tag","props","ref","role","tabIndex","displayName"],"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\nconst NavigableRegion = forwardRef(\n\t( { children, className, ariaLabel, as: Tag = 'div', ...props }, ref ) => {\n\t\treturn (\n\t\t\t<Tag\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ clsx( 'interface-navigable-region', className ) }\n\t\t\t\taria-label={ ariaLabel }\n\t\t\t\trole=\"region\"\n\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Tag>\n\t\t);\n\t}\n);\n\nNavigableRegion.displayName = 'NavigableRegion';\nexport default NavigableRegion;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,IAAI,MAAM,MAAM;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExB,MAAMC,eAAe,GAAGJ,UAAU,CACjC,CAAE;EAAEK,QAAQ;EAAEC,SAAS;EAAEC,SAAS;EAAEC,EAAE,EAAEC,GAAG,GAAG,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAM;EACzE,oBACCR,IAAA,CAACM,GAAG;IACHE,GAAG,EAAGA,GAAK;IACXL,SAAS,EAAGL,IAAI,CAAE,4BAA4B,EAAEK,SAAU,CAAG;IAC7D,cAAaC,SAAW;IACxBK,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAC,IAAI;IAAA,GACRH,KAAK;IAAAL,QAAA,EAERA;EAAQ,CACN,CAAC;AAER,CACD,CAAC;AAEDD,eAAe,CAACU,WAAW,GAAG,iBAAiB;AAC/C,eAAeV,eAAe","ignoreList":[]}

package/src/components/navigable-region/README.md

@@ -1,36 +0,0 @@
-# NavigableRegion
-
-`NavigableRegion` renders an ARIA landmark region that's meant to be used together with the `useNavigateRegions` component from the `@wordpress/components` package. The ARIA landmark is a `div` element with a `role="region"` attribute and an `aria-label` attribute. It's made focusable by the means of a `tabindex="-1"` attribute so that `useNavigateRegions` can set focus on it and allow keyboard navigation through the regions in the editor.
-
-It also renders a child `div` element that is responsible to set a negative `z-index` stack level, to make sure the focus style is always visible, regardless of other elements that may cut-off the focus style outline otherwise.
-
-## Props
-
-### children
-
-The component that should be rendered as content.
-
--   Type: React Element
--   Required: Yes
-
-### className
-
-The CSS class that will be added to the classes of the wrapper div.
-
--   Type: `String`
--   Required: No
-
-### ariaLabel
-
-A meaningful name for the ARIA landmark region.
-
--   Type: `String`
--   Required: Yes
-
-### as
-
-The component used as the root of the region. Defaults to a `div` element.
-
--   Type: `Component`
--   Required: no
--   Default: `div`

package/src/components/navigable-region/index.js

@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-const NavigableRegion = forwardRef(
-	( { children, className, ariaLabel, as: Tag = 'div', ...props }, ref ) => {
-		return (
-			<Tag
-				ref={ ref }
-				className={ clsx( 'interface-navigable-region', className ) }
-				aria-label={ ariaLabel }
-				role="region"
-				tabIndex="-1"
-				{ ...props }
-			>
-				{ children }
-			</Tag>
-		);
-	}
-);
-
-NavigableRegion.displayName = 'NavigableRegion';
-export default NavigableRegion;