Merge branch 'master' into alpha

.gitignore

@@ -26,6 +26,7 @@ Thumbs.db
 
 # Compiled CSS
 *.css
+style.css
 
 # Compiled Javascript
 /dist/

includes/class-core.php

@@ -40,6 +40,7 @@ public static function instance() {
 	public function __construct() {
 		\add_action( 'after_setup_theme', [ __CLASS__, 'theme_support' ] );
 		\add_action( 'wp_enqueue_scripts', [ __CLASS__, 'theme_styles' ] );
+		\add_action( 'enqueue_block_editor_assets', [ __CLASS__, 'editor_scripts' ] );
 	}
 
 	/**
@@ -80,6 +81,11 @@ public static function theme_styles() {
 		// Enqueue front-end JavaScript.
 		wp_enqueue_script( 'newspack-main', get_theme_file_uri( '/dist/main.js' ), array(), wp_get_theme()->get( 'Version' ), true );
 	}
+
+	public static function editor_scripts() {
+		// Enqueue editor JavaScript.
+		wp_enqueue_script( 'editor-script', get_theme_file_uri( '/dist/editor.js' ), array( 'wp-blocks', 'wp-dom' ), wp_get_theme()->get( 'Version' ), true );
+	}
 }
 
 Core::instance();

package.json

@@ -40,7 +40,7 @@
     "postinstall": "rm -rf node_modules/newspack-scripts/node_modules/prettier"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.2.0",
+    "@rushstack/eslint-patch": "^1.3.0",
     "eslint": "^7.32.0",
     "ignore-emit-webpack-plugin": "^2.0.6",
     "lint-staged": "^13.2.2",

parts/comments.html

@@ -34,7 +34,7 @@
 <!-- /wp:comments-pagination -->
 
 <!-- wp:spacer {"height":"var:preset|spacing|70"} -->
-<div style="height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div>
+<div style="height:var:preset|spacing|70" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:post-comments-form /--></div>

parts/mobile-sidebar.html

@@ -11,7 +11,7 @@
 <hr class="wp-block-separator has-text-color has-tertiary-color has-alpha-channel-opacity has-tertiary-background-color has-background"/>
 <!-- /wp:separator -->
 
-<!-- wp:navigation {"ref":146,"openSubmenusOnClick":true,"overlayMenu":"never","layout":{"type":"flex","setCascadingProperties":true,"orientation":"vertical"},"style":{"spacing":{"margin":{"top":"0"}}}} /-->
+<!-- wp:navigation {"ref":146,"overlayMenu":"never","className":"is-style-flatten","layout":{"type":"flex","setCascadingProperties":true,"orientation":"vertical"},"style":{"spacing":{"margin":{"top":"0"}}}} /-->
 
 <!-- wp:separator {"backgroundColor":"tertiary"} -->
 <hr class="wp-block-separator has-text-color has-tertiary-color has-alpha-channel-opacity has-tertiary-background-color has-background"/>

patterns/404.php

@@ -8,11 +8,11 @@
  */
 
 ?>
-
-<!-- wp:heading {"textAlign":"center","level":1,"fontSize":"x-large"} -->
-<h1 class="has-text-align-center has-x-large-font-size" id="oops-that-page-can-t-be-found"><?php echo esc_html__( 'Oops! That page can&rsquo;t be found.', 'newspack-block-theme' ); ?></h1>
+<!-- wp:heading {"textAlign":"center","level":1} -->
+<h1 class="wp-block-heading has-text-align-center">Page not found.</h1>
 <!-- /wp:heading -->
 
-<!-- wp:paragraph -->
-<p><?php echo esc_html__( 'It looks like nothing was found at this location. Maybe try a search?', 'newspack-block-theme' ); ?></p>
+<!-- wp:paragraph {"align":"center","fontSize":"x-large"} -->
+<p class="has-text-align-center has-x-large-font-size"><?php esc_html__( 'It looks like nothing was found at this location. Maybe try a search?', 'newspack-block-theme' ); ?></p>
 <!-- /wp:paragraph -->
+

patterns/hidden-no-results-content.php

@@ -10,15 +10,15 @@
 ?>
 <!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:spacer {"height":"var:preset|spacing|50"} -->
-<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
+<div style="height:var:preset|spacing|50" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:paragraph {"fontSize":"x-large"} -->
 <p class="has-x-large-font-size"><?php echo esc_html_x( 'Sorry, but nothing matched your search terms. Please try again with some different keywords.', 'Message explaining that there are no results returned from a search', 'newspack-block-theme' ); ?></p>
 <!-- /wp:paragraph -->
 
 <!-- wp:spacer {"height":"var:preset|spacing|70"} -->
-<div style="height:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div>
+<div style="height:var:preset|spacing|70" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50"}}},"fontSize":"x-large"} -->

src/js/editor/block-styles/navigation-styles.js

@@ -0,0 +1,9 @@
+// Add style to 'flatten' the Navigation block for mobile screens.
+// TODO: Restrict this to just the vertical block vatiation.
+// See: https://github.com/WordPress/gutenberg/issues/40621
+wp.domReady( () => {
+	wp.blocks.registerBlockStyle( 'core/navigation', {
+		name: 'flatten',
+		label: 'Flatten Vertical Navigation',
+	} );
+} );

src/js/editor/index.js

@@ -1,3 +1,2 @@
 import '../shared/_shared-module';
-
-console.log( 'editor JS single entrypoint file' );
+import './block-styles/navigation-styles.js';

src/scss/_gutenberg-shim.scss

@@ -20,12 +20,23 @@
  * Remove extra padding from navigation link when set to click to open.
  * https://github.com/WordPress/gutenberg/issues/50722
  */
- .wp-block-navigation {
-	.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
-		padding-left: 0;
+.wp-block-navigation {
+	&.is-vertical .wp-block-navigation-item.open-on-click {
+		.wp-block-navigation-submenu__toggle {
+			padding-left: 0;
+		}
+
+		.has-child .wp-block-navigation-submenu__toggle {
+			padding: 0.5em 1em;
+		}
 	}
 }
 
+/* Fix for hidden 'append' icons in editor */
+.has-background .wp-block-navigation .wp-block .wp-block .block-editor-button-block-appender {
+	color: inherit;
+}
+
 /*
  * Link styles
  * https://github.com/WordPress/gutenberg/issues/42319
@@ -77,5 +88,5 @@ input[type='datetime-local'],
 input[type='zip'],
 input[type='color'],
 textarea {
-	border-radius: 6px;
+	border-radius: var( --wp--custom--border--radius );
 }

src/scss/block-styles/_block-styles.scss

@@ -0,0 +1 @@
+@import url( './_navigation-styles.scss' );

src/scss/block-styles/_navigation-styles.scss

@@ -0,0 +1,59 @@
+.wp-block-navigation {
+	&.is-style-flatten {
+		// TODO: restrict this just to the vertical block variation.
+		// In the meantime, we'll use CSS so the styles are only applied there.
+		// See: https://github.com/WordPress/gutenberg/issues/40621.
+		&.is-vertical {
+			.wp-block-navigation-item {
+				flex-wrap: wrap;
+			}
+
+			.wp-block-navigation__submenu-icon {
+				display: none;
+			}
+
+			.wp-block-navigation__submenu-container {
+				overflow: visible;
+			}
+
+			&:not(.has-background) .wp-block-navigation__submenu-container {
+				background: transparent;
+			}
+
+			&:not( .has-text-color) .wp-block-navigation__submenu-container {
+				color: inherit;
+			}
+
+			.has-child {
+				gap: var(--wp--preset--spacing--30);
+
+				.wp-block-navigation__submenu-container {
+					border: 0;
+					border-radius: 0;
+					box-shadow: none;
+					gap: inherit;
+					height: unset;
+					padding: 0 0 0 var(--wp--preset--spacing--30);
+					position: static;
+					opacity: unset;
+					visibility: unset;
+				}
+
+				.wp-block-navigation__submenu-container,
+				.wp-block-navigation-submenu__toggle[aria-expanded='true']~.wp-block-navigation__submenu-container,
+				&:not(.open-on-click):hover>.wp-block-navigation__submenu-container {
+					width: 100%;
+				}
+
+				&.has-child-selected>.wp-block-navigation__submenu-container,
+				&.is-selected>.wp-block-navigation__submenu-container {
+					width: 100% !important;
+				}
+			}
+
+			&.has-background .has-child {
+				gap: var(--wp--preset--spacing--20);
+			}
+		}
+	}
+}

src/scss/blocks/_navigation.scss

@@ -1,10 +1,19 @@
+@use '../sass-utils';
+
 .wp-block-navigation {
 	// Give dropdowns a rounded border, a drop-shadow, and increase the top padding.
 	.wp-block-navigation__submenu-container {
-		border-radius: 6px;
+		border-radius: var( --wp--custom--border--radius );
 		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 		overflow: hidden;
-		padding: 0.5em 0;
+		padding: var(--wp--preset--spacing--20) 0;
+	}
+
+	@include sass-utils.media( medium ) {
+		// Adjust the vertical placement of the dropdowns to account for the extra padding.
+		.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
+			top: calc( -0.5em - 1px);
+		}
 	}
 
 	// Increase minimum dropdown width.
@@ -13,8 +22,20 @@
 		min-width: 240px;
 	}
 
+	// Don't add the box shadow/padding when using the default mobile view of the navigation block.
+	.wp-block-navigation__responsive-container.has-modal-open {
+		.wp-block-navigation__submenu-container {
+			box-shadow: none;
+			padding-bottom: 0;
+		}
+	}
+
 	// Change the block spacing when vertical.
-	&.is-layout-flex.is-vertical {
+	&.is-vertical {
 		gap: var(--wp--preset--spacing--40);
+
+		&.has-background {
+			gap: var(--wp--preset--spacing--30);
+		}
 	}
 }

src/scss/blocks/_pagination.scss

@@ -2,7 +2,7 @@
 .wp-block-comments-pagination-numbers {
 	a,
 	span {
-		border-radius: 6px;
+		border-radius: var( --wp--custom--border--radius );
 		padding: 0.5rem 0.8rem;
 	}
 

src/scss/blocks/_search.scss

@@ -1,3 +1,35 @@
-.wp-block-search__button svg {
-	vertical-align: middle
-}
+.wp-block-search {
+
+	.wp-block-search__button.has-icon {
+		line-height: 1;
+		padding: 0.75rem;
+
+		svg {
+			min-height: var(--wp--preset--spacing--40);
+			min-width: var(--wp--preset--spacing--40);
+			vertical-align: middle;
+		}
+	}
+
+	&__button-inside {
+		.wp-block-search__inside-wrapper {
+			border-radius: var( --wp--custom--border--radius );
+			box-sizing: border-box;
+		}
+
+		.wp-block-search__button {
+			border-radius: calc( var( --wp--custom--border--radius ) / 2 );
+		}
+
+		&.wp-block-search__icon-button {
+			.wp-block-search__inside-wrapper {
+				padding: calc( var(--wp--preset--spacing--20) - 1px ); // maddening, but the math isn't working -- the search should be 52px tall, but is 54px.
+			}
+
+			.wp-block-search__button {
+				padding: 0.375rem;
+			}
+		}
+	}
+}
+

src/scss/style.scss

@@ -3,4 +3,5 @@
 @import url( './_base.scss' );
 @import url( './_gutenberg-shim.scss' );
 @import url( './blocks/_blocks.scss' );
+@import url( './block-styles/_block-styles.scss' );
 @import url( './_header.scss' );