I have a bunch of component designs, the styling of each being controlled through custom css classes on the elements making up the components.
I have started to replace these custom classes by coping and pasting the styles onto each element’s default component class. So for example, I have a block that has a custom class on it, I edit the component, select the block, select the custom class, copy the styles in this class, deselect the custom class and then paste the styles onto the default class for the element. The display in the builder looks correct.
The issue is that this breaks the front end display of a component on other pages where it is already in use. The only way to rectify this is to either delete the component from the page and then add it back or in some cases resaving the page even though there are no changes.
Inspecting the page when this happens, the custom css class is removed correctly from the element but the default Bricks class containing the pasted styles is missing. If I go and edit the broken component on the page where it is broken and then save, the component then picks up the default class.
can you record a step-by-step video with voice, so that I know how to replicate the issue?
Also, do you have CSS loaded as external files or inline? If you switch those two and try again, does it make a difference?
Struggling to get jam.dev to work properly so here are some steps to reproduce:
Set css to be saved to external files.
Create a simple card design on a page, so a block containing a heading. Add a custom class to the block and set some padding and a background colour and save.
Save the card as a component and map a text property to the heading and save.
Add another couple of these components to the page and populate the headings and save.
Add the component a number of times to another page and save.
Open these two pages in another browser.
Go back to the first page in bricks, edit the component, select the custom class on the block and copy the styles.
Remove the custom class from the block, paste the styles to the block’s default class and save the page.
In the other browser, go to the tab for the page you have just edited the component on. Refresh the browser tab and you’ll see that the component design is broken. Inspecting the code you’ll see that the block’s default class is missing.
Go to the other page’s tab, refresh it and you’ll see that the component design is ok. Inspect the code and you’ll see that the block’s default class is present with the styling.
Edit the component on the first page, delete the heading and then undo the deletion and save the page. In the other browser, refresh the tab and you’ll see that the comonent design is now correct.
This only happens when css is written to external files, not inline. It’s not a caching issue either.
Hmm, testing this several more times, the page the component was edited on was correctly updated each time (so opposite of above) but wherever else the component is used, it doesn’t pick up the pasted styles and the only way I can fix this (thankfully this is a test site) is to make a temporary edit to one of the components on each of those pages.
thank you for very detailed step-by-step flow. But, I can’t replicate the issue locally using my installation. In my case, the second page (and the first one) is always updated. I’m using external files and I’ve tested with different tabs and with different browsers.
I see that you tagged 2.1.4, is there a chance you test the same with the 2.2-beta version?
I installed 2.2 but the issue still occurs I’m afraid. I got jam.dev to work but without audio to show the issue: Jam
To start with the video shows the structure of the component and the custom class and its styles on the component block. Then I add more of the component to the test components page and then to the test2 page and inspect the code to show the styles for the custom class.
Then I go back to the test components page and edit the component, copying the styles from the custom class to the block’s class.
Then I refresh the test components page and inspect the code and you can see that the styles are there for the block’s class. Then I do the same for the test2 page and you can see that the design breaks as the block’s class is not there with the styles.
thank you so much for video. I followed the exact steps that you did, but could not replicate the issue.
For me, the class got removed and a new style added.
I am running out of ideas on how to replicate this. So, if possible, can you send temporary login credentials to your test/staging website and a link to this topic to help@bricksbuilder.io using the email address you used during the purchase, so we can take a look?
cleared all litespeed caches and deactivated it. Cleared all browser caches. Problem still occurs.
deactivated all plugins. Cleared browser caches. Problem still occurs.
Only way I can get this to work is to have inline css rather than external files so it suggests Bricks on my install isn’t updating external css files for pages that have instances of the modified component.
thanks for testing. I tried again on your website. I’ve created the .buggy class, because I forgot what the original one was that you used, but now I can’t replicate the issue on your website anymore.
Can you test - maybe the issue was with the class, which class it was?
So I logged in and went to test page one and saw your buggy class on the block element. I loaded up test page one and test page two into another browser clearing its history first. Then I edited test page one, copied the buggy class styles, removed the class from the block and then pasted the styles. Having saved the changes, when I refreshed the other browser tabs, test page one was correctly displayed but test page two was broken.
I then removed all the styles from the block, saved, put the buggy class back, saved and refreshed the two tabs and the displays were correct. Then repeated the steps to paste the styles onto the block’s class and sure enough the display of the components on test page two broke again.