WordPress.org

Make WordPress Core

Changeset 41356


Ignore:
Timestamp:
09/09/2017 02:13:28 PM (2 years ago)
Author:
afercia
Message:

Administration: Thickbox: Fix conflicts with the Plugin details and native Thickbox modals.

The Plugin details modal custom implementation in the Plugins page conflicts with
other Thickbox instances added by plugins. Thickbox shows its age and has been
modified over time to suit core needs. However, WordPress should do its best to
not create conflicts with the native Thickbox styles and functionalities. Plugin
authors should be able to use add_thickbox() in any admin page as documented,
without having to worry about potential errors.

  • fixes a JavaScript error when closing a native Thickbox modal in the Plugins page
  • avoids to override the native Thickbox modal styles
  • uses a CSS class to target the Plugin details modal and remove a pile of overqualified CSS selectors

Fixes #41417.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r41329 r41356  
    28652865}
    28662866
    2867 /* Thickbox for Plugin Install screen */
    2868 body.about-php #TB_window,
    2869 body.plugin-install-php #TB_window,
    2870 body.import-php #TB_window,
    2871 body.plugins-php #TB_window,
    2872 body.update-core-php #TB_window,
    2873 body.index-php #TB_window {
     2867/* Thickbox for the Plugin details modal. */
     2868#TB_window.plugin-details-modal {
    28742869    background: #fcfcfc;
    28752870}
    28762871
    2877 /* IE 8 needs a change in the pseudo element content */
    2878 .ie8 body.about-php #TB_window:before,
    2879 .ie8 body.plugin-install-php #TB_window:before,
    2880 .ie8 body.import-php #TB_window:before,
    2881 .ie8 body.plugins-php #TB_window:before,
    2882 .ie8 body.update-core-php #TB_window:before,
    2883 .ie8 body.index-php #TB_window:before {
    2884     content: " ";
    2885     background: none;
    2886 }
    2887 
    2888 body.about-php #TB_window.thickbox-loading:before,
    2889 body.plugin-install-php #TB_window.thickbox-loading:before,
    2890 body.import-php #TB_window.thickbox-loading:before,
    2891 body.plugins-php #TB_window.thickbox-loading:before,
    2892 body.update-core-php #TB_window.thickbox-loading:before,
    2893 body.index-php #TB_window.thickbox-loading:before {
     2872#TB_window.plugin-details-modal.thickbox-loading:before {
    28942873    content: "";
    28952874    display: block;
     
    29112890    (min-resolution: 120dpi) {
    29122891
    2913     body.about-php #TB_window.thickbox-loading:before,
    2914     body.plugin-install-php #TB_window.thickbox-loading:before,
    2915     body.import-php #TB_window.thickbox-loading:before,
    2916     body.plugins-php #TB_window.thickbox-loading:before,
    2917     body.update-core-php #TB_window.thickbox-loading:before,
    2918     body.index-php #TB_window.thickbox-loading:before {
     2892    #TB_window.plugin-details-modal.thickbox-loading:before {
    29192893        background-image: url(../images/spinner-2x.gif);
    29202894    }
    29212895}
    29222896
    2923 body.about-php #TB_title,
    2924 body.plugin-install-php #TB_title,
    2925 body.import-php #TB_title,
    2926 body.plugins-php #TB_title,
    2927 body.update-core-php #TB_title,
    2928 body.index-php #TB_title {
     2897.plugin-details-modal #TB_title {
    29292898    float: left;
    29302899    height: 1px;
    29312900}
    29322901
    2933 body.about-php #TB_ajaxWindowTitle,
    2934 body.plugin-install-php #TB_ajaxWindowTitle,
    2935 body.import-php #TB_ajaxWindowTitle,
    2936 body.plugins-php #TB_ajaxWindowTitle,
    2937 body.update-core-php #TB_ajaxWindowTitle,
    2938 body.index-php #TB_ajaxWindowTitle {
     2902.plugin-details-modal #TB_ajaxWindowTitle {
    29392903    display: none;
    29402904}
    29412905
    2942 /* only on these screens */
    2943 .about-php #TB_closeWindowButton,
    2944 .plugin-install-php #TB_closeWindowButton,
    2945 .import-php #TB_closeWindowButton,
    2946 .plugins-php #TB_closeWindowButton,
    2947 .update-core-php #TB_closeWindowButton,
    2948 .index-php #TB_closeWindowButton {
     2906.plugin-details-modal #TB_closeWindowButton {
    29492907    left: auto;
    29502908    right: -30px;
     
    29522910}
    29532911
    2954 
    2955 body.about-php #TB_closeWindowButton:hover,
    2956 body.about-php #TB_closeWindowButton:focus,
    2957 body.plugin-install-php #TB_closeWindowButton:hover,
    2958 body.plugin-install-php #TB_closeWindowButton:focus,
    2959 body.import-php #TB_closeWindowButton:hover,
    2960 body.import-php #TB_closeWindowButton:focus,
    2961 body.plugins-php #TB_closeWindowButton:hover,
    2962 body.plugins-php #TB_closeWindowButton:focus,
    2963 body.update-core-php #TB_closeWindowButton:hover,
    2964 body.update-core-php #TB_closeWindowButton:focus,
    2965 body.index-php #TB_closeWindowButton:hover,
    2966 body.index-php #TB_closeWindowButton:focus {
     2912.plugin-details-modal #TB_closeWindowButton:hover,
     2913.plugin-details-modal #TB_closeWindowButton:focus {
    29672914    color: #00a0d2;
    29682915    outline: none;
     
    29702917}
    29712918
    2972 body.about-php .tb-close-icon,
    2973 body.plugin-install-php .tb-close-icon,
    2974 body.import-php .tb-close-icon,
    2975 body.plugins-php .tb-close-icon,
    2976 body.update-core-php .tb-close-icon,
    2977 body.index-php .tb-close-icon {
     2919.plugin-details-modal .tb-close-icon {
    29782920    display: none;
    29792921}
    29802922
    2981 body.about-php #TB_closeWindowButton:after,
    2982 body.plugin-install-php #TB_closeWindowButton:after,
    2983 body.import-php #TB_closeWindowButton:after,
    2984 body.plugins-php #TB_closeWindowButton:after,
    2985 body.update-core-php #TB_closeWindowButton:after,
    2986 body.index-php #TB_closeWindowButton:after {
     2923.plugin-details-modal #TB_closeWindowButton:after {
    29872924    content: "\f335";
    29882925    font: normal 32px/29px 'dashicons';
     
    29942931/* move plugin install close icon to top on narrow screens */
    29952932@media screen and ( max-width: 830px ) {
    2996     body.about-php #TB_closeWindowButton,
    2997     body.plugin-install-php #TB_closeWindowButton,
    2998     body.import-php #TB_closeWindowButton,
    2999     body.plugins-php #TB_closeWindowButton,
    3000     body.update-core-php #TB_closeWindowButton,
    3001     body.index-php #TB_closeWindowButton {
     2933    .plugin-details-modal #TB_closeWindowButton {
    30022934        right: 0;
    30032935        top: -30px;
  • trunk/src/wp-admin/js/plugin-install.js

    r38172 r41356  
    88
    99    var tbWindow,
    10         $focusedBefore,
    1110        $iframeBody,
    1211        $tabbables,
    1312        $firstTabbable,
    1413        $lastTabbable,
     14        $focusedBefore = $(),
    1515        $uploadViewToggle = $( '.upload-view-toggle' ),
    1616        $wrap = $ ( '.wrap' ),
     
    5959    $body
    6060        .on( 'thickbox:iframe:loaded', tbWindow, function() {
     61            /*
     62             * Return if it's not the modal with the plugin details iframe. Other
     63             * thickbox instances might want to load an iframe with content from
     64             * an external domain. Avoid to access the iframe contents when we're
     65             * not sure the iframe loads from the same domain.
     66             */
     67            if ( ! tbWindow.hasClass( 'plugin-details-modal' ) ) {
     68                return;
     69            }
     70
    6171            iframeLoaded();
    6272        })
     
    150160        tb_click.call(this);
    151161
    152         // Set ARIA role and ARIA label.
    153         tbWindow.attr({
    154             'role': 'dialog',
    155             'aria-label': plugininstallL10n.plugin_modal_label
    156         });
     162        // Set ARIA role, ARIA label, and add a CSS class.
     163        tbWindow
     164            .attr({
     165                'role': 'dialog',
     166                'aria-label': plugininstallL10n.plugin_modal_label
     167            })
     168            .addClass( 'plugin-details-modal' );
    157169
    158170        // Set title attribute on the iframe.
  • trunk/src/wp-includes/js/thickbox/thickbox.css

    r37531 r41356  
    9595    position: fixed;
    9696    display: none;
    97     z-index: 103;
     97    z-index: 100050;
    9898    top: 50%;
    9999    left: 50%;
Note: See TracChangeset for help on using the changeset viewer.