The ‘Custom Targets’ feature in ABC’s Controls Manager is key for tailoring the impact of your styling controls. By default, controls affect the block container, the outermost element that holds the content in a block. But ‘Custom Targets’ change the game by letting you specify which inner elements within the block should respond to the customizations.

The Power of Targeting: With ‘Custom Targets,’ you can direct the customization settings to any element within the block. This feature ensures that ABC’s controls are versatile enough to integrate with any block structure by targeting elements such as headings, paragraphs, buttons, or images contained within the block’s wrapper.

Setting Your Targets:

ABC provides several targeting options to choose from:

• Block Container: This is the default setting where all controls apply their settings.
• HTML Tag: Use this to target specific HTML tags like h1, p, or a within your block.
• CSS Class: Select elements with a particular CSS class. If you’ve assigned .special-button to a button, you can target it directly.
• CSS ID: For an element with a unique identifier, you can use its ID to apply your controls.
• Custom CSS Selector: This option offers the utmost flexibility and precision, allowing for advanced targeting by inputting any valid CSS selector. Currently, this setting does not support the use of commas (“,”) to target multiple elements simultaneously.

Understanding Common vs. Editor Targets:

• Common Target: This is the global targeting setting that applies your control adjustments to both the front-end display and the Gutenberg editor interface. It ensures consistency in styling between what you work on in the backend and what visitors see on your site.
• Editor Target: Separate from the common target, the editor target is exclusively for adjustments within the Gutenberg editor. It’s a specialized setting used in instances where the block’s structure might vary between the editor and the front end.

Some controls can’t have a custom target #

Not all controls within ABC require the ‘Custom Targets’ feature. Specifically, the Custom CSS control doesn’t need a target because you define the scope with your CSS code, choosing exactly which elements to style.

Custom Targets in Action:

In ABC, each block is automatically assigned a unique className that is appended to the block’s container. This className serves as a foundational element for applying targeted styling and control settings. For example, let’s consider a generated className such as abc-style-oui7j. This identifier allows you to precisely customize the appearance and functionality of the block by targeting it or its inner elements directly.

Let’s explore how changing the target affects specific components within a block that uses the example className abc-style-oui7j

let’s assume that the structure of the block is as follow:

<div class="block-class abc-style-oui7j">
    <h1 class="title">Welcome to ABC</h1>
    <p class="description">Enhance your Gutenberg blocks with advanced control settings.</p>
    <button class="cta-button">Learn More</button>
    <ul class="list">
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
    </ul>
</div>

1. Default Target – Block Container
   • Target: .abc-style-oui7j
   • Impact: Any control settings applied will affect the entire block, changing the container’s appearance or behavior.
2. Targeting the Title
   • Target: .abc-style-oui7j .title
   • Impact: Control settings will only affect the <h1> element with the class title. For example, changing the typography or color settings would only change the header’s appearance, not the entire block.
3. Targeting the Button
   • Target: .abc-style-oui7j .cta-button
   • Impact: Styling changes will apply only to the button. This is useful for adjusting the button’s background color, text alignment, or adding hover effects specifically for call-to-action elements.
4. Targeting List Items
   • Target: .abc-style-oui7j .list li
   • Impact: Only the list items within the unordered list will be affected by any style adjustments. This target is particularly useful for styling lists differently from the rest of the block content, such as changing list item colors or spacing between items.