Class System and CSS Bloat

Being new to Cwicly, I was initially confused by the Class System and still have reservations.

@Araminta and @Louis – I have found issues where there is CSS bloat in the output stylesheets, for instance the screenshot below shows a block I duplicated twice and gave the two copies the same classname as the original .section-header as you can see the same rule has been duplicated 3 times leading to CSS bloat – is this a bug?

When a project gets huge and a common workflow is to duplicate re-usable blocks this will create huge stylesheets and cause loading issues, which is a shame because generally Cwicly HTML is very lean!

I also tried virtual classes by adding the .section-header classname to the duplicates and also removing the block classes from those, so the virtual class will do the styling, but I find a new duplicate class .-wrapper of .section-header-wrapper is also duplicated in the output stylesheet, see screenshot below - again is this a bug?

Also there is a random . { text-align: center; } rule, because I removed the block classname from the duplicates!

Why can’t when CC duplicates a block, it just copies the original block classname and not auto-generate a new classname? it seems like it is also copying previous styles which remain on the duplicated block even though you change the block classname or add a virtual class to it?

I just have concerns about the way the CSS is minified at present as it seems a bit funky BUT I am absolutely loving Cwicly and finally found a tool to take site building with Gutenberg in WordPress to the next level - very well done CC team!

Thanks in advance!

Hello @jwarnox,

Thanks for taking the time to post here, much appreciated.

I think that what you are looking for more specifically here is the Cwicly Copy Linked feature (if you prefer page styles vs global class styles).
While the UI has changed a little, an explanation of Linked blocks can be found here: Getting Started - Copy / Paste - Wordpress Gutenberg - YouTube

Basically, when you ask Cwicly to duplicate a block, you are asking to have a clone of the block (which means that you will have all the styles copied over, resulting in a duplication of styles for the new block class in the stylesheet).

When you ask Cwicly to Link a block, Cwicly will automatically strip all styles from the block (and its inner children), while automatically adding a virtual class in reference to its parent element.
This should result in a bloat free CSS stylesheet.

It is important to note that a block class in Cwicly should be unique to itself, acting much like a block ID (without the limitations that come with ID styling). I strongly recommend leaving the auto generated class or replacing it with a unique class name if you are going to style that block specifically.

Please let me know if this helps clear things up a little :slight_smile:

1 Like

Thank you @Louis for your detailed reply, yes, I have seen that feature and watched the video about linked blocks, but confused as in the video it was using an older version of CC and cannot find how to link to a block from the toolbar, screenshot below:

There is the link icon button on the toolbar but cannot see how it works, there is no dropdown or contextual menu?

Checked your documentation too, but I think that is out of date as it related to the version in the video – can you please direct me here please?

Appreciate your time and thanks in advance!

Hi @jwarnox,

I apologise for that.

If you simply paste/duplicate the block you want as you are already with the Link option activated the necessary should normally be done in the background automatically.

Please let me know if that helps.

Thanks.

@Louis – duplicating the first slide did not work, the second block did not reflect any changes made to the linked first slide? screenshot below show me changing title colour from pink to white on the first block and nothing changing on the second?

To make it work, I had to clear the colour from the second blocks paragraph, then it worked, but surely this is not the way to do it?

Then I tried adding a new slide using the Add slide option from the slider toolbar, which gave an empty slide, then I copied the styles from slide 1 and tried pasting them onto slide 2, still nothing is pasted, no image or paragraph?

I then copied slide 1 using the context menu and pasted using keyboard into slide 2 and then the elements were pasted but with no content like slide 1, screenshot below:

I am obviously doing something very wrong here, sorry to keep asking you, but I am getting quite frustrated with what io can see is a powerful feature, but cannot find any documentation or visual help online regarding the NEW UI.

Can you help please, thanks again in advance.

Hello @jwarnox,

In the case of Slide and Column blocks, you will have to add empty ones as these blocks work differently from other ones. Have you tried copy linking other blocks?

Empty content is what is intended when copy linking (this happens in every video we have recorded, and the logic has been the same since the very beginning of Cwicly), since all that is applied is the linked class, while all other attributes are removed to allow you to quickly apply new content without having to spend time removing old content.

Regarding the copy linking feature, the UI has not changed if I’m not mistaken.

You may be interested in this @jwarnox