docs(dataviews): add registerLayout Storybook story

A render-only demo of the new registerLayout API. Registers a
`pocCardRows` layout that renders each item as a flex row — primary
field on the left, secondary field(s) on the right — with no table
headers, no borders, and no column-reorder or sort affordances.

Fixture resembles a settings-page "payment methods" list (title,
description, status, actions) because that is the real-world pattern
that motivated the API: an existing migration to DataViews was
visually-hiding thead with CSS, faking column widths via
view.layout.styles, and overriding internal .dataviews-view-table
class names. A registered layout replaces every one of those hacks
with a component that just renders what it wants.

Accessibility: each row is wired with aria-labelledby so assistive
tech still gets row context even though the visual column header is
gone. Layout authors that omit headers are responsible for this —
the story doubles as a correct example.

Refs: none

Author: mordeth

packages/dataviews/src/stories/register-layout-poc.story.tsx

@@ -0,0 +1,263 @@
+/**
+ * External dependencies
+ */
+import type { Meta } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DataViews from '../components/dataviews';
+import {
+	registerLayout,
+	getRegisteredLayout,
+} from '../dataviews-layouts/registry';
+import type { Field, View, ViewBaseProps } from '../types';
+
+/**
+ * Fixture that mirrors the shape of a settings-page "payment methods" row:
+ * title + description on the left, a status badge and a toggle control on
+ * the right. Chosen to resemble the real-world case that motivated this
+ * POC (see docs/plans/2026-04-16-dataviews-register-layout-design.md).
+ */
+type PaymentMethod = {
+	id: string;
+	title: string;
+	description: string;
+	needsSetup: boolean;
+	enabled: boolean;
+};
+
+const methods: PaymentMethod[] = [
+	{
+		id: 'bacs',
+		title: 'Bank transfer',
+		description: 'Accept payments via direct bank transfer.',
+		needsSetup: true,
+		enabled: true,
+	},
+	{
+		id: 'cheque',
+		title: 'Check',
+		description: 'Accept payments via mailed checks.',
+		needsSetup: false,
+		enabled: false,
+	},
+	{
+		id: 'cod',
+		title: 'Cash on delivery',
+		description: 'Let customers pay when they receive the order.',
+		needsSetup: false,
+		enabled: true,
+	},
+];
+
+const methodFields: Field< PaymentMethod >[] = [
+	{
+		id: 'title',
+		label: 'Payment method',
+		type: 'text' as const,
+		render: ( { item } ) => (
+			<div>
+				<div style={ { fontWeight: 500 } }>
+					{ item.title }
+					{ item.enabled && item.needsSetup ? (
+						<span
+							style={ {
+								marginLeft: 8,
+								padding: '2px 8px',
+								borderRadius: 10,
+								background: '#fff3cd',
+								color: '#664d03',
+								fontSize: 11,
+								fontWeight: 500,
+							} }
+						>
+							Action needed
+						</span>
+					) : null }
+				</div>
+				<div style={ { color: '#777', fontSize: 13 } }>
+					{ item.description }
+				</div>
+			</div>
+		),
+	},
+	{
+		id: 'actions',
+		label: 'Actions',
+		type: 'text' as const,
+		render: ( { item } ) => (
+			<div style={ { display: 'flex', alignItems: 'center', gap: 12 } }>
+				{ item.enabled && (
+					<a href={ `#/manage/${ item.id }` }>
+						{ item.needsSetup ? 'Add details' : 'Manage' }
+					</a>
+				) }
+				<span
+					style={ {
+						display: 'inline-flex',
+						alignItems: 'center',
+						gap: 6,
+					} }
+				>
+					<input
+						type="checkbox"
+						defaultChecked={ item.enabled }
+						aria-label={ `Enable ${ item.title }` }
+					/>
+					<span style={ { fontSize: 12, color: '#555' } }>
+						{ item.enabled ? 'On' : 'Off' }
+					</span>
+				</span>
+			</div>
+		),
+	},
+];
+
+/**
+ * The plugin-defined layout component. It is a plain function component of
+ * shape `( props: ViewBaseProps< Item > ) => ReactElement`. It renders each
+ * item as a flex row with the primary field on the left and the secondary
+ * field(s) on the right — no table headers, no borders between rows.
+ *
+ * Accessibility: each row is labelled by the primary cell's content via
+ * `aria-labelledby`, so assistive tech still gets meaningful row context
+ * even though the visual table header is gone.
+ */
+function PocCardRowsLayout< Item >( {
+	data,
+	fields,
+	getItemId,
+	view,
+}: ViewBaseProps< Item > ) {
+	const visibleFieldIds = view.fields ?? fields.map( ( f ) => f.id );
+	const primaryId = visibleFieldIds[ 0 ];
+	const secondaryIds = visibleFieldIds.slice( 1 );
+
+	return (
+		<ul
+			style={ {
+				listStyle: 'none',
+				margin: 0,
+				padding: 0,
+				display: 'flex',
+				flexDirection: 'column',
+				gap: 16,
+			} }
+		>
+			{ data.map( ( item ) => {
+				const id = getItemId( item );
+				const primary = fields.find( ( f ) => f.id === primaryId );
+				const primaryLabelId = `poc-row-${ id }-primary`;
+				return (
+					<li
+						key={ id }
+						aria-labelledby={ primaryLabelId }
+						style={ {
+							display: 'flex',
+							justifyContent: 'space-between',
+							alignItems: 'center',
+							gap: 16,
+						} }
+					>
+						<div id={ primaryLabelId } style={ { flex: 1 } }>
+							{ primary?.render
+								? primary.render( { item, field: primary } )
+								: null }
+						</div>
+						<div
+							style={ {
+								display: 'flex',
+								alignItems: 'center',
+								gap: 12,
+							} }
+						>
+							{ secondaryIds.map( ( fieldId ) => {
+								const f = fields.find(
+									( fld ) => fld.id === fieldId
+								);
+								if ( ! f?.render ) {
+									return null;
+								}
+								return (
+									<div key={ fieldId }>
+										{ f.render( { item, field: f } ) }
+									</div>
+								);
+							} ) }
+						</div>
+					</li>
+				);
+			} ) }
+		</ul>
+	);
+}
+
+// Register once at module load. Guarded against duplicate registration so
+// Storybook's HMR doesn't throw on second evaluation.
+if ( ! getRegisteredLayout( 'pocCardRows' ) ) {
+	registerLayout( {
+		type: 'pocCardRows',
+		label: 'POC card rows',
+		component: PocCardRowsLayout as unknown as Parameters<
+			typeof registerLayout
+		>[ 0 ][ 'component' ],
+	} );
+}
+
+const meta = {
+	title: 'DataViews/Register Layout (POC)',
+	component: DataViews,
+	parameters: { layout: 'fullscreen' },
+	decorators: [
+		( Story: React.ComponentType ) => (
+			<div style={ { maxWidth: 660, margin: '1rem auto' } }>
+				<h2 style={ { margin: '0 0 8px' } }>Offline payment methods</h2>
+				<p
+					style={ {
+						margin: '0 0 16px',
+						color: '#555',
+						fontSize: 14,
+					} }
+				>
+					Custom layout registered via <code>registerLayout()</code>.
+					No table headers, no pagination chrome, no column-reorder
+					affordances — the layout component decides what to render.
+				</p>
+				<Story />
+			</div>
+		),
+	],
+} as Meta< typeof DataViews >;
+
+export default meta;
+
+export const PocCardRows = () => {
+	const [ view, setView ] = useState< View >( {
+		type: 'pocCardRows',
+		fields: [ 'title', 'actions' ],
+	} as View );
+
+	return (
+		<DataViews< PaymentMethod >
+			data={ methods }
+			fields={ methodFields }
+			view={ view }
+			onChangeView={ setView }
+			getItemId={ ( item ) => item.id }
+			paginationInfo={ {
+				totalItems: methods.length,
+				totalPages: 1,
+			} }
+			defaultLayouts={ {} }
+			search={ false }
+		>
+			<DataViews.Layout />
+		</DataViews>
+	);
+};