Merge pull request #266 from Automattic/alpha

Release Jul 15
Automattic · Jul 15, 2024 · a150cab · a150cab
2 parents bfda58e + 81c5ec6
commit a150cab
Show file tree

Hide file tree

Showing 63 changed files with 2,159 additions and 764 deletions.
diff --git a/.github/VARIABLES.md b/.github/VARIABLES.md
@@ -0,0 +1,141 @@
+# Typography
+
+_Viewport range for clamp: 782px > 1280px_
+
+## Font Size
+
+| NAME                                  | REM           | PX      |
+| ------------------------------------- | ------------- | ------- |
+| --wp--preset--font-size--xx-small     |          0.75 |      12 |
+| --wp--preset--font-size--x-small      |         0.875 |      14 |
+| --wp--preset--font-size--small        |             1 |      16 |
+| --wp--preset--font-size--medium       |  1.125 > 1.25 | 18 > 20 |
+| --wp--preset--font-size--large        |    1.25 > 1.5 | 20 > 24 |
+| --wp--preset--font-size--x-large      |     1.375 > 2 | 22 > 32 |
+| --wp--preset--font-size--xx-large     | 1.625 > 2.625 | 26 > 42 |
+| --wp--preset--font-size--xxx-large    |      1.75 > 3 | 28 > 48 |
+| --wp--preset--font-size--xxxx-large   |         2 > 4 | 32 > 64 |
+| --wp--preset--font-size--xxxxx-large  |     2.125 > 5 | 34 > 80 |
+| --wp--preset--font-size--xxxxxx-large |      2.25 > 6 | 36 > 96 |
+
+## Line Height
+
+| NAME                                    | SIZE         |
+| --------------------------------------- | ------------ |
+| --wp--custom--line-height--xx-small     | 1.3333333333 |
+| --wp--custom--line-height--x-small      | 1.4285714286 |
+| --wp--custom--line-height--small        |          1.5 |
+| --wp--custom--line-height--medium       |          1.6 |
+| --wp--custom--line-height--large        |          1.5 |
+| --wp--custom--line-height--x-large      |        1.375 |
+| --wp--custom--line-height--xx-large     | 1.3333333333 |
+| --wp--custom--line-height--xxx-large    |         1.25 |
+| --wp--custom--line-height--xxxx-large   |        1.125 |
+| --wp--custom--line-height--xxxxx-large  |          1.1 |
+| --wp--custom--line-height--xxxxxx-large | 1.0833333333 |
+
+# Spacing
+
+| NAME                      | PX      |
+| ------------------------- | ------- |
+| --wp--custom--spacing--00 |       0 |
+| --wp--custom--spacing--05 |       2 |
+| --wp--custom--spacing--10 |       4 |
+| --wp--custom--spacing--15 |       6 |
+| --wp--preset--spacing--20 |       8 |
+| --wp--custom--spacing--25 |      12 |
+| --wp--preset--spacing--30 |      16 |
+| --wp--custom--spacing--35 |      20 |
+| --wp--preset--spacing--40 |      24 |
+| --wp--custom--spacing--45 |      28 |
+| --wp--preset--spacing--50 |      32 |
+| --wp--custom--spacing--55 |      36 |
+| --wp--preset--spacing--60 | 32 > 40 |
+| --wp--custom--spacing--65 |      40 |
+| --wp--preset--spacing--70 | 32 > 48 |
+| --wp--custom--spacing--75 |      48 |
+| --wp--preset--spacing--80 | 32 > 64 |
+| --wp--custom--spacing--85 |      64 |
+
+# Width
+
+| NAME                              | PX   |
+| --------------------------------- | ---- |
+| --wp--custom--width--x-small      |  300 |
+| --wp--custom--width--small        |  410 |
+| --wp--custom--width--medium       |  632 |
+| --wp--custom--width--large        |  964 |
+| --wp--custom--width--x-large      | 1296 |
+| --wp--style--global--content-size |  632 |
+| --wp--style--global--wide-size    | 1296 |
+
+# Colors
+
+## Theme (can be customized by user)
+
+| NAME                            | HEX     |
+| ------------------------------- | ------- |
+| --wp--preset--color--base       | #FFFFFF |
+| --wp--preset--color--base-2     | #F0F0F0 |
+| --wp--preset--color--base-3     | #DDDDDD |
+| --wp--preset--color--base-4     | #CCCCCC |
+| --wp--preset--color--base-5     | #949494 |
+| --wp--preset--color--contrast   | #1E1E1E |
+| --wp--preset--color--contrast-2 | #3E3E3E |
+| --wp--preset--color--contrast-3 | #6C6C6C |
+| --wp--preset--color--accent     | #2240D5 |
+| --wp--preset--color--accent-2   | #3366FF |
+
+## Newspack UI-like
+
+| NAME                             | HEX       |
+| -------------------------------- | --------- |
+| --wp--custom--color--neutral-0   |   #FFFFFF |
+| --wp--custom--color--neutral-5   |   #F7F7F7 |
+| --wp--custom--color--neutral-10  |   #F0F0F0 |
+| --wp--custom--color--neutral-20  |   #E0E0E0 |
+| --wp--custom--color--neutral-30  |   #DDDDDD |
+| --wp--custom--color--neutral-40  |   #CCCCCC |
+| --wp--custom--color--neutral-50  |   #949494 |
+| --wp--custom--color--neutral-60  |   #6C6C6C |
+| --wp--custom--color--neutral-70  | #00000070 |
+| --wp--custom--color--neutral-80  |   #3E3E3E |
+| --wp--custom--color--neutral-90  |   #1E1E1E |
+| --wp--custom--color--neutral-100 |   #000000 |
+| --wp--custom--color--error-0     |   #FCF0F1 |
+| --wp--custom--color--error-5     |   #FACFD2 |
+| --wp--custom--color--error-50    |   #D63638 |
+| --wp--custom--color--error-60    |   #B32D2E |
+| --wp--custom--color--success-0   |   #EDFAEF |
+| --wp--custom--color--success-5   |   #B8E6BF |
+| --wp--custom--color--success-50  |   #008A20 |
+| --wp--custom--color--success-60  |   #007017 |
+| --wp--custom--color--warning-0   |   #FCF9E8 |
+| --wp--custom--color--warning-5   |   #F5E6AB |
+| --wp--custom--color--warning-30  |   #DBA617 |
+| --wp--custom--color--warning-40  |   #BD8600 |
+
+# Border Radius
+
+| NAME                                    | REM    | PX |
+| --------------------------------------- | ------ | -- |
+| --wp--custom--border--radius-xx-small   |  0.125 |  2 |
+| --wp--custom--border--radius-x-small    | 0.1875 |  3 |
+| --wp--custom--border--radius-small      |   0.25 |  4 |
+| --wp--custom--border--radius-medium     |  0.375 |  6 |
+| --wp--custom--border--radius-large      |    0.5 |  8 |
+| --wp--custom--border--radius-x-large    |  0.625 | 10 |
+| --wp--custom--border--radius-xx-large   |   0.75 | 12 |
+| --wp--custom--border--radius-xxx-large  |  0.875 | 14 |
+| --wp--custom--border--radius-xxxx-large |      1 | 16 |
+
+# Elevation
+
+| NAME                              | CSS                                       |
+| --------------------------------- | ----------------------------------------- |
+| --wp--preset--shadow--elevation-1 |                      0 1px 10px #00000007 |
+| --wp--preset--shadow--elevation-2 |                      0 2px 20px #00000014 |
+| --wp--preset--shadow--elevation-3 |                      0 3px 30px #00000021 |
+| --wp--preset--shadow--elevation-4 | 0 0 20px #00000010, 0 25px 30px #00000015 |
+| --wp--preset--shadow--inset-1     |                           inset 0 0 0 1px |
+| --wp--preset--shadow--inset-2     |                           inset 0 0 0 2px |
diff --git 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/README.md b/README.md
@@ -18,6 +18,16 @@ To disclose a security issue to our team, [please submit a report via HackerOne
 
 If you have a patch or have stumbled upon an issue with the Newspack plugin/theme, you can contribute this back to the code. [Please read our contributor guidelines for more information on how you can do this.](https://github.com/Automattic/newspack-block-theme/blob/trunk/.github/CONTRIBUTING.md)
 
+### Development
+
+- Run `npm install && composer install` to install the dependencies.
+- Run `npm start` to compile the SCSS and JS files, and start file watcher.
+- Run `npm run build` to perform a single compilation run.
+
+### Variables
+
+A cheat sheet of the most important CSS variables is available [here](https://github.com/Automattic/newspack-block-theme/blob/trunk/.github/VARIABLES.md).
+
 ## Support or Questions
 
 This repository is not suitable for support or general questions about Newspack. Please only use our issue trackers for bug reports and feature requests, following [the contribution guidelines](https://github.com/Automattic/newspack-block-theme/blob/trunk/.github/CONTRIBUTING.md).

diff --git 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/includes/class-core.php b/includes/class-core.php
@@ -117,7 +117,7 @@ public static function block_variations( $metadata ) {
 		if ( $metadata['name'] == 'core/search' ) {
 			$metadata['attributes']['buttonPosition']['default'] = 'button-inside';
 			$metadata['attributes']['buttonUseIcon']['default']  = true;
-			$metadata['attributes']['placeholder']['default']    = esc_html__( 'Search...', 'newspack-block-theme' );
+			$metadata['attributes']['placeholder']['default']    = esc_html__( 'Search posts, categories, authors, ...', 'newspack-block-theme' );
 			$metadata['attributes']['showLabel']['default']      = false;
 		}
 		if ( $metadata['name'] == 'core/navigation' ) {
@@ -140,6 +140,14 @@ public static function block_pattern_categories() {
 			)
 		);
 
+		register_block_pattern_category(
+			'newspack-block-theme-author-bio',
+			array(
+				'label'       => __( 'Newspack Theme - Author Bio', 'newspack-block-theme' ),
+				'description' => __( 'Patterns bundled with the Newspack Block Theme, specifically built for the author biography.', 'newspack-block-theme' ),
+			)
+		);
+
 		register_block_pattern_category(
 			'newspack-block-theme-post-meta',
 			array(

diff --git a/package-lock.json b/package-lock.json
diff --git 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/parts/author-bio.html b/parts/author-bio.html
diff --git a/parts/comments-contents.html b/parts/comments-contents.html
@@ -1,10 +1,11 @@
-<!-- wp:buttons {"lock":{"move":true,"remove":true},"metadata":{"name":"Close"},"layout":{"type":"flex","justifyContent":"right"}} -->
+<!-- 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","style":{"spacing":{"padding":{"left":"0","right":"0","top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}}},"className":"comments-menu-toggle newspack-icon-close"} -->
 <div class="wp-block-button comments-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:comments {"lock":{"move":true,"remove":true},"className":"wp-block-comments-query-loop"} -->
+<!-- wp:group {"templateLock":"all","lock":{"move":true,"remove":true},"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:comments {"lock":{"move":true,"remove":true},"className":"wp-block-comments-query-loop"} -->
 <div class="wp-block-comments wp-block-comments-query-loop"><!-- wp:post-comments-form {"lock":{"move":false,"remove":true}} /-->
 
 <!-- wp:comments-title {"showPostTitle":false,"level":3,"lock":{"move":false,"remove":true}} /-->
@@ -34,4 +35,5 @@
 
 <!-- wp:comments-pagination-next /-->
 <!-- /wp:comments-pagination --></div>
-<!-- /wp:comments -->
+<!-- /wp:comments --></div>
+<!-- /wp:group -->
diff --git a/parts/comments-menu.html b/parts/comments-menu.html
@@ -4,6 +4,6 @@
     <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-outline comments-menu-toggle"><a class="wp-block-button__link wp-element-button">Comments</a></div>
     <!-- /wp:button --></div>
     <!-- /wp:buttons -->
-    
-    <!-- wp:template-part {"slug":"comments-contents","theme":"newspack-block-theme","tagName":"div","className":"comments-contents"} /--></div>
-    <!-- /wp:group -->
+
+    <!-- wp:template-part {"slug":"comments-contents","theme":"newspack-block-theme","tagName":"div","className":"comments-contents overlay-contents overlay-contents--right"} /--></div>
+    <!-- /wp:group -->
diff --git a/parts/desktop-header.html b/parts/desktop-header.html
@@ -1,6 +1,6 @@
-<!-- wp:group {"lock":{"move":true,"remove":true},"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"},"metadata":{"name":"Header"}} -->
-<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:0"><!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","style":{"spacing":{"padding":{"bottom":"0","top":"0","right":"0","left":"0"}}},"layout":{"type":"flex","justifyContent":"space-between"},"metadata":{"name":"Top"}} -->
-<div class="wp-block-group alignwide" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:site-logo {"lock":{"move":true,"remove":true}} /-->
+<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"Header"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"0","right":"var:preset|spacing|30","left":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|30","margin":{"bottom":"var:preset|spacing|80"}}},"backgroundColor":"base","layout":{"type":"constrained"}} -->
+<div class="wp-block-group has-base-background-color has-background" style="margin-bottom:var(--wp--preset--spacing--80);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 {"templateLock":false,"lock":{"move":false,"remove":false},"metadata":{"name":"Top"},"align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
+<div class="wp-block-group alignwide"><!-- wp:site-logo {"width":256,"lock":{"move":true,"remove":true}} /-->
 
 <!-- wp:buttons {"lock":{"move":true,"remove":false},"className":"has-small-size","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"fontSize":"x-small"} -->
 <div class="wp-block-buttons has-custom-font-size has-small-size has-x-small-font-size"><!-- wp:button -->
@@ -9,13 +9,9 @@
 <!-- /wp:buttons --></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"lock":{"move":true,"remove":true},"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"top"},"metadata":{"name":"Menu"}} -->
+<!-- wp:group {"lock":{"move":false,"remove":true},"metadata":{"name":"Menu"},"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
 <div class="wp-block-group alignwide"><!-- wp:navigation {"className":"primary-navigation","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"left","orientation":"horizontal","flexWrap":"wrap"},"style":{"typography":{"textTransform":"uppercase"}}} /-->
 
 <!-- wp:template-part {"slug":"search-menu","theme":"newspack-block-theme","tagName":"div","className":"search-menu"} /--></div>
 <!-- /wp:group --></div>
 <!-- /wp:group -->
-
-<!-- wp:spacer {"height":"var:preset|spacing|80","lock":{"move":true,"remove":true}} -->
-<div style="height:var(--wp--preset--spacing--80)" aria-hidden="true" class="wp-block-spacer"></div>
-<!-- /wp:spacer -->