build: Upgrade WordPress packages (#66)

* build: Upgrade development dependencies

* build: Upgrade @wordpress/icons

* build: Upgrade @wordpress/base-styles

* build: Upgrade @wordpress/preferences

* build: Upgrade remaining WordPress packages

Most of these depend upon one another and must be upgraded together.

* fix: Ensure block canvas background color renders behind child margins

The `display: flex;` declaration was removed in core:

WordPress/gutenberg#66706

Its removal causes the post title's margin to extend beyond its parent
boundaries, which caused the background color to not render the entire
height of the editor.

* refactor: Improve class name accuracy

Rename classes to match component file names.

* build: Downgrade eslint

The latest version is incompatible with Gutenberg ESLint configuration.

* Revert "build: Upgrade development dependencies"

This reverts commit 147de47.

* build: Upgrade non-ESLint development dependencies

Postpone ESLint upgrades due to various configuration conflicts.

* build: Upgrade eslint-plugin-react-refresh

* build: Upgrade @wordpress/eslint-plugin

* fix: Ensure block canvas fills its parent container width

This resolves a regression introduced from changes in the following PR.
Ideally we resolve this issue in Gutenberg core, rather than overriding
the styles within GutenbergKit.

WordPress/gutenberg#66706

* fix: Denote auto-draft status

If Apple and Google allowed programmatic focus of interactive elements
in web views, this would ensure the post title field is focused for new
drafts. However, Apple and Google require user interaction--e.g.,
taps--for the virtual keyboard to display.

Regardless, denoting the auto-draft status is likely still worthwhile.

package.json

@@ -15,34 +15,34 @@
 	},
 	"dependencies": {
 		"@wordpress/api-fetch": "^7.10",
-		"@wordpress/base-styles": "^5.14.0",
+		"@wordpress/base-styles": "^5.16.0",
 		"@wordpress/block-editor": "^14.5",
 		"@wordpress/block-library": "^9.10",
 		"@wordpress/core-data": "^7.10",
-		"@wordpress/edit-post": "^8.10",
+		"@wordpress/edit-post": "^8.16.0",
 		"@wordpress/editor": "^14.10",
 		"@wordpress/element": "^6.10",
-		"@wordpress/format-library": "^5.10",
-		"@wordpress/icons": "^10.12.0",
-		"@wordpress/preferences": "^4.10",
+		"@wordpress/format-library": "^5.16.0",
+		"@wordpress/icons": "^10.16.0",
+		"@wordpress/preferences": "^4.16.0",
 		"@wordpress/private-apis": "^1.10",
 		"@wordpress/rich-text": "^7.16.0",
 		"clsx": "^2.1.1",
 		"vite-plugin-node-polyfills": "^0.23.0"
 	},
 	"devDependencies": {
-		"@types/react": "^18.3",
-		"@types/react-dom": "^18.3",
+		"@types/react": "^19.0.8",
+		"@types/react-dom": "^19.0.3",
 		"@vitejs/plugin-react": "^4.3.4",
-		"@wordpress/dependency-extraction-webpack-plugin": "^6.6",
-		"@wordpress/eslint-plugin": "^21.5.0",
-		"@wordpress/prettier-config": "^4.3",
+		"@wordpress/dependency-extraction-webpack-plugin": "^6.16.0",
+		"@wordpress/eslint-plugin": "^22.2.0",
+		"@wordpress/prettier-config": "^4.16.0",
 		"eslint": "^8.57",
-		"eslint-plugin-react-refresh": "^0.4",
-		"magic-string": "^0.30",
+		"eslint-plugin-react-refresh": "^0.4.18",
+		"magic-string": "^0.30.17",
 		"patch-package": "^8.0.0",
-		"prettier": "^3.3",
-		"sass-embedded": "^1.83.0",
-		"vite": "^6.0.3"
+		"prettier": "^3.4.2",
+		"sass-embedded": "^1.83.4",
+		"vite": "^6.0.11"
 	}
 }

patches/@wordpress+editor+14.10.0.patch → patches/@wordpress+editor+14.16.0.patch

@@ -1,5 +1,5 @@
 diff --git a/node_modules/@wordpress/editor/build-module/private-apis.js b/node_modules/@wordpress/editor/build-module/private-apis.js
