Add permalinks to the document sidebar #11874

jorgefilipecosta · 2018-11-14T18:52:36Z

Description

Closes: #11858
This PR adds a permalink panel to the document sidebar, trying to follow the design specified in #11858.

This PR is the first iteration so that we can iterate on the design in parallel.
One missing nice feature is the ability to auto refresh the permalink settings (prefix/suffix) if the settings are changed in another tab, I'm not sure if this feature is a blocker and I wanted to think a little bit better about this part.

How has this been tested?

Verify that if the post is new, the panel does not appear. Some behavior we have on the existing permalink edit UI (close to title).
Verify that if the post does not contains editable permalinks (e.g.: Plain permalink setting) the input is not available and only the post link is shown.
Verify that if the permalink is editable it is possible to edit the permalink without problems and after saving the post the permalink is correctly changed/saved.

Screenshots

youknowriad · 2018-11-14T19:21:00Z

In theory we are in a design freeze moment, but from my perspective the current permalink UI is buggy and not discoverable, I consider this PR as a bug fix.

packages/edit-post/src/components/sidebar/post-link/index.js

Soean · 2018-11-14T19:49:33Z

packages/edit-post/src/components/sidebar/post-link/index.js

+				href={ addQueryArgs( 'options-permalink.php' ) }
+				target="_blank"
+			>
+				{ __( 'Permalink Settings' ) }


Only show it to user roles who are able to change the settings.

packages/edit-post/src/components/sidebar/post-link/index.js

Soean · 2018-11-14T20:15:17Z

packages/edit-post/src/components/sidebar/post-link/style.scss

