Class
You can apply the same class to as many elements as you want across your website. They will all share the same style properties.
Toggle ID/Class
Select a block
Open the Block Inspector
Find ID/Class field.
Click ID/Class to Toggle ID.
The field will now show the Class ID.
Block Class
The class name for the selected block should always be unique.
Whenever you insert or create a block, a unique class is automatically created and applied to the element.
That's it! Cwicly doesn't rely on user class creation, preferring to have a unique class created for every block.
Edit Class
Rename
You can rename a block class to something more meaningful that relates to the block.
Class names must start with a letter
Class names should be descriptive
Class names are case-insensitive: "cwicly" = "CWICLY"
Class names should use hyphens for phrase/compound words
Select a block.
Find class field.
Double click class name.
Input new name.
Make sure to choose a name that is unique and relates to the block.
Remove a class
Since classes are bound to a specific block, deleting that block will automatically remove the class from your website.
Make sure no blocks are using the class in the Virtual Class field before removing the block containing the class you want to remove.
Remove Classes and IDs
The Remove Classes and IDs toggle ensures clean markup for optimised performance. There is no point in having both ID and class applied on markup if they are not being used or targeted (ID javascript and anchoring).
By default, Cwicly shows all classes and IDs but this the Remove Classes and IDs toggle can be toggled on from the Cwicly Advanced Settings. A class will automatically show when styles are applied to the block.
Global classes added are automatically updated without needing to refresh
Open Cwicly Settings in the WordPress Dashboard.
Find Cwicly Optimisations in the Advanced Settings tab.
Toggle on Remove Classes and IDs.
Styles Indicator
By default, class does not appear on the front end.
However if styles are applied to the block specifically, the class will appear on the front end.
This is indicated by a small dot after the class
Show/Hide Class
A Show/Hide toggle is provided to allow you to have the class/ID appear on the frontend even if there are no styles applied to the block.
This is because block classes and IDs don’t appear by default on the frontend.
Only when styles have been added at the block level will the class will appear.
If you already have styles applied, toggling the class won’t do anything.
In the Block Inspector, navigate to the Block Class.
To the right of the Block Class field, toggle on the "Dot".
When toggled on, the dot becomes green.
An indicator next to ID indicates that the ID has been applied.
Last updated
