WordPress.org
Get WordPress

Make WordPress Core

Changeset 41356


Ignore:
Timestamp:
09/09/2017 02:13:28 PM (9 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.