Release Mar 02

.github/UTILITY_CLASSES.md

@@ -39,7 +39,7 @@ Note: The font size still needs to be changed to x-small if we're recreating a N
 `mobile-only` and `desktop-only` can be applied to blocks to display them based on the screen size.
 
 | CLASS NAME   | DESCRIPTION                                                                     |
-| -------------| ------------------------------------------------------------------------------- |
+| ------------ | ------------------------------------------------------------------------------- |
 | mobile-only  | The block will be displayed on the screen if it is 781px wide or less.          |
 | desktop-only | The block will be displayed on the screen if the screen is at least 782px wide. |
 
@@ -52,7 +52,7 @@ Adding `is-position-fixed` to a block will make it fixed at the top of the scree
 Additionally, `is-position-fixed--mobile-only` and `is-position-fixed--desktop-only` can be applied to blocks to fix their position based on the screen size.
 
 | CLASS NAME                      | DESCRIPTION                                                                 |
-| --------------------------------| --------------------------------------------------------------------------- |
+| ------------------------------- | --------------------------------------------------------------------------- |
 | is-position-fixed               | Class required to enable the fixed position.                                |
 | is-position-fixed--mobile-only  | The block will be fixed on the screen if it is 781px wide or less.          |
 | is-position-fixed--desktop-only | The block will be fixed on the screen if the screen is at least 782px wide. |
@@ -64,7 +64,7 @@ Adding `is-position-sticky` to a block will ensure it stays within the viewport
 Additionally, `is-position-sticky--mobile-only` and `is-position-sticky--desktop-only` can be applied to blocks to make them sticky based on the screen size.
 
 | CLASS NAME                       | DESCRIPTION                                                                  |
-| ---------------------------------| ---------------------------------------------------------------------------- |
+| -------------------------------- | ---------------------------------------------------------------------------- |
 | is-position-sticky               | Class required to enable the sticky position.                                |
 | is-position-sticky--mobile-only  | The block will be sticky on the screen if it is 781px wide or less.          |
 | is-position-sticky--desktop-only | The block will be sticky on the screen if the screen is at least 782px wide. |
