WordPress · aduth · Jun 25, 2026 · Jun 23, 2026 · Jun 23, 2026 · Jun 23, 2026
@@ -25,6 +25,7 @@
 ### Documentation
 
 -   `Menu`: Fix `overriden` typo to `overridden` in `CheckboxItemProps` and `RadioItemProps`. ([#79331](https://github.com/WordPress/gutenberg/pull/79331))
+-   Add component documentation for `ColorPicker`, `CustomSelectControl`, `Navigator`, `NumberControl`, `ResizableBox`, and `Slot` components ([#79460](https://github.com/WordPress/gutenberg/pull/79460)).
 
 ### Code Quality
 

@@ -247,6 +247,10 @@ const UnconnectedColorPicker = (
 	);
 };
 
+/**
+ * ColorPicker lets users select a color from a visual color surface, or by
+ * by editing its hex, RGB, or HSL values.
+ */
 export const ColorPicker = contextConnect(
 	UnconnectedColorPicker,
 	'ColorPicker'

@@ -12,6 +12,11 @@ import { ColorPicker } from '../component';
 const meta: Meta< typeof ColorPicker > = {
 	tags: [ 'manifest' ],
 	component: ColorPicker,
+	// Temporary: Due to an upstream bug, render the root explicitly so the
+	// components manifest extractor can resolve props from the JSX.
+	//
+	// See: https://github.com/storybookjs/storybook/issues/34877
+	render: ( args ) => <ColorPicker { ...args } />,
 	title: 'Components/Selection & Input/Color/ColorPicker',
 	id: 'components-colorpicker',
 	argTypes: {

@@ -52,6 +52,11 @@ function getDescribedBy( currentName: string, describedBy?: string ) {
 	return sprintf( __( 'Currently selected: %s' ), currentName );
 }
 
+/**
+ * CustomSelectControl is a dropdown for selecting a single option from a list,
+ * with support for custom styling. Use it instead of the `SelectControl` when
+ * options need richer markup (e.g. per-option styles or hints).
+ */
 function CustomSelectControl< T extends CustomSelectOption >(
 	props: CustomSelectProps< T >
 ) {

@@ -19,6 +19,11 @@ const meta: Meta< typeof Navigator > = {
 		Button: Navigator.Button,
 		BackButton: Navigator.BackButton,
 	},
+	// Temporary: Due to an upstream bug, render the root explicitly so the
+	// components manifest extractor can resolve props from the JSX.
+	//
+	// See: https://github.com/storybookjs/storybook/issues/34877
+	render: ( args ) => <Navigator { ...args } />,
 	title: 'Components/Navigation/Navigator',
 	id: 'components-navigator',
 	argTypes: {

@@ -276,6 +276,9 @@ function UnforwardedNumberControl(
 	);
 }
 
+/**
+ * NumberControl lets users enter and adjust a numeric value.
+ */
 export const NumberControl = forwardRef( UnforwardedNumberControl );
 NumberControl.displayName = 'NumberControl';
 

@@ -132,6 +132,10 @@ function UnforwardedResizableBox(
 	);
 }
 
+/**
+ * ResizableBox wraps content in a container with draggable handles, letting
+ * users interactively resize it along one or more edges or corners.
+ */
 export const ResizableBox = forwardRef( UnforwardedResizableBox );
 ResizableBox.displayName = 'ResizableBox';
 

@@ -30,6 +30,11 @@ import type {
 
 export { Fill };
 
+/**
+ * Slot marks a location where content rendered by matching `Fill` components
+ * elsewhere will appear. Use it to allow a component to define UI areas that
+ * can be extended from other parts of the application.
+ */
 export const Slot = forwardRef(
 	(
 		props: SlotComponentProps &

@@ -19,7 +19,8 @@
 
 ### Documentation
 
-- Fix `overriden` typo to `overridden` in README. ([#79331](https://github.com/WordPress/gutenberg/pull/79331))
+-   Fix `overriden` typo to `overridden` in README. ([#79331](https://github.com/WordPress/gutenberg/pull/79331))
+-   Add component documentation for `DataViews`, `DataViewsPicker`, and `DataForm` components ([#79460](https://github.com/WordPress/gutenberg/pull/79460)).
 
 ### Internal
 

@@ -12,6 +12,11 @@ import { DataFormProvider } from '../components/dataform-context';
 import { DataFormLayout } from '../components/dataform-layouts/data-form-layout';
 import normalizeForm from '../components/dataform-layouts/normalize-form';
 
+/**
+ * DataForm renders an auto-generated form for viewing and editing the fields of
+ * a data item, driven by a fields and form layout configuration. Use it to edit
+ * items of a dataset, often alongside `DataViews`.
+ */
 export default function DataForm< Item >( {
 	data,
 	form,

@@ -269,6 +269,11 @@ function DataViewsPicker< Item >( {
 	);
 }
 
+/**
+ * DataViewsPicker renders a dataset allowing users to select one or multiple
+ * items. It shares the layouts, search, and filtering of `DataViews` but is
+ * geared toward choosing items rather than managing them.
+ */
 // Populate the DataViews sub components
 const DataViewsPickerSubComponents =
 	DataViewsPicker as typeof DataViewsPicker & {

@@ -310,6 +310,11 @@ function DataViews< Item >( {
 	);
 }
 
+/**
+ * DataViews renders a dataset using configurable layouts (table, grid, list)
+ * with built-in search, filtering, sorting, pagination, and actions. Use it to
+ * display and manage a collection of records.
+ */
 // Populate the DataViews sub components
 const DataViewsSubComponents = DataViews as typeof DataViews & {
 	BulkActionToolbar: typeof BulkActionsFooter;

@@ -24,6 +24,11 @@ const meta = {
 	tags: [ 'manifest' ],
 	title: 'DataViews/DataViews',
 	component: DataViews,
+	// Temporary: Due to an upstream bug, render the root explicitly so the
+	// components manifest extractor can resolve props from the JSX.
+	//
+	// See: https://github.com/storybookjs/storybook/issues/34877
+	render: ( args ) => <DataViews { ...args } />,
 	args: {
 		containerHeight: 'auto',
 	},

@@ -557,12 +557,7 @@ export default dedupePlugins( [
 	// component always receives props and returns a React element, and its
 	// props should be documented through its TypeScript props types.
 	{
-		files: [
-			'**/@(storybook|stories)/**',
-			'packages/components/src/**/*.tsx',
-			'packages/theme/src/**/*.tsx',
-			'packages/ui/src/**/*.tsx',
-		],
+		files: [ '**/@(storybook|stories)/**', '**/*.tsx' ],
 		rules: {
 			'jsdoc/require-param': 'off',
 		},
-Original file line number
+Diff line change
@@ Expand Up / @@ -276,6 +276,9 @@ function UnforwardedNumberControl( @@
     	);
     }
+    /**
+     * NumberControl lets users enter and adjust a numeric value.
+     */
     export const NumberControl = forwardRef( UnforwardedNumberControl );
     NumberControl.displayName = 'NumberControl';
@@ Expand Down @@