DataForm: make it work nicely with bulk editing

[oandregal]

Part of #59745

When selecting multiple items and open the QuickEdit, we need to make sure to provide a good experience.

Questions to resolve:

• Header: what to do with Title & Actions.
• Fields:
  • to display "Mixed" when the values differ
  • what do we do with fields that don't support "bulk editing"? do we hide them or make them uneditable?

[oandregal]

@jameskoster this would need some design feedback. Is this the target we should aim to? It means:

• header:
  • always to be displayed
  • title: number of items selected
  • actions: what do we display here? only the ones that are available in bulk editing?
• fields:
  • to display "Mixed" when values differ
  • what do we do with fields that don't support "bulk editing"? do we hide them or make them uneditable?

[jameskoster]

Yeah, the actions menu would include any actions that can be applied in bulk (e.g. Trash).

what do we do with fields that don't support "bulk editing"?

For now it probably makes sense to hide fields that cannot be bulk edited. For instance there's a lot of value in displaying Title: Mixed as a non-interactive element.

That said, it may get a bit more nuanced when we get to media... there can be value in displaying certain non-editable fields like file format / size / dimensions. If they disappeared on bulk selection the experience might be a bit... strange. Notice how Finder shows -- in the Dimensions field, we might do something similar:

[gigitux]

@oandregal Do you think that this issue should be resolved on data views library level or on the consumer side? At least, for now, I more inclined to this latter approach.

In the case of the page view, I would update this code:

gutenberg/packages/edit-site/src/components/post-edit/index.js

Lines 46 to 59 in 62e0e6f

	const fields = useMemo(
	() =>
	_fields?.map( ( field ) => {
	if ( field.id === 'status' ) {
	return {
	...field,
	elements: field.elements.filter(
	( element ) => element.value !== 'trash'
	),
	};
	}
	return field;
	} ),
	[ _fields ]

to something like this:

	const fields = useMemo(
		() =>
			_fields?.map( ( field ) => {
				if ( field.id === 'status' ) {
					return {
						...field,
						elements: field.elements.filter(
							( element ) => element.value !== 'trash'
						),
					};
				}
// Add another condition we render `Mixed` only when values differ
				if ( ids.length > 1  ) {
					return {
						...field,
						render: ( { value, onChange } ) => <>Mixed</>,
					};
				}

				return field;
			} ),
		[ _fields, ids.length ]
	);

[oandregal]

Do you think that this issue should be resolved on data views library level or on the consumer side? At least, for now, I more inclined to this latter approach.

There are two issues here:

• header/(bulk) actions: this is consumer level. It has to do with the PostCardPanel component or use a different thing, etc.
• for fields, it depends
  • some fields cannot be edited in bulk (slug), so for these, hiding them is ok
  • mostly any other field could work in bulk editing but they don't or work clumsily: your proposal sounds good to me

[gigitux]

Sorry for not being clear, with this issue, I was mostly referring to the “field” preview issue.

Thanks for the feedback! I will start to work on this soon! 🙇