NO BUG: %root% on Custom Element's _cssCustom doesn't replaced without editing the code editor

[suabahasa]

Browser: Chrome 110
OS: Windows

When registering a custom element, I want to add custom CSS using %root%, but it is not replaced with the element’s actual ID without opening the codemirror.

public function get_nestable_children()
{
return [
            [
                'name' => 'block',
                'label' => __('Button animations', 'fancy-animations'),
                'settings' => [
                    'tag' => 'custom',
                    'customTag' => 'button',
                    'label' => __('Button animations', 'fancy-animations'),
                    '_attributes' => [
                        [
                            'name' => 'Role',
                            'value' => 'switch'
                        ],
                        [
                            'name' => 'aria-checked',
                            'value' => 'true'
                        ],
                        [
                            'name' => 'arial-label',
                            'value' => 'Enable animations'
                        ],
                        [
                            'name' => 'onclick',
                            'value' => 'fba_toggle_deactivation(fba_is_reload_page)'
                        ]
                    ],
                    '_width' => '3rem',
                    '_height' => '3rem',
                    '_padding' => [
                        'top' => '.3em',
                        'right' => '.3em',
                        'bottom' => '.3em',
                        'left' => '.3em'
                    ],
                    '_background' => [
                        'color' => [
                            'hex' => '#f5f5f5',
                            'id' => 'f010bc',
                            'name' => 'Color #1'
                        ]
                    ],
                    '_border' => [
                        'radius' => [
                            'top' => '50%',
                            'right' => '50%',
                            'bottom' => '50%',
                            'left' => '50%'
                        ],
                        'width' => [
                            'top' => '1',
                            'right' => '1',
                            'bottom' => '1',
                            'left' => '1'
                        ],
                        'style' => 'solid',
                        'color' => [
                            'hex' => '#9c27b0',
                            'id' => 'ae94a1',
                            'name' => 'Color #12'
                        ]
                    ],
                    '_background:hover' => [
                        'color' => [
                            'hex' => '#e0e0e0',
                            'id' => '4180b4',
                            'name' => 'Color #2'
                        ]
                    ],
                    '_cssCustom' => "%root%[aria-checked=\"false\"]{\n\n  opacity: .6;\n  filter: grayscale(1);\n  \n}\n\n%root%:hover{\n  filter: grayscale(0);\n}",
                    '_opacity:hover' => '1',
                    '_cssTransition' => 'all .3s'
                ],
                'children' => [
                    [
                        'name' => 'icon',
                        'settings' => [
                            'icon' => [
                                'library' => 'svg',
                                // 'svg' => [
                                //     'id' => 331,
                                //     'filename' => 'animation-icon-bold.svg',
                                //     'url' => 'http://animations.local/wp-content/uploads/2023/12/animation-icon-bold.svg'
                                // ],
                                'fill' => [
                                    'hex' => '#9c27b0',
                                    'id' => 'ae94a1',
                                    'name' => 'Color #12'
                                ]
                            ],
                            '_width' => '2rem',
                            '_height' => '2rem'
                        ]
                    ]
                ]
            ],
            [
                'name' => 'text-basic',
                'label' => __('Tooltip', 'fancy-animations'),
                'settings' => [
                    'text' => 'Animations',
                    '_attributes' => [
                        [
                            'name' => 'role',
                            'value' => 'tooltip'
                        ]
                    ],
                    '_position' => 'absolute',
                    '_width' => 'max-content',
                    '_widthMin' => '100px',
                    '_typography' => [
                        'text-align' => 'center',
                        'line-height' => '1em',
                        'color' => [
                            'hex' => '#f5f5f5',
                            'id' => '6120d2',
                            'name' => 'Color #1'
                        ]
                    ],
                    '_padding' => [
                        'top' => '.5em',
                        'right' => '.5em',
                        'bottom' => '.5em',
                        'left' => '.5em'
                    ],
                    '_transform' => [
                        'translateX' => '-50%',
                        'translateY' => '100%'
                    ],
                    '_bottom' => '-.5rem',
                    '_left' => '50%',
                    '_background' => [
                        'color' => [
                            'hex' => '#9c27b0',
                            'id' => 'dc0992',
                            'name' => 'Color #12'
                        ]
                    ],
                    '_border' => [
                        'radius' => [
                            'top' => '.5em',
                            'right' => '.5em',
                            'bottom' => '.5em',
                            'left' => '.5em'
                        ]
                    ],
                    '_visibility' => 'hidden',
                    '_opacity' => '0',
                    '_cssTransition' => 'all .5s'
                ],
            ]
        ];
}

[charaf]

Hi @suabahasa,

Just to be clear: you’re editing the CSS in a code editor, not in the builder correct?

If so then that’s expected as the logic for converting the ID to %root% & vice-versa is in the builder/codemirror itself.

Correct me if I misunderstood your report

[suabahasa]

Hi,

I’m not editing the CSS.

it is from the get_nestable_children method on the custom Element.

So custom elements can’t have custom classes with selectors that target themselves?

Why %root% only replaced by codemirror?

[suabahasa]

See this another related issue Couldn't add class to Custom Element

[suabahasa]

Hi @charaf, what’s the status of this issue?

I think this shouldn’t be marked completed.

[charaf]

Hi @suabahasa,

Apologies for the late reply. The ID is saved as the ID itself not %root%, the %root% keyword is specific to our code control to make it more user-friendly for users.

I have to say a bit confused by the use case so I don’t want to misguide you. Can you help me understand what’s your end goal?

I’m guessing you’d like to create some elements with predefined styling, correct? which is something that you can target using the element’s name in CSS file. But also looking at the other ticket looks like you’d like to create global styles as well.

If the goal is to have the styling in the Custom CSS area so that it’s more easily customizable, then yes going through the global classes is best. However, you’ll handle both independently. As in you need to create the global styles and add them to the site and then you can assign its ID to an element.

I think I might be more helpful if you can share more details though.

[suabahasa]

Hi @charaf,

Our use case is to create a custom element as shown on Create Your Own Elements – Bricks Academy

The custom element we build must bundle the style to be ready to use with the default style.

[charaf]

I see. I think the easiest way to go about this is to develop the custom elements, and then create the global classes independently and assign them to the element. Then you can bundle these elements as templates (either locally or through remote templates).

To do it all programmatically you’ll have to handle the global classes independently. They’re stored in wp_options table with the key being “bricks_global_classes”. Each global class will have an ID, and that’s what you need to assign in the _cssGlobalClasses property (not the class name).