Hi,
I have faced this strange behavior when working on a theme. I have also tested and seen it on the core elemental theme. This is the scenario:
1- I added an extra class on the div that contains "echo $c->getPageWrapperClass()" . On the Elemental, it is in header_top.php file, in the main wrapper div:
<div class="my-test-class <?php echo $c->getPageWrapperClass()?>">
2- On a page other than the home page (interestingly it is fine in home page) click on topbar cog icon, click on Attributes, then Cancel. This process removes the "my-test-class" and any other classes such as page template/type class indicators (page-type-page page-template-full)
I can't replicate this using elemental
Hi,
I just uploaded a screencast:
https://www.dropbox.com/s/i6ehcvmnv6tbpib/c5-wrapper-class-issue.mp4?dl=0
Ah, I see. Is there any way you can put your custom classes one level in on a DIV inside the outer container?
Converting an HTML theme into a C5 theme, I came across this issue and we managed to fix it by adding another wrapper inside the main one. Anyway, I thought you might want to fix it, as it seems a strange behavior and a source of potential confusion for developers and messes with the layout on some occasions in the edit mode, and it may not be easily traceable for naive developers. Plus, it removes the core page type indicators classes (page-template-full), which many developers including me use for styling page type specific elements.
I can replicate the issue following the steps described. It appears that after a page refresh, the custom class is reapplied. Because of this, I would be hesitant to change the markup.
This issue appears to affect all the "Cancel" buttons and the "Exit Preview" button in the Page Settings side panel sections. When they are clicked, the ccm-page div wrapper is reassigned only the ccm-page class. This doesn't appear to be an issue with $c->getPageWrapperClass() and is instead an issue with the JavaScript that handles cancelling the panel section.
A side note, this issue exists in 5.7.
Yes, the thinking here is that it's hard to keep track of all the various edit-mode-related classes for different panels, sticky panels, etc... so when exiting edit mode we just simply remove them all.
However, I'm wondering if we could simply keep track of all the additional classes that are on the ccm-page DIV when loading the page. Store those in a JS variable in the editmode.js class, and then instead of just adding back ccm-page after running removeClass(), we add back ccm-page + all those additional classes.