@@ -73,15 +73,21 @@ Additionally, `is-position-sticky--mobile-only` and `is-position-sticky--desktop
 
 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.                            |
+When the overlay contents are included via a template-part (e.g. mobile menu), the **parent** template-part wrapper can set a **force** position class (e.g. `overlay-contents--position--right--force` on the wrapper) to override the contents’ own position in JavaScript, without changing editor/front-end CSS. This lets patterns control slide direction without editing the shared template part.
+
+When using the right or left position, you can also control the width; by default it uses `overlay-contents--width--medium`, where the content will expand 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--position--left--force       | Use on the parent template-part wrapper to force the content to slide in from the left.    |
+| overlay-contents--position--right--force      | Use on the parent template-part wrapper to force the content to slide in from the right.   |
+| overlay-contents--position--full-width--force | Use on the parent template-part wrapper to force the content to 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--medium               | The content will expand to a maximum of 632px.                                             |
+| 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.                                            |

CHANGELOG.md

@@ -1,3 +1,11 @@
+# [1.25.0-alpha.1](https://github.com/Automattic/newspack-block-theme/compare/v1.24.0...v1.25.0-alpha.1) (2026-02-19)
+
+
+### Features
+
+* allow parent to dictate position when it has the position class ([#409](https://github.com/Automattic/newspack-block-theme/issues/409)) ([94e3ce7](https://github.com/Automattic/newspack-block-theme/commit/94e3ce72de544214fadcfe9915de5029a70b5dd2))
+* make My Account button only show icon on mobile ([#406](https://github.com/Automattic/newspack-block-theme/issues/406)) ([c04788b](https://github.com/Automattic/newspack-block-theme/commit/c04788b8b73f72e24fb1f4eccee14746e3bf5939))
+
 # [1.24.0](https://github.com/Automattic/newspack-block-theme/compare/v1.23.0...v1.24.0) (2026-02-16)
 
 

functions.php

@@ -1,7 +1,7 @@
 <?php
 /**
  * Newspack Block Theme functions and definitions
- * Version: 1.24.0
+ * Version: 1.25.0-alpha.1
  *
  * @link https://developer.wordpress.org/themes/basics/theme-functions/
  *
@@ -15,7 +15,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.24.0' );
+	define( 'NEWSPACK_BLOCK_THEME_VERSION', '1.25.0-alpha.1' );
 }
 
 

languages/newspack-block-theme.pot

@@ -9,33 +9,33 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2026-02-03T18:54:40+00:00\n"
+"POT-Creation-Date: 2026-02-13T23:22:58+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.12.0\n"
 "X-Domain: newspack-block-theme\n"
 
 #. Theme Name of the theme
-#: dist
+#: style.css
 msgid "Newspack Block Theme"
 msgstr ""
 
 #. Theme URI of the theme
-#: dist
+#: style.css
 msgid "https://github.com/automattic/newspack-block-theme"
 msgstr ""
 
 #. Description of the theme
-#: dist
+#: style.css
 msgid "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"
 msgstr ""
 
 #. Author of the theme
-#: dist
+#: style.css
 msgid "Automattic"
 msgstr ""
 
 #. Author URI of the theme
-#: dist
+#: style.css
 msgid "https://newspack.com"
 msgstr ""
 
@@ -310,8 +310,6 @@ msgid "Header (Desktop) - Style 4"
 msgstr ""
 
 #: patterns/header/header-desktop-style-4.php:34
-#: patterns/header/header-mobile-style-1.php:31
-#: patterns/header/header-mobile-style-3.php:25
 msgid "Donate"
 msgstr ""
 
@@ -340,6 +338,9 @@ msgstr ""
 #: patterns/header/header-mobile-style-1.php:13
 #: patterns/header/header-mobile-style-2.php:13
 #: patterns/header/header-mobile-style-3.php:13
+#: patterns/header/header-mobile-style-4.php:13
+#: patterns/header/header-mobile-style-5.php:13
+#: patterns/header/header-mobile-style-6.php:13
 msgid "Header (Mobile)"
 msgstr ""
 
@@ -353,6 +354,21 @@ msgctxt "Pattern title"
 msgid "Header (Mobile) - Style 3"
 msgstr ""
 
+#: patterns/header/header-mobile-style-4.php
+msgctxt "Pattern title"
+msgid "Header (Mobile) - Style 4"
+msgstr ""
+
+#: patterns/header/header-mobile-style-5.php
+msgctxt "Pattern title"
+msgid "Header (Mobile) - Style 5"
+msgstr ""
+
+#: patterns/header/header-mobile-style-6.php
+msgctxt "Pattern title"
+msgid "Header (Mobile) - Style 6"
+msgstr ""
+
 #: patterns/hidden-no-results-content.php
 msgctxt "Pattern title"
 msgid "Hidden No Results Content"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/newspack-block-theme",
-	"version": "1.24.0",
+	"version": "1.25.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",

parts/search-contents.html

@@ -1,3 +1,5 @@
-<!-- wp:group {"templateLock":"all","lock":{"move":true,"remove":true},"metadata":{"name":"Content"},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:search {"buttonText":"Search","lock":{"move":true,"remove":true},"fontSize":"small"} /--></div>
+<!-- wp:group {"templateLock":"all","lock":{"move":true,"remove":true},"metadata":{"name":"Search Contents"},"style":{"spacing":{"padding":{"right":"0","left":"0"}}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group" style="padding-right:0;padding-left:0">
+	<!-- wp:search {"buttonText":"Search","lock":{"move":true,"remove":true},"fontSize":"small"} /-->
+</div>
 <!-- /wp:group -->

patterns/header/header-mobile-style-1.php

@@ -15,6 +15,7 @@
 
 	<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
 	<div class="wp-block-group alignwide">
+
 		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 		<div class="wp-block-group">
 			<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
@@ -25,17 +26,17 @@
 
 		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 		<div class="wp-block-group">
+			<?php if ( class_exists( 'Newspack\Reader_Activation' ) && \Newspack\Reader_Activation::is_enabled() ) : ?>
+				<!-- wp:newspack/my-account-button {"lock":{"move":false,"remove":true},"className":"is-style-icon-only has-x-small-size","style":{"spacing":{"padding":{"top":"0.375rem","bottom":"0.375rem","left":"0.375rem","right":"0.375rem"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base","textColor":"contrast","fontSize":"x-small"} /-->
+			<?php endif; ?>
+
 			<!-- wp:buttons {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
 			<div class="wp-block-buttons">
 				<!-- wp:button {"className":"has-x-small-size","fontSize":"x-small"} -->
-				<div class="wp-block-button has-custom-font-size has-x-small-size has-x-small-font-size"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Donate', 'newspack-block-theme' ); ?></a></div>
+				<div class="wp-block-button has-custom-font-size has-x-small-size has-x-small-font-size"><a class="wp-block-button__link wp-element-button"></a></div>
 				<!-- /wp:button -->
 			</div>
 			<!-- /wp:buttons -->
-
-			<?php if ( class_exists( 'Newspack\Reader_Activation' ) && \Newspack\Reader_Activation::is_enabled() ) : ?>
-				<!-- wp:newspack/my-account-button {"lock":{"move":true,"remove":false},"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base-2","textColor":"contrast","className":"has-x-small-size","fontSize":"x-small"} /-->
-			<?php endif; ?>
 		</div>
 		<!-- /wp:group -->
 

patterns/header/header-mobile-style-2.php

@@ -15,13 +15,27 @@
 
 	<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
 	<div class="wp-block-group alignwide">
-		<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
 
-		<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->
+		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group">
+			<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
+
+			<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group">
+			<!-- wp:template-part {"slug":"search-menu","theme":"newspack-block-theme","tagName":"div","className":"search-menu"} /-->
+
+			<?php if ( class_exists( 'Newspack\Reader_Activation' ) && \Newspack\Reader_Activation::is_enabled() ) : ?>
+				<!-- wp:newspack/my-account-button {"lock":{"move":false,"remove":true},"className":"is-style-icon-only has-x-small-size","style":{"spacing":{"padding":{"top":"0.375rem","bottom":"0.375rem","left":"0.375rem","right":"0.375rem"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base","textColor":"contrast","fontSize":"x-small"} /-->
+			<?php endif; ?>
+		</div>
+		<!-- /wp:group -->
 
-		<!-- wp:template-part {"slug":"search-menu","theme":"newspack-block-theme","tagName":"div","className":"search-menu"} /-->
 	</div>
 	<!-- /wp:group -->
 
 </div>
-<!-- /wp:group -->
+<!-- /wp:group -->

patterns/header/header-mobile-style-3.php

@@ -13,27 +13,37 @@
 <!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php esc_html_e( 'Header (Mobile)', 'newspack-block-theme' ); ?>"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"margin":{"bottom":"var:preset|spacing|50"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
 <div class="wp-block-group has-base-background-color has-background" style="margin-bottom:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)">
 
-	<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
+	<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"grid","columnCount":7,"minimumColumnWidth":null}} -->
 	<div class="wp-block-group alignwide">
-		<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->
 
-		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"columnSpan":2}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group">
+			<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
+
+			<?php if ( class_exists( 'Newspack\Reader_Activation' ) && \Newspack\Reader_Activation::is_enabled() ) : ?>
+				<!-- wp:newspack/my-account-button {"lock":{"move":false,"remove":true},"className":"is-style-icon-only has-x-small-size","style":{"spacing":{"padding":{"top":"0.375rem","bottom":"0.375rem","left":"0.375rem","right":"0.375rem"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base","textColor":"contrast","fontSize":"x-small"} /-->
+			<?php endif; ?>
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"columnSpan":3}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
+		<div class="wp-block-group">
+			<!-- wp:site-logo {"width":256,"lock":{"move":false,"remove":true}} /-->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"},"layout":{"columnSpan":2}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
 		<div class="wp-block-group">
 			<!-- wp:buttons {"layout":{"type":"flex","flexWrap":"nowrap"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}}} -->
 			<div class="wp-block-buttons">
 				<!-- wp:button {"className":"has-x-small-size","fontSize":"x-small"} -->
-				<div class="wp-block-button has-custom-font-size has-x-small-size has-x-small-font-size"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Donate', 'newspack-block-theme' ); ?></a></div>
+				<div class="wp-block-button has-custom-font-size has-x-small-size has-x-small-font-size"><a class="wp-block-button__link wp-element-button"></a></div>
 				<!-- /wp:button -->
 			</div>
 			<!-- /wp:buttons -->
-
-			<?php if ( class_exists( 'Newspack\Reader_Activation' ) && \Newspack\Reader_Activation::is_enabled() ) : ?>
-				<!-- wp:newspack/my-account-button {"lock":{"move":true,"remove":false},"style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"backgroundColor":"base-2","textColor":"contrast","className":"has-x-small-size","fontSize":"x-small"} /-->
-			<?php endif; ?>
-
-			<!-- wp:template-part {"slug":"mobile-menu","theme":"newspack-block-theme","tagName":"div","lock":{"move":false,"remove":true},"className":"mobile-menu"} /-->
 		</div>
 		<!-- /wp:group -->
+
 	</div>
 	<!-- /wp:group -->