@wordpress/interface 9.35.0 → 9.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/build-style/style-rtl.css +11 -10
  3. package/build-style/style.css +11 -10
  4. package/package.json +17 -17
  5. package/src/components/complementary-area/style.scss +2 -2
  6. package/src/components/fullscreen-mode/style.scss +1 -7
  7. package/src/components/interface-skeleton/style.scss +2 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,14 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 9.36.0 (2026-07-14)
6
+
7
+ ### Enhancements
8
+
9
+ - `ComplementaryArea`: Use the emphasis font-weight token for headings ([#80093](https://github.com/WordPress/gutenberg/pull/80093)).
10
+
11
+ - Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)).
12
+
5
13
  ## 9.35.0 (2026-07-01)
6
14
 
7
15
  ## 9.34.0 (2026-06-24)
package/build-style/style-rtl.css CHANGED
@@ -76,6 +76,12 @@
76
76
  /**
77
77
  * Focus styles.
78
78
  */
79
+ /**
80
+ * Standard focus rings for the WordPress Design System.
81
+ *
82
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
83
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
84
+ */
79
85
  /**
80
86
  * Applies editor left position to the selector passed as argument
81
87
  */
@@ -125,14 +131,14 @@
125
131
  }
126
132
  .interface-complementary-area h2 {
127
133
  font-size: 13px;
128
- font-weight: 499;
134
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
129
135
  color: #1e1e1e;
130
136
  margin-bottom: 1.5em;
131
137
  }
132
138
  .interface-complementary-area h3 {
133
139
  font-size: 11px;
134
140
  text-transform: uppercase;
135
- font-weight: 499;
141
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
136
142
  color: #1e1e1e;
137
143
  margin-bottom: 1.5em;
138
144
  }
@@ -162,12 +168,7 @@
162
168
  }
163
169
 
164
170
  @media (min-width: 782px) {
165
- body.js.is-fullscreen-mode {
166
- margin-top: -32px;
167
- height: calc(100% + 32px);
168
- }
169
- body.js.is-fullscreen-mode #adminmenumain,
170
- body.js.is-fullscreen-mode #wpadminbar {
171
+ body.js.is-fullscreen-mode #adminmenumain {
171
172
  display: none;
172
173
  }
173
174
  body.js.is-fullscreen-mode #wpcontent,
@@ -203,7 +204,7 @@ html.interface-interface-skeleton__html-container {
203
204
  top: 32px;
204
205
  }
205
206
  .is-fullscreen-mode .interface-interface-skeleton {
206
- top: 0;
207
+ top: var(--wp-admin--admin-bar--height, 0);
207
208
  }
208
209
  }
209
210
 
@@ -382,7 +383,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
382
383
  top: 32px;
383
384
  }
384
385
  .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
385
- top: 0;
386
+ top: var(--wp-admin--admin-bar--height, 0);
386
387
  }
387
388
  }
388
389
 
package/build-style/style.css CHANGED
@@ -76,6 +76,12 @@
76
76
  /**
77
77
  * Focus styles.
78
78
  */
79
+ /**
80
+ * Standard focus rings for the WordPress Design System.
81
+ *
82
+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
83
+ * e.g. `&:focus { @include outset-ring__focus(); }`.
84
+ */
79
85
  /**
80
86
  * Applies editor left position to the selector passed as argument
81
87
  */
@@ -125,14 +131,14 @@
125
131
  }
126
132
  .interface-complementary-area h2 {
127
133
  font-size: 13px;
128
- font-weight: 499;
134
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
129
135
  color: #1e1e1e;
130
136
  margin-bottom: 1.5em;
131
137
  }
132
138
  .interface-complementary-area h3 {
133
139
  font-size: 11px;
134
140
  text-transform: uppercase;
135
- font-weight: 499;
141
+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
136
142
  color: #1e1e1e;
137
143
  margin-bottom: 1.5em;
138
144
  }
@@ -162,12 +168,7 @@
162
168
  }
163
169
 
164
170
  @media (min-width: 782px) {
165
- body.js.is-fullscreen-mode {
166
- margin-top: -32px;
167
- height: calc(100% + 32px);
168
- }
169
- body.js.is-fullscreen-mode #adminmenumain,
170
- body.js.is-fullscreen-mode #wpadminbar {
171
+ body.js.is-fullscreen-mode #adminmenumain {
171
172
  display: none;
172
173
  }
173
174
  body.js.is-fullscreen-mode #wpcontent,
@@ -203,7 +204,7 @@ html.interface-interface-skeleton__html-container {
203
204
  top: 32px;
204
205
  }
205
206
  .is-fullscreen-mode .interface-interface-skeleton {
206
- top: 0;
207
+ top: var(--wp-admin--admin-bar--height, 0);
207
208
  }
