diff --git a/.github/UTILITY_CLASSES.md b/.github/UTILITY_CLASSES.md index 3782d12..003fea9 100644 --- a/.github/UTILITY_CLASSES.md +++ b/.github/UTILITY_CLASSES.md @@ -1,3 +1,24 @@ +# Newspack Grid + +Adding `newspack-grid` or `newspack-grid-small` to a Columns block ensures the columns fit on the grid on large screens. + +`newspack-grid` is designed for use with a wide Columns block. It supports the following layouts: + +- 25% / 50% / 25% +- 33.33% / 33.33% / 33.33% +- 15% / 70% / 15% +- 66.66% / 33.33% or 33.33% / 66.66% + +`newspack-grid-small` is for narrow columns (e.g., at 632px) and currently supports only one layout type: 66.66% / 33.33% or 33.33% / 66.66%. + +For a single sidebar layout, you need to apply both the `newspack-grid` and `newspack-grid--sidebar` classes. The `newspack-grid` class sets up the primary grid structure, while the `newspack-grid--sidebar` class ensures that the single sidebar layout is correctly formatted and displayed. Without these two classes, the layout may not appear as intended. It requires a Columns block with a 2-column layout: 66.66% / 33.33% or 33.33% / 66.66%. + +| CLASS NAME | DESCRIPTION | +| ---------------------- | ------------------------------------------- | +| newspack-grid | The Columns block will use a 12-column grid.| +| newspack-grid--sidebar | For single sidebar layouts only. | +| newspack-grid-small | The Columns block will use a 6-column grid. | + # Responsive Elements `mobile-only` and `desktop-only` can be applied to blocks to display them based on the screen size. diff --git a/CHANGELOG.md b/CHANGELOG.md index 8b6574b..74e9e72 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,57 @@ +# [1.11.0](https://github.com/Automattic/newspack-block-theme/compare/v1.10.0...v1.11.0) (2024-07-15) + + +### Bug Fixes + +* buttons without class; outline border-color ([#212](https://github.com/Automattic/newspack-block-theme/issues/212)) ([3f9342b](https://github.com/Automattic/newspack-block-theme/commit/3f9342b78ed381196b5068015177327105b20559)) +* cover alignfull as last-child should not have margin with footer ([#218](https://github.com/Automattic/newspack-block-theme/issues/218)) ([dcd96a5](https://github.com/Automattic/newspack-block-theme/commit/dcd96a569ccab2d6c9391a739a043724acf0bb19)) +* homepage articles row gap; use custom spacing ([#223](https://github.com/Automattic/newspack-block-theme/issues/223)) ([300920e](https://github.com/Automattic/newspack-block-theme/commit/300920e5a8ecbf259cb06cbd0d08d8cb8a24548e)) +* variables typo ([#229](https://github.com/Automattic/newspack-block-theme/issues/229)) ([9bbd305](https://github.com/Automattic/newspack-block-theme/commit/9bbd3054f70498581cacdd7012bb92898760fb58)) + + +### Features + +* add author-profile styles ([#209](https://github.com/Automattic/newspack-block-theme/issues/209)) ([5d81cc1](https://github.com/Automattic/newspack-block-theme/commit/5d81cc11f23c647c5162890dac0828445cd4271d)) +* add backward compatibility with classic theme ([#176](https://github.com/Automattic/newspack-block-theme/issues/176)) ([01b95f2](https://github.com/Automattic/newspack-block-theme/commit/01b95f2462fd0f9561d697bbdac9d57bbd5cba9c)) +* add generic desktop-only and mobile-only classes ([#222](https://github.com/Automattic/newspack-block-theme/issues/222)) ([dc58d55](https://github.com/Automattic/newspack-block-theme/commit/dc58d5597c849161b1a3e8f119337b84ea6f44b2)) +* add no-title page template; reduce gap with header when no-title ([#219](https://github.com/Automattic/newspack-block-theme/issues/219)) ([3824676](https://github.com/Automattic/newspack-block-theme/commit/3824676d6f225d2693545b1c02012374076d5dc0)) +* **search-overlay:** update search input height ([#224](https://github.com/Automattic/newspack-block-theme/issues/224)) ([2cb32ad](https://github.com/Automattic/newspack-block-theme/commit/2cb32ad0f6ffab3a6567c57d7e8024a7196d78f5)) +* tweak animations ([#231](https://github.com/Automattic/newspack-block-theme/issues/231)) ([d475cc3](https://github.com/Automattic/newspack-block-theme/commit/d475cc3c1dfc148b578fa2b113091e63e9431ecd)) +* update desktop-header spacings ([#208](https://github.com/Automattic/newspack-block-theme/issues/208)) ([a7ba9b0](https://github.com/Automattic/newspack-block-theme/commit/a7ba9b0f355ab1c60396572517e8be0554255ac3)) +* update header mobile and desktop spacing; introduce is-position ([#221](https://github.com/Automattic/newspack-block-theme/issues/221)) ([a92f8fa](https://github.com/Automattic/newspack-block-theme/commit/a92f8faf303705db0965978a0e96d2969bdb6d7c)) +* update overlay ([#220](https://github.com/Automattic/newspack-block-theme/issues/220)) ([457347b](https://github.com/Automattic/newspack-block-theme/commit/457347b998dca352c8ca07346f499cfa7bf5cf50)) +* update search overlay ([#215](https://github.com/Automattic/newspack-block-theme/issues/215)) ([27699f8](https://github.com/Automattic/newspack-block-theme/commit/27699f8e133c21bbc99297d68c5507d1016f618b)) +* update sticky position to support mobile or desktop only ([#225](https://github.com/Automattic/newspack-block-theme/issues/225)) ([df1158e](https://github.com/Automattic/newspack-block-theme/commit/df1158e5be0d6d5cc9156af3572ca1937f04ab72)) +* update various widths and spacings to use variables ([#227](https://github.com/Automattic/newspack-block-theme/issues/227)) ([00dcc02](https://github.com/Automattic/newspack-block-theme/commit/00dcc02375eb4a7c4688b5fcf0ce6638aa8c3a8d)) +* use patterns instead of template parts for author-bio ([#210](https://github.com/Automattic/newspack-block-theme/issues/210)) ([147c315](https://github.com/Automattic/newspack-block-theme/commit/147c3156b613ec57a307430294de704870c0aab0)) + +# [1.11.0-alpha.1](https://github.com/Automattic/newspack-block-theme/compare/v1.10.0...v1.11.0-alpha.1) (2024-07-05) + + +### Bug Fixes + +* buttons without class; outline border-color ([#212](https://github.com/Automattic/newspack-block-theme/issues/212)) ([3f9342b](https://github.com/Automattic/newspack-block-theme/commit/3f9342b78ed381196b5068015177327105b20559)) +* cover alignfull as last-child should not have margin with footer ([#218](https://github.com/Automattic/newspack-block-theme/issues/218)) ([dcd96a5](https://github.com/Automattic/newspack-block-theme/commit/dcd96a569ccab2d6c9391a739a043724acf0bb19)) +* homepage articles row gap; use custom spacing ([#223](https://github.com/Automattic/newspack-block-theme/issues/223)) ([300920e](https://github.com/Automattic/newspack-block-theme/commit/300920e5a8ecbf259cb06cbd0d08d8cb8a24548e)) +* variables typo ([#229](https://github.com/Automattic/newspack-block-theme/issues/229)) ([9bbd305](https://github.com/Automattic/newspack-block-theme/commit/9bbd3054f70498581cacdd7012bb92898760fb58)) + + +### Features + +* add author-profile styles ([#209](https://github.com/Automattic/newspack-block-theme/issues/209)) ([5d81cc1](https://github.com/Automattic/newspack-block-theme/commit/5d81cc11f23c647c5162890dac0828445cd4271d)) +* add backward compatibility with classic theme ([#176](https://github.com/Automattic/newspack-block-theme/issues/176)) ([01b95f2](https://github.com/Automattic/newspack-block-theme/commit/01b95f2462fd0f9561d697bbdac9d57bbd5cba9c)) +* add generic desktop-only and mobile-only classes ([#222](https://github.com/Automattic/newspack-block-theme/issues/222)) ([dc58d55](https://github.com/Automattic/newspack-block-theme/commit/dc58d5597c849161b1a3e8f119337b84ea6f44b2)) +* add no-title page template; reduce gap with header when no-title ([#219](https://github.com/Automattic/newspack-block-theme/issues/219)) ([3824676](https://github.com/Automattic/newspack-block-theme/commit/3824676d6f225d2693545b1c02012374076d5dc0)) +* **search-overlay:** update search input height ([#224](https://github.com/Automattic/newspack-block-theme/issues/224)) ([2cb32ad](https://github.com/Automattic/newspack-block-theme/commit/2cb32ad0f6ffab3a6567c57d7e8024a7196d78f5)) +* tweak animations ([#231](https://github.com/Automattic/newspack-block-theme/issues/231)) ([d475cc3](https://github.com/Automattic/newspack-block-theme/commit/d475cc3c1dfc148b578fa2b113091e63e9431ecd)) +* update desktop-header spacings ([#208](https://github.com/Automattic/newspack-block-theme/issues/208)) ([a7ba9b0](https://github.com/Automattic/newspack-block-theme/commit/a7ba9b0f355ab1c60396572517e8be0554255ac3)) +* update header mobile and desktop spacing; introduce is-position ([#221](https://github.com/Automattic/newspack-block-theme/issues/221)) ([a92f8fa](https://github.com/Automattic/newspack-block-theme/commit/a92f8faf303705db0965978a0e96d2969bdb6d7c)) +* update overlay ([#220](https://github.com/Automattic/newspack-block-theme/issues/220)) ([457347b](https://github.com/Automattic/newspack-block-theme/commit/457347b998dca352c8ca07346f499cfa7bf5cf50)) +* update search overlay ([#215](https://github.com/Automattic/newspack-block-theme/issues/215)) ([27699f8](https://github.com/Automattic/newspack-block-theme/commit/27699f8e133c21bbc99297d68c5507d1016f618b)) +* update sticky position to support mobile or desktop only ([#225](https://github.com/Automattic/newspack-block-theme/issues/225)) ([df1158e](https://github.com/Automattic/newspack-block-theme/commit/df1158e5be0d6d5cc9156af3572ca1937f04ab72)) +* update various widths and spacings to use variables ([#227](https://github.com/Automattic/newspack-block-theme/issues/227)) ([00dcc02](https://github.com/Automattic/newspack-block-theme/commit/00dcc02375eb4a7c4688b5fcf0ce6638aa8c3a8d)) +* use patterns instead of template parts for author-bio ([#210](https://github.com/Automattic/newspack-block-theme/issues/210)) ([147c315](https://github.com/Automattic/newspack-block-theme/commit/147c3156b613ec57a307430294de704870c0aab0)) + # [1.10.0](https://github.com/Automattic/newspack-block-theme/compare/v1.9.0...v1.10.0) (2024-07-01) diff --git a/functions.php b/functions.php index 1074ba6..efbcab3 100644 --- a/functions.php +++ b/functions.php @@ -1,7 +1,7 @@
- -
- -
- - - -

