Make WordPress Core

Changes between Initial Version and Version 1 of Ticket #51863


Ignore:
Timestamp:
11/24/2020 02:00:33 PM (3 years ago)
Author:
SergeyBiryukov
Comment:

Hi there, welcome to WordPress Trac!

Thanks for the report, this appears to be a result of updating jQuery UI in [49101] / #50564.

Moving to the milestone for visibility.

Legend:

Unmodified
Added
Removed
Modified
  • Ticket #51863

    • Property Component changed from General to External Libraries
    • Property Milestone changed from Awaiting Review to 5.6
  • Ticket #51863 – Description

    initial v1  
    11In 5.6RC1 and 5.6 Nightly the styling of the Close button from a jQuery UI-dialog is different, giving another view of Dialogs. Instead of showing only a cross, like expected, it shows the cross as well as the text “Close”, see attached screenshot.
    22
    3 In 5.5 this text was wrapped in a `span` element that was hidden using `display: none;`. In 5.6 with upgraded jQuery this text is in the `button` element itself, rendering that solution useless. jQuery UI solves that by putting the text away from the screen by use of a gigantic negative text-indent. In WordPress’ [https://github.com/WordPress/wordpress-develop/blob/5.6/src/wp-includes/css/jquery-ui-dialog.css Jquery UI Dialog stylesheet] there is no CSS at all for `.ui-button-icon-only`, as there is on jQueryUI.com. I swiftly tried copying [https://jqueryui.com/dialog/#default the CSS used by jQueryUI] but that doesn’t work in WordPress, since Wordpress seems to rely on `position: absolute;` in the dialog header.
     3In 5.5 this text was wrapped in a `span` element that was hidden using `display: none;`. In 5.6 with upgraded jQuery this text is in the `button` element itself, rendering that solution useless. jQuery UI solves that by putting the text away from the screen by use of a gigantic negative text-indent. In WordPress’ [https://github.com/WordPress/wordpress-develop/blob/5.6/src/wp-includes/css/jquery-ui-dialog.css Jquery UI Dialog stylesheet] there is no CSS at all for `.ui-button-icon-only`, as there is on jQueryUI.com. I swiftly tried copying [https://jqueryui.com/dialog/#default the CSS used by jQueryUI] but that doesn’t work in WordPress, since WordPress seems to rely on `position: absolute;` in the dialog header.