![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
#65302 closed defect (bug) (wontfix)
Model Window Insert Media Insert button not visible on default color scheme
| Reported by: | neo2k23 | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.0.1 |
| Component: | General | Version: | trunk |
| Severity: | normal | Keywords: | reporter-feedback |
| Cc: | Focuses: |
Description
Hi
The Model Media select window "Select Image" button disappears on the default color screen when a image is selected.
See attached images
Please provide a fix
Thank you
Attachments (8)
Change History (24)
#1
@
7 weeks ago
- Keywords reporter-feedback added
I've tested in both the default editor and using the classic editor plugin and can't replicate this. @neo2k23 Can you please ensure this issue is present while using a default theme and without any plugins active and also provide clear steps to reproduce (you may want to consider making and uploading a screen recording if that is easier)
#2
@
7 weeks ago
The theme uses this code
https://mikejolley.com/blog/2012/12/21/using-the-new-wordpress-3-5-media-uploader-in-plugins/
Btw It does not happen when you select another color scheme for the user. It only happens in the default color scheme.
Does that set you in the correct direction?
The theme is using this code.
var file_frame;
jQuery('.theme-add-media-button').on('click', function( event ){
var button = $(this);
var target = button.data('target');
var return_id = button.data('return_id');
var media_type = button.data('media_type');
if (typeof media_type === 'undefined'|| media_type==null || typeof media_type == 'string' && !media_type.trim()) media_type='image';
if (typeof return_id === 'undefined'|| return_id==null || return_id!=false && return_id!=true) return_id=true;
//button.blur();
button.trigger('blur');
event.preventDefault();
// If the media frame already exists, reopen it.
//if ( file_frame ) {
//file_frame.open();
//return;
//}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: jQuery( this ).data( 'uploader_title' ),
library: { type : media_type },
button: {
text: jQuery( this ).data( 'uploader_button_text' ),
},
multiple: false // Set to true to allow multiple files to be selected
});
file_frame.on( 'select', function() {
attachment = file_frame.state().get('selection').first().toJSON();
imagewidth = $('#'+target+'_preview').attr('data-imagewidth');
if(parseInt(attachment.width,10)<parseInt(imagewidth,10)){
imagewidth = attachment.width;
}
if($("#"+target).length>0){
if (media_type.toLowerCase().includes('video')) {
if (return_id===true) $("#"+target).val('{"type":"attachment_id","value":"'+attachment.id+'"}');
else $("#"+target).val('{"type":"attachment_url","value":"'+attachment.url+'"}');
$("#"+target+"_preview").html('<div class="thickbox"><figure class="wp-block-video"><video autoplay controls loop muted src="'+attachment.url +'" style="width:100%;max-width:240px;height:auto;"></video></div></figure>');
} else {
if (return_id===true) $("#"+target).val('{"type":"attachment_id","value":"'+attachment.id+'"}');
else $("#"+target).val('{"type":"attachment_url","value":"'+attachment.url+'"}');
$("#"+target+"_preview").html('<a class="thickbox" href="'+attachment.url+'?"><img width="'+imagewidth+'" src="'+attachment.url+'"/></a>');
}
}
});
file_frame.open();
});
#3
@
7 weeks ago
- Milestone Awaiting Review → 7.0.1
This issue is similar to #64840, where the fallback value for the default primary color might not be applied correctly. There might be a case where the fallback is not applied.
@neo2k23, Is it possible to download the theme where the issue is occurring so we can investigate it?
#4
@
7 weeks ago
@wildworks Please checkout your direct message on slack.
Btw it looks like exact the same issue https://core.trac.wordpress.org/ticket/64840
but the base styles are enqueued. If i select a another color scheme for the user there is no issue and the button shows. It is only in the default wordpress color scheme which is set by default to the user
#5
@
7 weeks ago
@neo2k23 On which screen and how is that media modal built? Normally, in the WordPress dashboard, --wp-admin-theme-color should be defined by default.
#6
@
7 weeks ago
@wildworks the windows is exactly build as described by mike jolley https://mikejolley.com/blog/2012/12/21/using-the-new-wordpress-3-5-media-uploader-in-plugins/
You asked for logins or a the theme. I contact you on slack to make that happen. I also send you detailed information about how to get to that point. But you did not respond so i did not send any logins yet.
So how do you want to proceed on this? Maybe can you contact Mike Jolley if you don't want to get on slack to get the required logins?
I can't put logins or the theme in here.
The default color i am talking about is the color scheme set. https://core.trac.wordpress.org/attachment/ticket/65302/color-scheme-set.jpg
If you select any other color scheme the button is visisble and it works just fine. Essential css is missing in the default color scheme causing the issue.
Look at the image i send you The primary color is set to --wp-admin-theme-color by the css below and --wp-admin-theme-color has no value.
.wp-core-ui .button-primary {
background: var(--wp-admin-theme-color);
border-color: transparent;
border-radius: 2px;
color: #fff;
}
Its a bug!
#7
@
7 weeks ago
i have to add that it is actually only working in the fresh color scheme as it does not load the color.css on top of the button.css. In all others it goes astray by the color.css loaded
@jorbin feedback given
#8
@
7 weeks ago
I think i know the why.
The admin-scheme.css uses the body element
body.admin-color-modern {
--wp-admin-theme-color: #3858e9;
--wp-admin-theme-color--rgb: 56, 88, 233;
--wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);
--wp-admin-theme-color-darker-10--rgb: 33.0384615385, 68.7307692308, 230.4615384615;
--wp-admin-theme-color-darker-20: rgb(23.6923076923, 58.1538461538, 214.3076923077);
--wp-admin-theme-color-darker-20--rgb: 23.6923076923, 58.1538461538, 214.3076923077;
--wp-admin-border-width-focus: 2px;
}
The popup i have has a tb_window iframe TB_iframeContent with a body and on top of that the media selector popup. All the default scripts are loaded before the body after iframe TB_iframeContent
The media selector however has somehow lost the connection between the body within the iframe. so body.admin-color-modern is not applied.
I have to add that css myself to the iframe wrapper and then it works>
If i add
.wp-core-ui .button-primary {
--wp-admin-theme-color: #3858e9;
--wp-admin-theme-color--rgb: 56, 88, 233;
--wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);
--wp-admin-theme-color-darker-10--rgb: 33.0384615385, 68.7307692308, 230.4615384615;
--wp-admin-theme-color-darker-20: rgb(23.6923076923, 58.1538461538, 214.3076923077);
--wp-admin-theme-color-darker-20--rgb: 23.6923076923, 58.1538461538, 214.3076923077;
--wp-admin-border-width-focus: 2px;
}
To the theme shortcode css it works again.
#9
@
7 weeks ago
You asked for logins or a the theme. I contact you on slack to make that happen. I also send you detailed information about how to get to that point. But you did not respond so i did not send any logins yet.
Please avoid requesting tests using private methods, as this will prevent other contributors from testing the code. If you cannot disclose the site or code where the problem is occurring, it would be helpful if you could provide detailed code or steps so that anyone can reproduce the problem.
Judging from your screenshots, it appears you have the Classic Editor enabled and are building your own media modal.
I enabled the Classic Editor and ran the following code to try and reproduce the issue.
const frame = wp.media( {
title: 'Media Library',
multiple: false,
} );
frame.on( 'open', () => {
frame.content.mode( 'browse' );
} );
frame.on( 'select', () => {
console.log( frame.state().get( 'selection' ).toJSON() );
} );
frame.open();
However, the primary button has the correct background color applied by default.
@
7 weeks ago
Launch a custom media modal in the classic editor. The background color of the primary button is displayed correctly.
#10
@
7 weeks ago
@wildworks You asked for send me the theme. I can't as its a commercial theme. I am not allowed todo so. So i tried to create a ability so you could login and see the issue and maybe work from there.
The modal screen you are creating is not a iframe that has another insert media button and that launches the custom media modal. To moment you do so there is no connection to the body.admin-color-modern (color scheme) as there is no body wrapper in the second popup.
However the default color scheme css if changed to .wp-core-ui .admin-color-modern (color scheme) would have worked.
There was no intention to prevent other contributors from testing the code. I just thought getting someone to look at the code (in this case you) who is probably better than me to describe how to get to the point where the bug occurs, narrow it down as i can not.
Thank you
Kind regards
#11
@
5 weeks ago
there is no body wrapper in the second popup.
This is strange. Does this mean that the popup is being rendered outside the body element? For example, like this
<html> <head></head> <body> </body> <div class="popup"></div> </html>
#12
@
5 weeks ago
@wildworks exactly. And because the css start like body.admin-color-modern the popup has no body tag and that is why its failing. Had the css been written like
.admin-color-modern {
--wp-admin-theme-color: #3858e9;
--wp-admin-theme-color--rgb: 56, 88, 233;
--wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);
--wp-admin-theme-color-darker-10--rgb: 33.0384615385, 68.7307692308, 230.4615384615;
--wp-admin-theme-color-darker-20: rgb(23.6923076923, 58.1538461538, 214.3076923077);
--wp-admin-theme-color-darker-20--rgb: 23.6923076923, 58.1538461538, 214.3076923077;
--wp-admin-border-width-focus: 2px;
}
It would have worked.
I now can fix the issue by adding the missing css to the stylesheet used for the popup. Its a bit double but it works.
Thanks for digging into this with me.
#13
@
5 weeks ago
And because the css start like body.admin-color-modern the popup has no body tag and that is why its failing.
Since only the head and body tags are allowed within the HTML tag, the following HTML is incorrect in the first place.
<html> <head></head> <body> </body> <div class="popup"></div> </html>
Why/how are you rendering the popup outside the body element? This doesn't seem to be the core issue.
#14
@
5 weeks ago
the frame is a shortcode generator which has a insert image button. That triggers the modal image insert popup. Your example triggers the image insert popup directly in the modal iframe. But when you tigger the image insert popup from within the modal iframe then the issue occurs.
So why is this not a wordpress issue? It is a wordpress issue because of the css used. Why is the body tag added to the css it is completely unnecessary. And without it everything would have worked either way.
I added images which i also had send you in the slack chat. I will add two of them here. I can still provide you access to the demo by slack if you want so you can see it yourselves. It is hard to decsribe for me in words. Just let me know if you want to take a peek.
#15
@
5 weeks ago
the frame is a shortcode generator which has a insert image button. That triggers the modal image insert popup. Your example triggers the image insert popup directly in the modal iframe. But when you tigger the image insert popup from within the modal iframe then the issue occurs.
I am running various tests to reproduce the issue, but I cannot reproduce it in my environment. To allow all contributors to work on this ticket, we need steps and public code that anyone can test, rather than a specific closed environment or code. In any case, rendering a popup outside the body is not correct from an HTML perspective, so I am unsure if WordPress should support such cases.
Why is the body tag added to the css it is completely unnecessary.
I don't know the reason for sure, but perhaps it's because the CSS class admin-color-{scheme} is intended to be used only on the body tag, which prevents the CSS scope from being unnecessarily widened.
Select Image button gone if image is selected