DataViews edit page and template: remove multiple edit actions

[karmatosed]

What problem does this address?

In DataViews there are two issues.

1. Edit can appear twice.
2. A single menu item just with 'edit' can be seen on for example Templates. Where on pages this might be a pancil icon and also in menu.

What is your proposed solution?

Overall, I would suggest not using hidden option menus. However, that patterns iteration is a longer discussion. I would like to focus on a fix that can clean up this situation. Then looking at ways to expose as much as possible on interaction over use any hidden menus would be the way forward.

Option one: Remove the pencil icon and only have edit in the menu.
This is less than ideal as the primary action is probably 'edit,' which is why it was exposed in the first place.
The reason to do this might be that the pencil icon is less accessible, but I would love feedback on this. Having hidden features might be less desirable in an options menu.

Evidence to maybe do this is that the Post screen hasn't got an exposed primary action:

Option two: Remove edit from the menu
As it is exposed as a primary feature anyway, this means that this interaction would be true:

• Any primary action is visible outside the menu and removed as text in menu.
• The options menu with just 'edit' would be removed, and the pencil icon would be added.

This could also apply to other cases. In the case of the Post screen, this could even make rename work by clicking inside the field later. That feels outside the scope of this ticket but is a natural behaviour expected by fields. I think 'view' is the primary. This is one of the issues with these hidden menus and only exposing the primary.

[Rishit30G]

Thanks for sharing the issue,

I was able to achieve the first option suggested: Remove the pencil icon and only have edit in the menu

This was a simple fix, however even I feel that option two is much more viable
I did give the second option a try, but couldn't achieve it because the useEditPostAction tightly couples the icon and label present in the DataView, I'll try to investigate more if we can make option two possible

