diff --git a/includes/class-core.php b/includes/class-core.php index 7e5d2f3c..1900c776 100644 --- 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 index 7be29f3d..c2fb015b 100644 --- a/parts/mobile-sidebar.html +++ b/parts/mobile-sidebar.html @@ -5,7 +5,7 @@ - +
@@ -26,4 +26,4 @@ - \ No newline at end of file + diff --git a/parts/search-contents.html b/parts/search-contents.html index ef6f85fe..92218cf3 100644 --- a/parts/search-contents.html +++ b/parts/search-contents.html @@ -1,7 +1,7 @@
- + diff --git a/src/scss/_comments-overlay.scss b/src/scss/_comments-overlay.scss index aa96082a..321d6a2b 100644 --- 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 index d9ab361f..b9af1bb3 100644 --- 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 index ff456a39..b9fbc6f9 100644 --- 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; + } } } diff --git a/src/scss/_search-overlay.scss b/src/scss/_search-overlay.scss index 3419e665..6ab322fa 100644 --- a/src/scss/_search-overlay.scss +++ b/src/scss/_search-overlay.scss @@ -1,4 +1,5 @@ @use 'sass-utils'; +@use 'mixins'; /** * Search menu styles @@ -10,7 +11,7 @@ overflow: auto; padding: var(--wp--preset--spacing--30); position: fixed !important; // !important to override some styles in the editor. - transition: opacity 0.125s; + transition: opacity 0.125s ease-in-out; width: 100%; z-index: sass-utils.$zindex-overlay-menu; @@ -54,10 +55,581 @@ } } -.jetpack-instant-search { - @include sass-utils.media(large) { - .jetpack-instant-search__search-results-wrapper { - max-width: 1020px; +body .jetpack-instant-search { + --jp--color--text: var(--wp--custom--color--neutral-90); + --jp--color--text-light: var(--wp--custom--color--neutral-60); + --jp--color--background: var(--wp--custom--color--neutral-0); + --jp--color--background-light: var(--wp--custom--color--neutral-5); + --jp--color--border: var(--wp--custom--color--neutral-30); + + &[class*='--dark'] { + --jp--color--text: var(--wp--custom--color--neutral-0); + --jp--color--text-light: var(--wp--custom--color--neutral-10); + --jp--color--background: var(--wp--custom--color--neutral-100); + --jp--color--background-light: var(--wp--custom--color--neutral-90); + --jp--color--border: var(--wp--custom--color--neutral-60); + + color: var(--jp--color--text); + + button.jetpack-instant-search__overlay-close { + background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.40456 5L19 19M5 19L18.5954 5' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") !important; + } + + .jetpack-instant-search { + &__box { + &-gridicon { + background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 11.5C18 14.5376 15.5376 17 12.5 17C11.103 17 9.82771 16.4792 8.85761 15.6211L5.49386 18.5644L4.5061 17.4355L7.87915 14.4841C7.32293 13.6246 7 12.6 7 11.5C7 8.46243 9.46243 6 12.5 6C15.5376 6 18 8.46243 18 11.5ZM16.5 11.5C16.5 13.7091 14.7091 15.5 12.5 15.5C10.2909 15.5 8.5 13.7091 8.5 11.5C8.5 9.29086 10.2909 7.5 12.5 7.5C14.7091 7.5 16.5 9.29086 16.5 11.5Z' fill='white'/%3E%3C/svg%3E"); + } + } + } + } + + a { + color: inherit; + text-decoration: none; + + &:hover { + color: inherit; + text-decoration: underline; + } + + &:focus { + color: inherit; + text-decoration: none; + } + + &:focus-visible { + outline: 2px solid var(--jp--color--text); + outline-offset: 1px; + } + } + + button { + cursor: pointer; + font-family: inherit; + + &#jetpack-instant-search__overlay-focus-anchor { /* stylelint-disable-line selector-id-pattern */ + border-radius: var(--wp--custom--border--radius-medium); + border: 1px solid var(--jp--color--border); + color: var(--jp--color--text); + font-size: var(--newspack-ui-font-size-xs, 14px); + font-weight: 600; + line-height: var(--newspack-ui-line-height-xs, 1.4286); + min-height: var(--wp--preset--spacing--50); + padding: calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) / 2 - 1px) + calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) - 1px); + @include sass-utils.all-transition; + + &:focus { + outline: 2px solid var(--jp--color--text) !important; + outline-offset: 1px; + } + } + } + + &__overlay { + background: var(--wp--custom--color--neutral-70) !important; + color: var(--jp--color--text); + font-family: var(--newspack-ui-font-family, system-ui); + font-size: var(--newspack-ui-font-size-s, 16px); + line-height: var(--newspack-ui-line-height-s, 1.5); + padding: var(--wp--preset--spacing--30); + + @include sass-utils.media('576px') { + padding: var(--wp--preset--spacing--80); + } + + button.jetpack-instant-search__overlay-close { + background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.40456 5L19 19M5 19L18.5954 5' stroke='%231E1E1E' stroke-width='1.5'/%3E%3C/svg%3E") !important; + background-position: center !important; + background-repeat: no-repeat !important; + background-size: 24px 24px !important; + border-bottom-color: var(--jp--color--border) !important; + + > svg { + display: none; + } + + &::before { + background: var(--jp--color--background); + border-radius: var(--newspack-ui-border-radius-m, 6px); + content: ''; + display: block; + height: 36px; + position: absolute; + width: 36px; + z-index: -1; + @include sass-utils.all-transition; + } + + &:hover { + &::before { + background: var(--jp--color--background-light); + } + } + + &:focus { + outline: unset !important; + } + + &:focus-visible { + &::before { + outline: 2px solid var(--jp--color--text); + outline-offset: 1px; + } + } + } + + button[class*='jetpack-instant-search'] { + background: none; + border-radius: 0; + color: inherit; + padding: 0; + + &:hover { + text-decoration: underline; + } + } + } + + &__box { + border-color: var(--jp--color--border) !important; + + &-label { + transition: outline 125ms ease-in-out; + + &:focus-within { + border-radius: var(--newspack-ui-border-radius-m, 6px); + outline: 2px solid var(--jp--color--text); + outline-offset: -4px; + } + } + + &-input { + &.search-field { + color: inherit !important; + font-size: inherit !important; + letter-spacing: 0 !important; + padding: 0 !important; + } + + &:focus { + border-radius: 0; + margin: 0 !important; + outline: none !important; + } + } + + &-gridicon { + background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 11.5C18 14.5376 15.5376 17 12.5 17C11.103 17 9.82771 16.4792 8.85761 15.6211L5.49386 18.5644L4.5061 17.4355L7.87915 14.4841C7.32293 13.6246 7 12.6 7 11.5C7 8.46243 9.46243 6 12.5 6C15.5376 6 18 8.46243 18 11.5ZM16.5 11.5C16.5 13.7091 14.7091 15.5 12.5 15.5C10.2909 15.5 8.5 13.7091 8.5 11.5C8.5 9.29086 10.2909 7.5 12.5 7.5C14.7091 7.5 16.5 9.29086 16.5 11.5Z' fill='%231E1E1E'/%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; + background-size: 24px 24px; + min-width: var(--wp--custom--spacing--75); + width: var(--wp--preset--spacing--80); + + > svg { + display: none; + } + } + } + + &__search-results { + background: var(--jp--color--background); + + &-wrapper { + border-radius: var(--wp--custom--border--radius-medium); + max-width: calc(var(--wp--preset--spacing--80) + 632px + var(--wp--preset--spacing--80)); + + @include sass-utils.media('992px') { + &:has(.jetpack-instant-search__widget-area > *) { + max-width: calc( + var(--wp--preset--spacing--80) + 632px + var(--wp--preset--spacing--80) + 333px + ); + } + } + } + + &-filter-button { + border-radius: var(--wp--custom--border--radius-medium); + border: 1px solid var(--jp--color--border); + color: var(--jp--color--text); + font-size: var(--newspack-ui-font-size-xs, 14px); + font-weight: 600; + line-height: var(--newspack-ui-line-height-xs, 1.4286); + min-height: var(--wp--preset--spacing--50); + padding: calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) / 2 - 1px) + calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) - 1px); + @include sass-utils.all-transition; + + &:hover { + background: var(--jp--color--background-light); + text-decoration: none; + } + } + + &-title { + color: inherit; + font-size: var(--newspack-ui-font-size-m, clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem)); + line-height: var(--newspack-ui-line-height-m, 1.6); + margin: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); + + @include sass-utils.media('576px') { + margin-left: var(--wp--preset--spacing--80); + margin-right: var(--wp--preset--spacing--80); + } + } + + &-list { + color: inherit; + margin: 0 var(--wp--preset--spacing--40); + + @include sass-utils.media('576px') { + margin-left: var(--wp--preset--spacing--80); + margin-right: var(--wp--preset--spacing--80); + } + + &.is-format-product { + display: grid; + gap: var(--wp--preset--spacing--30); + grid-template-columns: repeat(2, 1fr); + margin: 0 var(--wp--preset--spacing--40); + padding: 0; + + @include sass-utils.media('576px') { + grid-template-columns: repeat(3, 1fr); + margin-left: var(--wp--preset--spacing--80); + margin-right: var(--wp--preset--spacing--80); + } + + li { + margin: 0; + width: 100%; + + h3 { + font-size: inherit; + line-height: inherit; + margin-top: var(--wp--preset--spacing--20); + } + } + } + } + + &-expanded { + &__image { + border-radius: var(--newspack-ui-border-radius-m, 6px); + + &-link { + margin-left: var(--wp--preset--spacing--50); + } + } + } + + &-pagination { + font-weight: 600; + margin: var(--wp--preset--spacing--40); + + @include sass-utils.media('576px') { + margin: var(--wp--preset--spacing--50) var(--wp--preset--spacing--80) + var(--wp--preset--spacing--80); + } + + button { + background: var(--jp--color--text) !important; + border-radius: var(--wp--custom--border--radius-medium) !important; + color: var(--jp--color--background) !important; + padding: var(--newspack-ui-spacer-2, var(--wp--custom--spacing--25)) + var(--newspack-ui-spacer-5, var(--wp--preset--spacing--40)) !important; + @include sass-utils.all-transition; + + &:hover { + background: var(--jp--color--text-light) !important; + text-decoration: none !important; + } + + &:focus { + box-shadow: none; + outline: unset !important; + } + + &:focus-visible { + outline: 2px solid var(--jp--color--text) !important; + outline-offset: 1px; + } + + &:disabled { + background: var(--jp--color--text) !important; + cursor: wait; + pointer-events: none; + } + } + } + + &-primary { + max-width: 100%; + + @include sass-utils.media('992px') { + max-width: calc(100% - 333px); + } + } + + &-secondary { + border-color: var(--jp--color--border) !important; + color: inherit; + padding: 0 var(--wp--preset--spacing--30); + width: 333px; + + &.jetpack-instant-search__search-results-secondary--show-as-modal { + border-color: var(--jp--color--border); + inset: var(--wp--custom--spacing--05) var(--wp--preset--spacing--20) auto; + min-width: 1px; + padding: 0 var(--wp--preset--spacing--30); + @include mixins.elevation(3); + } + } + } + + &__search-result { + margin: 0 0 var(--wp--preset--spacing--50); + + &-title { + font-size: var(--newspack-ui-font-size-l, clamp(1.25rem, 0.857rem + 0.803vw, 1.5rem)); + font-weight: 700; + line-height: var(--newspack-ui-line-height-l, 1.5); + } + + &-expanded { + &__title-link { + margin: 0 0 var(--wp--preset--spacing--20); + } + + &__path { + color: var(--jp--color--text-light); + font-size: var(--newspack-ui-font-size-xs, 14px); + line-height: var(--newspack-ui-line-height-xs, 1.4286); + margin: 0 0 var(--wp--preset--spacing--20); + } + + &__content { + color: inherit; + font-size: inherit; + + &:empty { + margin-bottom: calc(-1 * var(--wp--preset--spacing--20)); + } + + &-container { + gap: var(--wp--preset--spacing--20); + + @include sass-utils.media('576px') { + gap: var(--wp--preset--spacing--50); + } + } + } + + &__copy-container { + @include sass-utils.media('576px') { + width: calc(100% - 128px - var(--wp--preset--spacing--50)); + } + } + + &__image { + &-container { + &::before { + padding-top: 75%; + + @include sass-utils.media('576px') { + padding-top: 100%; + } + } + } + + &-link { + margin: 0; + + &:has(div:empty) { + display: none; + } + } + } + + &__footer { + margin-top: var(--wp--preset--spacing--20); + + li { + margin-right: var(--wp--preset--spacing--40); + } + + &-author, + &-date { + color: var(--jp--color--text-light); + font-size: var(--newspack-ui-font-size-xs, 14px); + line-height: var(--newspack-ui-line-height-xs, 1.4286); + } + } + } + + &-minimal-cats-and-tags { + color: var(--jp--color--text-light); + font-size: var(--newspack-ui-font-size-xs, 14px); + line-height: var(--newspack-ui-line-height-xs, 1.4286); + } + } + + &__search-filters { + > div { + margin-top: var(--wp--preset--spacing--30); + } + + &-title { + color: inherit; + font-size: var(--newspack-ui-font-size-m, clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem)); + line-height: var(--newspack-ui-line-height-m, 1.6); + } + } + + &__search-filter { + &-sub-heading { + color: inherit; + } + + &-list { + > div { + align-items: initial; + margin-top: var(--wp--preset--spacing--20); + + input[type='checkbox'] { + position: relative; + @include mixins.checkbox-radio; + @include mixins.checkbox; + + margin-top: 1px; + } + } + } + } + + &__clear-filters { + &-link { + color: var(--jp--color--text-light) !important; + font-size: var(--newspack-ui-font-size-xs, 14px) !important; + height: calc( + var(--newspack-ui-font-size-m, clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem)) * + var(--newspack-ui-line-height-m, 1.6) + ); + line-height: var(--newspack-ui-line-height-xs, 1.4286) !important; + + &:focus { + outline: none !important; + } + + &:focus-visible { + outline: 2px solid var(--jp--color--text) !important; + } + } + } + + &__search-sort-with-select { + margin-top: 0; + } + + &__search-sort-select { + border-color: var(--jp--color--border); + border-radius: var(--newspack-ui-border-radius-m, 6px); + color: inherit; + min-height: var(--wp--preset--spacing--50); + padding: calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) / 2); + transition: outline 125ms ease-in-out; + + &:focus-visible { + outline: 2px solid var(--jp--color--text); + outline-offset: -1px; + } + } + + &__path-breadcrumb, + &__path-breadcrumb-link { + color: var(--jp--color--text-light); + font-size: var(--newspack-ui-font-size-xs, 14px); + line-height: var(--newspack-ui-line-height-xs, 1.4286); + max-width: 100%; + } + + &__sidebar { + padding-top: var(--wp--preset--spacing--30); + } + + &__search-form-controls { + color: inherit; + font-size: var(--newspack-ui-font-size-xs, 14px); + line-height: var(--newspack-ui-line-height-xs, 1.4286); + margin: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) 0; + + @include sass-utils.media('576px') { + margin-left: var(--wp--preset--spacing--80); + margin-right: var(--wp--preset--spacing--80); + } + + @include sass-utils.media('992px') { + height: calc( + var(--newspack-ui-font-size-m, clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem)) * + var(--newspack-ui-line-height-m, 1.6) + ); + right: 333px; + } + + .jetpack-instant-search__search-sort { + color: inherit; + + & &-option { + color: inherit; + } + } + } + + &__search-sort { + &-with-links { + font-size: inherit; + gap: var(--wp--custom--spacing--10); + } + + &-option { + color: var(--jp--color--text-light) !important; + + &.is-selected { + color: var(--jp--color--text) !important; + font-weight: 400 !important; + text-decoration: underline !important; + } + + &:focus { + outline: none !important; + } + + &:focus-visible { + outline: 2px solid var(--jp--color--text) !important; + outline-offset: 2px; + } + } + } + + &__widget-area { + &-container { + margin-bottom: var(--wp--preset--spacing--30); + } + + > div:not(:first-of-type) { + margin-top: var(--wp--preset--spacing--30) !important; + } + } + + &__jetpack-colophon { + border-color: var(--jp--color--border) !important; + + &-text { + color: inherit; + font-size: var(--newspack-ui-font-size-2xs, 12px); + line-height: var(--newspack-ui-line-height-2xs, 1.3333); } } } diff --git a/src/scss/blocks/_blocks.scss b/src/scss/blocks/_blocks.scss index c25cf4ac..593b8208 100644 --- a/src/scss/blocks/_blocks.scss +++ b/src/scss/blocks/_blocks.scss @@ -24,4 +24,5 @@ @import url('./jetpack/_top-posts.scss'); @import url('./newspack/_author-profile.scss'); @import url('./newspack/_homepage-articles.scss'); +@import url('./newspack/_newsletters-subscribe.scss'); @import url('./newspack/_post-carousel.scss'); diff --git a/src/scss/blocks/newspack/_newsletters-subscribe.scss b/src/scss/blocks/newspack/_newsletters-subscribe.scss new file mode 100644 index 00000000..fc879a32 --- /dev/null +++ b/src/scss/blocks/newspack/_newsletters-subscribe.scss @@ -0,0 +1,13 @@ +@use '../../sass-utils'; + +.wp-block-newspack-newsletters-subscribe { + &.is-style-modern { + .submit-button { + @include sass-utils.all-transition; + + &:hover { + opacity: 0.8; + } + } + } +} diff --git a/theme.json b/theme.json index 8e1a2766..5b5128d1 100644 --- a/theme.json +++ b/theme.json @@ -76,7 +76,7 @@ { "name": "Elevation 3", "slug": "elevation-3", - "shadow": "0 3px 30px #00000020" + "shadow": "0 3px 30px #00000021" }, { "name": "Elevation 4", @@ -320,6 +320,7 @@ }, "spacing": { "00": "0", + "05": "0.125rem", "10": "0.25rem", "15": "0.375rem", "25": "0.75rem",