Использование селекторов в виджетах Elementor для управления CSS

Привет! Хотите узнать больше о возможностях разработчика в Elementor? Этот получает только несколько упоминаний в документах. Поэтому я считаю, что полезно поделиться всем, что я знаю об этом. При создании элемента управления вы можете добавить необязательный параметр с именем selectoror, selectorsкоторый будет управлять CSS предварительного просмотра на лету . Если вы спросите меня, селекторы в Elementor – это то, что сделало этого строителя тем, чем он является сегодня. Это современная интерпретация WYSIWYG, и используя ее, разработчики могут сэкономить часы разочарования пользователей. Почему? Сохранение редактора и перезагрузка другой вкладки больше не нужны для каждого незначительного изменения.

Можно многому научиться из кода Elementor, и это то, что я сделал, чтобы понять, что возможно с селекторами. Это полезно намного больше, чем вы думаете! С некоторой креативностью можно раздвинуть границы, чтобы избежать написания дополнительных обработчиков. В производстве более половины элементов управления в нашем SVG Divider for Elementor в значительной степени зависят от параметра селекторов. Из-за этого мне никогда не приходилось использовать метод (чтобы создать предварительный просмотр с помощью JS). Как вы уже догадались, эта статья предназначена для разработчиков расширений Elementor и требует знания PHP и CSS._content_template()

Где добавить «селектор» или «селекторы» в Elementor?

Когда вы создаете виджет, вы регистрируете элементы управления для него. Все приведенные здесь примеры входят в массив настроек управления метода. Подробнее о создании нового виджета и его элементов управления читайте в документации разработчика Elementor.add_control()

Название параметра selectorдля групповых элементов управления . Это просто строка, которую вы написали бы в CSS перед объявлениями. Есть одна лучшая, на которой я сконцентрируюсь: это более сложная структура, массив пар ключ-значение, транслируемых в объявления селекторов .{ ... }``selectors

Вывод заканчивается в файл, поэтому он не встроен, как только пользователь покидает редактор! Что-то вроде:

/wp-content/uploads/elementor/css/post-1234.css

Переменные фигурные скобки

Необязательное, но жизненно важное значение имеет использование динамических ценностей. Они не являются частью механизма шаблонов, Elementor выполняет их поиск и замену. Вы увидите примеры ниже, но сначала, для вашего удобства, справочную таблицу.

CSS-селекторы (ключ в массиве селекторов)

Объявления (значение в массиве селекторов)

Вы можете использовать их где угодно в свойствах и значениях CSS.

Простые примеры

Значение из палитры цветов:

'selectors' => [
    '{{WRAPPER}} .elementor-svg-divider-basic-text' => 'color: {{VALUE}}'
],

Размер с и без единицы:

'selectors' => [
    '{{WRAPPER}} svg.sde-classic' =>
        'height: {{SIZE}}{{UNIT}}; stroke-width: {{SIZE}};'
],

Создать отступы из размеров:

