WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 3 months ago

#29872 new feature request

Permalink Structure Tags buttons

Reported by: Apiweb Owned by:
Milestone: 4.8 Priority: normal
Severity: normal Version:
Component: Permalinks Keywords: has-ui-feedback has-patch
Focuses: ui, accessibility Cc:

Description (last modified by jeremyfelt)

I think it would be interesting, in the customization of permalinks screen, display a box with all the available structures, where the user could drag and drop them.

With that, he would not need to open a new page, view the documentation and check what are the available structures. He could already build your own structure on the page by dragging and dropping.

I made a mockup:
http://i.imgur.com/25U4K5Y.png

Attachments (6)

29872-avail-tags.png (109.8 KB) - added by kpdesign 2 years ago.
Available tags span in Custom Structure option
29872.diff (2.2 KB) - added by kpdesign 2 years ago.
Add available tags span
29872.2.diff (3.6 KB) - added by swissspidy 7 months ago.
29872.3.diff (3.9 KB) - added by swissspidy 7 months ago.
29872.4.patch (4.2 KB) - added by joedolson 7 months ago.
Add ARIA announcement
29872.4.diff (5.6 KB) - added by swissspidy 7 months ago.

Download all attachments as: .zip

Change History (25)

#1 @SergeyBiryukov
3 years ago

  • Component changed from General to Permalinks

#2 @helen
3 years ago

Drag-and-drop is not a great starting point (touch, accessibility), but an autocomplete-y method could be interesting. Probably worth a small proof of concept plugin.

#3 @Apiweb
3 years ago

I thought if we used some drag-drop like the one used in the management of menus or widgets, it could work.

#4 @jeremyfelt
3 years ago

  • Description modified (diff)
  • Summary changed from Permainlink Structure Tags drag and drop to Permalink Structure Tags drag and drop

#5 follow-up: @GaryJ
3 years ago

I'd like to see the structures added to the contextual help, or a description span as a simpler first step before looking at something interactive. That alone with save people from having to go look for the documentation elsewhere.

@kpdesign
2 years ago

Available tags span in Custom Structure option

@kpdesign
2 years ago

Add available tags span

#6 in reply to: ↑ 5 @kpdesign
2 years ago

  • Keywords has-patch ui-feedback added

Replying to GaryJ:

I'd like to see the structures added to the contextual help, or a description span as a simpler first step before looking at something interactive. That alone with save people from having to go look for the documentation elsewhere.

I thought about adding a list of available tags to the contextual help, but there is a chance that users would not find them there (issues with Admin Help discoverability).

Deep-linking to a contextual help tab isn't possible now (see #21273), so I opted to add a span below the Custom Structure option to show the available tags. I moved the Codex link to the Available Tags text in this span, and removed the reference to it in the opening section.

This could be a good first step, with possibly adding auto-complete later if someone works up a small proof-of-concept plugin, as @helen suggested.

29872.diff attached.

Available tags span in Custom Structure option

#7 @joedolson
2 years ago

  • Focuses accessibility removed

#8 @swissspidy
17 months ago

  • Focuses javascript administration removed
  • Keywords needs-patch added; has-patch removed

I'd say listing available tags with a click handler to easily add them to the text input is doable. No drag & drop because of the mentioned reasons.

#9 @karmatosed
7 months ago

I'd +1 to not having drag and drop but having suggested tags is a better approach.

#10 @karmatosed
7 months ago

  • Keywords has-ui-feedback added; ui-feedback removed

@swissspidy
7 months ago

#11 @swissspidy
7 months ago

  • Focuses accessibility added
  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to Future Release

In 29872.2.diff:

  • Add a (filterable) list of available tags below the input field, including text for screen readers.
  • Uses buttons for improved keyboard navigation and focus styling
  • When clicking on a tag, the "Custom Structure" radio button is checked automatically (if not already) and the tag gets added to the input field, including leading and trailing slashes.

#12 @afercia
7 months ago

Hello :) Few things noticed so far:

  • the whole feature should be hidden when JS is off
  • adding type="button" to the buttons prevents the form from being submitted even when JS is off and would allow to remove e.preventDefault();

Uses buttons for improved keyboard navigation and focus styling

Buttons would need some specific CSS styling, not all browsers display a native focus style, depending also on the OS

@swissspidy
7 months ago

#13 @swissspidy
7 months ago

Thanks @afercia!

I somehow always forget about type="button" :-)

29872.3.diff adds that in addition to improved focus styling. The list is hidden if JS is disabled.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


7 months ago

#15 @afercia
7 months ago

  • Summary changed from Permalink Structure Tags drag and drop to Permalink Structure Tags buttons

#16 @joedolson
7 months ago

This could make creating custom permalink structures easier, but if we do this, we'll need to make sure that it's clear to screen reader users that something has happened when they click the button.

We discussed this in the accessibility team meeting, and agreed that there are a few specific questions to address:

1) When a button is clicked, what should be announced by a screen reader? Should it announce the entirety of the new custom format, or just what element has been added?

2) Should focus change when a button is clicked?

My opinion is that clicking the button should announce something along the lines of 'post ID added to permalink', and no focus change.

@joedolson
7 months ago

Add ARIA announcement

#17 follow-up: @joedolson
7 months ago

Patch added that announces addition of structure to permalink structure.

Other issues to consider:

1) Ability to place cursor between items and insert new structure in that location instead of end
2) Avoid adding the same structure twice if clicked twice? Should a second click remove that structure from the string?

@swissspidy
7 months ago

#18 in reply to: ↑ 17 @swissspidy
7 months ago

Replying to joedolson:

Other issues to consider:

1) Ability to place cursor between items and insert new structure in that location instead of end
2) Avoid adding the same structure twice if clicked twice? Should a second click remove that structure from the string?

Added in 29872.4.diff. It's even possible to replace the selected text in the input field. Slashes are only added when needed. Adding the same structure tag twice doesn't work either. I also cleaned up the HTML a bit to make it more readable.

#19 @swissspidy
3 months ago

  • Milestone changed from Future Release to 4.8
Note: See TracTickets for help on using tickets.