- + +
+ + + +
+ +
+ +

+ - -
- - - -
- - - -
- -
- -
- -
- + + + +
+ + + +
+ + + +
+ +
+ +
+ +
+ + + +
+ +
+ - -
-
- - +
- +
- +
- +
diff --git a/patterns/footer-style-5.php b/patterns/footer-style-5.php new file mode 100644 index 0000000..50f0543 --- /dev/null +++ b/patterns/footer-style-5.php @@ -0,0 +1,107 @@ + + + + diff --git a/patterns/post-header-style-1.php b/patterns/post-header-style-1-default.php similarity index 93% rename from patterns/post-header-style-1.php rename to patterns/post-header-style-1-default.php index f9fd832..ec19725 100644 --- a/patterns/post-header-style-1.php +++ b/patterns/post-header-style-1-default.php @@ -10,7 +10,7 @@ ?> - +
diff --git a/patterns/post-header-style-1-wide.php b/patterns/post-header-style-1-wide.php new file mode 100644 index 0000000..623fd58 --- /dev/null +++ b/patterns/post-header-style-1-wide.php @@ -0,0 +1,32 @@ + + + +
+ + +
+ + + +
+ + + + + +
+ +
+ + +
+ diff --git a/patterns/post-header-style-2.php b/patterns/post-header-style-2-default.php similarity index 93% rename from patterns/post-header-style-2.php rename to patterns/post-header-style-2-default.php index bfb7696..3fc7a83 100644 --- a/patterns/post-header-style-2.php +++ b/patterns/post-header-style-2-default.php @@ -10,7 +10,7 @@ ?> - +
diff --git a/patterns/post-header-style-2-wide.php b/patterns/post-header-style-2-wide.php new file mode 100644 index 0000000..647180b --- /dev/null +++ b/patterns/post-header-style-2-wide.php @@ -0,0 +1,28 @@ + + + +
+ + +
+ + + +
+ + + + + + +
+ diff --git a/src/js/front-end/menus/utils.js b/src/js/front-end/menus/utils.js index 366702b..b250ef6 100644 --- a/src/js/front-end/menus/utils.js +++ b/src/js/front-end/menus/utils.js @@ -40,14 +40,19 @@ export const anyMenuIsOpen = () => { * @description Closes all open menus. */ export const closeAllMenus = () => { - const openClassNames = document.body.classList; + // Find all elements with class names containing MENU_OPEN_CLASS_NAME. + const openMenuElements = document.querySelectorAll( `[class*=${ MENU_OPEN_CLASS_NAME }]` ); - for ( let i = 0; i < openClassNames.length; i++ ) { - if ( contains( openClassNames[ i ], MENU_OPEN_CLASS_NAME ) ) { - document.body.classList.remove( openClassNames[ i ] ); - } - } + // Remove all the classes that start with MENU_OPEN_CLASS_NAME. + openMenuElements.forEach( element => { + const removeClassName = Array.from( element.classList ).filter( className => + className.startsWith( MENU_OPEN_CLASS_NAME ) + ); + + element.classList.remove( ...removeClassName ); + } ); + // Remove overlay. removeOverlay(); // Remove focus from any elements inside open menus. Note that the disabled ESLint rule applies only to React elements: https://github.com/WordPress/gutenberg/pull/26810. diff --git a/src/scss/_base.scss b/src/scss/_base.scss index 97c3262..84f6e89 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -135,7 +135,8 @@ ol { // Content .post-image { - &:empty { + &:empty, + &:not(:has(.wp-block-post-featured-image)) { display: none; } } diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index b004f16..52ce3bb 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -128,6 +128,7 @@ @mixin button-icon { background: transparent; + border-radius: var(--wp--custom--border--radius-small); display: grid; height: var(--wp--custom--spacing--55); margin: 0; diff --git a/src/scss/_theme-description.scss b/src/scss/_theme-description.scss index 4a47c8a..ce5f27c 100644 --- a/src/scss/_theme-description.scss +++ b/src/scss/_theme-description.scss @@ -7,7 +7,7 @@ Description: A forward-looking news theme designed and developed to be highly cu Requires at least: 6.5 Tested up to: 6.6 Requires PHP: 8.0 -Version: 1.10.0 +Version: 1.11.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Template: diff --git a/src/scss/blocks/_button.scss b/src/scss/blocks/_button.scss index a771d7d..0240b1f 100644 --- a/src/scss/blocks/_button.scss +++ b/src/scss/blocks/_button.scss @@ -81,14 +81,14 @@ align-items: center; display: inline-flex; min-height: var(--wp--custom--spacing--65); - padding: 0.5rem 1rem; + padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); } } .is-style-outline, &.is-style-outline { .wp-block-button__link { - padding: calc(0.5rem - 1px) calc(1rem - 1px) !important; + padding: calc(var(--wp--preset--spacing--20) - 1px) calc(var(--wp--preset--spacing--30) - 1px) !important; } } } @@ -97,16 +97,17 @@ .wp-block-button { &__link { align-items: center; + border-radius: var(--wp--custom--border--radius-small); display: inline-flex; - min-height: 2rem; - padding: 0.25rem 0.5rem; + min-height: var(--wp--custom--spacing--55); + padding: var(--wp--custom--spacing--15) var(--wp--custom--spacing--25); } } .is-style-outline, &.is-style-outline { .wp-block-button__link { - padding: calc(0.25rem - 1px) calc(0.5rem - 1px) !important; + padding: calc(var(--wp--custom--spacing--15) - 1px) calc(var(--wp--custom--spacing--25) - 1px) !important; } } } diff --git a/src/scss/blocks/_separator.scss b/src/scss/blocks/_separator.scss index 68e8968..692d9e9 100644 --- a/src/scss/blocks/_separator.scss +++ b/src/scss/blocks/_separator.scss @@ -22,6 +22,6 @@ &.is-style-thick { background: currentcolor; border-bottom-width: 0; - padding: var(--wp--preset--spacing--20); + padding: var(--wp--preset--spacing--20) 0; } } diff --git a/templates/single.html b/templates/single.html index 6c9fec2..e76b9fd 100644 --- a/templates/single.html +++ b/templates/single.html @@ -3,11 +3,7 @@
- -
- -
- +
diff --git a/templates/single/50-50-image.html b/templates/single/50-50-image.html new file mode 100644 index 0000000..6e97f5a --- /dev/null +++ b/templates/single/50-50-image.html @@ -0,0 +1,33 @@ + + + +
+ + +
+ +
+ +
+ + + +
+ +
+ +
+ + + +
+ +
+ + + + +
+ + + diff --git a/templates/single/full-width-image.html b/templates/single/full-width-image.html index ab50809..91fa3f9 100644 --- a/templates/single/full-width-image.html +++ b/templates/single/full-width-image.html @@ -3,11 +3,7 @@
- -
- -
- +
diff --git a/templates/single/large-image.html b/templates/single/large-image.html index 1b00f06..f9639c7 100644 --- a/templates/single/large-image.html +++ b/templates/single/large-image.html @@ -3,11 +3,7 @@
- -
- -
- +
diff --git a/templates/single/sidebar-layout.html b/templates/single/sidebar-layout.html index 4ce4e5f..b866d9b 100644 --- a/templates/single/sidebar-layout.html +++ b/templates/single/sidebar-layout.html @@ -3,11 +3,7 @@
- -
- -
- +
diff --git a/templates/single/wide-image.html b/templates/single/wide-image.html index 39d4d12..7b8c132 100644 --- a/templates/single/wide-image.html +++ b/templates/single/wide-image.html @@ -3,11 +3,7 @@
- -
- -
- +
diff --git a/theme.json b/theme.json index 3ef9bad..916568a 100644 --- a/theme.json +++ b/theme.json @@ -1116,6 +1116,13 @@ ], "title": "Single - Full Width Image" }, + { + "name": "single/50-50-image", + "postTypes": [ + "post" + ], + "title": "Single - 50/50 Image/Header" + }, { "name": "single/sidebar-layout", "postTypes": [