From 81c5ec6962bfb0426547d956aa1c3d73fd80f529 Mon Sep 17 00:00:00 2001
From: matticbot <semantic-release-bot@martynus.net>
Date: Fri, 5 Jul 2024 19:05:56 +0000
Subject: [PATCH 1/9] chore(release): 1.11.0-alpha.1 [skip ci]

# [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))
---
 CHANGELOG.md                     | 27 +++++++++++++++++++++++++++
 functions.php                    |  4 ++--
 package-lock.json                |  4 ++--
 package.json                     |  2 +-
 src/scss/_theme-description.scss |  2 +-
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b6574bd..31479dc0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,30 @@
+# [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 1074ba68..f6d1453f 100644
--- a/functions.php
+++ b/functions.php
@@ -1,7 +1,7 @@
 <?php
 /**
  * Newspack Block Theme functions and definitions
- * Version: 1.10.0
+ * Version: 1.11.0-alpha.1
  *
  * @link https://developer.wordpress.org/themes/basics/theme-functions/
  *
@@ -16,7 +16,7 @@
 	define( 'NEWSPACK_BLOCK_THEME_FILE', __FILE__ );
 	define( 'NEWSPACK_BLOCK_THEME_FILE_PATH', plugin_dir_path( NEWSPACK_BLOCK_THEME_FILE ) );
 	define( 'NEWSPACK_BLOCK_THEME_URL', plugin_dir_url( NEWSPACK_BLOCK_THEME_FILE ) );
-	define( 'NEWSPACK_BLOCK_THEME_VERSION', '1.10.0' );
+	define( 'NEWSPACK_BLOCK_THEME_VERSION', '1.11.0-alpha.1' );
 }
 
 
diff --git a/package-lock.json b/package-lock.json
index 99373a1f..512a4f28 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "newspack-block-theme",
-  "version": "1.10.0",
+  "version": "1.11.0-alpha.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "newspack-block-theme",
-      "version": "1.10.0",
+      "version": "1.11.0-alpha.1",
       "hasInstallScript": true,
       "license": "GPL-3.0",
       "devDependencies": {
diff --git a/package.json b/package.json
index ab2245a7..835deb09 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "newspack-block-theme",
-  "version": "1.10.0",
+  "version": "1.11.0-alpha.1",
   "description": "A forward-looking news theme designed and developed to be highly customizable with the WordPress block editor. Brought to you by Newspack: https://newspack.com",
   "repository": {
     "type": "git",
diff --git a/src/scss/_theme-description.scss b/src/scss/_theme-description.scss
index 4a47c8ae..df469cb7 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-alpha.1
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Template:

From d9306e8c70f7ec4facae96db797102f054cd86b2 Mon Sep 17 00:00:00 2001
From: Thomas Guillot <thomasguillot@users.noreply.github.com>
Date: Mon, 15 Jul 2024 15:39:15 +0100
Subject: [PATCH 2/9] chore: document newspack-grid (#264)

---
 .github/UTILITY_CLASSES.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/.github/UTILITY_CLASSES.md b/.github/UTILITY_CLASSES.md
index 875cbbb0..c826eeaf 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, particularly on larger screens.
+
+| CLASS NAME             | DESCRIPTION                                                                                       |
+| ---------------------- | ------------------------------------------------------------------------------------------------- |
+| newspack-grid          | The Columns block will use a 12-column grid.                                                      |
+| newspack-grid--sidebar | For single sidebar layouts only. Requires a Columns block with 2 columns: 66.66% and 33.33% wide. |
+| 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.

From 1e81f90c4346d75ac57ebd37de346f4fb08d3b76 Mon Sep 17 00:00:00 2001
From: Thomas Guillot <thomasguillot@users.noreply.github.com>
Date: Mon, 15 Jul 2024 15:42:17 +0100
Subject: [PATCH 3/9] chore: document newspack-grid (#265)

---
 .github/UTILITY_CLASSES.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/.github/UTILITY_CLASSES.md b/.github/UTILITY_CLASSES.md
index c826eeaf..ffd9c456 100644
--- a/.github/UTILITY_CLASSES.md
+++ b/.github/UTILITY_CLASSES.md
@@ -11,13 +11,13 @@ Adding `newspack-grid` or `newspack-grid-small` to a Columns block ensures the c
 
 `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, particularly on larger screens.
+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. Requires a Columns block with 2 columns: 66.66% and 33.33% wide. |
-| newspack-grid-small    | The Columns block will use a 6-column grid.                                                       |
+| 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
 

From 2219cf4ddd7f502cf9970c79f0ccfbf2e9c9c686 Mon Sep 17 00:00:00 2001
From: matticbot <semantic-release-bot@martynus.net>
Date: Mon, 15 Jul 2024 17:53:02 +0000
Subject: [PATCH 4/9] chore(release): 1.11.0 [skip ci]

# [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))
---
 CHANGELOG.md                     | 27 +++++++++++++++++++++++++++
 functions.php                    |  4 ++--
 package-lock.json                |  4 ++--
 package.json                     |  2 +-
 src/scss/_theme-description.scss |  2 +-
 5 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31479dc0..74e9e72a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,30 @@
+# [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)
 
 
diff --git a/functions.php b/functions.php
index f6d1453f..efbcab34 100644
--- a/functions.php
+++ b/functions.php
@@ -1,7 +1,7 @@
 <?php
 /**
  * Newspack Block Theme functions and definitions
- * Version: 1.11.0-alpha.1
+ * Version: 1.11.0
  *
  * @link https://developer.wordpress.org/themes/basics/theme-functions/
  *
@@ -16,7 +16,7 @@
 	define( 'NEWSPACK_BLOCK_THEME_FILE', __FILE__ );
 	define( 'NEWSPACK_BLOCK_THEME_FILE_PATH', plugin_dir_path( NEWSPACK_BLOCK_THEME_FILE ) );
 	define( 'NEWSPACK_BLOCK_THEME_URL', plugin_dir_url( NEWSPACK_BLOCK_THEME_FILE ) );
-	define( 'NEWSPACK_BLOCK_THEME_VERSION', '1.11.0-alpha.1' );
+	define( 'NEWSPACK_BLOCK_THEME_VERSION', '1.11.0' );
 }
 
 
diff --git a/package-lock.json b/package-lock.json
index 512a4f28..ee6285bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "newspack-block-theme",
-  "version": "1.11.0-alpha.1",
+  "version": "1.11.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "newspack-block-theme",
-      "version": "1.11.0-alpha.1",
+      "version": "1.11.0",
       "hasInstallScript": true,
       "license": "GPL-3.0",
       "devDependencies": {
diff --git a/package.json b/package.json
index 835deb09..97d21e3a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "newspack-block-theme",
-  "version": "1.11.0-alpha.1",
+  "version": "1.11.0",
   "description": "A forward-looking news theme designed and developed to be highly customizable with the WordPress block editor. Brought to you by Newspack: https://newspack.com",
   "repository": {
     "type": "git",
diff --git a/src/scss/_theme-description.scss b/src/scss/_theme-description.scss
index df469cb7..ce5f27c7 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.11.0-alpha.1
+Version: 1.11.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Template:

From 1bd4d764ea32d9f15ec79aa5e68b078661618b41 Mon Sep 17 00:00:00 2001
From: Thomas Guillot <thomasguillot@users.noreply.github.com>
Date: Tue, 16 Jul 2024 11:18:57 +0100
Subject: [PATCH 5/9] feat: update post header patterns; add wide option (#267)

---
 ...-1.php => post-header-style-1-default.php} |  2 +-
 patterns/post-header-style-1-wide.php         | 32 +++++++++++++++++++
 ...-2.php => post-header-style-2-default.php} |  2 +-
 patterns/post-header-style-2-wide.php         | 28 ++++++++++++++++
 src/scss/blocks/_separator.scss               |  2 +-
 templates/single.html                         |  6 +---
 templates/single/full-width-image.html        |  6 +---
 templates/single/large-image.html             |  6 +---
 templates/single/sidebar-layout.html          |  6 +---
 templates/single/wide-image.html              |  6 +---
 10 files changed, 68 insertions(+), 28 deletions(-)
 rename patterns/{post-header-style-1.php => post-header-style-1-default.php} (93%)
 create mode 100644 patterns/post-header-style-1-wide.php
 rename patterns/{post-header-style-2.php => post-header-style-2-default.php} (93%)
 create mode 100644 patterns/post-header-style-2-wide.php

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 f9fd8326..ec19725d 100644
--- a/patterns/post-header-style-1.php
+++ b/patterns/post-header-style-1-default.php
@@ -10,7 +10,7 @@
 
 ?>
 
-<!-- wp:group {"metadata":{"name":"<?php esc_html_e( 'Post Header', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
+<!-- wp:group {"metadata":{"name":"<?php esc_html_e( 'Post Header', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group">
 
 	<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical"}} -->
diff --git a/patterns/post-header-style-1-wide.php b/patterns/post-header-style-1-wide.php
new file mode 100644
index 00000000..623fd58a
--- /dev/null
+++ b/patterns/post-header-style-1-wide.php
@@ -0,0 +1,32 @@
+<?php
+/**
+ * Title: Post Header - Style 1 (Wide)
+ * Slug: newspack-block-theme/post-header-style-1-wide
+ * Categories: newspack-block-theme-post-header
+ *
+ * @package Newspack_Block_Theme
+ */
+
+?>
+
+<!-- wp:group {"metadata":{"name":"<?php esc_html_e( 'Post Header', 'newspack-block-theme' ); ?>"},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
+<div class="wp-block-group alignwide">
+
+	<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+	<div class="wp-block-group alignwide">
+		<!-- wp:post-terms {"term":"category","style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"fontSize":"medium"} /-->
+
+		<!-- wp:post-title {"level":1,"fontSize":"xxxx-large"} /-->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:post-excerpt {"fontSize":"large"} /-->
+
+	<!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
+	<div class="wp-block-group alignwide">
+		<!-- wp:pattern {"slug":"newspack-block-theme/post-meta-multiple-lines-avatar"} /-->
+	</div>
+	<!-- /wp:group -->
+
+</div>
+<!-- /wp:group -->
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 bfb76967..3fc7a837 100644
--- a/patterns/post-header-style-2.php
+++ b/patterns/post-header-style-2-default.php
@@ -10,7 +10,7 @@
 
 ?>
 
-<!-- wp:group {"metadata":{"name":"<?php esc_html_e( 'Post Header', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
+<!-- wp:group {"metadata":{"name":"<?php esc_html_e( 'Post Header', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group">
 
 	<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
diff --git a/patterns/post-header-style-2-wide.php b/patterns/post-header-style-2-wide.php
new file mode 100644
index 00000000..647180b7
--- /dev/null
+++ b/patterns/post-header-style-2-wide.php
@@ -0,0 +1,28 @@
+<?php
+/**
+ * Title: Post Header - Style 2 (Wide)
+ * Slug: newspack-block-theme/post-header-style-2-wide
+ * Categories: newspack-block-theme-post-header
+ *
+ * @package Newspack_Block_Theme
+ */
+
+?>
+
+<!-- wp:group {"metadata":{"name":"<?php esc_html_e( 'Post Header', 'newspack-block-theme' ); ?>"},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group alignwide">
+
+	<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
+	<div class="wp-block-group alignwide">
+		<!-- wp:post-terms {"term":"category","textAlign":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"fontSize":"medium"} /-->
+
+		<!-- wp:post-title {"textAlign":"center","level":1,"fontSize":"xxxx-large"} /-->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:post-excerpt {"textAlign":"center","fontSize":"large"} /-->
+
+	<!-- wp:pattern {"slug":"newspack-block-theme/post-meta-single-line-avatar"} /-->
+
+</div>
+<!-- /wp:group -->
diff --git a/src/scss/blocks/_separator.scss b/src/scss/blocks/_separator.scss
index 68e8968c..692d9e9f 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 6c9fec29..e76b9fd2 100644
--- a/templates/single.html
+++ b/templates/single.html
@@ -3,11 +3,7 @@
 <!-- wp:group {"tagName":"main","metadata":{"name":"Post"},"layout":{"type":"constrained"}} -->
 <main class="wp-block-group">
 
-	<!-- wp:group {"metadata":{"name":"Post Header"},"layout":{"type":"default"}} -->
-	<div class="wp-block-group">
-		<!-- wp:pattern {"slug":"newspack-block-theme/post-header-style-1"} /-->
-	</div>
-	<!-- /wp:group -->
+	<!-- wp:pattern {"slug":"newspack-block-theme/post-header-style-1"} /-->
 
 	<!-- wp:group {"metadata":{"name":"Post Image"},"align":"full","className":"post-image","style":{"spacing":{"margin":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group alignfull post-image" style="margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80)">
diff --git a/templates/single/full-width-image.html b/templates/single/full-width-image.html
index ab508092..91fa3f9e 100644
--- a/templates/single/full-width-image.html
+++ b/templates/single/full-width-image.html
@@ -3,11 +3,7 @@
 <!-- wp:group {"tagName":"main","metadata":{"name":"Post"},"layout":{"type":"constrained"}} -->
 <main class="wp-block-group">
 
-	<!-- wp:group {"metadata":{"name":"Post Header"},"layout":{"type":"default"}} -->
-	<div class="wp-block-group">
-		<!-- wp:pattern {"slug":"newspack-block-theme/post-header-style-1"} /-->
-	</div>
-	<!-- /wp:group -->
+	<!-- wp:pattern {"slug":"newspack-block-theme/post-header-style-1"} /-->
 
 	<!-- wp:group {"metadata":{"name":"Post Image"},"align":"full","className":"post-image","style":{"spacing":{"margin":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group alignfull post-image" style="margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80)">
diff --git a/templates/single/large-image.html b/templates/single/large-image.html
index 1b00f06a..f9639c71 100644
--- a/templates/single/large-image.html
+++ b/templates/single/large-image.html
@@ -3,11 +3,7 @@
 <!-- wp:group {"tagName":"main","metadata":{"name":"Post"},"layout":{"type":"constrained"}} -->
 <main class="wp-block-group">
 
-	<!-- wp:group {"metadata":{"name":"Post Header"},"layout":{"type":"default"}} -->
-	<div class="wp-block-group">
-		<!-- wp:pattern {"slug":"newspack-block-theme/post-header-style-1"} /-->
-	</div>
-	<!-- /wp:group -->
+	<!-- wp:pattern {"slug":"newspack-block-theme/post-header-style-1"} /-->
 
 	<!-- wp:group {"metadata":{"name":"Post Image"},"align":"full","className":"post-image","style":{"spacing":{"margin":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"layout":{"type":"constrained","wideSize":"964px"}} -->
 	<div class="wp-block-group alignfull post-image" style="margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80)">
diff --git a/templates/single/sidebar-layout.html b/templates/single/sidebar-layout.html
index 4ce4e5fc..b866d9b2 100644
--- a/templates/single/sidebar-layout.html
+++ b/templates/single/sidebar-layout.html
@@ -3,11 +3,7 @@
 <!-- wp:group {"tagName":"main","metadata":{"name":"Post"},"layout":{"type":"constrained"}} -->
 <main class="wp-block-group">
 
-	<!-- wp:group {"metadata":{"name":"Post Header"},"align":"wide","layout":{"type":"default"}} -->
-	<div class="wp-block-group alignwide">
-		<!-- wp:pattern {"slug":"newspack-block-theme/post-header-style-2"} /-->
-	</div>
-	<!-- /wp:group -->
+	<!-- wp:pattern {"slug":"newspack-block-theme/post-header-style-2-wide"} /-->
 
 	<!-- wp:group {"metadata":{"name":"Post Image"},"align":"full","className":"post-image","style":{"spacing":{"margin":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group alignfull post-image" style="margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80)">
diff --git a/templates/single/wide-image.html b/templates/single/wide-image.html
index 39d4d125..7b8c1320 100644
--- a/templates/single/wide-image.html
+++ b/templates/single/wide-image.html
@@ -3,11 +3,7 @@
 <!-- wp:group {"tagName":"main","metadata":{"name":"Post"},"layout":{"type":"constrained"}} -->
 <main class="wp-block-group">
 
-	<!-- wp:group {"metadata":{"name":"Post Header"},"layout":{"type":"default"}} -->
-	<div class="wp-block-group">
-		<!-- wp:pattern {"slug":"newspack-block-theme/post-header-style-1"} /-->
-	</div>
-	<!-- /wp:group -->
+	<!-- wp:pattern {"slug":"newspack-block-theme/post-header-style-1"} /-->
 
 	<!-- wp:group {"metadata":{"name":"Post Image"},"align":"full","className":"post-image","style":{"spacing":{"margin":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"layout":{"type":"constrained"}} -->
 	<div class="wp-block-group alignfull post-image" style="margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80)">

From a010920985ff9cca02e5507770050d6a4a618df5 Mon Sep 17 00:00:00 2001
From: Thomas Guillot <thomasguillot@users.noreply.github.com>
Date: Tue, 16 Jul 2024 11:56:46 +0100
Subject: [PATCH 6/9] feat: add 50/50 Image/Header single post template (#268)

---
 src/scss/_base.scss               |  3 ++-
 templates/single/50-50-image.html | 33 +++++++++++++++++++++++++++++++
 theme.json                        |  7 +++++++
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 templates/single/50-50-image.html

diff --git a/src/scss/_base.scss b/src/scss/_base.scss
index 97c3262d..84f6e897 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/templates/single/50-50-image.html b/templates/single/50-50-image.html
new file mode 100644
index 00000000..6e97f5a7
--- /dev/null
+++ b/templates/single/50-50-image.html
@@ -0,0 +1,33 @@
+<!-- wp:template-part {"slug":"header","theme":"newspack-block-theme","tagName":"header"} /-->
+
+<!-- wp:group {"tagName":"main","metadata":{"name":"Post"},"layout":{"type":"constrained"}} -->
+<main class="wp-block-group">
+
+	<!-- wp:columns {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|80"}}}} -->
+	<div class="wp-block-columns alignwide" style="margin-bottom:var(--wp--preset--spacing--80)">
+		<!-- wp:column {"metadata":{"name":"Post Image"},"className":"post-image"} -->
+		<div class="wp-block-column post-image">
+			<!-- wp:post-featured-image /-->
+		</div>
+		<!-- /wp:column -->
+
+		<!-- wp:column -->
+		<div class="wp-block-column">
+			<!-- wp:pattern {"slug":"newspack-block-theme/post-header-style-1"} /-->
+		</div>
+		<!-- /wp:column -->
+	</div>
+	<!-- /wp:columns -->
+
+	<!-- wp:group {"lock":{"move":false,"remove":true},"metadata":{"name":"Post Content"},"align":"full","style":{"spacing":{"margin":{"top":"var:preset|spacing|80"}}},"layout":{"type":"constrained"}} -->
+	<div class="wp-block-group alignfull" style="margin-top:var(--wp--preset--spacing--80)">
+		<!-- wp:post-content {"lock":{"move":false,"remove":true},"align":"full","layout":{"type":"constrained"}} /-->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:template-part {"slug":"post-footer","theme":"newspack-block-theme","className":"post-footer"} /-->
+
+</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","theme":"newspack-block-theme","tagName":"footer"} /-->
diff --git a/theme.json b/theme.json
index b19a310a..42d90cc0 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": [

From 9e826e96f4acf11c07963003debee8e324f8f721 Mon Sep 17 00:00:00 2001
From: Thomas Guillot <thomasguillot@users.noreply.github.com>
Date: Tue, 16 Jul 2024 12:00:47 +0100
Subject: [PATCH 7/9] feat(footer): add new pattern and adjust style 4 (#269)

---
 patterns/footer-style-4.php |  84 ++++++++++++++--------------
 patterns/footer-style-5.php | 107 ++++++++++++++++++++++++++++++++++++
 2 files changed, 151 insertions(+), 40 deletions(-)
 create mode 100644 patterns/footer-style-5.php

diff --git a/patterns/footer-style-4.php b/patterns/footer-style-4.php
index a32ae1cc..a3368068 100644
--- a/patterns/footer-style-4.php
+++ b/patterns/footer-style-4.php
@@ -15,54 +15,58 @@
 	<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"default"}} -->
 	<div class="wp-block-group alignwide">
 
-		<!-- wp:columns {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Content', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}}} -->
-		<div class="wp-block-columns" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)">
-			<!-- wp:column -->
-			<div class="wp-block-column">
-				<!-- wp:site-title {"level":0,"fontSize":"large"} /-->
-
-				<!-- wp:paragraph {"fontSize":"small"} -->
-				<p class="has-small-font-size"><?php esc_html_e( 'Our online newspaper delivers the latest news and insightful analysis. Our experienced journalists ensure accurate and impartial reporting. Stay informed with our engaging and informative articles.', 'newspack-block-theme' ); ?></p>
-				<!-- /wp:paragraph -->
+		<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Content', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"layout":{"type":"default"}} -->
+		<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)">
+			<!-- wp:site-title {"level":0,"fontSize":"large"} /-->
+
+			<!-- wp:columns {"lock":{"move":true,"remove":true}} -->
+			<div class="wp-block-columns">
+				<!-- wp:column -->
+				<div class="wp-block-column">
+					<!-- wp:paragraph {"fontSize":"small"} -->
+					<p class="has-small-font-size"><?php esc_html_e( 'Our online newspaper delivers the latest news and insightful analysis. Our experienced journalists ensure accurate and impartial reporting. Stay informed with our engaging and informative articles.', 'newspack-block-theme' ); ?></p>
+					<!-- /wp:paragraph -->
 
-				<!-- wp:social-links {"iconColor":"base","iconColorValue":"#ffffff","iconBackgroundColor":"contrast-2","className":"has-icon-background-color"} -->
-				<ul class="wp-block-social-links has-icon-color has-icon-background-color">
-					<!-- wp:social-link {"url":"#","service":"facebook"} /-->
+					<!-- wp:social-links {"iconColor":"base","iconColorValue":"#ffffff","iconBackgroundColor":"contrast-2","className":"has-icon-background-color"} -->
+					<ul class="wp-block-social-links has-icon-color has-icon-background-color">
+						<!-- wp:social-link {"url":"#","service":"facebook"} /-->
 
-					<!-- wp:social-link {"url":"#","service":"instagram"} /-->
+						<!-- wp:social-link {"url":"#","service":"instagram"} /-->
 
-					<!-- wp:social-link {"url":"#","service":"x"} /-->
-				</ul>
-				<!-- /wp:social-links -->
-			</div>
-			<!-- /wp:column -->
-
-			<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
-			<div class="wp-block-column"></div>
-			<!-- /wp:column -->
-
-			<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
-			<div class="wp-block-column">
-				<!-- wp:columns -->
-				<div class="wp-block-columns">
-					<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
-					<div class="wp-block-column">
-						<!-- wp:navigation {"className":"is-style-default","style":{"typography":{"fontStyle":"normal","fontWeight":"600"},"spacing":{"blockGap":"var:preset|spacing|30"}},"fontSize":"x-small","layout":{"type":"flex","flexWrap":"nowrap","orientation":"vertical"}} /-->
-					</div>
-					<!-- /wp:column -->
+						<!-- wp:social-link {"url":"#","service":"x"} /-->
+					</ul>
+					<!-- /wp:social-links -->
+				</div>
+				<!-- /wp:column -->
+
+				<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
+				<div class="wp-block-column"></div>
+				<!-- /wp:column -->
+
+				<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
+				<div class="wp-block-column">
+					<!-- wp:columns -->
+					<div class="wp-block-columns">
+						<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
+						<div class="wp-block-column">
+							<!-- wp:navigation {"className":"is-style-default","style":{"typography":{"fontStyle":"normal","fontWeight":"600"},"spacing":{"blockGap":"var:preset|spacing|30"}},"fontSize":"x-small","layout":{"type":"flex","flexWrap":"nowrap","orientation":"vertical"}} /-->
+						</div>
+						<!-- /wp:column -->
+
+						<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
+						<div class="wp-block-column">
+							<!-- wp:navigation {"className":"is-style-default","style":{"typography":{"fontStyle":"normal","fontWeight":"600"},"spacing":{"blockGap":"var:preset|spacing|30"}},"fontSize":"x-small","layout":{"type":"flex","flexWrap":"nowrap","orientation":"vertical"}} /-->
+						</div>
+						<!-- /wp:column -->
 
-					<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
-					<div class="wp-block-column">
-						<!-- wp:navigation {"className":"is-style-default","style":{"typography":{"fontStyle":"normal","fontWeight":"600"},"spacing":{"blockGap":"var:preset|spacing|30"}},"fontSize":"x-small","layout":{"type":"flex","flexWrap":"nowrap","orientation":"vertical"}} /-->
 					</div>
-					<!-- /wp:column -->
-
+					<!-- /wp:columns -->
 				</div>
-				<!-- /wp:columns -->
+				<!-- /wp:column -->
 			</div>
-			<!-- /wp:column -->
+			<!-- /wp:columns -->
 		</div>
-		<!-- /wp:columns -->
+		<!-- /wp:group -->
 
 		<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Credits', 'newspack-block-theme' ); ?>"},"layout":{"type":"default"}} -->
 		<div class="wp-block-group">
diff --git a/patterns/footer-style-5.php b/patterns/footer-style-5.php
new file mode 100644
index 00000000..50f05437
--- /dev/null
+++ b/patterns/footer-style-5.php
@@ -0,0 +1,107 @@
+<?php
+/**
+ * Title: Footer - Style 5
+ * Slug: newspack-block-theme/footer-style-5
+ * Inserter: no
+ * Block Types: core/template-part/footer
+ *
+ * @package Newspack_Block_Theme
+ */
+
+?>
+<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Footer', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"margin":{"top":"var:preset|spacing|80"}},"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"backgroundColor":"contrast","textColor":"base","layout":{"type":"constrained"}} -->
+<div class="wp-block-group has-base-color has-contrast-background-color has-text-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--80)">
+
+	<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"default"}} -->
+	<div class="wp-block-group alignwide">
+
+		<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Content', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"layout":{"type":"default"}} -->
+		<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80)">
+			<!-- wp:site-title {"level":0,"fontSize":"large"} /-->
+
+			<!-- wp:columns {"lock":{"move":true,"remove":true}} -->
+			<div class="wp-block-columns">
+				<!-- wp:column -->
+				<div class="wp-block-column">
+					<!-- wp:paragraph {"fontSize":"large"} -->
+					<p class="has-large-font-size"><?php esc_html_e( 'Our online newspaper delivers the latest news and insightful analysis. Our experienced journalists ensure accurate and impartial reporting. Stay informed with our engaging and informative articles.', 'newspack-block-theme' ); ?></p>
+					<!-- /wp:paragraph -->
+
+					<!-- wp:social-links {"iconColor":"base","iconColorValue":"#ffffff","iconBackgroundColor":"contrast-2","className":"has-icon-background-color"} -->
+					<ul class="wp-block-social-links has-icon-color has-icon-background-color">
+						<!-- wp:social-link {"url":"#","service":"facebook"} /-->
+
+						<!-- wp:social-link {"url":"#","service":"instagram"} /-->
+
+						<!-- wp:social-link {"url":"#","service":"x"} /-->
+					</ul>
+					<!-- /wp:social-links -->
+				</div>
+				<!-- /wp:column -->
+
+				<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
+				<div class="wp-block-column">
+					<!-- wp:columns -->
+					<div class="wp-block-columns">
+						<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
+						<div class="wp-block-column">
+							<!-- wp:navigation {"className":"is-style-default","style":{"typography":{"fontStyle":"normal","fontWeight":"600"},"spacing":{"blockGap":"var:preset|spacing|30"}},"fontSize":"x-small","layout":{"type":"flex","flexWrap":"nowrap","orientation":"vertical"}} /-->
+						</div>
+						<!-- /wp:column -->
+
+						<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
+						<div class="wp-block-column">
+							<!-- wp:navigation {"className":"is-style-default","style":{"typography":{"fontStyle":"normal","fontWeight":"600"},"spacing":{"blockGap":"var:preset|spacing|30"}},"fontSize":"x-small","layout":{"type":"flex","flexWrap":"nowrap","orientation":"vertical"}} /-->
+						</div>
+						<!-- /wp:column -->
+
+						<!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
+						<div class="wp-block-column">
+							<!-- wp:navigation {"className":"is-style-default","style":{"typography":{"fontStyle":"normal","fontWeight":"600"},"spacing":{"blockGap":"var:preset|spacing|30"}},"fontSize":"x-small","layout":{"type":"flex","flexWrap":"nowrap","orientation":"vertical"}} /-->
+						</div>
+						<!-- /wp:column -->
+
+					</div>
+					<!-- /wp:columns -->
+				</div>
+				<!-- /wp:column -->
+			</div>
+			<!-- /wp:columns -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Credits', 'newspack-block-theme' ); ?>"},"layout":{"type":"default"}} -->
+		<div class="wp-block-group">
+			<!-- wp:separator {"lock":{"move":true,"remove":true},"className":"is-style-wide","backgroundColor":"contrast-2"} -->
+			<hr class="wp-block-separator has-text-color has-contrast-2-color has-alpha-channel-opacity has-contrast-2-background-color has-background is-style-wide"/>
+			<!-- /wp:separator -->
+
+			<!-- wp:group {"lock":{"move":false,"remove":true},"style":{"spacing":{"blockGap":"var:preset|spacing|20","padding":{"bottom":"var:preset|spacing|50"}}},"fontSize":"x-small","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
+			<div class="wp-block-group has-x-small-font-size" style="padding-bottom:var(--wp--preset--spacing--50)">
+				<!-- wp:group {"lock":{"move":false,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Copyright', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"blockGap":"0.25em"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
+				<div class="wp-block-group">
+					<!-- wp:paragraph -->
+					<p><strong>©</strong></p>
+					<!-- /wp:paragraph -->
+
+					<!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"x-small"} /-->
+				</div>
+				<!-- /wp:group -->
+
+				<!-- wp:group {"templateLock":"all","lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Powered By', 'newspack-block-theme' ); ?>"},"className":"powered-by","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+				<div class="wp-block-group powered-by">
+					<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base"} -->
+					<p class="has-base-color has-text-color has-link-color"><a href="https://newspack.com"><?php esc_html_e( 'Powered by Newspack', 'newspack-block-theme' ); ?></a></p>
+					<!-- /wp:paragraph -->
+				</div>
+				<!-- /wp:group -->
+			</div>
+			<!-- /wp:group -->
+		</div>
+		<!-- /wp:group -->
+
+	</div>
+	<!-- /wp:group -->
+
+</div>
+<!-- /wp:group -->

From 5fa1f7c2b796356e1e9292dca629ffb908803b43 Mon Sep 17 00:00:00 2001
From: Thomas Guillot <thomasguillot@users.noreply.github.com>
Date: Wed, 17 Jul 2024 16:57:31 +0100
Subject: [PATCH 8/9] feat(button): x-small size adjust min-height and
 border-radius for consistency with newspack-icon (#271)

---
 src/scss/_mixins.scss        |  1 +
 src/scss/blocks/_button.scss | 11 ++++++-----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index d89d4d6f..731e2af1 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/blocks/_button.scss b/src/scss/blocks/_button.scss
index a771d7d3..0240b1ff 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;
 		}
 	}
 }

From 4cdb2554f198d05fc0e575199165bfbb9aabf02b Mon Sep 17 00:00:00 2001
From: Thomas Guillot <thomasguillot@users.noreply.github.com>
Date: Wed, 17 Jul 2024 16:57:56 +0100
Subject: [PATCH 9/9] feat: add drawer menu pattern; reorganise overlays (#244)

---
 .github/UTILITY_CLASSES.md                    |  22 +--
 parts/comments-menu.html                      |   2 +-
 parts/drawer-contents.html                    |  17 +++
 parts/mobile-menu.html                        |   6 +-
 patterns/drawer-menu.php                      |  27 ++++
 src/js/front-end/main.js                      |   1 +
 src/js/front-end/menus/comments-menu.js       |   8 +-
 src/js/front-end/menus/drawer-menu.js         |  65 +++++++++
 src/js/front-end/menus/mobile-menu.js         |   2 +
 src/js/front-end/menus/search-menu.js         |   2 +
 src/js/front-end/menus/utils.js               |  17 ++-
 src/scss/_header.scss                         |  11 --
 src/scss/_mixins.scss                         |  17 ++-
 .../{_overlay.scss => overlays/_base.scss}    | 129 +++++++++++++++---
 .../_comments.scss}                           |  10 +-
 src/scss/overlays/_drawer.scss                |  26 ++++
 .../_search.scss}                             |   4 +-
 src/scss/style.scss                           |   7 +-
 18 files changed, 309 insertions(+), 64 deletions(-)
 create mode 100644 parts/drawer-contents.html
 create mode 100644 patterns/drawer-menu.php
 create mode 100644 src/js/front-end/menus/drawer-menu.js
 rename src/scss/{_overlay.scss => overlays/_base.scss} (51%)
 rename src/scss/{_comments-overlay.scss => overlays/_comments.scss} (80%)
 create mode 100644 src/scss/overlays/_drawer.scss
 rename src/scss/{_search-overlay.scss => overlays/_search.scss} (99%)

diff --git a/.github/UTILITY_CLASSES.md b/.github/UTILITY_CLASSES.md
index ffd9c456..003fea9b 100644
--- a/.github/UTILITY_CLASSES.md
+++ b/.github/UTILITY_CLASSES.md
@@ -56,11 +56,17 @@ Additionally, `is-position-sticky--mobile-only` and `is-position-sticky--desktop
 
 # Overlay
 
-The class `overlay-contents` needs to be applied in addition to:
-
-| CLASS NAME                   | DESCRIPTION                                                                |
-| ---------------------------- | -------------------------------------------------------------------------- |
-| overlay-contents             | Class required to enable the overlay.                                      |
-| overlay-contents--left       | This is the default behavior, where the content will appear from the left. |
-| overlay-contents--right      | In this case, the content will slide in from the right.                    |
-| overlay-contents--full-width | The content will take over the full screen.                                |
+The class `overlay-contents` needs to be applied along with a position class: `overlay-contents--position--left`, `overlay-contents--position--right`, or `overlay-contents--position--full-width`.
+
+When using the right or left position, you can also control the width, which defaults to a maximum of 632px.
+
+| CLASS NAME                             | DESCRIPTION                                                                |
+| -------------------------------------- | -------------------------------------------------------------------------- |
+| overlay-contents                       | Class required to enable the overlay.                                      |
+| overlay-contents--position--left       | This is the default behavior, where the content will appear from the left. |
+| overlay-contents--position--right      | In this case, the content will slide in from the right.                    |
+| overlay-contents--position--full-width | The content will take over the full screen.                                |
+| overlay-contents--width--x-small       | The content will expand to a maximum of 300px.                             |
+| overlay-contents--width--small         | The content will expand to a maximum of 410px.                             |
+| overlay-contents--width--large         | The content will expand to a maximum of 964px.                             |
+| overlay-contents--width--x-large       | The content will expand to a maximum of 1296px.                            |
diff --git a/parts/comments-menu.html b/parts/comments-menu.html
index 557908c7..1739ab9a 100644
--- a/parts/comments-menu.html
+++ b/parts/comments-menu.html
@@ -5,5 +5,5 @@
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->
 
-<!-- wp:template-part {"slug":"comments-contents","theme":"newspack-block-theme","tagName":"div","className":"comments-menu__contents overlay-contents overlay-contents--right"} /--></div>
+<!-- wp:template-part {"slug":"comments-contents","theme":"newspack-block-theme","tagName":"div","className":"comments-menu__contents overlay-contents overlay-contents--position--right"} /--></div>
 <!-- /wp:group -->
diff --git a/parts/drawer-contents.html b/parts/drawer-contents.html
new file mode 100644
index 00000000..77f76ce7
--- /dev/null
+++ b/parts/drawer-contents.html
@@ -0,0 +1,17 @@
+<!-- wp:buttons {"lock":{"move":true,"remove":true},"metadata":{"name":"Close Button"},"layout":{"type":"flex","justifyContent":"right"}} -->
+<div class="wp-block-buttons"><!-- wp:button {"textColor":"contrast","lock":{"move":true,"remove":true},"style":{"spacing":{"padding":{"left":"0","right":"0","top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"className":"drawer-menu__toggle newspack-icon-close"} -->
+<div class="wp-block-button drawer-menu__toggle newspack-icon-close"><a class="wp-block-button__link has-contrast-color has-text-color has-link-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Close</span></a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->
+
+<!-- wp:group {"metadata":{"name":"Content"},"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="margin-top:0;margin-bottom:0"><!-- wp:navigation {"className":"is-style-flatten","layout":{"type":"flex","setCascadingProperties":true,"orientation":"vertical"}} /-->
+
+<!-- wp:social-links {"iconColor":"contrast","iconColorValue":"#1E1E1E","iconBackgroundColor":"base-2","iconBackgroundColorValue":"#F0F0F0"} -->
+<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"#","service":"facebook"} /-->
+
+<!-- wp:social-link {"url":"#","service":"instagram"} /-->
+
+<!-- wp:social-link {"url":"#","service":"x"} /--></ul>
+<!-- /wp:social-links --></div>
+<!-- /wp:group -->
diff --git a/parts/mobile-menu.html b/parts/mobile-menu.html
index c06536f5..97b0d476 100644
--- a/parts/mobile-menu.html
+++ b/parts/mobile-menu.html
@@ -1,7 +1,7 @@
 <!-- wp:buttons {"lock":{"move":false,"remove":false}} -->
-<div class="wp-block-buttons"><!-- wp:button {"textColor":"black","style":{"spacing":{"padding":{"left":"0","right":"0","top":"0","bottom":"0"}}},"className":"mobile-menu__toggle newspack-icon-menu"} -->
-<div class="wp-block-button mobile-menu__toggle newspack-icon-menu"><a class="wp-block-button__link has-black-color has-text-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Menu</span></a></div>
+<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"base","textColor":"contrast","style":{"spacing":{"padding":{"left":"0","right":"0","top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"className":"mobile-menu__toggle newspack-icon-menu"} -->
+<div class="wp-block-button mobile-menu__toggle newspack-icon-menu"><a class="wp-block-button__link has-contrast-color has-base-background-color has-text-color has-background has-link-color wp-element-button" href="#" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><span>Menu</span></a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->
 
-<!-- wp:template-part {"slug":"mobile-contents","theme":"newspack-block-theme","tagName":"div","className":"mobile-menu__contents overlay-contents overlay-contents--left"} /-->
+<!-- wp:template-part {"slug":"mobile-contents","theme":"newspack-block-theme","tagName":"div","className":"mobile-menu__contents overlay-contents overlay-contents--position--left"} /-->
diff --git a/patterns/drawer-menu.php b/patterns/drawer-menu.php
new file mode 100644
index 00000000..4d043589
--- /dev/null
+++ b/patterns/drawer-menu.php
@@ -0,0 +1,27 @@
+<?php
+/**
+ * Title: Drawer Menu
+ * Slug: newspack-block-theme/drawer-menu
+ * Categories: newspack-block-theme
+ * Viewport Width: 632
+ * Block Types: core/navigation, core/social-links
+ *
+ * @package Newspack_Block_Theme
+ */
+
+?>
+<!-- wp:group {"metadata":{"name":"<?php esc_html_e( 'Drawer Menu', 'newspack-block-theme' ); ?>"},"className":"drawer-menu","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group drawer-menu">
+	<!-- wp:buttons {"lock":{"move":false,"remove":false},"className":"has-x-small-size","fontSize":"small"} -->
+	<div class="wp-block-buttons has-custom-font-size has-x-small-size has-small-font-size">
+		<!-- wp:button {"backgroundColor":"base","textColor":"contrast","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"typography":{"textTransform":"uppercase"}},"className":"drawer-menu__toggle"} -->
+		<div class="wp-block-button drawer-menu__toggle" style="text-transform:uppercase">
+			<a class="wp-block-button__link has-contrast-color has-base-background-color has-text-color has-background has-link-color wp-element-button" href="#"><?php esc_html_e( 'Menu', 'newspack-block-theme' ); ?></a>
+		</div>
+		<!-- /wp:button -->
+	</div>
+	<!-- /wp:buttons -->
+
+	<!-- wp:template-part {"slug":"drawer-contents","theme":"newspack-block-theme","tagName":"div","className":"drawer-menu__contents overlay-contents overlay-contents--position--left"} /-->
+</div>
+<!-- /wp:group -->
diff --git a/src/js/front-end/main.js b/src/js/front-end/main.js
index 55e04c13..82b27ebf 100644
--- a/src/js/front-end/main.js
+++ b/src/js/front-end/main.js
@@ -1,3 +1,4 @@
 import './menus/comments-menu';
+import './menus/drawer-menu';
 import './menus/mobile-menu';
 import './menus/search-menu';
diff --git a/src/js/front-end/menus/comments-menu.js b/src/js/front-end/menus/comments-menu.js
index 16e3ff74..9048a641 100644
--- a/src/js/front-end/menus/comments-menu.js
+++ b/src/js/front-end/menus/comments-menu.js
@@ -13,15 +13,15 @@ domReady( function () {
 	 * Comments Menu toggle and overlay JavaScript.
 	 */
 	const body = document.body,
-		headerContain = document.querySelector( '.comments-menu' ),
+		pageContain = document.querySelector( '.comments-menu' ),
 		commentsToggle = document.querySelectorAll( '.comments-menu__toggle' ),
 		commentsContents = document.querySelector( '.comments-menu__contents' );
 
-	if ( ! headerContain || ! commentsToggle.length || ! commentsContents ) {
+	if ( ! pageContain || ! commentsToggle.length || ! commentsContents ) {
 		return;
 	}
 
-	const commentsOpenButton = headerContain.querySelector( '.comments-menu__toggle a' ),
+	const commentsOpenButton = pageContain.querySelector( '.comments-menu__toggle a' ),
 		commentsCloseButton = commentsContents.querySelector( '.comments-menu__toggle a' );
 
 	/**
@@ -43,6 +43,7 @@ domReady( function () {
 	 */
 	const openMenu = () => {
 		body.classList.add( openClassName );
+		commentsContents.classList.add( openClassName );
 		commentsCloseButton.focus();
 		createOverlay();
 	};
@@ -52,6 +53,7 @@ domReady( function () {
 	 */
 	const closeMenu = () => {
 		body.classList.remove( openClassName );
+		commentsContents.classList.remove( openClassName );
 		commentsOpenButton.focus();
 		removeOverlay();
 	};
diff --git a/src/js/front-end/menus/drawer-menu.js b/src/js/front-end/menus/drawer-menu.js
new file mode 100644
index 00000000..25277643
--- /dev/null
+++ b/src/js/front-end/menus/drawer-menu.js
@@ -0,0 +1,65 @@
+/**
+ * Internal dependencies.
+ */
+import { domReady } from '../utils'; // Global utils.
+import { MENU_OPEN_CLASS_NAME } from './consts'; // Menu constants.
+import { createOverlay, removeOverlay } from './utils'; // Menu utils.
+
+// A class name to append to the body element when the drawer menu is open.
+const openClassName = MENU_OPEN_CLASS_NAME + 'drawer-menu';
+
+domReady( function () {
+	/**
+	 * Drawer Menu toggle and overlay JavaScript.
+	 */
+	const body = document.body,
+		pageContain = document.querySelector( '.drawer-menu' ),
+		drawerToggle = document.querySelectorAll( '.drawer-menu__toggle' ),
+		drawerContents = document.querySelector( '.drawer-menu__contents' );
+
+	if ( ! pageContain || ! drawerToggle.length || ! drawerContents ) {
+		return;
+	}
+
+	const drawerOpenButton = pageContain.querySelector( '.drawer-menu__toggle a' ),
+		drawerCloseButton = drawerContents.querySelector( '.drawer-menu__toggle a' );
+
+	/**
+	 * @description Fires either the opening or closing functions for a menu.
+	 * @param {event} event Click event.
+	 */
+	const menuToggle = event => {
+		event.preventDefault();
+
+		if ( body.classList.contains( openClassName ) ) {
+			closeMenu();
+		} else {
+			openMenu();
+		}
+	};
+
+	/**
+	 * @description Opens specifed drawer menu.
+	 */
+	const openMenu = () => {
+		body.classList.add( openClassName );
+		drawerContents.classList.add( openClassName );
+		drawerCloseButton.focus();
+		createOverlay();
+	};
+
+	/**
+	 * @description Closes specifed drawer menu.
+	 */
+	const closeMenu = () => {
+		body.classList.remove( openClassName );
+		drawerContents.classList.remove( openClassName );
+		drawerOpenButton.focus();
+		removeOverlay();
+	};
+
+	// Find each drawer toggle and attaches an event listener.
+	for ( let i = 0; i < drawerToggle.length; i++ ) {
+		drawerToggle[ i ].addEventListener( 'click', menuToggle, false );
+	}
+} );
diff --git a/src/js/front-end/menus/mobile-menu.js b/src/js/front-end/menus/mobile-menu.js
index 55a053d4..9329383c 100644
--- a/src/js/front-end/menus/mobile-menu.js
+++ b/src/js/front-end/menus/mobile-menu.js
@@ -43,6 +43,7 @@ domReady( function () {
 	 */
 	const openMenu = () => {
 		body.classList.add( openClassName );
+		mobileContents.classList.add( openClassName );
 		mobileCloseButton.focus();
 		createOverlay();
 	};
@@ -52,6 +53,7 @@ domReady( function () {
 	 */
 	const closeMenu = () => {
 		body.classList.remove( openClassName );
+		mobileContents.classList.remove( openClassName );
 		mobileOpenButton.focus();
 		removeOverlay();
 	};
diff --git a/src/js/front-end/menus/search-menu.js b/src/js/front-end/menus/search-menu.js
index 6571433b..a0640e0c 100644
--- a/src/js/front-end/menus/search-menu.js
+++ b/src/js/front-end/menus/search-menu.js
@@ -50,6 +50,7 @@ domReady( function () {
 	 */
 	const openMenu = () => {
 		body.classList.add( openClassName );
+		searchContents.classList.add( openClassName );
 		searchOpenButton.innerHTML = '<span>' + newspackScreenReaderText.close_search + '</span>';
 		searchContents.querySelector( 'input[type="search"]' ).focus();
 		createOverlay();
@@ -63,6 +64,7 @@ domReady( function () {
 			return;
 		}
 		body.classList.remove( openClassName );
+		searchContents.classList.remove( openClassName );
 		searchOpenButton.innerHTML = '<span>' + newspackScreenReaderText.open_search + '</span>';
 		removeOverlay();
 	};
diff --git a/src/js/front-end/menus/utils.js b/src/js/front-end/menus/utils.js
index 366702b0..b250ef60 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/_header.scss b/src/scss/_header.scss
index bf3214cb..af227fa5 100644
--- a/src/scss/_header.scss
+++ b/src/scss/_header.scss
@@ -12,17 +12,6 @@
 	}
 }
 
-// Mobile menu
-.mobile-menu__contents {
-	.menu-open--mobile-menu & {
-		@include mixins.overlay-visible;
-	}
-
-	&.wp-block {
-		display: none;
-	}
-}
-
 // Header margin
 .wp-site-blocks {
 	> header + * {
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 731e2af1..52ce3bbe 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -203,7 +203,10 @@
 
 @mixin overlay-visible($position: left) {
 	opacity: 1;
-	@if $position == right {
+	@if $position == full-width {
+		animation: overlay-full-width__fade-in-animation 125ms ease-in-out;
+		left: 0;
+	} @else if $position == right {
 		right: 0;
 	} @else {
 		left: 0;
@@ -213,3 +216,15 @@
 		visibility: visible;
 	}
 }
+
+@keyframes overlay-full-width__fade-in-animation { /* stylelint-disable-line keyframes-name-pattern */
+	0% {
+		opacity: 0;
+		transform: translateY(calc(-1 * var(--wp--preset--spacing--30)));
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
diff --git a/src/scss/_overlay.scss b/src/scss/overlays/_base.scss
similarity index 51%
rename from src/scss/_overlay.scss
rename to src/scss/overlays/_base.scss
index 21fda6f9..08e28357 100644
--- a/src/scss/_overlay.scss
+++ b/src/scss/overlays/_base.scss
@@ -1,4 +1,5 @@
-@use 'sass-utils';
+@use '../sass-utils';
+@use '../mixins';
 
 [class*='menu-open--'] {
 	overflow-y: hidden;
@@ -33,6 +34,7 @@
 	background: var(--wp--preset--color--base);
 	box-shadow: var(--wp--preset--shadow--elevation-3);
 	color: var(--wp--preset--color--contrast);
+	inset: 0 auto 0 -100%;
 	max-width: calc(
 		var(--wp--preset--spacing--30) + var(--wp--style--global--content-size) +
 			var(--wp--preset--spacing--30)
@@ -53,20 +55,6 @@
 		padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
 	}
 
-	&--left {
-		inset: 0 auto 0 -100%;
-		transition:
-			opacity 125ms ease-in-out,
-			left 250ms ease-in-out;
-	}
-
-	&--right {
-		inset: 0 -100% 0 auto;
-		transition:
-			opacity 125ms ease-in-out,
-			right 250ms ease-in-out;
-	}
-
 	.admin-bar & {
 		z-index: sass-utils.$zindex-overlay-menu-mobile;
 
@@ -76,10 +64,6 @@
 		}
 	}
 
-	> * {
-		visibility: hidden;
-	}
-
 	.newspack-icon-close {
 		display: grid;
 		height: var(--wp--custom--spacing--85);
@@ -92,6 +76,113 @@
 			margin-right: calc(-1 * var(--wp--preset--spacing--40));
 		}
 	}
+
+	&--position--left {
+		transition:
+			opacity 125ms ease-in-out,
+			left 250ms ease-in-out;
+
+		&[class*='menu-open--'] {
+			@include mixins.overlay-visible(left);
+		}
+	}
+
+	&--position--right {
+		inset: 0 -100% 0 auto;
+		transition:
+			opacity 125ms ease-in-out,
+			right 250ms ease-in-out;
+
+		&[class*='menu-open--'] {
+			@include mixins.overlay-visible(right);
+		}
+	}
+
+	&--position--full-width {
+		max-width: 100%;
+
+		@include sass-utils.media(medium) {
+			padding: 0 var(--wp--preset--spacing--80) var(--wp--preset--spacing--80);
+		}
+
+		&[class*='menu-open--'] {
+			@include mixins.overlay-visible(full-width);
+		}
+
+		body:has( &[class*='menu-open--'] ) {
+			overflow: hidden;
+		}
+
+		.newspack-icon-close {
+			@include sass-utils.media(medium) {
+				margin-right: calc(-1 * var(--wp--preset--spacing--80));
+			}
+		}
+	}
+
+	&--width--x-small {
+		max-width: calc(
+			var(--wp--preset--spacing--30) + var(--wp--custom--width--x-small) +
+				var(--wp--preset--spacing--30)
+		);
+
+		@include sass-utils.media(medium) {
+			max-width: calc(
+				var(--wp--preset--spacing--40) + var(--wp--custom--width--x-small) +
+					var(--wp--preset--spacing--40)
+			);
+		}
+	}
+
+	&--width--small {
+		max-width: calc(
+			var(--wp--preset--spacing--30) + var(--wp--custom--width--small) +
+				var(--wp--preset--spacing--30)
+		);
+
+		@include sass-utils.media(medium) {
+			max-width: calc(
+				var(--wp--preset--spacing--40) + var(--wp--custom--width--small) +
+					var(--wp--preset--spacing--40)
+			);
+		}
+	}
+
+	&--width--large {
+		max-width: calc(
+			var(--wp--preset--spacing--30) + var(--wp--custom--width--large) +
+				var(--wp--preset--spacing--30)
+		);
+
+		@include sass-utils.media(medium) {
+			max-width: calc(
+				var(--wp--preset--spacing--40) + var(--wp--custom--width--large) +
+					var(--wp--preset--spacing--40)
+			);
+		}
+	}
+
+	&--width--x-large {
+		max-width: calc(
+			var(--wp--preset--spacing--30) + var(--wp--custom--width--x-large) +
+				var(--wp--preset--spacing--30)
+		);
+
+		@include sass-utils.media(medium) {
+			max-width: calc(
+				var(--wp--preset--spacing--40) + var(--wp--custom--width--x-large) +
+					var(--wp--preset--spacing--40)
+			);
+		}
+	}
+
+	> * {
+		visibility: hidden;
+	}
+
+	&.wp-block {
+		display: none;
+	}
 }
 
 @keyframes overlay-mask__fade-in-animation { /* stylelint-disable-line keyframes-name-pattern */
diff --git a/src/scss/_comments-overlay.scss b/src/scss/overlays/_comments.scss
similarity index 80%
rename from src/scss/_comments-overlay.scss
rename to src/scss/overlays/_comments.scss
index 67cf8721..d7057825 100644
--- a/src/scss/_comments-overlay.scss
+++ b/src/scss/overlays/_comments.scss
@@ -1,5 +1,5 @@
-@use 'sass-utils';
-@use 'mixins';
+@use '../sass-utils';
+@use '../mixins';
 
 /**
  * Comments menu styles
@@ -18,10 +18,6 @@
 					(var(--wp--preset--spacing--50) * 6)
 			);
 		}
-
-		.menu-open--comments-menu & {
-			@include mixins.overlay-visible(right);
-		}
 	}
 
 	&__toggle {
@@ -36,7 +32,7 @@
 					background: currentcolor;
 					content: '';
 					height: var(--wp--preset--spacing--40);
-					mask: url('../../src/images/icon-comments.svg') 0 0 no-repeat;
+					mask: url('../../../src/images/icon-comments.svg') 0 0 no-repeat;
 					width: var(--wp--preset--spacing--40);
 				}
 			}
diff --git a/src/scss/overlays/_drawer.scss b/src/scss/overlays/_drawer.scss
new file mode 100644
index 00000000..b89d6dc5
--- /dev/null
+++ b/src/scss/overlays/_drawer.scss
@@ -0,0 +1,26 @@
+
+@use '../mixins';
+
+.drawer-menu {
+	&__toggle {
+		&:not(.newspack-icon-close) {
+			align-items: center;
+			display: flex;
+
+			.wp-block-button__link {
+				align-items: center;
+				display: inline-flex;
+				gap: var(--wp--preset--spacing--20);
+				justify-content: center;
+
+				&::before {
+					background: currentcolor;
+					content: '';
+					height: var(--wp--preset--spacing--40);
+					mask: url('../../../src/images/icon-menu.svg') 0 0 no-repeat;
+					width: var(--wp--preset--spacing--40);
+				}
+			}
+		}
+	}
+}
diff --git a/src/scss/_search-overlay.scss b/src/scss/overlays/_search.scss
similarity index 99%
rename from src/scss/_search-overlay.scss
rename to src/scss/overlays/_search.scss
index de9120eb..d355b303 100644
--- a/src/scss/_search-overlay.scss
+++ b/src/scss/overlays/_search.scss
@@ -1,5 +1,5 @@
-@use 'sass-utils';
-@use 'mixins';
+@use '../sass-utils';
+@use '../mixins';
 
 /**
  * Search menu styles
diff --git a/src/scss/style.scss b/src/scss/style.scss
index ac281b78..49aebf99 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -3,9 +3,10 @@
 @import url('./_base.scss');
 @import url('./_forms.scss');
 @import url('./_gutenberg-shim.scss');
-@import url('./_overlay.scss');
 @import url('./blocks/_blocks.scss');
 @import url('./block-patterns/_block-patterns.scss');
 @import url('./_header.scss');
-@import url('./_comments-overlay.scss');
-@import url('./_search-overlay.scss');
+@import url('./overlays/_base.scss');
+@import url('./overlays/_comments.scss');
+@import url('./overlays/_drawer.scss');
+@import url('./overlays/_search.scss');