Є в мене один проект на WP, у якому багаото доводиться робити для адміністратора сайту, а ніж для загальних користувачів сайту. І от одного разу, після оновлення, в нас відвалився Guttenberg( дефолтний редактор WordPress). Ну, як відвалився, створювати нові блоки можна, але не всі. Редагувати текст можна, а встановити шрифт, розмір, колір і інші параметри – ні. Ще й не підвантажує шрифти, які раніше працювали.
Що ж, перша логічна думка: відкатитися назад. Відкатилися – працює. Добре, йдемо далі.
Встановили наново оновлення – не працює. Добре, давайте вимикати плагіни.
Вимкнули усі плагіни – не працює і помилок у консолі немає. Дивно.
Ввімкнули усі плагіни назада – не працює і помилок у консолі дві. Одна від jQuery, одна про неможливість завантажити шрифт.
Дивно, але починаю перевіряти помилку від jQuery, вирішую її – все одно редактор не працює.
Дуже дивно. Вирішую проблему з завантаженням шрифтів. Все, помилки немає!
Що там редактор? Не працює.
Йшов 4 день, як вирішую проблему. З урахуванням віялових відключень світла, інтернету, літаючих блядін і усілького іншого, що тебе переслідує, коли в тебе сусід ідіот.
І тут, чисто випадково, мені на очі потрапляє проблема з одним з випадаючих списків у редакторі. Він не працює і не виводить значеня.
З думкою: “Та не може бути”, йду відключати select2 від теми.
І о чудо! Все запрацювало!
Виявляється, select2 зламав редактор, коли підгружався до редактора, але не викидував помилку, бо він об’єктивно нормально працював, але нюанс в тому, що всі випадаючі списки не працювали так як було задумано.
РІшенням було відключити select2 глобально, додавати його тільки на сторінки де він реально потрібен і запам’ятати на майбутнє: “Все що можно підключити точково, краще підключити точково, бо потім сідого волосся на голові прибавиться”.
jQuery
Выпадающее меню на jquery
<style>
ul.menu{
dispaly: flex;
}
ul.menu > li.menu-item{
}
div.menu > li.menu-item > div.submenu{
display: none;
position: absolute;
}
div.menu > li.menu-item > div.submenu > li{
display: block;
}
.show{
dispaly: block;
}
</style>
<script>
jQuery(function($){
$('.menu-item').mouseover(function(){
$('div.submenu').removeClass('show');
$(this).find('div.submenu').addClass('show');
})
$('.menu-item').mouseout(function(){
$('div.submenu').removeClass('show');
$(this).find('div.submenu').addClass('show');
})
$(document).on('mouseout', 'div.submenu.show', ()=>{
$('div.submenu').removeClass('show');
})
})
</script>