Next: add Gutenberg for frontend authoring

.config/webpack.config.dev.js

@@ -11,6 +11,12 @@ addFilter( 'presets/stylesheet-loaders', ( rule ) => {
 	return {
 		test: /\.s?css$/,
 		oneOf: [
+			{ resourceQuery: /raw/, type: 'asset/source' },
+			{
+				resourceQuery: /inline/,
+				type: 'asset/source',
+				use: rule.use.slice( 2 ), // postcss-loader + sass-loader
+			},
 			{ test: /\.css$/, use: useWithoutSass },
 			{ test: /\.scss$/, use: rule.use },
 		],
@@ -52,25 +58,39 @@ cleanOnExit( [
 	filePath( 'build/development-asset-manifest.json' ),
 ] );
 
-module.exports = choosePort( 9090 ).then( port => presets.development( {
-	devServer: {
-		host: 'localhost',
-		port,
-	},
-	entry: {
-		h2: filePath( 'src/index.js' ),
-		// Editor styles require the production build.
-	},
-	output: {
-		filename: '[name].[hash].js',
-		chunkFilename: '[name].chunk.[hash].js',
-	},
-	resolve: {
-		alias: {
-			'juniper-images': filePath( 'src/assets/images' ),
+module.exports = choosePort( 9090 ).then( port => {
+	const config = presets.development( {
+		devServer: {
+			host: 'localhost',
+			port,
 		},
-	},
-	plugins: [
-		new WatchContentFilesPlugin(),
-	],
-} ) );
+		entry: {
+			h2: filePath( 'src/index.js' ),
+			// Editor styles require the production build.
+		},
+		output: {
+			filename: '[name].[hash].js',
+			chunkFilename: '[name].chunk.[hash].js',
+		},
+		resolve: {
+			alias: {
+				'juniper-images': filePath( 'src/assets/images' ),
+
+				// format-library's package exports omit its stylesheet.
+				'@wordpress/format-library/build-style': filePath( 'node_modules/@wordpress/format-library/build-style' ),
+			},
+		},
+		plugins: [
+			new WatchContentFilesPlugin(),
+		],
+	} );
+
+	// Allow non-fully-specified imports from packages like `diff` used by
+	// @wordpress/block-editor (webpack 5 strict ESM compatibility).
+	config.module.rules.unshift( {
+		test: /\.m?js/,
+		resolve: { fullySpecified: false },
+	} );
+
+	return config;
+} );

.config/webpack.config.prod.js

@@ -12,6 +12,12 @@ addFilter( 'presets/stylesheet-loaders', ( rule ) => {
 	return {
 		test: /\.s?css$/,
 		oneOf: [
+			{ resourceQuery: /raw/, type: 'asset/source' },
+			{
+				resourceQuery: /inline/,
+				type: 'asset/source',
+				use: rule.use.slice( 2 ), // postcss-loader + sass-loader
+			},
 			{ test: /\.css$/, use: useWithoutSass },
 			{ test: /\.scss$/, use: rule.use },
 		],
@@ -72,6 +78,9 @@ module.exports = presets.production( {
 	resolve: {
 		alias: {
 			'juniper-images': filePath( 'src/assets/images' ),
+
+			// format-library's package exports omit its stylesheet.
+			'@wordpress/format-library/build-style': filePath( 'node_modules/@wordpress/format-library/build-style' ),
 		},
 	},
 	cache: {
@@ -86,3 +95,10 @@ module.exports = presets.production( {
 module.exports.optimization.minimizer = module.exports.optimization.minimizer.filter( minimizer => {
 	return minimizer.constructor.name !== 'CssMinimizerPlugin';
 } );
+
+// Allow non-fully-specified imports from packages like `diff` used by
+// @wordpress/block-editor (webpack 5 strict ESM compatibility).
+module.exports.module.rules.unshift( {
+	test: /\.m?js/,
+	resolve: { fullySpecified: false },
+} );

inc/namespace.php

@@ -24,6 +24,11 @@ function adjust_default_filters() {
 	// Add make_clickable to posts.
 	add_filter( 'the_content', 'make_clickable', 9 );
 
+	// Render comments written in the block editor. Users without unfiltered_html
+	// have the block delimiters stripped by kses anyway, so for them this is a
+	// no-op on plain HTML.
+	add_filter( 'comment_text', 'do_blocks', 7 );
+
 	// Normalize entities for easier decoding.
 	add_filter( 'the_title', 'ent2ncr', 11 );
 

package.json

@@ -38,21 +38,33 @@
     "webpack-dev-server": "^4.9.0"
   },
   "dependencies": {
+    "@babel/runtime": "^7.29.2",
     "@humanmade/react-tasklist": "^0.0.4",
     "@humanmade/repress": "^0.5.0",
     "@iarna/word-count": "^1.0.3",
     "@sentry/browser": "^5.9.1",
     "@storybook/addon-actions": "^5.2.0",
+    "@wordpress/api-fetch": "^7.44.0",
+    "@wordpress/block-editor": "^15.17.0",
+    "@wordpress/block-library": "^9.44.0",
+    "@wordpress/blocks": "^15.17.0",
+    "@wordpress/components": "^32.6.0",
+    "@wordpress/compose": "^7.44.0",
+    "@wordpress/data": "^10.44.0",
+    "@wordpress/format-library": "5.44.0",
+    "@wordpress/hooks": "4.44.0",
+    "@wordpress/icons": "^12.2.0",
     "emoji-mart": "^2.11.1",
     "interweave": "^11.1.0",
     "lodash": "^4.17.19",
     "marked": "^4.0.16",
     "mousetrap": "^1.6.2",
     "postcss": "^8.4.14",
     "prop-types": "^15.7.2",
-    "react": "^16.9.0",
+    "qs": "^6.15.0",
+    "react": "^18.3.1",
     "react-content-loader": "^2.0.2",
-    "react-dom": "^16.9.0",
+    "react-dom": "^18.3.1",
     "react-intl": "^2.4.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.3.1",
@@ -88,5 +100,11 @@
     {
       "path": "./build/h2.*.js"
     }
-  ]
+  ],
+  "pnpm": {
+    "overrides": {
+      "@wordpress/private-apis": "1.44.0",
+      "@wordpress/hooks": "4.44.0"
+    }
+  }
 }

src/App.css

@@ -49,6 +49,33 @@
 	}
 }
 
+/* The block editor takes over the main column at full height. */
+.App > .Outer > .Inner > .PostBlockEditor {
+	height: 100vh;
+	overflow: hidden;
+}
+
+@media ( min-width: 800px ) {
+	.App > .Outer > .Inner > .PostBlockEditor {
+		position: sticky;
+		top: 0;
+	}
+}
+
+@media screen and ( min-width: 600px ) and ( max-width: 782px ) {
+	body.admin-bar .App > .Outer > .Inner > .PostBlockEditor {
+		top: 46px;
+		height: calc( 100vh - 46px );
+	}
+}
+
+@media ( min-width: 783px ) {
+	body.admin-bar .App > .Outer > .Inner > .PostBlockEditor {
+		top: 32px;
+		height: calc( 100vh - 32px );
+	}
+}
+
 .App a {
 	border: none;
 }

src/App.js

@@ -160,9 +160,9 @@ class App extends Component {
 					onShowSuper={ this.props.onShowSuperSidebar }
 				/>
 				<SessionExpiredWarning />
-				<div className="Outer grid grid-cols-[min(30%,360px)_auto] gap-12">
+				<div className="Outer grid grid-cols-[min(30%,360px)_auto] gap-12 has-[.PostBlockEditor]:gap-0">
 					{ this.renderSidebar() }
-					<div className="Inner max-w-200">
+					<div className="Inner max-w-200 min-w-0 has-[.PostBlockEditor]:max-w-none">
 						{ this.state.isShowingWritePost ? (
 							<WritePost
 								onDidCreatePost={ post => this.onDidCreatePost( post ) }

src/components/Comment.js

@@ -110,6 +110,7 @@ export class Comment extends Component {
 							<Notification>Loading…</Notification>
 						) : (
 							<Editor
+								allowBlocks
 								initialValue={ comment.unprocessed_content || comment.content.raw }
 								submitText={ this.state.isSubmitting ? 'Updating…' : 'Update' }
 								onCancel={ () => this.setState( { isEditing: false } ) }

src/components/Editor/BlockEditor.css

@@ -0,0 +1,57 @@
+/* Editor chrome (header toolbar, sidebar) for the block editor. */
+
+/* Document tools: inserter, undo, redo. */
+.BlockEditor-document-tools.components-accessible-toolbar {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+	height: 100%;
+	padding: 0 8px;
+	border: none;
+	border-right: 1px solid #d9d9d9;
+	border-radius: 0;
+}
+
+.BlockEditor-document-tools .components-toolbar-group {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding: 0;
+	border: none;
+}
+
+/* The block toolbar sits in the header rather than floating over the canvas. */
+.BlockEditor-toolbar .block-editor-block-contextual-toolbar {
+	position: static;
+	display: flex;
+	align-items: center;
+	flex: 1 1 auto;
+	width: auto;
+	min-width: 0;
+	height: 100%;
+	margin: 0;
+	border: none;
+	border-radius: 0;
+	background: transparent;
+	box-shadow: none;
+}
+
+.BlockEditor-toolbar .block-editor-block-toolbar {
+	align-items: center;
+	height: 100%;
+}
+
+/* Sidebar panels are already bordered by the sidebar itself. */
+.BlockEditor-sidebar .components-panel {
+	border: none;
+}
+
+/* The inline (comment) editor has no other header controls. */
+.BlockEditor--inline .BlockEditor-document-tools.components-accessible-toolbar {
+	border-right: none;
+}
+
+/* @-mention suggestions. */
+.BlockEditor-mention .components-autocomplete__result {
+	padding: 4px 8px;
+}