[pull] trunk from WordPress:trunk

package.json

@@ -33,7 +33,7 @@
 		"@emotion/babel-plugin": "11.11.0",
 		"@emotion/jest": "11.7.1",
 		"@emotion/native": "11.0.0",
-		"@geometricpanda/storybook-addon-badges": "2.0.1",
+		"@geometricpanda/storybook-addon-badges": "2.0.5",
 		"@octokit/rest": "16.26.0",
 		"@octokit/types": "6.34.0",
 		"@octokit/webhooks-types": "5.8.0",
@@ -42,16 +42,18 @@
 		"@react-native/babel-preset": "0.73.10",
 		"@react-native/metro-babel-transformer": "0.73.10",
 		"@react-native/metro-config": "0.73.4",
-		"@storybook/addon-a11y": "7.6.15",
-		"@storybook/addon-actions": "7.6.15",
-		"@storybook/addon-controls": "7.6.15",
-		"@storybook/addon-docs": "7.6.15",
-		"@storybook/addon-toolbars": "7.6.15",
-		"@storybook/addon-viewport": "7.6.15",
-		"@storybook/react": "7.6.15",
-		"@storybook/react-webpack5": "7.6.15",
-		"@storybook/source-loader": "7.6.15",
-		"@storybook/theming": "7.6.15",
+		"@storybook/addon-a11y": "8.0.10",
+		"@storybook/addon-actions": "8.0.10",
+		"@storybook/addon-controls": "8.0.10",
+		"@storybook/addon-docs": "8.0.10",
+		"@storybook/addon-toolbars": "8.0.10",
+		"@storybook/addon-viewport": "8.0.10",
+		"@storybook/addon-webpack5-compiler-babel": "3.0.3",
+		"@storybook/react": "8.0.10",
+		"@storybook/react-webpack5": "8.0.10",
+		"@storybook/source-loader": "8.0.10",
+		"@storybook/test": "8.0.10",
+		"@storybook/theming": "8.0.10",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "14.3.0",
 		"@testing-library/react-native": "12.4.3",
@@ -156,7 +158,7 @@
 		"snapshot-diff": "0.10.0",
 		"source-map-loader": "3.0.0",
 		"sprintf-js": "1.1.1",
-		"storybook": "7.6.15",
+		"storybook": "8.0.10",
 		"storybook-source-link": "2.0.9",
 		"strip-json-comments": "5.0.0",
 		"style-loader": "3.2.1",
@@ -181,7 +183,7 @@
 		"postbuild:packages": " npm run --if-present --workspaces build:wp",
 		"build:plugin-zip": "bash ./bin/build-plugin-zip.sh",
 		"clean:package-types": "tsc --build --clean && rimraf --glob './packages/*/build-types'",
-		"clean:packages": "rimraf --glob './packages/*/@(build|build-module|build-wp|build-style)'",
+		"clean:packages": "rimraf --glob './packages/*/{build,build-module,build-wp,build-style}'",
 		"component-usage-stats": "node ./node_modules/react-scanner/bin/react-scanner -c ./react-scanner.config.js",
 		"dev": "cross-env NODE_ENV=development npm run build:packages && concurrently \"wp-scripts start\" \"npm run dev:packages\"",
 		"dev:packages": "cross-env NODE_ENV=development concurrently \"node ./bin/packages/watch.js\" \"tsc --build --watch\"",
@@ -193,7 +195,7 @@
 		"docs:gen": "node ./docs/tool/index.js",
 		"docs:theme-ref": "node ./bin/api-docs/gen-theme-reference.mjs",
 		"env": "wp-env",
-		"fixtures:clean": "rimraf --glob 'test/integration/fixtures/blocks/*.+(json|serialized.html)'",
+		"fixtures:clean": "rimraf --glob 'test/integration/fixtures/blocks/*.{json,serialized.html}'",
 		"fixtures:generate": "cross-env GENERATE_MISSING_FIXTURES=y npm run test:unit test/integration/full-content/ && npm run format test/integration/fixtures/blocks/*.json",
 		"fixtures:regenerate": "npm-run-all fixtures:clean fixtures:generate",
 		"format": "wp-scripts format",

packages/block-editor/src/components/block-list/zoom-out-separator.js

