Gutenberg: Categories default order looks wrong

Created on 30 Aug 2017  路  33Comments  路  Source: WordPress/gutenberg

Checked on latest trunk (after #2606), the default order of the categories in the Categories & Tags panel doesn't seem right.

I have a decent amount of categories in my local install (the ones from the Theme unit test data xml and a few more) so the list is pretty long. Comparing the order in the classic editor and in Gutenberg, they're different:

screen shot 2017-08-30 at 14 26 04

On the left: the classic editor list (I've avoided to expand the list to show all the categories)
On the right: the Gutenberg list split in 3 parts

In a fist time I thought it's an issue related to lowercase/uppercase first letter, but then noticed there's no apparent logic in the misplacement. Some categories with uppercase first letter have a wrong order, others don't.

From a user experience perspective, users should be able to quickly and easily find the category they're interested in and the current core implementation provides an alphabetical order, case insensitive.

Accessibility (a11y) [Type] Enhancement

Most helpful comment

I have a few suggestions of the way we could go with this. I am trying to solve 2 issues:

  • Make it alphabetical
  • Stop endless lists of categories

I would like to suggest the following:

categories-one

categories-two

All 33 comments

The Gutenberg category picker sorts by "count" (occurrence of categories):

https://github.com/WordPress/gutenberg/blob/32647cd2075c8549d39c6982c7742270f584792e/editor/sidebar/post-taxonomies/hierarchical-term-selector.js#L19-L23

The current editor sorts by "name":

https://github.com/WordPress/WordPress/blob/4.8.1/wp-admin/includes/template.php#L227-L262

Agree that it's not intuitive if expecting to scan by names (alphabetical works better), but also surfaces common categories. Flagging for design, question.

How about pulling the top ~5 or so to the top per count, then a horizontal divider, and then the rest of the categories in name order?

Yep, maybe giving users the ability to scan by both (a-z and count) would be best.

From an accessibility perspective, this categories list has always been a bit problematic: when using the keyboard and there are dozens of categories, having to tab through all of them is really annoying. It would be great to have a way to "skip" them, but this is certainly out of the scope of this issue.

Unless someone can provide a very good reason why the Category display should be changed then I see no reason why the display for the Categories and hierarchical custom categories should be any different from the current solution.

Selected Categories first followed by the unselected Categories sorted alphabetically
image

Using Gutenberg, if you're unaware of the Most used context, the order is a complete mess.
image

Also someone needs to explain

  • why the Most Used tab has been eliminated.
  • why there's no scroll bar

The Parent select list for the Create new category action should also be ordered the same way.

This is not an enhancement. It's required to fix an undocumented backward incompatible change..

Personally, name is what I expected too. Working on a site that has been active for 16 years (pre-WP, migrated in at some point), so there is a lot of content over the years. New categories have been added, focus of the site shifted over the years, etc. The count makes it confusing and difficult to find some of the newer categories used on the site currently and presently "active".

With a name order, there is an obvious sort order and awareness of where to look for a particular category.

I thought this was a bug not a feature. Please organize categories by name. I agree with everything @kraftbj is stating. I have 52 categories going back to 2004 and the category listing is just a mess right now.

If we're going to keep the current order, then put post counts next to the category name to help people understand why the order is what it is. Right now it seems random to new users.

This confused me too. I agree that surfacing popular categories is a good thing, but I think that the side-effect of making all other categories difficult creates a problem that's much worse.

If they're alphabetical, then it's obvious and intuitive. Maybe it takes half a second to scan the list, but that's a lot less painful than having to look through every single item, especially when there are dozens, or even hundreds, of items.

Maybe a better way to solve the problem would be to add a search or autocomplete option instead?

Hi,
This default nuimbering by count is horrible. I have lots of categories and subcategories. It takes me ages to find a category I'm looking for.
If you can't provide a way to turn this 'feature' off, I'll be forced to switch Gutenberg off.

Hi folks, I'm starting to work on this today.

I have a few suggestions of the way we could go with this. I am trying to solve 2 issues:

  • Make it alphabetical
  • Stop endless lists of categories

I would like to suggest the following:

categories-one

categories-two

Is there at least a filter or a setting that can be used to change it back to alphabetical-by-name?

Don't see a way to filter sorting with the current code, as sorting is defined as non-filterable constant here:

https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js

const DEFAULT_QUERY = { per_page: -1, orderby: 'count', order: 'desc', _fields: 'id,name,parent', };

Sort by name should be default and custom filters should be supported.

I myself thought it is a bug. Have on one website 76 categores and subcategories, and it is mild to say it is big mess.

Hi,

I was looking for a way to correct this and discover this topic.
It's completly unbelievable that such a simple thing is open for more than one year!!
It's stupid to sort by count.
I have a hierarchical custom taxonomy, it's such a mess to find the good one in all the listing!
@karmatosed your filter idea was really good, why did you left? :-)
So please, just make the rollback to previous alphabetical sorting asap. And by asap, i mean before version 5.0 of wordpress and mandatory gutenberg..

@chezmat I removed my assignment as it had a design, next up we get development so this is still potentially to work on.

If we're ok going with the design in https://github.com/WordPress/gutenberg/issues/2607#issuecomment-412651062 I can start looking at that? Although it doesn't seem to have the hierarchical view of categories that it used to have. Is that intentional?

yes please!

If we're ok going with the design in #2607 (comment) I can start looking at that? Although it doesn't seem to have the hierarchical view of categories that it used to have. Is that intentional?

The hierarchical view of categories is required. Not having it will lead to confusion when there are multiple categories with the same name in different parts of the hierarchy.
Can you not simply start reproducing the current implementation in WordPress core?

Re: the design in https://github.com/WordPress/gutenberg/issues/2607#issuecomment-412651062 can we please stop using placeholders as replacement for labels? This is something that has been discussed at length in various other issues and it's far from ideal for accessibility. There's also a core Trac ticket about it, with a pretty good amount of documentation and literature linked, see https://core.trac.wordpress.org/ticket/40331

With regards to the general issue, I'd tend to think the best option is to just have parity with the current implementation in core: alphabetical and with hierarchy.

I'd tend to think the best option is to just have parity with the current implementation in core: alphabetical and with hierarchy.

I agree totally.

So, plan is to sort alphabetically, hierarchy with indentation, limit the height of the list so large lists don't make the page incredibly long, and have a search box at the top of the category that does as-you-type filtering.

And please, please make a solo-mode. When one header is clicked other is automatically closed.
No need for all those sections in right sidebar to stick to our eyes all the time open.
( How much time worst talented person for Web editing needs to learn what is inside those headers (sections) ? 2 whole days I would guess. )

  • Click to expand categories section. See, do, what you need.
  • Click on another section, say featured image.
  • Categories section is automatically closed.

Only one visible all the time is of course first one.

When one header is clicked other is automatically closed.

@StaggerLeee The _behaviour_ of the sidebar sections is not related to the _content appearance_ of the categories section.

Please find an existing ticket, or open one, to voice your opinions about the behaviour of the sidebar sections.

Little bit of progress...

newcategoryui

@notnownikki How do you intend to deal with multiple results on the search?
e.g. having orange under marmalade as well as jam.

@bobbingwide like this, I think it works ok?

orange

Those look great @notnownikki, kudos :)

