From 4921146a46e93d05a8c7d22e4cc509fa95d22f84 Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Sun, 15 Dec 2024 15:49:19 +0900
Subject: [PATCH 1/2] add block-breadcrumb story

---
 .../block-breadcrumb/stories/index.story.js   | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 packages/block-editor/src/components/block-breadcrumb/stories/index.story.js

diff --git a/packages/block-editor/src/components/block-breadcrumb/stories/index.story.js b/packages/block-editor/src/components/block-breadcrumb/stories/index.story.js
new file mode 100644
index 0000000000000..52e2ee94ac43a
--- /dev/null
+++ b/packages/block-editor/src/components/block-breadcrumb/stories/index.story.js
@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+/**
+ * Internal dependencies
+ */
+import Breadcrumb from '../';
+import { ExperimentalBlockEditorProvider } from '../../provider';
+
+// For the purpose of this story, we need to register the core blocks samples.
+registerCoreBlocks();
+const blocks = [
+	// vertical
+	createBlock( 'core/group', {}, [
+		createBlock( 'core/paragraph' ),
+		createBlock( 'core/paragraph' ),
+		createBlock( 'core/paragraph' ),
+	] ),
+];
+
+const selection = {
+	selectionEnd: {
+		clientId: blocks[ 0 ].innerBlocks[ 0 ].clientId,
+	},
+	selectionStart: {
+		clientId: blocks[ 0 ].innerBlocks[ 0 ].clientId,
+	},
+};
+
+const meta = {
+	title: 'BlockEditor/Breadcrumb',
+	component: Breadcrumb,
+	argTypes: {
+		rootLabelText: {
+			control: 'text',
+			defaultValue: 'Document',
+			description:
+				'Translated label for the root element of the breadcrumb trail',
+		},
+	},
+	decorators: [
+		( Story ) => (
+			<ExperimentalBlockEditorProvider
+				value={ blocks }
+				selection={ selection }
+			>
+				<Story />
+			</ExperimentalBlockEditorProvider>
+		),
+	],
+};
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		return <Breadcrumb { ...args } />;
+	},
+};

From 57047c50c02466b21f0d6435af47950f35bf150e Mon Sep 17 00:00:00 2001
From: Hiroshi Urabe <mail@torounit.com>
Date: Sun, 15 Dec 2024 16:29:54 +0900
Subject: [PATCH 2/2] fix mock and prop description

---
 .../block-breadcrumb/stories/index.story.js    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/block-breadcrumb/stories/index.story.js b/packages/block-editor/src/components/block-breadcrumb/stories/index.story.js
index 52e2ee94ac43a..5b6708ee22c8c 100644
--- a/packages/block-editor/src/components/block-breadcrumb/stories/index.story.js
+++ b/packages/block-editor/src/components/block-breadcrumb/stories/index.story.js
@@ -13,32 +13,34 @@ import { ExperimentalBlockEditorProvider } from '../../provider';
 // For the purpose of this story, we need to register the core blocks samples.
 registerCoreBlocks();
 const blocks = [
-	// vertical
 	createBlock( 'core/group', {}, [
-		createBlock( 'core/paragraph' ),
-		createBlock( 'core/paragraph' ),
-		createBlock( 'core/paragraph' ),
+		createBlock( 'core/group', {}, [ createBlock( 'core/paragraph' ) ] ),
 	] ),
 ];
 
+const clientId = blocks[ 0 ].innerBlocks[ 0 ].innerBlocks[ 0 ].clientId;
+
 const selection = {
 	selectionEnd: {
-		clientId: blocks[ 0 ].innerBlocks[ 0 ].clientId,
+		clientId,
 	},
 	selectionStart: {
-		clientId: blocks[ 0 ].innerBlocks[ 0 ].clientId,
+		clientId,
 	},
 };
 
+/**
+ * The block breadcrumb trail displays the hierarchy of the current block selection as a breadcrumb. It also allows, using this hierarchy, to navigate to the parent elements of the current block selection. It is located at the very bottom of the editor interface.
+ */
 const meta = {
 	title: 'BlockEditor/Breadcrumb',
 	component: Breadcrumb,
 	argTypes: {
 		rootLabelText: {
 			control: 'text',
-			defaultValue: 'Document',
+			defaultValue: '',
 			description:
-				'Translated label for the root element of the breadcrumb trail',
+				'Label text for the root element (the first `<li />`) of the breadcrumb trail.',
 		},
 	},
 	decorators: [