However for now, below screencast shares the draft PR ( #68797 ) changes to achieve Option 1:

Screen.Recording.2025-01-21.at.11.15.50.AM.mov

[karmatosed]

Thank you @Rishit30G for this. I do wonder if we can do something though about keeping the icon. Seeing this makes me really miss it. It also doesn't resolve the menus with just that item in it.

[Rishit30G]

Noted @karmatosed, as mentioned above I will investigate it and see how we can achieve that 👍🏻

[carolinan]

There are many past discussions about these menus and workflows, including:
#65165
#65600

[Rishit30G]

It also doesn't resolve the menus with just that item in it.

Please let me know if this looks good @karmatosed ? 🙇🏻

[Rishit30G]

On investigating a little bit I could find that when we are on the Grid or Table view has 3 icons ( Edit, View Delete ) that appear but they are also mentioned in the action dropdown that we have, so would that also need some cleanup i.e the option version of these icons should be removed from the dropdown ? 🤔
Because we plan to remove it from the List view then we should also consider Grid and Table
Requires a design feedback 🙇🏻

Screen.Recording.2025-01-22.at.1.58.58.PM.mov

[carolinan]

In the template grid view, do we really want a new icon option for edit, and then another button with three dots beside it, that opens a menu that contain a single option? Theme templates that have been edited by the user can be reset, and if edit is moved, that will be the only option in the menu.
Do we want the options to be different depending on if the template is edited?

User created templates have rename and delete, so the three dot menu will always have at least two options.

[afercia]

A single menu item just with 'edit' can be seen on for example Templates.

Focusing only on this point, I think dropdown menus with only one item are a broader issue across the editor, not limited to Dataviews. It's been discussed previously and I'm still not sure what the benefit of having a dropdown menu that only contains one item is. To me, it's clearly an usability issue and it forces users to a double click to 1) discover 2) take the action.

Most of these menus with only one item use an ellipsis icon, which already has inherent accessibility issues. Also, conceptually, the ellipsis icon is a 'More' menu, which implies there should be other controls before it. However, the ellipsis icon button is often used 'in isolation' and named inconsistently: Actions, Options, etc.

A couple previous related discussions: #42555 and #42505. Quoting:

The ellipsis button opens a dropdown menu, even when the menu contains just one item. In this case, users are forced to click twice to actually take the only available action. Seems to me this isn't ideal. When there's only one action, there's no need for a dropdown menu in the first place.

A few usage examples outside of the Dataviews can be seen at:

• Template cards > ellipsis button
• Pattern cards > ellipsis button
• Styles > Colors > Edit palette > 'Color options' ellipsis button
• Styles > Background > 'Background image options' ellipsis button > Toolspanel with only one setting to reset

Screenshots:

Overall, I'd think the 'menu with only one item' pattern should be considered holistically and likely have a separated issue for discussion.

Note: The background setting 'Reset all' sounds a little off as there's only one thing to reset.

[Rishit30G]

Thanks for sharing your views and thoughts @carolinan and @afercia! 🙇🏻
So for now I believe I can make the fix for removing the 3 dot icon from template grid and table and only keep the icon for a user friendly experience
I have updated my PR accordingly ( #68797 )

[afercia]

A single menu item just with 'edit' can be seen on for example Templates.

I'd think this specific part of the issue should be extended to all cases where a menu contains only one menu item. It's not just about the 'edit' action. There are other cases where the ellipsis menu contains only one item e.g. in Patterns > All patterns, it only contains 'Duplicate':

As an user, I don't want to have to open a menu to find only one action that doesn't need a 'More" menu.

[Rishit30G]

I would be introducing a new filter function, to separate out the Primary Actions from the dropdown and make them visible as icons only
So before committing the code, I would like to share a screencast that shows how the Grid and Table would look like:
Please share your thoughts/suggestions if it is the expected solution to the issue raised 🙏🏻

Screen.Recording.2025-01-30.at.4.23.43.PM.mov

Feedback from Mamaduka: #68797 (comment)

I think the current action-related design choices are intentional. The gird uses a compact version because there is limited space.

It's probably better to move the conversation back to the issue before we move forward with a solution.

[carolinan]

Duplicate is only the single item for theme patterns.
If it is moved, it will be in two different places depending on the pattern type, which may also be confusing and add to the cognitive load.

[afercia]

To my understanding, these menus handle the so called 'eligible actions'. An action may be 'primary' and there's some logic to determine whether the primary actions should be displayed as single icon buttons or within the dropdown menu. This also depends on the isCompact prop of the ItemActions component.

However, when a Primary action is rendered as single button, it is not filtered out from the other 'eligible actions' used for the dropdown menu. This seems to me the first thing to look into and it's responsible for the duplication.

One more thing I would like to address is that when there is only one action, it should not use the dropdown menu and instead be displayed as a single button.

I will try a demo PR to better illustrate.

[afercia]

I submitted #68965 as a demo to illustrate the above. Would appreciate if someone more familiar than me with dataviews could have a look at it 🙏🏻 @WordPress/gutenberg-core

[Rishit30G]

This PR looks good to me on testing @afercia, it's solves the issue and handles the edge cases as well 🙇🏻

Even I had the same code approach when I discussed about introducing a new function 😄

I would be introducing a new filter function, to separate out the Primary Actions from the dropdown and make them visible as icons only

A small concern I had with this code snippet:

const _nonPrimaryActions = _eligibleActions.filter(
   ( action ) => ! _primaryActions.includes( action )
);

I think using some with id check instead of includes would be a more robust approach here, like this:

const _nonPrimaryActions = _eligibleActions.filter(
      ( action ) =>
      !_primaryActions.some(
	   ( primaryAction ) => primaryAction.id === action.id
      )
);

Just a suggestion, please feel free to share your thoughts and as mentioned someone more familiar with dataviews can review the PR better! 👍🏻

[afercia]

Even I had the same code approach when I discussed about introducing a new function 😄

@Rishit30G Yes I read your comment right after I submitted the draft PR at #68965 😄 Looks like we were thinking the same thing.
Thanks for your code suggestion, the draft PR can definitely be improved. I'd like some eyes from someone more familiar with the dataviews anyways as I may be missing something. I'll switch it from draft to a real PR soon so it can be discussed and reviewed.

[afercia]

Some design feedback has been posted by @jameskoster on the draft PR that tries to split the actions. Quoting it here to keep the genereal discussion in one place:

I'm a bit concerned about removing primary actions from the actions menu. The intended UX pattern is that the menu consistently includes all available actions, while consumers of the Dataviews component can highlight specific actions they believe users will need more frequently in layouts like Table and List. If we change this behavior, we'll introduce inconsistencies where the menu’s contents vary depending on the selected layout.

For example, on the Templates page, the Table layout actions menu would only include ‘Rename,’ whereas in Grid layout, it would contain ‘Edit,’ ‘Rename,’ and ‘Delete.’ This inconsistency could be frustrating for users who habitually access actions via the menu regardless of layout.

Additionally, visually inconsistencies would exist within the same page. In Grid layout on the Templates page, theme-supplied templates would have an 'Edit' icon button, while custom user-generated templates would display an ellipsis icon button. Furthermore, once a theme-supplied template is edited, the 'Edit' button would disappear, replaced by an ellipsis icon button that surfaces a menu including 'Edit' and 'Reset.' I don't know that this behvaior is helpful.

Finally, another reason to keep all actions in the menu is so that it can function as a context menu when users right-click a record, ensuring a consistent and predictable experience.

[afercia]

If we change this behavior, we'll introduce inconsistencies where the menu’s contents vary depending on the selected layout.

This argument can be used for the Primary actions as well. I'm not sure I understand why some actions are considered "Primary" in a specific layout and aren't in another layout. For example, the 'Edit' action in Pages > List and Pages > Grid:

Pages List	Pages Grid

To me, it seems this has been done more for 'visual' considerations rather than functional considerations. Providing a primary 'Edit' action in the List view that suddenly disappears in the Grid view isn't the best user experience IMHO. I'm wondering whether it would be beneficial to audit and improve consistency of all the primary actions across all the views. Ideally, they should be consistent.

on the Templates page, the Table layout actions menu would only include ‘Rename,’ whereas in Grid layout, it would contain ‘Edit,’ ‘Rename,’ and ‘Delete.’

Not sure I follow. Gor me, by default Templates only show 'Edit'.

Furthermore, once a theme-supplied template is edited, the 'Edit' button would disappear, replaced by an ellipsis icon button that surfaces a menu including 'Edit' and 'Reset.' I don't know that this behvaior is helpful.

This wouldn't happen if 'Edit' is defined as Primary action.
Currently, it shows the ellipsis menu with only 'Edit' by default. I think this is one of the main points, as I really can't understand a dropdown menu that contains only one item. I don't know such an UI is helpful as it forces users to 1) discover 2) perform an unnecessary double click.

