@wordpress/base-styles 4.21.0 → 4.23.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.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 4.23.0 (2023-04-26)
6
+
7
+ ## 4.22.0 (2023-04-12)
8
+
5
9
  ## 4.21.0 (2023-03-29)
6
10
 
7
11
  ## 4.20.0 (2023-03-15)
package/_mixins.scss CHANGED
@@ -335,6 +335,31 @@
335
335
  }
336
336
  }
337
337
 
338
+ // The editor input reset with increased specificity to avoid theme styles bleeding in.
339
+ @mixin editor-input-reset() {
340
+ font-family: $editor-html-font !important;
341
+ color: $gray-900 !important;
342
+ background: $white !important;
343
+ padding: $grid-unit-15 !important;
344
+ border: $border-width solid $gray-900 !important;
345
+ box-shadow: none !important;
346
+ border-radius: $radius-block-ui !important;
347
+
348
+ // Fonts smaller than 16px causes mobile safari to zoom.
349
+ font-size: $mobile-text-min-font-size !important;
350
+ @include break-small {
351
+ font-size: $default-font-size !important;
352
+ }
353
+
354
+ &:focus {
355
+ border-color: var(--wp-admin-theme-color) !important;
356
+ box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color) !important;
357
+
358
+ // Windows High Contrast mode will show this outline, but not the box-shadow.
359
+ outline: 2px solid transparent !important;
360
+ }
361
+ }
362
+
338
363
  /**
339
364
  * Reset the WP Admin page styles for Gutenberg-like pages.
340
365
  */
@@ -489,11 +514,7 @@
489
514
  /* stylelint-enable function-comma-space-after */
490
515
  }
491
516
 
492
- @mixin custom-scrollbars-on-hover() {
493
- visibility: hidden;
494
-
495
- $handle-color: #757575;
496
- $track-color: #1e1e1e;
517
+ @mixin custom-scrollbars-on-hover($handle-color, $handle-color-hover) {
497
518
 
498
519
  // WebKit
499
520
  &::-webkit-scrollbar {
@@ -501,7 +522,7 @@
501
522
  height: 12px;
502
523
  }
503
524
  &::-webkit-scrollbar-track {
504
- background-color: $track-color;
525
+ background-color: transparent;
505
526
  }
506
527
  &::-webkit-scrollbar-thumb {
507
528
  background-color: $handle-color;
@@ -509,15 +530,30 @@
509
530
  border: 3px solid transparent;
510
531
  background-clip: padding-box;
511
532
  }
533
+ &:hover::-webkit-scrollbar-thumb, // This needs specificity.
534
+ &:focus::-webkit-scrollbar-thumb,
535
+ &:focus-within::-webkit-scrollbar-thumb {
536
+ background-color: $handle-color-hover;
537
+ }
512
538
 
513
539
  // Firefox 109+ and Chrome 111+
514
- scrollbar-color: $handle-color $track-color; // Syntax, "dark", "light", or "#handle-color #track-color"
515
540
  scrollbar-width: thin;
516
- scrollbar-gutter: stable;
541
+ scrollbar-gutter: stable both-edges;
542
+ scrollbar-color: $handle-color transparent; // Syntax, "dark", "light", or "#handle-color #track-color"
517
543
 
518
544
  &:hover,
519
545
  &:focus,
520
- & > * {
521
- visibility: visible;
546
+ &:focus-within {
547
+ scrollbar-color: $handle-color-hover transparent;
548
+ }
549
+
550
+ // Needed to fix a Safari rendering issue.
551
+ will-change: transform;
552
+
553
+ // Always show scrollbar on Mobile devices.
554
+ @media (hover: none) {
555
+ & {
556
+ scrollbar-color: $handle-color-hover transparent;
557
+ }
522
558
  }
523
559
  }
package/_z-index.scss CHANGED
@@ -33,7 +33,7 @@ $z-layers: (
33
33
  ".interface-interface-skeleton__content": 20,
34
34
  ".edit-widgets-header": 30,
35
35
  ".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
36
- ".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block
36
+ ".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block.
37
37
  ".wp-block-cover.is-placeholder .components-placeholder.is-large": 1, // Cover block resizer component inside a large placeholder.
38
38
  ".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
39
39
  ".block-library-cover__padding-visualizer": 2, // BoxControl visualizer needs to be +1 higher than .wp-block-cover.has-background-dim::before
@@ -187,6 +187,8 @@ $z-layers: (
187
187
  ".edit-site-layout__canvas-container": 2,
188
188
  ".edit-site-layout__sidebar": 1,
189
189
  ".edit-site-layout__canvas-container.is-resizing::after": 100,
190
+ // Title needs to appear above other UI the section content.
191
+ ".edit-site-sidebar-navigation-screen__title-icon": 1,
190
192
  );
191
193
 
192
194
  @function z-index( $key ) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/base-styles",
3
- "version": "4.21.0",
3
+ "version": "4.23.0",
4
4
  "description": "Base SCSS utilities and variables for WordPress.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -23,5 +23,5 @@
23
23
  "publishConfig": {
24
24
  "access": "public"
25
25
  },
26
- "gitHead": "d5c28a67b11e91e3e4b8e90346bfcb90909364d6"
26
+ "gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
27
27
  }