DataViews Field rendering: Context should be not be assumed by fields when rendering

[andrewhayward]

Related: #55083

What problem does this address?

Field rendering is context-unaware, and the same output is generated regardless of which layout is being used. This means that we should ensure rendered content is appropriate in any view.

For example, while <h3>{ title }</h3> is appropriate in a grid, it should be <th scope="row">{ title }</th> in a list.

What is your proposed solution?

Layouts should render their own context (e.g. <h3>, <th>) and fields should not be opinionated on this. Currently, for example, the list view renders its own <td>s, which wrap every field:

gutenberg/packages/edit-site/src/components/dataviews/view-list.js

Lines 489 to 507 in 447a6de

	{ row.getVisibleCells().map( ( cell ) => (
	<td
	key={ cell.id }
	style={ {
	width:
	cell.column.columnDef.width ||
	undefined,
	maxWidth:
	cell.column.columnDef
	.maxWidth || undefined,
	} }
	>
	{ flexRender(
	cell.column.columnDef.cell,
	cell.getContext()
	) }
	</td>
	) ) }
	</tr>

The DataViews component could gain a primaryField prop, or the fields API could be adjusted to include an isPrimary flag, either of which layouts could use to render context appropriately...

<DataViews
  ...
  fields={ fields }
  primaryField="title"
  ...
/>

const fields = [
  ...
  {
	id: 'title',
	...
	isPrimary: true,
	...
  },
  ...
];

The alternative is to make sure that field.render checks the view type that is passed in, but that adds complexity that is probably not worth it. Every field would have to know to render a <th> or <td> in some instances, an <h3> in others, and as the list of available layouts changes, they would have to stay on top of that.

[oandregal]

I'm exploring a potential path at #56942