Permalink Structure Tags buttons

[Apiweb]

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:

[helen]

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.

[Apiweb]

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

[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.

[kpdesign]

Available tags span in Custom Structure option

[kpdesign]

Add available tags span

[kpdesign]

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.

[swissspidy]

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.

[karmatosed]

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

[swissspidy]

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.

[afercia]

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]

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.

[joedolson]

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]

Add ARIA announcement

[joedolson]

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]

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.

[jbpaul17]

This needs a review and an owner if its going to land in 4.8.

[afercia]

I think this is an improvement that would help users enter the custom structure tags and I'd second introducing this feature in core. It would be great to refine some details and make the buttons as much easy to use as possible, as well as error-safe. Some considerations off the top of my head:

Selection
When tabbing through the form fields, the input field content will be selected. Then, when operating on the buttons, any content will be cleared out and the new tag inserted. This may not be the desired result, so maybe consider to add a tag at the end by default?

Description
I'd add a short description of what the buttons do after "Available tags:", something like: Click the buttons below to add custom structure tags surrounded by the percentage sign. (with some better wording).

For screen reader users
I'd consider to avoid screen readers announce the percentage signs, this would require one more string to represent the tag without the % that can probably be generated programmatically. The generated HTML instead of, for example:

<button type="button" data-added="%year% added to permalink structure">
	<code>%year%</code><span class="screen-reader-text">The year of the post, four digits, for example 2004</span>
</button>

could be something like:

<button type="button" data-added="year added to permalink structure"
	aria-label="year (The year of the post, four digits, for example 2004)">
	<code>%year%</code>
</button>

Already used tags
When a tag is already present in the structure, the related button does nothing and that's correct. However, there's nothing that can inform users the button won't produce any effect. It gets a bit trickier but in this case the button should announce something like: aria-label="year (Already used in the Custom Structure". Maybe, the buttons representing already inserted tags should also look differently.

Visuals
I'm not a designer, so I'd ask to real designers, however I was wondering if there's a good reason to style these buttons with the styling usually reserved to <code> elements. After all, they're buttons: users should understand immediately what they are, so maybe style them as standard buttons?

[afercia]

Minor things:
at least one -> at least once. ?

Some "explanation text" end with a period, some don't.

@since needs to be updated

[afercia]

Safari doesn't expose a list as a list to assistive technologies when it's styled with list-style: none;. This is a particularly annoying Safari "feature" since VoiceOver won't announce "list" or the number of items in the list. There's a workaround, it's redundant, the W3C validator will produce a warning when it's used, but it doesn't harm anything: add role="list" on the... list.

[swissspidy]

I'm working on a refreshed patch to address the above feedback.

Then, when operating on the buttons, any content will be cleared out and the new tag inserted. This may not be the desired result, so maybe consider to add a tag at the end by default?

I found this feature to be handy when you want to replace existing tags or add yours at some specific position. For example, when you put the cursor to the beginning of the input and click on a button, the tag will be inserted at the beginning. I added that based on earlier feedback by @joedolson:

1) Ability to place cursor between items and insert new structure in that location instead of end

However, I can remove that selection feature if it doesn't make much sense.

---

When a tag is already present in the structure, the related button does nothing and that's correct. However, there's nothing that can inform users the button won't produce any effect. Maybe, the buttons representing already inserted tags should also look differently.

I have that "Already used" thing working, but I was wondering if we should just disable a button when the tag was inserted. VoiceOver doesn't announce the buttons anymore in that case and you already have the different styling. Also, @joedolson said this earlier:

2) Avoid adding the same structure twice if clicked twice? Should a second click remove that structure from the string?

---

at least one -> at least once. ?

Where did you see that, @afercia?

---

users should understand immediately what they are, so maybe style them as standard buttons?

Makes sense.

[afercia]

Yep I've seen the tag is inserted at the previous cursor insertion point :) However, since the "select all" text in the field is the default behavior when tabbing through the fields, that could lead to unexpected results. I'm not sure how to solve this though.

"Already used"
Hm, maybe use "aria-pressed" on a button representing an already used tag? Then, clicking again the button should remove the tag. aria-pressed conveys that the control works like a "toggle", so maybe it could work. /cc @joedolson

in a comment :)
// See if the permalink structure input field has had focus at least one

[swissspidy]

29872.5.diff​ addresses most of that feedback.

The buttons now look better and are actually toggles.

Regarding this:

Then, when operating on the buttons, any content will be cleared out and the new tag inserted. This may not be the desired result, so maybe consider to add a tag at the end by default?

To solve this issue it's probably the easiest to not select the whole text when tabbing.

[swissspidy]

Here's how the latest patch looks like:

[afercia]

4.8.1 will be a bug-fix maintenance release, so no new features should be introduced. Punting for now.

[swissspidy]

In 41182:

Permalinks: Add buttons for the available structure tags to the admin UI.

Often times, it can be confusing to set a custom permalink structure. One has to double-check the documentation, make
sure to correctly insert the structure tag, and hope not to break their site.

With this addition, the available structure tags are being displayed as a list of easily clickable buttons that can be
used to insert tags to the custom structure input field and to remove them again.

Props kpdesign, swissspidy, joedolson, afercia.
Fixes #29872.

[swissspidy]

In 41183:

Permalinks: Remove unnecessary semicolon after [41182].

See #29872.

[johnbillion]

When clicking on one of the common settings (eg. "Day and name"), the highlighted tag buttons aren't updated to correctly reflect their state.

[swissspidy]

Thanks for pointing this out @johnbillion!

In 29872.6.diff​:

• Deprecate options_permalink_add_js() and move that JS logic to the same place as the one introduced in [41182].
• Call changeStructureTagButtonState() on the buttons when clicking on one of the common settings.

[afercia]

@swissspidy anything left here? planning to commit?

[swissspidy]

I hoped somebody woukd test before committing but I can proceed here to have a bigger audience for testing

[afercia]

I'd say ship it! 🇨🇭 Beta is the right place for final testing.

[swissspidy]

In 41598:

Permalinks: Change structure tag button state more reliably.

Changes the highlighted tag buttons accordingly when selecting one of the commong permalink settings.

Deprecates options_permalink_add_js() as that JavaScript isn't added inline anymore.

Fixes #29872.

[westonruter]

In 42012:

Permalinks: Fix placement of structure tags based on last cursor position.

Props felipeelia, afercia.
See #29872.
Fixes #42042.