Attachments toolbar cropping attachments list on load

  • Resolved jbell0fh

    (@jbell0fh)


    4 years ago

    When editing a post, and opening the attachments dialog (e.g. choosing a featured image), the toolbar initially overlaps with the list of images. The matter clears up after resizing the window (which seems to invoke a fixLayout function). Similarly, the issue goes away if I deactivate the Enhanced Media Library plugin (v2.8.2).

    I am able to fix the problem locally by enabling SCRIPT_DEBUG and commenting out the following block of code (mla-media-modal-scripts.js, toolbarOpen function):

    
if ( ( null !== toolbarHeight ) ) {
    $( '.attachments-browser .attachments', mlaModal.settings.$el ).css( 'top', toolbarHeight );
    mlaModal.settings.oldHeight = toolbarHeight;
}

    This is occurring on a WPMU-based site running WP 5.6. Thank you in advance for any assistance you might be able to provide.

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Author David Lingren

    (@dglingren)

    Thanks for your report and for taking the time to investigate the problem and describe your solution.

    The “attachments dialog” (A.K.A. the WordPress Media Manager Modal Window) does not have a good method for adding controls to the toolbar and plugins like MLA and EML have taken several different approaches to doing so. Sometimes, as you have encountered, these approaches conflict. The Javascript code you posted above was added a few WP versions back to correct a problem raised be some changes WP made to the toolbar layout.

    You wrote “Similarly, the issue goes away if I deactivate the Enhanced Media Library plugin (v2.8.2).” I installed Enhanced Media Library v2.8.3 under WP 5.7 and ran some tests. I was able to reproduce the problem you encountered. I also discovered that, even with MLA disabled, EML corrupts the default WP toolbar, e.g., when adding an Image block to a Gutenberg post/page.

    Your best course of action would be to raise this issue in the Enhanced Media Library support forum and see if they can make a fix. You can reference this topic and I would be happy to work with them if they would like that.

    I will leave this topic unresolved for now and I hope you can make progress with the EML developers. Thanks for your understanding and your interest in MLA.

    Hi there!

    I am Nadia, EML’s author. Thank you both for taking the time to investigate the issue. But unfortunately, I cannot reproduce it. Could you please give me more details? Maybe a screenshot? Theme name? Thank you!

    Best,
    -Nadia

    Plugin Author David Lingren

    (@dglingren)

    @webbistro –

    Thanks for looking into this issue. I am happy to provide more details and to work with you in any way I can to resolve the problem. The WordPress Media Manager Modal (popup) Window (MMMW) has been an ongoing challenge, especially when multiple plugins add controls to the toolbar above the thumbnail grid.

    Today I installed EML version 2.8.4 and verified that the issue still occurs.

    My development system uses the WordPress “Twenty Twelve” theme (I’ve been working on my plugin for a while now). The steps required to illustrate the toolbar corruption are quite simple. With Enhanced Media Library the only active plugin on my site I followed these steps:

    1. In admin mode, click on the “Add New” submenu item under the “Posts” menu item.
    2. Make sure you are in the “Visual Editor” mode, not the “Code Editor” mode.
    3. Click the plus sign to the right of “… choose a block”.
    4. Click on the “Image” block.
    5. Click the “Media Library” link to activate the MMMW popup.
    6. Click the “Media Library” tab, if necessary.

    The above steps will show the corrupted toolbar above the image thumbnail grid, as issuatrated in the screen shots I prepared. I have uploaded five screen shots to Google Drive and shared them for viewing at this link:

    https://drive.google.com/drive/folders/1yM7X085XXhN3bbEM7P3q9tmeKhfgE7Yn?usp=sharing

    The folder contains:

    • 01 MMMW without EML.png
    • 02 MMMW with EML.png
    • 03 MMMW with EML and MLA.png
    • 04 MMMW with MLA.png
    • 05 MMMW with MLA wide.png
    • Image 01 shows the default MMMW popup window.
    • Image 02 shows the same window with EML activated. The “All dates” dropdown is gone, the “Search” label is gone and the search text box is moved. The EML media categories dropdown does not appear.
    • Image 03 shows the MMMW popup with both EML and MLA active. The first row of thumbnails is partially hidden by the tool bar and the EML media categories dropdown does not appear. This is the issue that started the support topic.
    • Images 04 and 05 show the MMMW popup with just MLA active, for reference.

    Please let me know what else I can do to help. Thanks for looking into this issue with EML and MLA.

    Hi David,

    Thank you very much for the comprehensible description of the issue. Yes, media modals and extending the media library, in general, could be a challenge at times.

    I just did every step you described
    (1) clean WP installation, Twenty Twelve theme active
    (2) EML active only, no categories created (and then with categories created)
    (3) creating a new post with visual editing
    (4) adding an image block

    As a result, “All media items” and “Show all dates” filters are perfectly in place. Actually, they could be disabled within EML settings: Settings > Media > Media Library > Filters to show, but it’s not the option by default.

    I see that the toolbar is not looking good when I activate MLA in addition, I’ll look into it and see what I can suggest. But it sounds very strange that you have an issue with the toolbar on a clean installation…

    What I see:

    EML only
    EML + MLA

    Please let me know if you have any new information about the issue. Thanks!

    Best,
    -Nadia

    Plugin Author David Lingren

    (@dglingren)

    Nadia,

    Thanks for your ongoing testing and for your update. I have done some further testing as well.

    You wrote “But it sounds very strange that you have an issue with the toolbar on a clean installation…” This prompted me to try installing EML and MLA on an entirely different site. The new site does not have the EML “issue with the toolbar”. The corruption I first reported only happens on the first site I installed and tested on. I do not know the source of the problem but it is site-specific and I regret the confusion.

    Back to the “first row of thumbnails” problem. It looks like this is caused by MLA’s enhanced search box, which is taller than the WordPress search box. MLA adds this control to the “media-toolbar-primary search-form” div element, where WordPress places its search box. It looks like EML moves the WordPress search box to the “media-toolbar-secondary” div element; is that right?

    I will revisit the way MLA adds controls to the MMMW toolbar to see if I can solve the thumbnail cropping problem. I don’t think there’s anything for EML to do at this point.

    I also noticed that when MLA enhancements are active the EML taxonomy filtering does not work. This is a result of MLA’s replacing the WordPress “query-attachments” logic with MLA’s own code. I will see if I can accommodate EML filters in MLA’s logic.

    @jbell0fh – In the interim you might consider disabling MLA’s MMMW enhancements, which would fix the immediate problem without removing the other functions MLA provides.

    I will post an update here when I have progress to report. Thanks to both of you for your patience and understanding.

    Hi David,

    Thank you for the update and for confirming that EML works on another installation.

    As for the toolbar: Yes, I moved the search box to the media-toolbar-primary search-form div because EML allows adding a few media taxonomies, also it allows enabling/disabling “All items” and “All data” filters. So there might be an unpredictable number of filters on the toolbar. I decided to move the search box to the end of the filters’ “row” and make it “float” for a better look and feel (CSS).

    But, MLA extends the search box, it is more advanced. So it just can’t be floating in the row. I think (I am not sure yet though), that MLA has to disable EML’s search box and re-define it totally. I’ll take a deeper look into it and let you know what I can suggest. I may have some questions about the MLA code, I’ll ask them here if you wouldn’t mind.

    As for the broken search feature, I am now working on a new major update for EML. The whole code is refactored. In many aspects, it’s a dramatic change. I believe we should discuss this moment when I have a stable RC.

    Thank you for the collaboration!

    Best,
    -Nadia

    Plugin Author David Lingren

    (@dglingren)

    @webbistro – Thanks for confirming the toolbar move and for your thoughtful comments.

    The best way to collaborate on better compatibility will be by email; much easier than lengthening this thread. I can post a summary here when there is progress to report.

    You can contact me at my web site to continue the dialog. Thanks for your interest and your help.

    Plugin Author David Lingren

    (@dglingren)

    I have completed my latest round of hacking through the weedy jungle of CSS styles affecting the Media Manager Modal (popup) Window and Media/Grid admin screen. I believe I have found a way to improve the display of MLA’s controls and avoid the “first row crop” issue that inspired this topic. I have also added support for the ajax_query_attachments_args filter that EML uses for its author and taxonomy filters.

    I have uploaded a new MLA Development Version dated 20210425 that contains the improvements. You can find step-by-step instructions for using the Development Version in this support topic:

    PHP Warning on media upload with Polylang

    It would be great if you could install the Development Version and let me know if it works for you. Thanks again for alerting me to these MLA defects.

    @webbistro – I have some questions and observations to share with you. You can contact me at my web site to continue the dialog. Thanks for your interest and your help.

    Plugin Author David Lingren

    (@dglingren)

    I have just discovered that the coming WP 5.8 release includes changes to the Media Manager Modal (popup) Window and Media/Grid admin screen. A new element, < div class="attachments-wrapper"> has been added that fixes the height of the toolbar area at 72px and brings back the attachments grid cropping. This change affects both MLA and the current (v2.8.5) Enhanced Media Library.

    @webbistro – Have you noticed this issue? Do you have a fix?

    I will work on a fix within MLA but it will be a while before I have progress to report.

    Hi David!

    A bit too late, but yeah, I noticed and fixed that ?? Anything wrong about this in EML 2.8.7?

    Best,
    -Nadia

    Plugin Author David Lingren

    (@dglingren)

    @webbistro – thanks for your update. I have not found any cropping problems when running EML 2.8.7.

    I made similar changes in the latest MLA version v2.97. I added some code so my own fix is not applied when EML is active.

    It looks like the problem does not occur in the Media/Library Grid view, only in the Media Manager Modal (popup) Window.

    @jbell0fh – I am marking this topic resolved, but please update if you find any problems with the latest MLA version. Thanks for your patience in awaiting the fix.

    Hi David,

    Do you mean a problem still appears on a media popup? I didn’t notice anything wrong (except for a not well-looking search box, but we will return to it soon).

    Best,
    -Nadia

    Plugin Author David Lingren

    (@dglingren)

    I regret any confusion. There are no problems on the media popup when EML 2.8.7 or MLA 2.97 or both are running.

    What I meant is that the WordPress core team solved the problem on the Media/Library Grid view screen in their own code, but they did not do anything to fix it in the MMMW popup window.

    Okay, I got it ?? Thank you for the explanation!

    Off-topic (but media-related): has anyone experienced an issue like this:

    I had clicked on the image in the page. Then I clicked on the page in edit mode. Then I have the option to “Edit Original” or “Replace” on the right side. Then I click on “Replace” and the screenshot above is what I see. Normally, I can see all of the media. But now I can only see one image.

    A customer wrote this to me. It comes to editing a post with the Classic Editor and an attempt to replace an image with another one. The screenshot displays the only image that IS already inserted into the post and which itself is desirable for replacement.

    I tested this on pure WordPress with Classic Editor or Disable Gutenberg plugins and was able to reproduce the issue. David, could you please confirm it? Thank you! My guy thought it was an EML’s fault.

    Best,
    -Nadia

    Plugin Author David Lingren

    (@dglingren)

    @webbistro – you wrote “David, could you please confirm it?”

    Yes, I reproduced this issue with the “Classic Editor” plugin v1.6.2. If you insert an image in the body of a post, select it and click “Edit” you get an “Image Details” popup with buttons to “Edit Original” and “Replace”. Click “Replace” and the popup is replaced by a “Replace Image” popup window with just one image – the image already in the post.

    There is also a “Search” box to the right of the “Filter Media” header. If you enter a keyword in the search box the matching images will appear. If you then click the “x” in the right-hand end of the search box to clear it, all of the images appear.

    It’s a bug in the WordPress Classic Editor.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Attachments toolbar cropping attachments list on load’ is closed to new replies.