208
209
  }
209
210
 
@@ -382,7 +383,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
382
383
  top: 32px;
383
384
  }
384
385
  .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
385
- top: 0;
386
+ top: var(--wp-admin--admin-bar--height, 0);
386
387
  }
387
388
  }
388
389
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/interface",
3
- "version": "9.35.0",
3
+ "version": "9.36.0",
4
4
  "description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -52,19 +52,19 @@
52
52
  "build-module/store/index.mjs"
53
53
  ],
54
54
  "dependencies": {
55
- "@wordpress/a11y": "^4.50.0",
56
- "@wordpress/admin-ui": "^2.5.0",
57
- "@wordpress/base-styles": "^10.2.0",
58
- "@wordpress/components": "^36.1.0",
59
- "@wordpress/compose": "^8.3.0",
60
- "@wordpress/data": "^10.50.0",
61
- "@wordpress/deprecated": "^4.50.0",
62
- "@wordpress/element": "^8.2.0",
63
- "@wordpress/i18n": "^6.23.0",
64
- "@wordpress/icons": "^15.1.0",
65
- "@wordpress/plugins": "^7.50.0",
66
- "@wordpress/preferences": "^4.50.0",
67
- "@wordpress/viewport": "^6.50.0",
55
+ "@wordpress/a11y": "^4.51.0",
56
+ "@wordpress/admin-ui": "^2.6.0",
57
+ "@wordpress/base-styles": "^11.0.0",
58
+ "@wordpress/components": "^37.0.0",
59
+ "@wordpress/compose": "^8.4.0",
60
+ "@wordpress/data": "^10.51.0",
61
+ "@wordpress/deprecated": "^4.51.0",
62
+ "@wordpress/element": "^8.3.0",
63
+ "@wordpress/i18n": "^6.24.0",
64
+ "@wordpress/icons": "^15.2.0",
65
+ "@wordpress/plugins": "^7.51.0",
66
+ "@wordpress/preferences": "^4.51.0",
67
+ "@wordpress/viewport": "^6.51.0",
68
68
  "clsx": "^2.1.1"
69
69
  },
70
70
  "devDependencies": {
@@ -72,11 +72,11 @@
72
72
  "@testing-library/react": "^16.3.2"
73
73
  },
74
74
  "peerDependencies": {
75
- "react": "^18.0.0",
76
- "react-dom": "^18.0.0"
75
+ "react": "^18 || ^19",
76
+ "react-dom": "^18 || ^19"
77
77
  },
78
78
  "publishConfig": {
79
79
  "access": "public"
80
80
  },
81
- "gitHead": "fee6e24e8e63d36f6bbcf487c193461e9bd79753"
81
+ "gitHead": "e9a74f9c14095a34398ecd4d1f7a908e55051205"
82
82
  }
package/src/components/complementary-area/style.scss CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  h2 {
38
38
  font-size: $default-font-size;
39
- font-weight: $font-weight-medium;
39
+ font-weight: var(--wpds-typography-font-weight-emphasis);
40
40
  color: $gray-900;
41
41
  margin-bottom: 1.5em;
42
42
  }
@@ -45,7 +45,7 @@
45
45
  h3 {
46
46
  font-size: 11px;
47
47
  text-transform: uppercase;
48
- font-weight: $font-weight-medium;
48
+ font-weight: var(--wpds-typography-font-weight-emphasis);
49
49
  color: $gray-900;
50
50
  margin-bottom: 1.5em;
51
51
  }
package/src/components/fullscreen-mode/style.scss CHANGED
@@ -4,13 +4,7 @@
4
4
  body.js.is-fullscreen-mode {
5
5
 
6
6
  @include break-medium {
7
- // Reset the html.wp-topbar padding.
8
- // Because this uses negative margins, we have to compensate for the height.
9
- margin-top: -$admin-bar-height;
10
- height: calc(100% + #{ $admin-bar-height });
11
-
12
- #adminmenumain,
13
- #wpadminbar {
7
+ #adminmenumain {
14
8
  display: none;
15
9
  }
16
10
 
package/src/components/interface-skeleton/style.scss CHANGED
@@ -36,7 +36,7 @@ html.interface-interface-skeleton__html-container {
36
36
  top: $admin-bar-height;
37
37
 
38
38
  .is-fullscreen-mode & {
39
- top: 0;
39
+ top: var(--wp-admin--admin-bar--height, 0);
40
40
  }
41
41
  }
42
42
  }
@@ -209,7 +209,7 @@ html.interface-interface-skeleton__html-container {
209
209
  top: $admin-bar-height;
210
210
 
211
211
  .is-fullscreen-mode & {
212
- top: 0;
212
+ top: var(--wp-admin--admin-bar--height, 0);
213
213
  }
214
214
  }
215
215
  }