The Custom CSS Pro Control within ABC is a tool for developers and advanced users who want to push the boundaries of their site’s design with custom CSS. This editor enables you to write CSS directly within your Gutenberg blocks, offering a level of specificity and personalization that can transform the look and functionality of your website.

Key Features:

• Use the selector placeholder to directly style the block’s container. This placeholder will automatically be substituted with the unique class name assigned to the block container’s class list.
• SASS-like Nesting: For the first time in a custom CSS tool within WordPress, you can write nested code similar to SASS. This allows for cleaner code and a more organized styling structure.

Here are four simple examples illustrating how to use the Custom CSS Pro Control with different targeting methods and media queries:

Example 1: Targeting the block container

selector {
  background-color: #f8f8f8;
  padding: 20px;
}

Example 2: Targeting Nested Elements Using CSS Syntax

selector .child-element {
  color: #333;
}

Example 3: Targeting Nested Elements Using Nested Syntax

selector {
  .child-element {
    color: #333;
  }
}

Example 4: Using Media Queries Using CSS Syntax

@media (max-width: 768px) {
  selector {
    padding: 15px;
  }
}

Example 5: Using Media Queries with Nested Syntax

selector {
  @media (max-width: 768px) {
    padding: 15px;
  }
}

With the Custom CSS Pro Control, you’re no longer confined to the limitations of traditional CSS editors in WordPress. You can craft responsive designs with media queries, style nested elements, and harness the full power of CSS directly within your editor, ensuring that your blocks perfectly reflect your creative vision.