Десета радионица за израду Вордпрес тема је одржана у суботу, 16 фебруара у новосадском Стартит Центру. Бавили смо се подршком теме за нови уређивач, познат под називом Гутенберг.
Учитавање стилова и скрипти
За учитавање скрипти и стилова за блокове и њихов уређивач користимо исте функције као и до сада, wp_enqueue_scripts и wp_enqueue_styles. Разликују се једино имена копчи за које везујемо позиве.
еnqueue_block_assets – Примењује се и на уређивач блокова и на фронтенд. Корисно је када желимо да нам блокови изгледју и понашају се исто и у уређивачу и на фронтенду.
enqueue_block_editor_assets – Примењује се само на уређивач те се најчешће користи у додацима.
Подршка теме
Нови уређивач је донео низ нових могућности које тема може да подржава.
add_theme_support( ‘align-wide’ );
Широко поравнање подразумева две нове могућности, широко поравнање и пуну ширину. У самом уређивачу се примењује одмах након додавања подршке док је за фронтенд потребан додатни CSS како би се нове ширине примениле.
add_theme_support( ‘wp-block-styles’ );
Сви блокови долазе са предефинисаним стиловима у уређивачу. Уколико желимо да применимо ове стилове и на фронтенд, то можемо урадити укључивањем подршке за стилове блокова. У зависности од теме и њених већ постојећих стилова, неопходно је додати мање или више CSS-а у стилове теме како би се сви стилови из уређивача применили и на фронтенд.
add_theme_support( ‘editor-font-sizes’ );
Уређивач дозвољава корисницима да мењају величину фонта. Осим неколико предефинисаних величина, корисници могу дефинисати било коју величину за текст који уносе. Ове предефинисане величине је могуће променити помоћу подршке за величину фонта.
За савку нову величину ће се генерисати нова класа по следећем моделу:
.has-{ВЕЛИЧИНА}-font-size
При чему је ВЕЛИЧИНА заправо slug који смо доделили прилагођеној величини. Подразумеване величине за које класе већ постоје су: small, regular, medium, large, huge и larger.
add_theme_support( ‘disable-custom-font-sizes’ );
Уколико желимо да онемогућимо коришћење било које величине осим дефинисаних, можемо да укључимо подршку за онемогућавање прилагођених величина.
add_theme_support( ‘responsive-embeds’ );
Подршка за пуну ширину угњежђивања на свим уређајима, при чему су очуване пропорције на свакој величини екрана.
add_theme_support( ‘editor-color-palette’ );
Као и величине фонта, уређивач има предефинисане палете боја које се могу применити као боја текста и боја позадине за поједине елементе. Такође, CSS класе се генеришу по истом принципу као и за величину фонта.
.has-{БОЈА}-color
.has-{БОЈА}-background-color
Предефинисане боје су: pale-pink, vivid-red, luminous-vivid-orange, luminous-vivid-amber, light-green-cyan, vivid-green-cyan, pale-cyan-blue, vivid-cyan-blue, very-light-gray, cyan-bluish-gray и very-dark-gray, а осим ових боја такође је могуће користити било коју боју.
Подразумеване боје је могуће заменити прилагођеном палетом путем подршке теме.
add_theme_support( ‘disable-custom-colors’ );
Такође, уколико желимо да онемогућимо коришћење боја које нису предефинисане, можемо то да урадимо укључивањем подршке теме.
Комплетан код са радионице се може преузети са званичног налога Вордпрес Србија заједнице на Github-u.
У следећем термину настављамо са уређивачем: правимо шаблоне блокова и мењамо појединости предефинисаних блокова уз помоћ доступних филтера.
Радионице су бесплатне али је потребно пријавити се на Meetup групи Вордпрес Србија заједнице.
Оставите одговор
Жао нам је, да би поставили коментар, морате бити пријављени.