@@ -33,13 +33,15 @@ export function ZoomOutSeparator( {
 		insertionPoint,
 		blockInsertionPointVisible,
 		blockInsertionPoint,
+		blocksBeingDragged,
 	} = useSelect( ( select ) => {
 		const {
 			getInsertionPoint,
 			getBlockOrder,
 			getSectionRootClientId,
 			isBlockInsertionPointVisible,
 			getBlockInsertionPoint,
+			getDraggedBlockClientIds,
 		} = unlock( select( blockEditorStore ) );
 
 		const root = getSectionRootClientId();
@@ -51,6 +53,7 @@ export function ZoomOutSeparator( {
 			insertionPoint: getInsertionPoint(),
 			blockInsertionPoint: getBlockInsertionPoint(),
 			blockInsertionPointVisible: isBlockInsertionPointVisible(),
+			blocksBeingDragged: getDraggedBlockClientIds(),
 		};
 	}, [] );
 
@@ -78,6 +81,7 @@ export function ZoomOutSeparator( {
 		insertionPoint &&
 		insertionPoint.hasOwnProperty( 'index' ) &&
 		clientId === sectionClientIds[ insertionPoint.index - 1 ];
+
 	// We want to show the zoom out separator in either of these conditions:
 	// 1. If the inserter has an insertion index set
 	// 2. We are dragging a pattern over an insertion point
@@ -97,6 +101,32 @@ export function ZoomOutSeparator( {
 					sectionClientIds[ blockInsertionPoint.index - 1 ] );
 	}
 
+	const blockBeingDraggedClientId = blocksBeingDragged[ 0 ];
+
+	const isCurrentBlockBeingDragged = blocksBeingDragged.includes( clientId );
+
+	const blockBeingDraggedIndex = sectionClientIds.indexOf(
+		blockBeingDraggedClientId
+	);
+	const blockBeingDraggedPreviousSiblingClientId =
+		blockBeingDraggedIndex > 0
+			? sectionClientIds[ blockBeingDraggedIndex - 1 ]
+			: null;
+
+	const isCurrentBlockPreviousSiblingOfBlockBeingDragged =
+		blockBeingDraggedPreviousSiblingClientId === clientId;
+
+	// The separators are visually top/bottom of the block, but in actual fact
+	// the "top" separator is the "bottom" separator of the previous block.
+	// Therefore, this logic hides the separator if the current block is being dragged
+	// or if the current block is the previous sibling of the block being dragged.
+	if (
+		isCurrentBlockBeingDragged ||
+		isCurrentBlockPreviousSiblingOfBlockBeingDragged
+	) {
+		isVisible = false;
+	}
+
 	return (
 		<AnimatePresence>
 			{ isVisible && (

packages/components/src/custom-select-control-v2/stories/index.story.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * WordPress dependencies
@@ -44,6 +45,9 @@ const meta: Meta< typeof CustomSelectControlV2 > = {
 			</div>
 		),
 	],
+	args: {
+		onChange: fn(),
+	},
 };
 export default meta;
 

packages/components/src/tab-panel/stories/index.story.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * WordPress dependencies
@@ -22,6 +23,9 @@ const meta: Meta< typeof TabPanel > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
+	args: {
+		onSelect: fn(),
+	},
 };
 export default meta;
 

packages/components/src/tabs/stories/index.story.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * WordPress dependencies
@@ -39,6 +40,10 @@ const meta: Meta< typeof Tabs > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
+	args: {
+		onActiveTabIdChange: fn(),
+		onSelect: fn(),
+	},
 };
 export default meta;
 

packages/react-native-editor/ios/Gemfile.lock

@@ -72,21 +72,19 @@ GEM
     nap (1.1.0)
     netrc (0.11.0)
     public_suffix (4.0.7)
-    rexml (3.2.8)
-      strscan (>= 3.0.9)
+    rexml (3.3.9)
     ruby-macho (2.5.1)
-    strscan (3.1.0)
     typhoeus (1.4.1)
       ethon (>= 0.9.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    xcodeproj (1.24.0)
+    xcodeproj (1.25.1)
       CFPropertyList (>= 2.3.3, < 4.0)
       atomos (~> 0.1.3)
       claide (>= 1.0.2, < 2.0)
       colored2 (~> 3.1)
       nanaimo (~> 0.3.0)
-      rexml (~> 3.2.4)
+      rexml (>= 3.3.6, < 4.0)
     zeitwerk (2.6.11)
 
 PLATFORMS

patches/storybook-source-link+2.0.9.patch

@@ -0,0 +1,55 @@
+diff --git a/node_modules/storybook-source-link/dist/esm/Tool.js b/node_modules/storybook-source-link/dist/esm/Tool.js
+index 100099e..53d37c4 100644
+--- a/node_modules/storybook-source-link/dist/esm/Tool.js
++++ b/node_modules/storybook-source-link/dist/esm/Tool.js
+@@ -1,7 +1,8 @@
+ import React from "react";
+-import { Icons, IconButton, TooltipMessage, WithTooltip } from "@storybook/components";
+-import { PARAM_KEY, PREFIX_PARAM_KEY, ICON_PARAM_KEY, INFO_LINK, TOOL_ID } from "./constants";
+-import { useParameter } from '@storybook/api';
++import { IconButton, TooltipMessage, WithTooltip } from "@storybook/components";
++import { RepoIcon } from '@storybook/icons';
++import { PARAM_KEY, PREFIX_PARAM_KEY, INFO_LINK, TOOL_ID } from "./constants";
++import { useParameter } from '@storybook/manager-api';
+
+ var Tooltip = function Tooltip() {
+   return /*#__PURE__*/React.createElement(TooltipMessage, {
+@@ -24,7 +25,6 @@ export var getLink = function getLink(prefix, link) {
+ export var Tool = function Tool() {
+   var param_link = useParameter(PARAM_KEY, null);
+   var param_prefix = useParameter(PREFIX_PARAM_KEY, null);
+-  var param_icon = useParameter(ICON_PARAM_KEY, "repository");
+   var link = getLink(param_prefix, param_link);
+   return link ? /*#__PURE__*/React.createElement(IconButton, {
+     key: TOOL_ID,
+@@ -35,9 +35,7 @@ export var Tool = function Tool() {
+         window.open(link);
+       }
+     }
+-  }, /*#__PURE__*/React.createElement(Icons, {
+-    icon: param_icon
+-  })) : /*#__PURE__*/React.createElement(WithTooltip, {
++  }, /*#__PURE__*/React.createElement(RepoIcon)) : /*#__PURE__*/React.createElement(WithTooltip, {
+     placement: "top",
+     trigger: "click",
+     tooltip: /*#__PURE__*/React.createElement(Tooltip, null)
+@@ -45,7 +43,5 @@ export var Tool = function Tool() {
+     key: TOOL_ID,
+     title: "View Source Repository",
+     active: false
+-  }, /*#__PURE__*/React.createElement(Icons, {
+-    icon: param_icon
+-  })));
++  }, /*#__PURE__*/React.createElement(RepoIcon)));
+ };
+\ No newline at end of file
+diff --git a/node_modules/storybook-source-link/dist/esm/preset/manager.js b/node_modules/storybook-source-link/dist/esm/preset/manager.js
+index 845f81d..ca1d066 100644
+--- a/node_modules/storybook-source-link/dist/esm/preset/manager.js
++++ b/node_modules/storybook-source-link/dist/esm/preset/manager.js
+@@ -1,4 +1,4 @@
+-import { addons, types } from "@storybook/addons";
++import { addons, types } from "@storybook/manager-api";
+ import { ADDON_ID, TOOL_ID } from "../constants";
+ import { Tool } from "../Tool"; // Register the addon
+

platform-docs/docs/intro.md

@@ -4,17 +4,16 @@ sidebar_position: 1
 
 # Getting Started
 
-Let's discover how to use the **Gutenberg Block Editor** to build your own block editor in less than 10 minutes**.
-
+Let's discover how to use the **Gutenberg Block Editor** to build your own block editor in less than 10 minutes.
 
 ## What you'll need
 
 - [Node.js](https://nodejs.org/en/download/) version 20.10 or above.
-- We're going to be using "vite" to setup our single page application (SPA) that contains a block editor. You can use your own setup, and your own application for this.
+- We're going to be using "Vite" to setup our single page application (SPA) that contains a block editor. You can use your own setup, and your own application for this.
 
 ## Preparing the SPA powered by Vite.
 
-First bootstrap a vite project using `npm create vite@latest` and pick `Vanilla` variant and `JavaScript` as a language.
+First bootstrap a Vite project using `npm create vite@latest` and pick `React` variant and `JavaScript` as a language.
 
 Once done, you can navigate to your application folder and run it locally using `npm run dev`. Open the displayed local URL in a browser.
 
@@ -28,58 +27,72 @@ To build a block editor, you need to install the following dependencies:
 
 ## JSX
 
-We're going to be using JSX to write our UI and components. So one of the first steps we need to do is to configure our build tooling, By default vite supports JSX and and outputs the result as a React pragma. The Block editor uses React so there's no need to configure anything here but if you're using a different bundler/build tool, make sure the JSX transpilation is setup properly.
+We're going to be using JSX to write our UI and components as the block editor is built with React. Using the Vite bootstrap described above there’s no need to configure anything as it outputs the result as a React pragma. If you're using a different bundler/build tool, you may need to configure the JSX transpilation to do the same.
 
 ## Bootstrap your block editor
 
-It's time to render our first block editor.
+It's time to render our first block editor. We’ll do this with changes to three files – `index.html`, `src/main.jsx`, and `src/App.jsx`.
+
+First, we’ll add the base styles are for the editor UI. In `index.html` add these styles in the `<head>`:
+```html
+<link href="node_modules/@wordpress/components/build-style/style.css" rel="stylesheet" vite-ignore/>
+<link href="node_modules/@wordpress/block-editor/build-style/style.css" rel="stylesheet" vite-ignore/>
+```
+:::note
+
+There are more styles needed but can’t be added here because they are for the editor’s content which is in a separate document within an `<iframe>`. We’ll add those styles via the `BlockCanvas` component in a later step.
+
+:::
+
+Next, we’ll add blocks for the editor to work with. In `src/main.jsx` import and call `registerCoreBlocks`:
+```js
+import { registerCoreBlocks } from '@wordpress/block-library'
+registerCoreBlocks();
+```
+
+Finally, we’ll put our editor together. In `src/App.jsx` replace the contents with the following code:
 
- - Update your `index.jsx` file with the following code:
 ```jsx
-import { createElement, useState } from "react";
-import { createRoot } from 'react-dom/client';
+import { useState } from "react";
 import {
   BlockEditorProvider,
   BlockCanvas,
 } from "@wordpress/block-editor";
-import { registerCoreBlocks } from "@wordpress/block-library";
-
-// Default styles that are needed for the editor.
-import "@wordpress/components/build-style/style.css";
-import "@wordpress/block-editor/build-style/style.css";
-
-// Default styles that are needed for the core blocks.
-import "@wordpress/block-library/build-style/common.css";
-import "@wordpress/block-library/build-style/style.css";
-import "@wordpress/block-library/build-style/editor.css";
-
-// Register the default core block types.
-registerCoreBlocks();
 
-function Editor() {
-  const [blocks, setBlocks] = useState([]);
+// Base styles for the content within the block canvas iframe.
+import componentsStyles from "@wordpress/components/build-style/style.css?raw";
+import blockEditorContentStyles from "@wordpress/block-editor/build-style/content.css?raw";
+import blocksStyles from "@wordpress/block-library/build-style/style.css?raw";
+import blocksEditorStyles from "@wordpress/block-library/build-style/editor.css?raw";
+
+const contentStyles = [
+  { css: componentsStyles },
+  { css: blockEditorContentStyles },
+  { css: blocksStyles },
+  { css: blocksEditorStyles },
+];
+
+export default function Editor() {
+  const [ blocks, setBlocks ] = useState( [] );
   return (
     /*
       The BlockEditorProvider is the wrapper of the block editor's state.
       All the UI elements of the block editor need to be rendered within this provider.
     */
     <BlockEditorProvider
-      value={blocks}
-      onChange={setBlocks}
-      onInput={setBlocks}
+      value={ blocks }
+      onChange={ setBlocks }
+      onInput={ setBlocks }
     >
-      {/*
-          The BlockCanvas component renders the block list within an iframe
-          and wire up all the necessary events to make the block editor work.
-        */}
-      <BlockCanvas height="500px" />
+      { /*
+        The BlockCanvas component renders the block list within an iframe
+        and wires up all the necessary events to make the block editor work.
+      */ }
+      <BlockCanvas height="500px" styles={ contentStyles } />
     </BlockEditorProvider>
   );
 }
 
-// Render your React component instead
-const root = createRoot(document.getElementById("app"));
-root.render(<Editor />);
 ```
 
 That's it! You now have a very basic block editor with several block types included by default: paragraphs, headings, lists, quotes, images...