H2 Next

.build-script

@@ -1,23 +1,25 @@
 #!/bin/bash
 
-set -e
+set -euo pipefail
 
 if [ -d "$HOME/.nvm" ]; then
 	export NVM_DIR="$HOME/.nvm"
 	[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
 
-	NODE_VERSION=`nvm current`
+	NODE_VERSION="$( nvm current )"
 
-	nvm install v12
-	nvm use v12
+	nvm install
+	nvm use
 fi
 
-npm ci
+# iltorb is not compatible with current Node releases and is not required for
+# the webpack build.
+npm ci --ignore-scripts
 npm run build
 
 # clean-up
 rm -rf node_modules
 
-if command -v nvm; then
-	nvm use $NODE_VERSION
+if command -v nvm && [[ "$NODE_VERSION" != "none" && "$NODE_VERSION" != "N/A" ]]; then
+	nvm use "$NODE_VERSION"
 fi

.nvmrc

@@ -1 +1 @@
-v12
+v24

.storybook/preview-head.html

@@ -10,6 +10,9 @@
 	},
 	preload: {},
 	features: {},
+	has: {
+		notifications: false,
+	},
 };
 window.wpApiSettings = {};
 </script>

inc/namespace.php

@@ -362,6 +362,7 @@ function get_script_data() {
 		'asset_url' => get_theme_file_uri( 'build/' ),
 		'site' => [
 			'name'           => get_bloginfo( 'name' ),
+			'description'    => get_bloginfo( 'description' ),
 			'url'            => site_url(),
 			'home'           => home_url(),
 			'api'            => rest_url(),
@@ -376,6 +377,9 @@ function get_script_data() {
 			'emoji'          => apply_filters( 'h2.custom_emoji', [] ),
 		],
 		'features' => [],
+		'has' => [
+			'notifications' => defined( 'FALCON_PATH' ),
+		],
 		'plugins' => [
 			'reactions' => \class_exists( 'H2\\Reactions\\Reaction' ),
 		],
@@ -402,7 +406,7 @@ function get_script_data() {
 		}
 	}
 
-	return $data;
+	return apply_filters( 'h2.script_data', $data );
 }
 
 /**
@@ -536,6 +540,7 @@ function register_rest_routes() {
 		'methods' => 'POST',
 		'callback' => __NAMESPACE__ . '\\render_preview',
 		'permission_callback' => function () {
+			// Anyone who can comment or write can preview.
 			return is_user_logged_in();
 		},
 		'args' => [

src/App.css

@@ -11,26 +11,21 @@
 }
 
 .Outer {
-	margin: 0 auto;
-	display: flex;
-	max-width: 1200px;
+	/* display: flex; */
 }
 
 .Inner {
 	flex-direction: column;
-	width: 65%;
-	max-width: 800px;
+	/* width: 65%; */
 }
 
 @media ( min-width: 800px ) {
 	.App > .Outer > aside {
 		position: sticky;
 		top: 0;
 		height: 100vh;
-		margin-left: 5%;
 		overflow: hidden;
 		overflow-y: scroll;
-		width: 30%;
 		flex-shrink: 0;
 	}
 }

src/App.js

@@ -18,9 +18,13 @@ import WritePost from './components/Post/Write';
 import Profile from './components/Profile';
 import SessionExpiredWarning from './components/SessionExpiredWarning';
 import Sidebar from './components/Sidebar';
+import CategoriesSidebar from './components/Sidebar/Categories';
 import CommentsSidebar from './components/Sidebar/Comments';
-import SuperMenu from './components/SuperMenu';
+import PagesSidebar from './components/Sidebar/Pages';
+import PostsSidebar from './components/Sidebar/Posts';
+import SuperOverlay from './components/Super';
 import { RenderPlugins } from './plugins';
+import { posts } from './types';
 
 import './App.css';
 
@@ -33,6 +37,7 @@ class App extends Component {
 			isShowingWritePost: false,
 			showChanges: false,
 		};