'selectors' => [
    '{{WRAPPER}} .elementor-svg-divider-basic-button' =>
        'padding:
            {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
],

Фоновое изображение слайда в слайдере (с использованием повторителя):

'selectors' => [
    '{{WRAPPER}} {{CURRENT_ITEM}} .swiper-slide-bg' =>
        'background-image: url({{URL}})',
],

Ориентация некоторого класса на тело, например , или или даже :.elementor-msie``body.rtl``body:not(.rtl)``.woocommerce

'selectors' => [
    'body:not(.rtl) {{WRAPPER}} .dialog-close-button' => 'right: {{SIZE}}{{UNIT}}',
    'body.rtl {{WRAPPER}} .dialog-close-button' => 'left: {{SIZE}}{{UNIT}}',
],

Значения из других настроек

Это легко получить значения из других элементов управления, как только вы знаете, как. Если две настройки вносят вклад в одну и ту же вещь, вы можете использовать один и тот же массив селекторов, в дополнение к копанию значений друг друга.

'selectors' => [
    '{{WRAPPER}} svg.sde-classic' =>
        'stroke-dasharray: {{dash_length.SIZE}} {{whitespace_length.SIZE}};'
],

Обратите внимание, что это получает значения для определенных устройств, когда цель реагирует. Вот расширенный пример, основанный на Elementor pro:

'selectors' => [
    '(desktop).elementor-msie {{WRAPPER}} .elementor-portfolio-item' =>
        'width: calc( 100% / {{columns.SIZE}} );
        border: {{SIZE}}px solid transparent',
    '(tablet).elementor-msie {{WRAPPER}} .elementor-portfolio-item' =>
        'width: calc( 100% / {{columns_tablet.SIZE}} );
        border: {{SIZE}}px solid transparent',
    '(mobile).elementor-msie {{WRAPPER}} .elementor-portfolio-item' =>
        'width: calc( 100% / {{columns_mobile.SIZE}} );
        border: {{SIZE}}px solid transparent',
],

Динамические значения в свойствах CSS

Вместо лучшего примера из реального мира следующее происходит из элемента управления Align с опциями left / center / right . Я знаю, что это не выглядит чисто, но само ядро ​​Elementor использовало это так. Окраина-центр CSS свойство не существует, поэтому он игнорируется браузерами.

// Somewhere else
$sde_selector = '{{WRAPPER}} .sde';
// In a control
'selectors' => [
    $sde_selector => 'margin: 0 auto; margin-{{VALUE}}: 0;'
],

Смысл этого примера – открыть глаза. Как видите, динамические значения также могут формировать имена свойств.

Вы можете повторно использовать селекторы, помещая их в переменную, особенно если они длинные. Однако вы не можете использовать значения из других настроек в селекторной части CSS, только в объявлении !

(!) Словарь селекторов

Лучшей альтернативой вышеупомянутой странности является недокументированный Святой Грааль, selectors_dictionaryсобственность. В двух словах, это как оператор переключения для селекторов! Если значение элемента управления X, используйте Z вместо. Это невероятно полезно, когда CSS, который вы хотите написать, не имеет ничего общего с опциями вашего контроля.

'selectors_dictionary' => [
    'left' => 'margin-right: auto',
    'center' => 'margin: 0 auto',
    'right' => 'margin-left: auto',
],
'selectors' => [
    '{{WRAPPER}} .sde' => '{{VALUE}}',
]

Вот и все. Единственное предостережение в том, что оно переопределяет переменную фигурных скобок, и вы больше не можете использовать исходное значение (даже в самом словаре). Если бы у вас была другая пара селектор-объявление, которая основывалась на начальном значении, у вас были бы проблемы:{{VALUE}}

'selectors' => [
    '{{WRAPPER}} .sde' => '{{VALUE}}',
    '{{WRAPPER}}.elementor-sde-scale-the-cropped .sde-cropping-allow .sde' =>
        'transform-origin: {{VALUE}} 0;'
],

Неправильное использование приводит к такой мерзости, как transform-origin: margin: 0 auto 0; вместо оригинала transform-origin: center 0;, так что будьте осторожны . Однако нет необходимости отображать все возможные значения!

Конечно, вы все еще можете использовать словарь селекторов для перевода только значений CSS в объявлении, таких как:

'selectors_dictionary' => [
    'top' => 'flex-start',
    'middle' => 'center',
    'bottom' => 'flex-end',
],
'selectors' => [
    '{{WRAPPER}} .elementor-price-table__currency' => 'align-self: {{VALUE}}',
],

Или используйте его для нескольких объявлений, расширенных от параметров одного слова:

'selectors_dictionary' => [
    'left' => 'right: auto; left: 0',
    'right' => 'left: auto; right: 0',
],
'selectors' => [
    '{{WRAPPER}}.elementor-wc-products ul.products li.product span.onsale' =>
        '{{VALUE}}',
],

Не забывайте переменные CSS и calc!

В программировании мне нравится то, что это похоже на головоломку. Прежде чем отказаться от селекторов в пользу написания более сложного кода для обработки значений , подумайте еще раз. Почти все можно решить с помощью инструментов, которые я здесь представляю. Особенно, если вы помните, что помимо использования динамических значений селекторов в Elementor, вы можете:

• Переплетение CSS переменных с помощью calc
• Добавить скрытые элементы управления
• Рассмотрите prefix_classи selectors_dictionaryуправляйте свойствами для большей логики со стилями
• Завершите его условиями контроля , и все готово!

Подобная комбинация позволила мне создать один слайдер для управления двумя разными вещами, в зависимости от значения другого параметра …

Следующее определяет переменную CSS, и это из ползунка Scale% :

'selectors' => [
    '{{WRAPPER}} .sde' => '--sde-scale-percentage: {{SIZE}};'
],

Я использую эту переменную CSS в двух местах. Одним из них является Scale обрезанный переключатель, который имитирует переключение между двумя селекторами. Переменная передается другому (для использования Gap , см. Это позже). Когда переключатель включен:

'selectors' => [
    '{{WRAPPER}} .sde' =>
        'transform: scale(var(--sde-scale-percentage)) scale(0.01);
        --sde-scale-pct-for-gap: var(--sde-scale-percentage);'
],

Существует скрытый элемент управления, который зависит от того, выключен ли переключатель, и содержит аналогичное объявление, но с другим селектором (обратите внимание на это).

'condition' => [
    'scale_the_cropped!' => 'cropped'
],
'selectors' => [
    '{{WRAPPER}} .sde svg' =>
        'transform: scale(var(--sde-scale-percentage)) scale(0.01);'
],

Кроме того, параметр Gap имеет следующее:

'selectors' => [
    '{{WRAPPER}} .sde' =>
        'padding:
            calc({{SIZE}}{{UNIT}} / (var(--sde-scale-pct-for-gap, 100) / 100)) 0;'
],

Ну вот, калькуляция с переменной, у которой даже есть запасной вариант ! Разрыв означает , что некоторое дополнительное пространство выше и ниже элемент (с дополнением незначащей информации ). Но если преобразование масштабируется так, некоторая математика должна противодействовать корректировке. Уравнение удваивает разрыв для чего-то, что в половине размера. Если не масштабировать все это, это не нужно, следовательно, запасной вариант (100/100).

Штабелирование преобразований

Вы можете спросить, почему переменная, почему двойная шкала? Я хотел дать пользователям обычный слайдер 0-100, поэтому значение является заданным. Должен быть способ разделить его на 100. Изначально это выглядело так:

transform: scale(calc(var(--sde-scale-percentage) / 100));

Но Edge не поддерживает трансформации, облом. Мы получаем тот же эффект, складывая преобразования одного типа, так как браузеры выполняют их последовательно.calc()

transform: scale(var(--sde-scale-percentage)) scale(0.01);

А это просто деление на 100.scale(0.01)

Резюме

При разработке SVG Divider для Elementor я полагался на селекторы, чтобы свести к минимуму количество настроек, которые визуально перезагружают или повторно запускают виджет в живом редакторе . Посмотрите другие примеры того, как они работают в реальной жизни, или, как всегда, изучите код Elementor. Для моего исследования я отсканировал около тысячи вариантов использования «селекторов» как в профессиональном, так и в бесплатном режиме. Кроме того, я пошел на их Github, чтобы понять более продвинутые части, которые они даже не используют. Итак, я надеюсь, что эта статья охватывает все.

Соответствующий исходный файл Elementor:

1. Факир / ядро ​​/ файлы / CSS / base.php
2. Ищите метод.add_control_rules()

К настоящему времени вы должны быть знакомы с селекторами в элементах управления Elementor. Если вы воспринимаете эту концепцию как головоломку и задумываетесь, вы найдете решения, которые не требуют никакого другого кода. Не стесняйтесь делиться своими мыслями и вопросами в комментариях ниже!