prep build 10/25

.eslintrc.js

@@ -356,18 +356,6 @@ module.exports = {
 				],
 			},
 		},
-		{
-			files: [
-				// Components package.
-				'packages/components/src/**/*.[tj]s?(x)',
-				// Navigation block.
-				'packages/block-library/src/navigation/**/*.[tj]s?(x)',
-			],
-			excludedFiles: [ ...developmentFiles ],
-			rules: {
-				'react-hooks/exhaustive-deps': 'error',
-			},
-		},
 		{
 			files: [ 'packages/jest*/**/*.js', '**/test/**/*.js' ],
 			excludedFiles: [ 'test/e2e/**/*.js', 'test/performance/**/*.js' ],

backport-changelog/6.8/7642.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/7642
+
+* https://github.com/WordPress/gutenberg/pull/66431

bin/api-docs/gen-theme-reference.mjs

@@ -9,6 +9,7 @@
  */
 import fs from 'node:fs/promises';
 import $RefParser from '@apidevtools/json-schema-ref-parser';
+import { fileURLToPath } from 'node:url';
 
 /**
  * @typedef {import('@apidevtools/json-schema-ref-parser').JSONSchema} JSONSchema
@@ -19,19 +20,20 @@ import $RefParser from '@apidevtools/json-schema-ref-parser';
  *
  * @type {URL}
  */
-const THEME_JSON_SCHEMA_URL = new URL(
-	'../../schemas/json/theme.json',
-	import.meta.url
+const THEME_JSON_SCHEMA_PATH = fileURLToPath(
+	new URL( '../../schemas/json/theme.json', import.meta.url )
 );
 
 /**
  * Path to docs file.
  *
  * @type {URL}
  */
-const REFERENCE_DOC_URL = new URL(
-	'../../docs/reference-guides/theme-json-reference/theme-json-living.md',
-	import.meta.url
+const REFERENCE_DOC_PATH = fileURLToPath(
+	new URL(
+		'../../docs/reference-guides/theme-json-reference/theme-json-living.md',
+		import.meta.url
+	)
 );
 
 /**
@@ -265,15 +267,12 @@ function generateDocs( themeJson ) {
  * Main function.
  */
 async function main() {
-	const themeJson = await $RefParser.dereference(
-		THEME_JSON_SCHEMA_URL.pathname,
-		{
-			parse: { binary: false, text: false, yaml: false },
-			resolve: { external: false },
-		}
-	);
+	const themeJson = await $RefParser.dereference( THEME_JSON_SCHEMA_PATH, {
+		parse: { binary: false, text: false, yaml: false },
+		resolve: { external: false },
+	} );
 
-	const themeJsonReference = await fs.readFile( REFERENCE_DOC_URL, {
+	const themeJsonReference = await fs.readFile( REFERENCE_DOC_PATH, {
 		encoding: 'utf8',
 		flag: 'r',
 	} );
@@ -285,7 +284,7 @@ async function main() {
 		`${ START_TOKEN }\n${ generatedDocs }\n${ END_TOKEN }`
 	);
 
-	await fs.writeFile( REFERENCE_DOC_URL, updatedThemeJsonReference, {
+	await fs.writeFile( REFERENCE_DOC_PATH, updatedThemeJsonReference, {
 		encoding: 'utf8',
 	} );
 }

docs/contributors/code/README.md

@@ -4,13 +4,13 @@ A guide on how to get started contributing code to the Gutenberg project.
 
 ## Discussions
 
-The [Make WordPress Core blog](https://make.wordpress.org/core/) is the primary spot for the latest information around WordPress development: including announcements, product goals, meeting notes, meeting agendas, and more.
+The [Make WordPress Core blog](https://make.wordpress.org/core/) is the primary spot for the latest information around WordPress development, including announcements, product goals, meeting notes, meeting agendas, and more.
 
-Real-time discussions for development take place in `#core-editor` and `#core-js` channels in [Make WordPress Slack](https://make.wordpress.org/chat) (registration required). Weekly meetings for the editor component are on Wednesdays at 14:00UTC, and for the JavaScript component on Tuesday at 15:00UTC, in their respective Slack channels.
+Development discussions take place in real-time in the `#core-editor` and `#core-js` channels in [Make WordPress Slack](https://make.wordpress.org/chat) (registration required).
 
 ## Development Hub
 
-The Gutenberg project uses GitHub for managing code and tracking issues. The main repository is at: [https://github.com/WordPress/gutenberg](https://github.com/WordPress/gutenberg).
+The Gutenberg project uses GitHub to manage code and track issues. The main repository is at: [https://github.com/WordPress/gutenberg](https://github.com/WordPress/gutenberg).
 
 Browse [the issues list](https://github.com/wordpress/gutenberg/issues) to find issues to work on. The [good first issue](https://github.com/wordpress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22Good+First+Issue%22) and [good first review](https://github.com/WordPress/gutenberg/pulls?q=is%3Aopen+is%3Apr+label%3A%22Good+First+Review%22) labels are good starting points.
 

lib/compat/wordpress-6.8/remove-default-css.php

@@ -0,0 +1,11 @@
+<?php
+
+function gutenberg_remove_default_css( $hook ) {
+	// Maybe also remove on post.php when Gutenberg is enabled for posts.
+	if ( 'site-editor.php' !== $hook ) {
+		return;
+	}
+	wp_dequeue_style( 'colors' );
+}
+
+add_action( 'admin_enqueue_scripts', 'gutenberg_remove_default_css' );

lib/load.php

@@ -47,6 +47,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require __DIR__ . '/compat/wordpress-6.7/rest-api.php';
 
 	// WordPress 6.8 compat.
+	require __DIR__ . '/compat/wordpress-6.8/remove-default-css.php';
 	require __DIR__ . '/compat/wordpress-6.8/block-comments.php';
 	require __DIR__ . '/compat/wordpress-6.8/class-gutenberg-rest-comment-controller-6-8.php';
 

packages/README.md

@@ -4,10 +4,11 @@ This repository uses [npm workspaces](https://docs.npmjs.com/cli/v10/using-npm/w
 
 ## Creating a New Package
 
-When creating a new package, you need to provide at least the following:
+When creating a new package, you need to provide at least the following. Packages bundled in Gutenberg or WordPress must include a `wpScript` and or `wpScriptModuleExports` field in their `package.json` file. See the details below.
 
 1. `package.json` based on the template:
-    ```json
+
+    ```jsonc
     {
     	"name": "@wordpress/package-name",
     	"version": "1.0.0-prerelease",
@@ -32,10 +33,39 @@ When creating a new package, you need to provide at least the following:
     	},
     	"publishConfig": {
     		"access": "public"
-    	}
+    	},
+    	// Include this line to include the package as a WordPress script.
+    	"wpScript": true,
+    	// Include this line to include the package as a WordPress script module.
+    	"wpScriptModuleExports": "./build-module/index.js"
     }
     ```
+
     This assumes that your code is located in the `src` folder and will be transpiled with `Babel`.
+
+    For packages that should ship as a WordPress script, include `wpScript: true` in the `package.json` file. This tells the build system to bundle the package for use as a WordPress script.
+
+    For packages that should ship as a WordPress script module, include a `wpScriptModuleExports` field the `package.json` file. The value of this field can be a string to expose a single script module, or an object with a [shape like the standard `exports` object](https://nodejs.org/docs/latest-v20.x/api/packages.html#subpath-exports) to expose multiple script modules from a single package:
+
+    ```jsonc
+    {
+    	"name": "@wordpress/example",
+
+    	// The string form exposes the `@wordpress/example` script module.
+    	"wpScriptModuleExports": "./build-module/index.js",
+
+    	// Multiple sub-modules can be exposed by providing an object:
+    	"wpScriptModuleExports": {
+    		// Exposed as `@wordpress/example` script module.
+    		".": "./build-module/index.js",
+    		// Exposed as `@wordpress/example/demo-block/view` script module.
+    		"./demo-block/view": "./build-module/index.js"
+    	}
+    }
+    ```
+
+    Both `wpScript` and `wpScriptModuleExports` may be included if the package exposes both a script and a script module.
+
 1. `README.md` file containing at least:
     - Package name
     - Package description

packages/block-editor/src/components/block-list/block.native.js

@@ -320,7 +320,6 @@ function BlockListBlock( {
 			name,
 			fontSizes || EMPTY_ARRAY
 		);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		// It is crucial to keep the dependencies array minimal to prevent unnecessary calls that could negatively impact performance.
 		// JSON.stringify is used for the following purposes:
@@ -329,11 +328,8 @@ function BlockListBlock( {
 		// 2. To filter the attributes object, ensuring that only the relevant attributes (included in
 		//    GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES) are considered as dependencies. This reduces the likelihood of
 		//    unnecessary useMemo calls when other, unrelated attributes change.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		JSON.stringify( globalStyle ),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		JSON.stringify( wrapperProps?.style ),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		JSON.stringify(
 			Object.fromEntries(
 				Object.entries( attributes ?? {} ).filter( ( [ key ] ) =>

packages/block-editor/src/components/iframe/content.scss

@@ -1,6 +1,5 @@
 .block-editor-iframe__body {
 	position: relative;
-	border: 0.01px solid transparent;
 }
 
 .block-editor-iframe__html {

packages/block-editor/src/components/inner-blocks/index.js

@@ -202,10 +202,17 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				getBlockSettings,
 				getSectionRootClientId,
 			} = unlock( select( blockEditorStore ) );
-			let _isDropZoneDisabled;
 
 			if ( ! clientId ) {
-				return { isDropZoneDisabled: _isDropZoneDisabled };
+				const sectionRootClientId = getSectionRootClientId();
+				// Disable the root drop zone when zoomed out and the section root client id
+				// is not the root block list (represented by an empty string).
+				// This avoids drag handling bugs caused by having two block lists acting as
+				// drop zones - the actual 'root' block list and the section root.
+				return {
+					isDropZoneDisabled:
+						isZoomOut() && sectionRootClientId !== '',
+				};
 			}
 
 			const { hasBlockSupport, getBlockType } = select( blocksStore );
@@ -214,14 +221,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 			const parentClientId = getBlockRootClientId( clientId );
 			const [ defaultLayout ] = getBlockSettings( clientId, 'layout' );
 
-			_isDropZoneDisabled = blockEditingMode === 'disabled';
+			let _isDropZoneDisabled = blockEditingMode === 'disabled';
 
 			if ( isZoomOut() ) {
 				// In zoom out mode, we want to disable the drop zone for the sections.
 				// The inner blocks belonging to the section drop zone is
 				// already disabled by the blocks themselves being disabled.
 				const sectionRootClientId = getSectionRootClientId();
-
 				_isDropZoneDisabled = clientId !== sectionRootClientId;
 			}
 

packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -117,7 +117,6 @@ export function PatternCategoryPreviews( {
 	const { changePage } = pagingProps;
 
 	// Hide block pattern preview on unmount.
-	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => () => onHover( null ), [] );
 
 	const onSetPatternSyncFilter = useCallback(

packages/block-editor/src/components/list-view/index.js

@@ -185,8 +185,7 @@ function ListViewComponent(
 		if ( selectedClientIds?.length ) {
 			focusListItem( selectedClientIds[ 0 ], elementRef?.current );
 		}
-		// Disable reason: Only focus on the selected item when the list view is mounted.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Only focus on the selected item when the list view is mounted.
 	}, [] );
 
 	const expand = useCallback(

packages/block-editor/src/components/rich-text/index.native.js

@@ -212,7 +212,6 @@ export function RichTextWrapper(
 				selectionChangeEnd
 			);
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ clientId, identifier ]
 	);
 
@@ -368,7 +367,6 @@ export function RichTextWrapper(
 				onChange( insert( value, '\n' ) );
 			}
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
 			onReplace,
 			onSplit,

packages/block-editor/src/components/use-block-drop-zone/index.js

@@ -287,7 +287,7 @@ function isInsertionPoint( targetToCheck, ownerDocument ) {
 	return !! (
 		defaultView &&
 		targetToCheck instanceof defaultView.HTMLElement &&
-		targetToCheck.dataset.isInsertionPoint
+		targetToCheck.closest( '[data-is-insertion-point]' )
 	);
 }
 

packages/block-editor/src/components/use-block-drop-zone/index.native.js

@@ -132,7 +132,6 @@ export default function useBlockDropZone( {
 	const getSortedBlocksLayouts = useCallback( () => {
 		return getBlockLayoutsOrderedByYCoord( blocksLayouts.current );
 		// We use the value of `blocksLayouts` as the dependency.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ blocksLayouts.current ] );
 
 	const isRTL = getSettings().isRTL;

packages/block-editor/src/components/use-moving-animation/index.js

@@ -61,7 +61,6 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 			previous: ref.current && getAbsolutePosition( ref.current ),
 			prevRect: ref.current && ref.current.getBoundingClientRect(),
 		} ),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ triggerAnimationOnChange ]
 	);
 

packages/block-editor/src/components/use-settings/index.js

@@ -32,7 +32,6 @@ export function useSettings( ...paths ) {
 				clientId,
 				...paths
 			),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ clientId, ...paths ]
 	);
 }

packages/block-editor/src/hooks/contrast-checker.js

@@ -21,7 +21,6 @@ export default function BlockColorContrastChecker( { clientId } ) {
 
 	// There are so many things that can change the color of a block
 	// So we perform this check on every render.
-	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => {
 		if ( ! blockEl ) {
 			return;

packages/block-library/README.md

@@ -98,21 +98,26 @@ To find out more about contributing to this package or Gutenberg as a whole, ple
 
     This file is used when using the option to register individual block from the `@wordpress/block-library` package.
 
-4.  If a `view.js` file (or a file prefixed with `view`, e.g. `view-example.js`) is present in the block's directory, this file will be built along other assets, making it available to load from the browser. You only need to reference a `view.min.js` (notice the different file extension) file in the `block.json` file as follows:
+4.  If the block exposes a script module on the front end, it must be included in the package's `package.json` file in the `wpScriptModules` object. This will include the script module when it's bundled for use in WordPress. See [the packages README for more details.](../README.md):
 
     ```json
     {
-    	"viewScript": "file:./view.min.js"
+    	"name": "@wordpress/block-library",
+    	"wpScriptModuleExports": {
+    		"./blinking-paragraph/view": "./build-module/blinking-paragraph/view.js",
+    		"./image/view": "./build-module/image/view.js"
+    		// Add any new script modules here.
+    	}
     }
     ```
 
-    This file will get automatically loaded when the static block is present on the front end. For dynamic block, you need to manually enqueue the view script in `render_callback` of the block, example:
+    For every dynamic block, you need to manually enqueue the view script module in `render_callback` of the block, example:
 
     ```php
     function render_block_core_blinking_paragraph( $attributes, $content ) {
-        $should_load_view_script = ! empty( $attributes['isInteractive'] ) && ! wp_script_is( 'wp-block-blinking-paragraph-view' );
+        $should_load_view_script = ! empty( $attributes['isInteractive'] );
         if ( $should_load_view_script ) {
-    	    wp_enqueue_script( 'wp-block-blinking-paragraph-view' );
+    	    wp_enqueue_script_module( '@wordpress/block-library/blinking-paragraph' );
         }
 
     	return $content;

packages/block-library/src/button/style.scss

@@ -9,6 +9,9 @@ $blocks-block__margin: 0.5em;
 	text-align: center;
 	word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.
 	box-sizing: border-box;
+	height: 100%;
+	width: 100%;
+	align-content: center;
 
 	&.aligncenter {
 		text-align: center;

packages/block-library/src/cover/edit/index.js

@@ -152,8 +152,7 @@ function CoverEdit( {
 				isUserOverlayColor: isUserOverlayColor || false,
 			} );
 		} )();
-		// Disable reason: Update the block only when the featured image changes.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// Update the block only when the featured image changes.
 	}, [ mediaUrl ] );
 
 	// instead of destructuring the attributes

packages/block-library/src/file/edit.js

@@ -103,8 +103,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 				downloadButtonText: _x( 'Download', 'button label' ),
 			} );
 		}
-		// Reason: This effect should only run on mount.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+		// This effect should only run on mount.
 	}, [] );
 
 	function onSelectFile( newMedia ) {