+		this.headerRef = React.createRef();
 	}
 	onLogOut() {
 		window.location.href = '/wp-login.php?action=logout';
@@ -68,6 +73,19 @@ class App extends Component {
 		}
 	}
 
+	onToggleSuper = () => {
+		if ( this.props.showingSuper ) {
+			this.props.onHideSuperSidebar();
+		} else {
+			this.props.onShowSuperSidebar();
+		}
+	}
+
+	onShowChanges = () => {
+		this.setState( { showChanges: true } );
+		this.props.onHideSuperSidebar();
+	}
+
 	onClickWritePost() {
 		this.setState( { isShowingWritePost: true } );
 	}
@@ -80,9 +98,10 @@ class App extends Component {
 		this.props.history.push( string ? `/search/${ encodeURIComponent( string ) }` : '/' );
 	}
 
-	onDidCreatePost( post ) {
+	onDidCreatePost() {
 		this.setState( { isShowingWritePost: false } );
-		this.props.history.push( post.link.replace( /^(?:\/\/|[^/]+)*\//, '/' ) );
+		this.props.history.push( '/' );
+		this.props.onRefreshPostStream();
 	}
 
 	renderSidebar() {
@@ -111,6 +130,27 @@ class App extends Component {
 					/>
 				);
 
+			case 'categories':
+				return (
+					<CategoriesSidebar
+						onClose={ this.props.onDismissSidebar }
+					/>
+				);
+
+			case 'pages':
+				return (
+					<PagesSidebar
+						onClose={ this.props.onDismissSidebar }
+					/>
+				);
+
+			case 'posts':
+				return (
+					<PostsSidebar
+						onClose={ this.props.onDismissSidebar }
+					/>
+				);
+
 			default:
 				return <Sidebar />;
 		}
@@ -120,24 +160,29 @@ class App extends Component {
 		return (
 			<div className="App">
 				<OverlayContainer />
-				<SuperMenu
-					visible={ this.props.showingSuper }
-					onClose={ this.props.onHideSuperSidebar }
-					onSearch={ search => this.onSearch( search ) }
-					onShowChanges={ () => {
-						this.setState( { showChanges: true } );
-						this.props.onHideSuperSidebar();
-					} }
-				/>
-				<Header
-					onLogOut={ () => this.onLogOut() }
-					onWritePost={ () => this.onClickWritePost() }
-					onSearch={ search => this.onSearch( search ) }
-					onShowSuper={ this.props.onShowSuperSidebar }
-				/>
+				{ /* Keep the header above the overlay, so its search input stays usable. */ }
+				<div
+					ref={ this.headerRef }
+					className={ this.props.showingSuper ? 'relative z-30' : undefined }
+				>
+					<Header
+						superActive={ this.props.showingSuper }
+						onLogOut={ () => this.onLogOut() }
+						onWritePost={ () => this.onClickWritePost() }
+						onSearch={ search => this.onSearch( search ) }
+						onShowSuper={ this.onToggleSuper }
+					/>
+				</div>
+				{ this.props.showingSuper && (
+					<SuperOverlay
+						headerRef={ this.headerRef }
+						onShowChanges={ this.onShowChanges }
+					/>
+				) }
 				<SessionExpiredWarning />
-				<div className="Outer">
-					<div className="Inner">
+				<div className="Outer grid grid-cols-[min(30%,360px)_auto] gap-12">
+					{ this.renderSidebar() }
+					<div className="Inner max-w-200">
 						{ this.state.isShowingWritePost ? (
 							<WritePost
 								onDidCreatePost={ post => this.onDidCreatePost( post ) }
@@ -146,6 +191,15 @@ class App extends Component {
 						) : null }
 
 						<Switch>
+							<Route
+								path="/write"
+								exact
+								render={ () => (
+									<WritePost
+										onDidCreatePost={ post => this.onDidCreatePost( post ) }
+									/>
+								) }
+							/>
 							<Route
 								path="/author/:authorSlug/:hasPage(page)?/:page(\d+)?"
 								exact
@@ -183,7 +237,6 @@ class App extends Component {
 							/>
 						</Switch>
 					</div>
-					{ this.renderSidebar() }
 				</div>
 				{ this.state.showChanges ? (
 					<Changes
@@ -211,6 +264,7 @@ const mapDispatchToProps = dispatch => {
 		onDismissSidebar: () => dispatch( hideSidebar() ),
 		onHideSuperSidebar: () => dispatch( hideSuperSidebar() ),
 		onShowSuperSidebar: () => dispatch( showSuperSidebar() ),
+		onRefreshPostStream: () => dispatch( posts.fetchArchive( '' ) ),
 	};
 };
 

src/_print.scss

@@ -4,7 +4,7 @@
 	.Sidebar-Container,
 	.Header,
 	.Overlay,
-	.SuperMenu,
+	.Super,
 	.Post__actions,
 	.Post-Summary-actions button,
 	.Post-Summary-people,

src/actions.js

@@ -2,9 +2,13 @@ export const REGISTER_PLUGIN = 'REGISTER_PLUGIN';
 export const SHOW_META_SIDEBAR = 'SHOW_META_SIDEBAR';
 export const SHOW_SIDEBAR_PROFILE = 'SHOW_SIDEBAR_PROFILE';
 export const SHOW_SIDEBAR_COMMENTS = 'SHOW_SIDEBAR_COMMENTS';
+export const SHOW_SIDEBAR_CATEGORIES = 'SHOW_SIDEBAR_CATEGORIES';
+export const SHOW_SIDEBAR_PAGES = 'SHOW_SIDEBAR_PAGES';
+export const SHOW_SIDEBAR_POSTS = 'SHOW_SIDEBAR_POSTS';
 export const HIDE_SIDEBAR = 'HIDE_SIDEBAR';
 export const SHOW_SUPER_SIDEBAR = 'SHOW_SUPER_SIDEBAR';
 export const HIDE_SUPER_SIDEBAR = 'HIDE_SUPER_SIDEBAR';
+export const SET_SUPER_SEARCH = 'SET_SUPER_SEARCH';
 export const ENABLE_BETA_FEATURE = 'ENABLE_BETA_FEATURE';
 export const DISABLE_BETA_FEATURE = 'DISABLE_BETA_FEATURE';
 export const SET_DEFAULT_POST_VIEW = 'SET_DEFAULT_POST_VIEW';
@@ -25,13 +29,28 @@ export const showSidebarComments = id => {
 	};
 };
 
+export const showSidebarCategories = () => ( { type: SHOW_SIDEBAR_CATEGORIES } );
+export const showSidebarPages = () => ( { type: SHOW_SIDEBAR_PAGES } );
+export const showSidebarPosts = () => ( { type: SHOW_SIDEBAR_POSTS } );
+
 export const hideSidebar = () => ( { type: HIDE_SIDEBAR } );
 
 export const showMetaSidebar = () => ( { type: SHOW_META_SIDEBAR } );
 
 export const showSuperSidebar = () => ( { type: SHOW_SUPER_SIDEBAR } );
 export const hideSuperSidebar = () => ( { type: HIDE_SUPER_SIDEBAR } );
 
+/**
+ * Set the term for network-wide search in the super overlay.
+ *
+ * @param {string} search Search term.
+ * @returns {object} Action.
+ */
+export const setSuperSearch = search => ( {
+	type: SET_SUPER_SEARCH,
+	search,
+} );
+
 export const enableBetaFeature = feature => ( {
 	type: ENABLE_BETA_FEATURE,
 	feature,

src/changelog.js

@@ -125,6 +125,21 @@ export const changes = [
 			</React.Fragment>
 		),
 	},
+	{
+		date: '2026-09-03',
+		title: 'Switch Sites & Search the Network',
+		content: () => (
+			<React.Fragment>
+				<p>The button in the top left now opens an overview of
+					every site on your network, so you can jump between
+					them with a single click.</p>
+				<p>While it's open, the search bar searches posts and
+					comments across all of your sites at once. Narrow the
+					results down by site, type or date, and sort them by
+					relevance or by date.</p>
+			</React.Fragment>
+		),
+	},
 ];
 
 export function getChanges( lastView ) {