What's the plan for showing categories which are already selected, when there are more than 100 categories, and some of the selected categories may not be returned in the first 100, and they're not top level categories.

@notnownikki : i love that!
@bobbingwide you're right. I think the selected items should be top of the list, anyway, it's not very convenient..
image

Thanks for the feedback everyone :)

I have some refactoring to do to fix accessibility issues, and then I'll get the selected categories showing at the top, and then I think we'll have something that works quite nicely!

10138 fixed this, but the PR message missed the format to trigger GitHub to close the issue. This is closed, thanks @notnownikki! 馃憤

Unfortunately, there is still a Bug which results in first entry not being in alphabetical order.

Tested with WP 4.9.8 and Gutenberg 4.0. This bug occurs on both, add post and edit post screens.

screenshot-dev paymentandbanking com-2018 10 18-09-43-50
screenshot-cloud2 straightvisions com-8443-2018 10 18-09-42-37

@straightvisions I can't reproduce that, could you open an issue and let us know the steps to produce please?

Maybe one more case to check: I've added a newone category from the form below the list and it ended up in the middle of the list:

screen shot 2018-10-18 at 10 07 03

In the Classic Editor, the newly added categories are temporarily displayed as first item in the list, so they're immediately visible.

Refreshing the page in Gutenberg displays newone in the correct order but seems other categories are not sorted correctly, see antiquarianism:

screen shot 2018-10-18 at 10 09 28

Note: the list of categories in my install comes from the themes unit test data xml.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ellatrix picture ellatrix  路  3Comments

jasmussen picture jasmussen  路  3Comments

franz-josef-kaiser picture franz-josef-kaiser  路  3Comments

wpalchemist picture wpalchemist  路  3Comments

youknowriad picture youknowriad  路  3Comments