After a template is edited, the ellipsis menu shows 'Edit' and 'Reset'. If we filter out 'Edit' and shwo it as Primary, then the menu would only contain 'Reset', which would repurpose the problem of a dropdown menu with only one item. I'm wondering if the dropdown menu should be forced to render only when it contains at least two items.

[Rishit30G]

Sharing some visual evidences, to add to the points shared in the above conversation:

on the Templates page, the Table layout actions menu would only include ‘Rename,’ whereas in Grid layout, it would contain ‘Edit,’ ‘Rename,’ and ‘Delete.’

This occurs when there it is a user created template

Table Layout	Grid Layout

Furthermore, once a theme-supplied template is edited, the 'Edit' button would disappear, replaced by an ellipsis icon button that surfaces a menu including 'Edit' and 'Reset.' I don't know that this behavior is helpful.

After a template is edited, the ellipsis menu shows 'Edit' and 'Reset'. If we filter out 'Edit' and show it as Primary, then the menu would only contain 'Reset', which would repurpose the problem of a dropdown menu with only one item. I'm wondering if the dropdown menu should be forced to render only when it contains at least two items.

I agree, it’s quite tricky. Another dilemma is that the same issue can arise when dealing with user-created templates in Grid View. Currently, the dropdown contains three options: Edit, Rename, and Delete. If we move two primary actions (Edit and Delete) out of the dropdown, it would leave only one option (Rename) in the menu.