WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#36461 closed defect (bug) (fixed)

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

Reported by: imath Owned by: ocean90
Milestone: 4.5 Priority: normal
Severity: normal Version: 4.6
Component: TinyMCE Keywords: commit has-patch has-screenshots
Focuses: Cc:

Description

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.

Attachments (6)

36461.patch (1.6 KB) - added by imath 4 years ago.
36461.1.patch (905 bytes) - added by azaozz 4 years ago.
before.png (67.4 KB) - added by ocean90 4 years ago.
36461.2.patch (1.7 KB) - added by ocean90 4 years ago.
after.png (53.0 KB) - added by ocean90 4 years ago.
36461.3.patch (1.7 KB) - added by azaozz 4 years ago.

Download all attachments as: .zip

Change History (20)

@imath
4 years ago

#1 @ocean90
4 years ago

  • Keywords needs-screenshots added

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

#2 @imath
4 years ago

@ocean90

Sure. This is before the patch:

https://cldup.com/KQiToRYznL.png

And this is once the patch is applied

https://cldup.com/n2uEu6PpPh.png

#3 @azaozz
4 years ago

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
4 years ago

#4 @azaozz
4 years ago

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.

#5 @imath
4 years ago

  • Keywords needs-screenshots removed

Great!

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

#6 follow-up: @azaozz
4 years ago

  • Milestone changed from Awaiting Review to 4.5

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

#7 in reply to: ↑ 6 @mikeschroder
4 years ago

  • Keywords commit has-patch added

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.

This ticket was mentioned in Slack in #core by mike. View the logs.


4 years ago

@ocean90
4 years ago

@ocean90
4 years ago

@ocean90
4 years ago

#9 @ocean90
4 years ago

  • Keywords has-screenshots added

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.

Last edited 4 years ago by ocean90 (previous) (diff)

#10 @jeremyfelt
4 years ago

+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
4 years ago

#11 @azaozz
4 years ago

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.

#12 @mikeschroder
4 years ago

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.

This ticket was mentioned in Slack in #core by mike. View the logs.


4 years ago

#14 @ocean90
4 years ago

  • Owner set to ocean90
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.