+}
+
+.edit-post-post-link__link {
+	word-break: break-word;


Not supported in Firefox, see https://caniuse.com/#feat=word-break notes

Suggested change

word-break: break-word;

word-wrap: break-word;

Soean · 2018-11-14T22:57:24Z

If the post type has the argument 'publicly_queryable' => false, we should hide the post-link panel.

karmatosed · 2018-11-15T10:20:37Z

I have removed design feedback as this has had a review.

packages/edit-post/src/components/sidebar/post-link/index.js

youknowriad · 2018-11-15T11:04:15Z

I think the idea is to remove the current permalink UI as well.

karmatosed

I think we need the icon to indicate it's a link that goes out (similar to links) for accessibility, but beyond that approving design. I do wonder why it wasn't an open panel for me, all other document panels were open so it was odd to have this new one not open. I get the logic though.

jorgefilipecosta · 2018-11-15T14:27:14Z

I think the idea is to remove the current permalink UI as well.

Hi @youknowriad the issue specifies:

(@melchoyce worked on a suggested design for this which adds to the document settings (note this adds doesn't remove from title for now):

That was the reason why I did not remove the UI from the title yet.

spencerfinnell · 2018-11-15T14:32:32Z

It makes sense to me to remove it from the content. It's certainly a "Document" setting and is not relevant to blocks (until the Post Title becomes its own block).

jorgefilipecosta · 2018-11-15T14:57:31Z

If the post type has the argument 'publicly_queryable' => false, we should hide the post-link panel.

I added an isViewable check in my tests if CPT has publicly_queryable false isViewable also becomes false.

packages/edit-post/src/components/sidebar/settings-sidebar/index.js

earnjam · 2018-11-15T16:31:26Z

I was about to open PR to resolve #7002 and #7129 as well as give it feature parity with the classic editor. Code is basically ready—I was literally writing out the description right now.

Both of those things are still issues with this new document sidebar panel, but @mtias mentioned the old UI would be removed in #10996.

Should I refocus on fixing them in this new panel? Or just abandon the effort?

melchoyce · 2018-11-15T17:00:02Z

I think we need the icon to indicate it's a link that goes out (similar to links) for accessibility

That makes sense to me 👍

afercia · 2018-11-18T13:37:09Z

Noticed this PR a bit late (and only because #5494 was closed) so there was no chance to give some accessibility feedback so far. At a first glance, there are a few things that could be improved.

1
When creating a new post, the whole panel is not rendered yet in the sidebar. The panel appears only after the first auto-save or after users click on "Save draft". This could be confusing for users who are just exploring the new post screen and wondering where the permalink setting is. It could be even more confusing for screen reader users, as screen readers have special tools to explore a web page (e.g. list all the headings, list all the form controls, list all the links, etc.) and they won't find anything related to the permalink setting. Same potential confusion applies to low vision users, screen magnifier users, users with cognitive impairments, etc. I'd suggest to consider to always show the panel in the sidebar with some meaningful message when a slug doesn't exist yet. Will open a new issue for this.

2
I'd tend to think the input field label URL is a bit confusing, as users might think they have to fill the field with a complete URL starting with http(s).

I've read #11858 (comment) and it makes perfectly sense to avoid technical terms. However, the label could be improved a bit. Also noting Squarespace does use some form of "URL" label but it also expands it adding "slug":

I have no strong opinions on which the best wording would be, but I'd suggest to consider a more meaningful one. Will open a new issue for this.

3
The preview and "Permalink Settings" links use target="_blank" but users are not informed the link is going to open in a new browser's tab. Gutenberg has a component for this: ExternalLink, which also adds an icon. I'm going to push a quick PR to address this issue.

4
Lastly, the numeric value to use for a bold font-weight is 600, see #11687. Will address this in the PR for point 3.

earnjam · 2018-11-18T16:24:49Z

@afercia I addressed a few of those things (like showing on first load instead of on save) in #12009 for the title permalink editor.

Ideally if we are keeping both then they would share components since the logic is not straightforward. If we are removing the title permalink editor, then we could port the logic from my PR to this component.

afercia · 2018-11-18T16:50:49Z

@earnjam thanks! It's not so clear to me what is the process to deprecate the previous permalink UI and when it will be removed, I'm afraid I can't help so much in making a decision.

## Description Closes: WordPress#11858 This PR adds a permalink panel to the document sidebar, trying to follow the design specified in WordPress#11858. This PR is the first iteration so that we can iterate on the design in parallel. One missing nice feature is the ability to auto refresh the permalink settings (prefix/suffix) if the settings are changed in another tab, I'm not sure if this feature is a blocker and I wanted to think a little bit better about this part. ## How has this been tested? Verify that if the post is new, the panel does not appear. Some behavior we have on the existing permalink edit UI (close to title). Verify that if the post does not contains editable permalinks (e.g.: Plain permalink setting) the input is not available and only the post link is shown. Verify that if the permalink is editable it is possible to edit the permalink without problems and after saving the post the permalink is correctly changed/saved. ## Screenshots  <img width="281" alt="screenshot 2018-11-14 at 17 57 30" src="https://user-images.githubusercontent.com/11271197/48504970-ea847b00-e83d-11e8-8c19-484c7007b67c.png"> <img width="277" alt="screenshot 2018-11-14 at 18 19 20" src="https://user-images.githubusercontent.com/11271197/48504971-ea847b00-e83d-11e8-87f5-37d62da62203.png"> <img width="285" alt="screenshot 2018-11-14 at 18 45 37" src="https://user-images.githubusercontent.com/11271197/48504972-eb1d1180-e83d-11e8-82fa-087666d8b6c6.png">

jorgefilipecosta added the Needs Design Feedback label Nov 14, 2018

jorgefilipecosta added this to the 4.4 milestone Nov 14, 2018

jorgefilipecosta requested review from karmatosed and youknowriad Nov 14, 2018

Soean reviewed Nov 14, 2018

View changes

packages/edit-post/src/components/sidebar/post-link/index.js Outdated Show resolved Hide resolved

packages/edit-post/src/components/sidebar/post-link/index.js Outdated Show resolved Hide resolved

Soean reviewed Nov 14, 2018

View changes

packages/edit-post/src/components/sidebar/post-link/index.js

href={ addQueryArgs( 'options-permalink.php' ) }

target="_blank"

>

{ __( 'Permalink Settings' ) }

Copy link

Member

Soean Nov 14, 2018 •

edited

Only show it to user roles who are able to change the settings.

Soean reviewed Nov 14, 2018

View changes

packages/edit-post/src/components/sidebar/post-link/index.js Outdated Show resolved Hide resolved

Soean reviewed Nov 14, 2018

View changes

jorgefilipecosta force-pushed the add/post-link-panel branch from f4578e8 to 2bdf190 Nov 14, 2018

Add Post Link Panel

f244b7e

jorgefilipecosta force-pushed the add/post-link-panel branch from 2bdf190 to f244b7e Nov 14, 2018

karmatosed removed the Needs Design Feedback label Nov 15, 2018

youknowriad removed this from the 4.4 milestone Nov 15, 2018

youknowriad added this to the 4.5 milestone Nov 15, 2018

youknowriad reviewed Nov 15, 2018

View changes

packages/edit-post/src/components/sidebar/post-link/index.js Outdated Show resolved Hide resolved

ocean90 reviewed Nov 15, 2018

View changes

packages/edit-post/src/components/sidebar/post-link/index.js Outdated Show resolved Hide resolved

mtias added the [Feature] Document Settings label Nov 15, 2018

karmatosed approved these changes Nov 15, 2018

View changes

Simplify permalink labels and move panel towards the top.

8d70bc2

mtias removed this from the 4.5 milestone Nov 15, 2018

mtias added this to the 4.4 milestone Nov 15, 2018

Add isViewable check.

73cbb4e

swissspidy reviewed Nov 15, 2018

View changes

packages/edit-post/src/components/sidebar/settings-sidebar/index.js Show resolved Hide resolved

Move permalink panel up.

c9ecf1a

mtias mentioned this pull request Nov 15, 2018

Permalink edit field is too small for long domains #10996

Closed

jorgefilipecosta merged commit b1e11e5 into master Nov 15, 2018
1 check passed

jorgefilipecosta deleted the add/post-link-panel branch Nov 15, 2018

youknowriad mentioned this pull request Nov 15, 2018

Improve Permalink UI placement and tab order #5494

Closed

youknowriad mentioned this pull request Nov 15, 2018

Consider showing the permalink UI when hovering over Title #6268

Closed

youknowriad mentioned this pull request Nov 15, 2018

Permalink edit section inherits styles brought in from add_theme_support( 'editor-styles' ) #11503

Closed

youknowriad mentioned this pull request Nov 15, 2018

v4.3.0 - remove_post_type_support( $post_type, 'title' ) removes permalink field #11929

Closed

lkraav mentioned this pull request Nov 15, 2018

4.4.0: new permalink editor brings confusion when editing Front Page #11943

Closed

afercia mentioned this pull request Nov 18, 2018

Sidebar permalink panel a11y improvements #12030

Merged

afercia mentioned this pull request Nov 18, 2018

Sidebar permalink panel: consider to always render the panel #12031

Closed

afercia mentioned this pull request Nov 18, 2018

Sidebar permalink panel: improve the URL field label #12033

Closed

WordPress / gutenberg Public

Add permalinks to the document sidebar #11874

Add permalinks to the document sidebar #11874

jorgefilipecosta commented Nov 14, 2018

youknowriad commented Nov 14, 2018

Soean Nov 14, 2018 •

edited

Soean Nov 14, 2018

Soean commented Nov 14, 2018

karmatosed commented Nov 15, 2018 •

edited

youknowriad commented Nov 15, 2018

karmatosed left a comment

jorgefilipecosta commented Nov 15, 2018 •

edited

spencerfinnell commented Nov 15, 2018

jorgefilipecosta commented Nov 15, 2018

earnjam commented Nov 15, 2018

melchoyce commented Nov 15, 2018

afercia commented Nov 18, 2018

earnjam commented Nov 18, 2018

afercia commented Nov 18, 2018

WordPress / gutenberg Public

Add permalinks to the document sidebar #11874

Add permalinks to the document sidebar #11874

Conversation

jorgefilipecosta commented Nov 14, 2018

Description

How has this been tested?

Screenshots

youknowriad commented Nov 14, 2018

Soean Nov 14, 2018 • edited

Soean Nov 14, 2018

Soean commented Nov 14, 2018

karmatosed commented Nov 15, 2018 • edited

youknowriad commented Nov 15, 2018

karmatosed left a comment

jorgefilipecosta commented Nov 15, 2018 • edited

spencerfinnell commented Nov 15, 2018

jorgefilipecosta commented Nov 15, 2018

earnjam commented Nov 15, 2018

melchoyce commented Nov 15, 2018

afercia commented Nov 18, 2018

earnjam commented Nov 18, 2018

afercia commented Nov 18, 2018

Soean Nov 14, 2018 •

edited

karmatosed commented Nov 15, 2018 •

edited

jorgefilipecosta commented Nov 15, 2018 •

edited