wpLink autocomplete results styles are not available when wp_editor() is used on front-end

[imath]

Hi,

I'm not sure if WordPress should deal with this, but just in case it should, i've noticed for one of my plugin that uses the wp_editor() on front end that autocomplete results were looking a bit ugly. So i've fixed it at my level (see ​https://github.com/imath/wp-idea-stream/issues/56).

But if WordPress should deal with this more globally. Here's the explanation, now the wpLink feature is using the jQuery Autocomplete UI to populate results, as the wp-admin/css/forms.css is only loaded in back-end results are looking pretty ugly on front-end...

I suggest the attached patch, just in case.

[ocean90]

@imath Can you attach some before/after screenshots please?

[imath]

@ocean90

Sure. This is before the patch:

And this is once the patch is applied

[azaozz]

No need to make another stylesheet for this. These styles should be in editor.css which is for styling around both editors. They also will need to be a bit more specific to not interfere with the default UI Autocomplete styling that may be used at other places. Patch coming up.

[azaozz]

In 36461.1.patch: add the styles for UI Autocomplete to editor.css and make them a bit more specific to not interfere with the default autocomplete styling.

[imath]

Great!

@azaozz i've just tested the patch and i confirm it's fixing the issue.

[azaozz]

@imath thanks.

I realize this is relatively minor, and plugins can add these styles themselves, but would be good to consider it for fixing in 4.5 even this late. 36461.1.patch only copies the already used styles and makes them available on the front-end.

[kirasong]

Replying to azaozz:

would be good to consider it for fixing in 4.5 even this late. 36461.1.patch only copies the already used styles and makes them available on the front-end.

Agreed. This is dangerously close to (if not) a regression anyway.

Let's get the other review needed to commit this.

[ocean90]

azaozz:

36461.1.patch only copies the already used styles and makes them available on the front-end.

See https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/forms.css?rev=36619&marks=586-594,598-601,605-606#L584.

---

Noticed another issue with the too common .alignright class in Twenty Sixteen, see before.png​. Fixed in 36461.2.patch​ by using the same class names as in the old modal, see after.png​.

[jeremyfelt]

+1 for 36461.2.patch​. There are some other styling issues that existed in 4.4 (probably earlier) once you hit the gear icon, but that's not a regression.

[azaozz]

We shouldn't be using .item-title and .item-type in autocomplete as they are used in the "rivers" in wpLink where the styling is different. Also, .item-title is not needed there at all. If we must change the class name, lets make it something more specific to the editor. See 36461.3.patch.

[kirasong]

If anyone else thinks 36461.3.patch​ is the right way to go, would be great to get this committed before tomorrow morning's dry run.

[ocean90]

In 37174:

TinyMCE, inline link: Make styles for the autocomplete results available on front end.

Also, replace the generic .alignright class with a more specific class to avoid styling issues with themes which have padding/margin attached to .alignright.

Props azaozz, imath.
Fixes #36461.