Использование селекторов в виджетах 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ну вот, калькуляция с переменной, у которой даже есть запасной вариант ! Разрыв означает , что некоторое дополнительное пространство выше и ниже элемент (с дополнением незначащей информации ). Но если преобразование масштабируется так, некоторая математика должна противодействовать корректировке. Уравнение удваивает разрыв для чего-то, что в половине размера. Если не масштабировать все это, это не нужно, следовательно, запасной вариант (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. Если вы воспринимаете эту концепцию как головоломку и задумываетесь, вы найдете решения, которые не требуют никакого другого кода. Не стесняйтесь делиться своими мыслями и вопросами в комментариях ниже!