@wordpress/base-styles 4.22.0 → 4.24.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 4.24.0 (2023-05-10)
+
+## 4.23.0 (2023-04-26)
+
 ## 4.22.0 (2023-04-12)
 
 ## 4.21.0 (2023-03-29)

package/_mixins.scss

@@ -76,12 +76,28 @@
 
 @mixin input-style__focus() {
 	border-color: var(--wp-admin-theme-color);
-	box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color);
+	box-shadow: 0 0 0 ($border-width-focus-fallback - $border-width) var(--wp-admin-theme-color);
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;
 }
 
+@mixin button-style__focus() {
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 2px solid transparent;
+}
+
+
+@mixin button-style-outset__focus($focus-color) {
+	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $white, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) $focus-color;
+
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 2px solid transparent;
+	outline-offset: 2px;
+}
+
 
 /**
  * Applies editor left position to the selector passed as argument
@@ -224,7 +240,7 @@
 	border-radius: $radius-block-ui;
 
 	&:focus {
-		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) var(--wp-admin-theme-color);
 
 		// Only visible in Windows High Contrast mode.
 		outline: 2px solid transparent;
@@ -308,7 +324,7 @@
 	}
 
 	&:focus {
-		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 ($border-width * 2) $white, 0 0 0 ($border-width * 2 + $border-width-focus-fallback) var(--wp-admin-theme-color);
 
 		// Only visible in Windows High Contrast mode.
 		outline: 2px solid transparent;
@@ -335,6 +351,31 @@
 	}
 }
 
+// The editor input reset with increased specificity to avoid theme styles bleeding in.
+@mixin editor-input-reset() {
+	font-family: $editor-html-font !important;
+	color: $gray-900 !important;
+	background: $white !important;
+	padding: $grid-unit-15 !important;
+	border: $border-width solid $gray-900 !important;
+	box-shadow: none !important;
+	border-radius: $radius-block-ui !important;
+
+	// Fonts smaller than 16px causes mobile safari to zoom.
+	font-size: $mobile-text-min-font-size !important;
+	@include break-small {
+		font-size: $default-font-size !important;
+	}
+
+	&:focus {
+		border-color: var(--wp-admin-theme-color) !important;
+		box-shadow: 0 0 0 ($border-width-focus-fallback - $border-width) var(--wp-admin-theme-color) !important;
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent !important;
+	}
+}
+
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
@@ -489,11 +530,7 @@
 	/* stylelint-enable function-comma-space-after */
 }
 
-@mixin custom-scrollbars-on-hover() {
-	visibility: hidden;
-
-	$handle-color: #757575;
-	$track-color: #1e1e1e;
+@mixin custom-scrollbars-on-hover($handle-color, $handle-color-hover) {
 
 	// WebKit
 	&::-webkit-scrollbar {
@@ -501,7 +538,7 @@
 		height: 12px;
 	}
 	&::-webkit-scrollbar-track {
-		background-color: $track-color;
+		background-color: transparent;
 	}
 	&::-webkit-scrollbar-thumb {
 		background-color: $handle-color;
@@ -509,15 +546,30 @@
 		border: 3px solid transparent;
 		background-clip: padding-box;
 	}
+	&:hover::-webkit-scrollbar-thumb, // This needs specificity.
+	&:focus::-webkit-scrollbar-thumb,
+	&:focus-within::-webkit-scrollbar-thumb {
+		background-color: $handle-color-hover;
+	}
 
 	// Firefox 109+ and Chrome 111+
-	scrollbar-color: $handle-color $track-color; // Syntax, "dark", "light", or "#handle-color #track-color"
 	scrollbar-width: thin;
-	scrollbar-gutter: stable;
+	scrollbar-gutter: stable both-edges;
+	scrollbar-color: $handle-color transparent; // Syntax, "dark", "light", or "#handle-color #track-color"
 
 	&:hover,
 	&:focus,
-	& > * {
-		visibility: visible;
+	&:focus-within {
+		scrollbar-color: $handle-color-hover transparent;
+	}
+
+	// Needed to fix a Safari rendering issue.
+	will-change: transform;
+
+	// Always show scrollbar on Mobile devices.
+	@media (hover: none) {
+		& {
+			scrollbar-color: $handle-color-hover transparent;
+		}
 	}
 }

package/_variables.scss

@@ -46,6 +46,7 @@ $grid-unit-80: 8 * $grid-unit;		// 64px
 
 $icon-size: 24px;
 $button-size: 36px;
+$button-size-next-default-40px: 40px; // transitionary variable for next default button size
 $button-size-small: 24px;
 $header-height: 60px;
 $panel-header-height: $grid-unit-60;
@@ -83,7 +84,7 @@ $widget-area-width: 700px;
 
 $block-toolbar-height: $grid-unit-60;
 $border-width: 1px;
-$border-width-focus: 2px; // This exists as a fallback, and is ideally overridden by var(--wp-admin-border-width-focus) unless in some SASS math cases.
+$border-width-focus-fallback: 2px; // This exists as a fallback, and is ideally overridden by var(--wp-admin-border-width-focus) unless in some SASS math cases.
 $border-width-tab: 1.5px;
 $helptext-font-size: 12px;
 $radius-round: 50%;

package/_z-index.scss

@@ -33,8 +33,8 @@ $z-layers: (
 	".interface-interface-skeleton__content": 20,
 	".edit-widgets-header": 30,
 	".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
-	".wp-block-cover__inner-container": 32, // InnerBlocks area inside cover image block. Must be higher than block popover and less than drop zone.
-	".wp-block-cover.is-placeholder .components-placeholder.is-large": 32, // Cover block resizer component inside a large placeholder.
+	".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block.
+	".wp-block-cover.is-placeholder .components-placeholder.is-large": 1, // Cover block resizer component inside a large placeholder.
 	".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
 	".block-library-cover__padding-visualizer": 2, // BoxControl visualizer needs to be +1 higher than .wp-block-cover.has-background-dim::before
 	".wp-block-cover__image-background": 0, // Image background inside cover block.
@@ -189,6 +189,9 @@ $z-layers: (
 	".edit-site-layout__canvas-container.is-resizing::after": 100,
 	// Title needs to appear above other UI the section content.
 	".edit-site-sidebar-navigation-screen__title-icon": 1,
+
+	// Ensure modal footer actions appear above modal contents
+	".edit-site-start-template-options__modal__actions": 1,
 );
 
 @function z-index( $key ) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/base-styles",
-	"version": "4.22.0",
+	"version": "4.24.0",
 	"description": "Base SCSS utilities and variables for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,5 +23,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d61700b9f1c72ba0b030fc815ef1685b4f4031ec"
+	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
 }