Esl 1.5 вводить Вкладені елементи. Плюс API, який дозволяє програмно визначати свої власні елементи, які можуть містити інші елементи. В точно такій структурі, яку ви хочете.
До Esl 1.5 кожен елемент у Esl був “плоским”. Це означає, що, незважаючи на те, що елемент містив глібоку HTML-структуру (як-от Слайдер та інші), ви не могли натиснути на внутрішню частину цього елемента, щоб редагувати його безпосередньо (наприклад, вміст слайду 3), або змінити внутрішню структуру, як вам хочеться, за допомогою перетягування, як це можна було зробити у елементі макету.
Це часто робило неможливим належним чином налаштувати більш складні елементи, такі як Іконна коробка, Цінова таблиця, Список тощо.
Складні елементи, такі як Аккордеон, Слайдер і Вкладки, взагалі не можна було налаштувати.
Повний доступ та контроль над структурою окремих елементів
Починаючи з версії 1.5, Esl надає три вкладені елементи:
- Аккордеон (вкладений)
- Слайдер (вкладений)
- Вкладки (вкладені)
Ці елементи були відомі своїми труднощами у налаштуванні через їх складну структуру та обмеження їх “плоскої” структурі елементів.
Тепер, коли ви можете заповнити кожен слайд бажаними елементами, спеціалізовані елементи, такі як “Карусель” і “Члени команди”, вже не є дійсно необхідними.
Вкладені елементи існуватимуть поряд зі своїми плоскими початковими елементами в найближчому майбутньому, поки ми не зберемо достатньо відгуків і не виправимо всі основні помилки для повного переходу до вкладених елементів.
Деякі інтерактивні вкладені елементи, які в значній мірі залежать від JavaScript (такі як Аккордеон, Слайдер і Вкладки), можуть заважати 100% функціонуванню перетягування на полотні. Якщо ви стикаєтеся з такою поведінкою, ви завжди можете додавати та упорядковувати елементи, використовуючи панель Структури.
Вкладені вкладки: Якщо вам потрібно змінити властивість `display` вкладки “панелі”, будь ласка, зробіть це, додавши ще один “Блок” елемент всередині панелі та встановивши параметр display там. Панель сама використовує display: none, щоб приховати всі неактивні панелі. Якщо ви зміните налаштування відображення там, усі панелі вкладок будуть завжди видимими.
Отже, ви можете почати експериментувати з цими новими вкладеними елементами та повільно переходити від старих звичайних елементів.
Со часом ми перетворимо все більше і більше плоских елементів на вкладені елементи, щоб ви змогли належним чином налаштувати більшість елементів у Esl, як тільки їх вкладений еквівалент стане доступним.
API Вкладених Елементів
У решті цієї статті показано, як програмно створити свої власні вкладені елементи.
Добра вихідна точка для вивчення нового синтаксису елементів, що вкладаються, – це перегляд вихідного коду Esl наступних файлів елементів, що вкладаються:
- accordion-nested.php
- slider-nested.php
- tabs-nested.php
Визначте свій власний елемент як “вкладний”
Спочатку переконайтеся, що ви встановили $nestable властивість вашого класу елементів на true.
Це потрібно, щоб Esl знав, як відображати цей користувацький елемент, використовуючи функцію рендеринга, що вкладається, в системі, і щоб активувати перетягування та скидання всередині системи для цього користувацького елемента.
Шаблон вкладаного елемента
Ви можете визначити структуру вашого користувацького елемента за допомогою функції get_nestable_children. Вона повинна повертати масив визначень елементів.
Це найкраще ілюструється, якщо подивитися на функцію get_nestable_children елементів Nestable Slider:
public function get_nestable_children() {return [['name' => 'block','label' => esc_html__( 'Слайд', 'esl' ) . ' {item_index}','settings' => ['_hidden' => ['_cssClasses' => 'hidden-class', // CSS клас, що не видно в UI системи],],'children' => [['name' => 'heading','settings' => ['text' => esc_html__( 'Слайд', 'esl' ) . ' {item_index}',],],['name' => 'button','settings' => ['text' => esc_html__( 'Я - кнопка', 'esl' ),'size' => 'lg','style' => 'primary',],],],],];}Вищезазначений код додає блок “Слайд” всередині вкладаного слайдера, який потім містить елемент “Заголовок” та “Кнопка”.
Властивість children, якщо встановлена, приймає масив подальших вкладених елементів. Вкажіть масив settings, щоб заповнити окремі елементи всередині вашого вкладного елемента за необхідності.
Функція рендеринга вкладених елементів (PHP)
Єдина нова функція, яку ви повинні додати до вашої функції PHP render(), називається render_children і повинна приймати екземпляр елемента $this як перший параметр:
public function render() {$output = "<div {$this->render_attributes( '_root' )}>";// Відображення дочірніх елементів (= окремі елементи)$output .= Frontend::render_children( $this );$output .= '</div>';echo $output;}Функція рендеринга вкладених елементів (Vue x-template)
Щоб відобразити елементи всередині вашого вкладного елемента у вашому настроєному x-template, просто додайте компонент <esl-element-children> плюс element властивості, як показано в наступному фрагменті коду:
public function render_engine() {<script type="text/x-template" id="tmpl-esl-element-custom-nestable"><component :is="tag"><h2>Заголовок перед дочірніми елементами</h2><esl-element-children :element="element"/><p>Текстовий вузол після дочірніх елементів</p></component></script>}Елементи Nestable (у панелі)
Якщо ваша структура елементів Nestable ґрунтується на елементах одного рівня (так як наш акордеон вище), то ви можете додати повторювач (див. панель двигуна на скріншоті вище), додавши repeater контрол з властивістю items, що встановлюється на children:
public function set_controls() {// Масив дітей Nestable ($this->controls['_children'] = ['type' => 'repeater', 'titleProperty' => 'label', 'items' => 'children',];];}Якщо ви починаєте використовувати та/або експериментувати з новим API Nestable Elements для ваших власних елементів, нам буде цікаво почути ваші відгуки. Чи не вистачає функцій у цьому API, чи натрапили ви на якісь помилки?