search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.49k stars 4.18k forks source link

DataView: support different alignment for text and numbers #66623

Open rogermattic opened 2 days ago

rogermattic commented 2 days ago

Currently, the DataView component only supports left alignment for all content, whether it's numbers or text. As we explore using tables for analytics and financial reports, where there will be more numbers, we need to improve accessibility by supporting different alignments.

The basic alignment requirements:

This change will make the data easier for users to read and interpret.

jameskoster commented 2 days ago

Are there any other styles we might consider, for instance font-variant-numeric: tabular-nums;?

oandregal commented 2 days ago

For the record, I've grouped together issues related to "theming" in the dataviews component issue, so they are visible https://github.com/WordPress/gutenberg/issues/55083

~Consumers can already provide styles for fields, so this sounds like it's already possible?~ (these styles are provided by dataviews at the container level)

DataViews may want to provide default styles tied to field types. For example, a field type "number" could provide the styling defaults for them. However, there's two important details to consider:

jameskoster commented 1 day ago

There are certain conventions that should probably be respected by default, not opt out. Aligning number fields right in table layout feels like one of those standards to me.

The types we support may be too coarse for consumers: a number may actually be a currency (which one?), percentage, scientific, postal code, etc. and all of them are different.

Could/should the API be expanded to include these details? Probably something to work out later, but aligning all number fields right seems like a reasonable place to start.

rogermattic commented 1 day ago

The types we support may be too coarse for consumers: a number may actually be a currency (which one?), percentage, scientific, postal code, etc. and all of them are different. Fair. I believe postal codes shouldn't be considered as numbers and wonder if there's any we could exclude them?

Could/should the API be expanded to include these details? Probably something to work out later, but aligning all number fields right seems like a reasonable place to start.

Yes I agree this is the way to start.

Are the styles provided by DataViews opt-in or opt-opt? How do we make sure styles for a type do not conflict with styles provided by the consumer for a given field? Interesting question. Would you mind expanding on that? I guess I don't really understand what styles the users can provide? Is this bold, italic etc?

There are certain conventions that should probably be respected by default, not opt out. Aligning number fields right in table layout feels like one of those standards to me. I agree with @jameskoster.

rogermattic commented 1 day ago

Are there any other styles we might consider, for instance font-variant-numeric: tabular-nums;?

Yeah, exactly (I wondered if that should be a separate issue request, but...) for anything that is numbers only we should display it in tabular/monospace style.