feat: update search overlay (#215)

Automattic · Jul 2, 2024 · 27699f8 · 27699f8
1 parent 91e34a4
commit 27699f8
Show file tree

Hide file tree

Showing 10 changed files with 618 additions and 25 deletions.
diff --git a/includes/class-core.php b/includes/class-core.php
@@ -117,7 +117,7 @@ public static function block_variations( $metadata ) {
 		if ( $metadata['name'] == 'core/search' ) {
 			$metadata['attributes']['buttonPosition']['default'] = 'button-inside';
 			$metadata['attributes']['buttonUseIcon']['default']  = true;
-			$metadata['attributes']['placeholder']['default']    = esc_html__( 'Search...', 'newspack-block-theme' );
+			$metadata['attributes']['placeholder']['default']    = esc_html__( 'Search posts, categories, authors, ...', 'newspack-block-theme' );
 			$metadata['attributes']['showLabel']['default']      = false;
 		}
 		if ( $metadata['name'] == 'core/navigation' ) {

diff --git a/parts/mobile-sidebar.html b/parts/mobile-sidebar.html
@@ -5,7 +5,7 @@
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->
 
-<!-- wp:search {"label":"","placeholder":"Search...","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true} /-->
+<!-- wp:search {"label":"","placeholder":"Search posts, categories, authors, ...","buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true} /-->
 
 <!-- wp:separator {"backgroundColor":"contrast-3"} -->
 <hr class="wp-block-separator has-text-color has-contrast-3-color has-alpha-channel-opacity has-contrast-3-background-color has-background"/>
@@ -26,4 +26,4 @@
 
 <!-- wp:social-link {"url":"#","service":"youtube"} /--></ul>
 <!-- /wp:social-links --></div>
-<!-- /wp:group -->
+<!-- /wp:group -->
diff --git a/parts/search-contents.html b/parts/search-contents.html
@@ -1,7 +1,7 @@
 <!-- wp:group {"templateLock":"all","lock":{"move":true,"remove":true},"layout":{"type":"constrained"},"metadata":{"name":"Search Contents"}} -->
 <div class="wp-block-group">
 
-	<!-- wp:search {"label":"","placeholder":"Search...","buttonText":"Search","lock":{"move":false,"remove":false},"fontSize":"small"} /-->
+	<!-- wp:search {"label":"","placeholder":"Search posts, categories, authors, ...","buttonText":"Search","lock":{"move":false,"remove":false},"fontSize":"small"} /-->
 
 	<!-- wp:spacer {"height":"auto","lock":{"move":true,"remove":true},"metadata":{"name":"Overlay"},"className":"search-contents__overlay"} -->
 	<div style="height:auto" aria-hidden="true" class="wp-block-spacer search-contents__overlay"></div>

diff --git a/src/scss/_comments-overlay.scss b/src/scss/_comments-overlay.scss
@@ -44,9 +44,7 @@
 		}
 	}
 
-	/* stylelint-disable */
-	&:has(#disqus_thread) {
-		/* stylelint-enable */
+	&:has(#disqus_thread) { /* stylelint-disable-line selector-id-pattern */
 		max-width: calc(
 			(var(--wp--custom--width--medium) - (var(--wp--preset--spacing--50) * 5)) / 6 * 7 +
 				(var(--wp--preset--spacing--50) * 6)

diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
@@ -35,7 +35,7 @@
 
 @mixin checkbox-radio {
 	appearance: none;
-	background: white;
+	background: white 50% 50% no-repeat;
 	border: 1px solid var(--wp--preset--color--base-4);
 	box-shadow: none;
 	color: white;
@@ -46,7 +46,7 @@
 	margin: 2px 0 0;
 	place-content: center;
 	transition:
-		background-color 125ms ease-in-out,
+		background 125ms ease-in-out,
 		border-color 125ms ease-in-out,
 		outline 125ms ease-in-out;
 	width: 20px !important;
@@ -62,6 +62,8 @@
 	}
 
 	&:checked {
+		background-color: var(--wp--preset--color--contrast);
+
 		&::before {
 			content: '';
 			opacity: 1;
@@ -70,12 +72,12 @@
 
 	&:focus {
 		border-color: var(--wp--preset--color--base-4);
-		box-shadow: none;
-		outline: unset;
+		box-shadow: none !important;
+		outline: unset !important;
 	}
 
 	&:focus-visible {
-		outline: 2px solid var(--wp--preset--color--contrast);
+		outline: 2px solid var(--wp--preset--color--contrast) !important;
 		outline-offset: 1px;
 
 		&:not(:checked) {
@@ -103,7 +105,7 @@
 	}
 
 	&:checked {
-		background: var(--wp--preset--color--contrast);
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z' fill='white'%3E%3C/path%3E%3C/svg%3E");
 		border-color: transparent;
 	}
 }
@@ -114,12 +116,12 @@
 	&::before {
 		background: var(--newspack-ui-color-neutral-0);
 		border-radius: 100%;
-		height: var(--wp--preset--spacing--20);
-		width: var(--wp--preset--spacing--20);
+		height: 8px;
+		width: 8px;
 	}
 
 	&:checked {
-		background: var(--wp--preset--color--contrast);
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E");
 		border-color: var(--wp--preset--color--contrast);
 	}
 }
@@ -146,11 +148,13 @@
 
 @mixin elevation($size: 1) {
 	@if $size == 1 {
-		box-shadow: 0 1px 10px rgba(0, 0, 0, 0.07);
+		box-shadow: var(--wp--preset--shadow--elevation-1);
 	} @else if $size == 2 {
-		box-shadow: 0 2px 20px rgba(0, 0, 0, 0.14);
+		box-shadow: var(--wp--preset--shadow--elevation-2);
 	} @else if $size == 3 {
-		box-shadow: 0 3px 30px rgba(0, 0, 0, 0.21);
+		box-shadow: var(--wp--preset--shadow--elevation-3);
+	} @else if $size == 4 {
+		box-shadow: var(--wp--preset--shadow--elevation-4);
 	}
 }
 

diff --git a/src/scss/_sass-utils.scss b/src/scss/_sass-utils.scss
@@ -39,6 +39,10 @@ $zindex-screen-reader-text: 100000; /* Above WP toolbar. */
 		@media only screen and (min-width: $xlarge-screen) {
 			@content;
 		}
+	} @else {
+		@media only screen and (min-width: $class) {
+			@content;
+		}
 	}
 }