-index eb169ff..2b8528b 100644
+index c45347e..ab39c50 100644
 --- a/node_modules/@wordpress/editor/build-module/private-apis.js
 +++ b/node_modules/@wordpress/editor/build-module/private-apis.js
 @@ -9,6 +9,7 @@ import * as interfaceApis from '@wordpress/interface';
@@ -8,11 +8,11 @@ index eb169ff..2b8528b 100644
  import EditorContentSlotFill from './components/editor-interface/content-slot-fill';
 +import useBlockEditorSettings from './components/provider/use-block-editor-settings';
  import BackButton from './components/header/back-button';
- import CreateTemplatePartModal from './components/create-template-part-modal';
  import Editor from './components/editor';
-@@ -43,6 +44,7 @@ lock(privateApis, {
-   ResizableEditor,
+ import PluginPostExcerpt from './components/post-excerpt/plugin';
+@@ -47,6 +48,7 @@ lock(privateApis, {
    registerCoreBlockBindingsSources,
+   getTemplateInfo,
    // This is a temporary private API while we're updating the site editor to use EditorProvider.
 +  useBlockEditorSettings,
    interfaceStore,

src/components/editor/index.jsx

@@ -66,8 +66,8 @@ export default function Editor({ post, children }) {
 	}, []);
 
 	return (
-		<div className="gutenberg-kit-editor-interface">
-			<EditorLoadNotice className="gutenberg-kit-editor-interface__load-notice" />
+		<div className="gutenberg-kit-editor">
+			<EditorLoadNotice className="gutenberg-kit-editor__load-notice" />
 			<BlockEditorProvider
 				value={postBlocks}
 				onInput={onInput}

src/components/editor/style.scss

@@ -1,33 +1,32 @@
 $baseline-interactive-font-size: 17px;
 $min-menu-item-touch-target-size: 42px;
 
-.gutenberg-kit-editor-interface {
+.gutenberg-kit-editor {
 	-webkit-tap-highlight-color: transparent; // Rely upon UI components to communicate touch feedback
 	flex-grow: 1;
 }
 
-.gutenberg-kit-editor-interface__load-notice {
+.gutenberg-kit-editor__load-notice {
 	bottom: 62px;
 	left: 16px;
 	position: fixed;
 	right: 16px;
 }
 
-.gutenberg-kit-editor-interface .components-button {
+.gutenberg-kit-editor .components-button {
 	font-size: $baseline-interactive-font-size;
 }
 
-.gutenberg-kit-editor-interface .components-dropdown-menu__menu-item,
-.gutenberg-kit-editor-interface
+.gutenberg-kit-editor .components-dropdown-menu__menu-item,
+.gutenberg-kit-editor
 	.components-dropdown-menu__menu
 	.components-menu-item__button,
-.gutenberg-kit-editor-interface
+.gutenberg-kit-editor
 	.components-dropdown-menu__menu
 	.components-menu-item__button.components-button {
 	min-height: $min-menu-item-touch-target-size;
 }
 
-.gutenberg-kit-editor-interface
-	.components-autocomplete__result.components-button {
+.gutenberg-kit-editor .components-autocomplete__result.components-button {
 	min-height: $min-menu-item-touch-target-size;
 }

src/components/visual-editor/default-theme-styles.scss

@@ -3,7 +3,7 @@
   * unavailable or when the editor's theme styles feature is disabled.
   */
 
-.editor-visual-editor__post-title-wrapper .wp-block-post-title {
+.gutenberg-kit-visual-editor__post-title-wrapper .wp-block-post-title {
 	font-size: 20px; // Set reasonable default size for small screens
 }
 

src/components/visual-editor/index.jsx

@@ -56,12 +56,15 @@ function VisualEditor({ useRootPaddingAwareAlignments }) {
 
 	const styles = useEditorStyles();
 
-	const editorClasses = clsx('gutenberg-kit-editor', {
+	const editorClasses = clsx('gutenberg-kit-visual-editor', {
 		'has-root-padding': !useRootPaddingAwareAlignments,
 	});
-	const titleClasses = clsx('editor-visual-editor__post-title-wrapper', {
-		'has-global-padding': useRootPaddingAwareAlignments,
-	});
+	const titleClasses = clsx(
+		'gutenberg-kit-visual-editor__post-title-wrapper',
+		{
+			'has-global-padding': useRootPaddingAwareAlignments,
+		}
+	);
 	const blockListClasses = clsx({
 		'has-global-padding': useRootPaddingAwareAlignments,
 	});
@@ -76,7 +79,7 @@ function VisualEditor({ useRootPaddingAwareAlignments }) {
 			</BlockCanvas>
 
 			{isEditorReady && (
-				<EditorToolbar className="gutenberg-kit-editor__toolbar" />
+				<EditorToolbar className="gutenberg-kit-visual-editor__toolbar" />
 			)}
 
 			<Popover.Slot />

src/components/visual-editor/style.scss

@@ -1,4 +1,4 @@
-.gutenberg-kit-editor {
+.gutenberg-kit-visual-editor {
 	box-sizing: border-box;
 	flex-shrink: 0;
 	height: 100%;
@@ -9,22 +9,38 @@
 	width: 100%;
 }
 
-.gutenberg-kit-editor .editor-styles-wrapper {
+// TODO: Replace this `display` style--which ensures children margins are
+// contained, rendering the background color behind them--with a proper fix in
+// core.
+//
+// See the following related changes:
+// - https://github.com/WordPress/gutenberg/pull/66706
+// - https://github.com/WordPress/gutenberg/pull/66390
+.gutenberg-kit-visual-editor .block-editor-block-canvas {
+	display: flex;
+}
+
+.gutenberg-kit-visual-editor .editor-styles-wrapper {
 	// Ensure the toolbar does not overlap the content
 	padding-bottom: 56px;
 	// Remove outline to mirror default user agent styles for body elements, which
 	// is the element used for Gutenberg's iframed editor
 	outline: none;
+	// TODO: Ideally we resolve this in Gutenberg core. Ensures the styles wrapper
+	// fills its parent container.
+	//
+	// See: https://github.com/WordPress/gutenberg/pull/66706
+	width: 100%;
 }
 
 // Apply root level padding for themes that do not use the experimental
 // `useRootPaddingAwareAlignments` settings
-.gutenberg-kit-editor.has-root-padding .editor-styles-wrapper {
+.gutenberg-kit-visual-editor.has-root-padding .editor-styles-wrapper {
 	padding-left: 16px;
 	padding-right: 16px;
 }
 
-.gutenberg-kit-editor__toolbar {
+.gutenberg-kit-visual-editor__toolbar {
 	align-items: center;
 	bottom: 0;
 	left: 0;
@@ -36,17 +52,17 @@
 
 // HACK: Force a full-width inserter, consider replacing with a better inserter
 // popover implementation in the future.
-.gutenberg-kit-editor .block-editor-inserter__main-area {
+.gutenberg-kit-visual-editor .block-editor-inserter__main-area {
 	width: 100%;
 }
 
 // Prevent the popover from stealing focus away from the inserter, which results
 // in needing to tap a block type twice to insert it.
-.gutenberg-kit-editor .block-editor-block-popover {
+.gutenberg-kit-visual-editor .block-editor-block-popover {
 	display: none;
 }
 
-.gutenberg-kit-editor .components-editor-notices__snackbar {
+.gutenberg-kit-visual-editor .components-editor-notices__snackbar {
 	bottom: 58px;
 	left: 0;
 	padding-right: 8px;
@@ -58,7 +74,7 @@
 // Manually copy styles required by Gutenberg that are provided by the WP Admin
 // environment in the form of the `load-styles.php` utility.
 // https://github.com/WordPress/wordpress-develop/blob/a82874058f58575dbba64ce09b6dcbd43ccf5fdc/src/wp-admin/css/common.css#L2617-L2621
-.gutenberg-kit-editor :where(fieldset) {
+.gutenberg-kit-visual-editor :where(fieldset) {
 	border: 0;
 	padding: 0;
 	margin: 0;

src/utils/bridge.js

@@ -175,7 +175,7 @@ export function getPost() {
 	// We assign a temporary ID of -1.
 	return {
 		type: 'post',
-		status: 'draft',
+		status: 'auto-draft',
 		id: -1,
 	};
 }