Месец: март 2019.

Једанаеста радионица за израду Вордпрес тема је одржана у суботу, 02 марта у новосадском Стартит Центру. Наставили смо са могућностима новог уређивача у теми: правили шаблоне блокова, варијације стилова, мале измене подразумеваних блокова помоћу доступних Javascript филтера. Срели смо се и са wp.i18n и WP CLI.

Шаблон блокова

У документацији новог уређивача тренутно стоји да се шаблони блокова могу додавати преко register_post_type функције за прилагођену врсту чланка или путем get_post_type_object за предефинисане врсте чланка (чланак, страница). Оба ова начина подразумевају качење на init копчу акције.

Ми смо погледали шта нам нуди WP_Post_Type класа и пронашли register_post_type_args филтер који нам омогућава да додамо шаблон директно у аргументе вресте чланка, при чему је провера врсте значајно олакшана.

Сам шаблон представља низ назива блокова и њихових параметара и доста је једноставан за израду. Међутим, пронаћи називе блокова и доступних параметара захтева мало претраге. Све ово још увек није документовано и морамо погледати кôд како бисмо дошли до информација које нам требају.

Тренутно постоје два места где можемо пронаћи назив и параметре блокова. Важно је имати у виду да су се ова места већ мењала и да се то може опет догодити. Ово не мења кôд који ћемо користити (мада се и то до сада већ мењало) али мења место на коме тражимо информације док не буде постојала детаљнија документација за развој.

У самој инсталацији Вордпреса постоји датотека у којој су помоћу Webpack-а генериасани сви блокови. То је тренутно /wp-includes/js/dist/block-library.js. Међутим, како је ово генерисана датотека, доста је напорно читати цео кôд како би се пронашле потребне информације.

Због тога смо ми погледали место где је кôд уређивача у фази пре генерисања, тзв фази развоја, и где је значајно лакше пронаћи информације које нам требају. Тренутно је то https://github.com/WordPress/gutenberg -> packages -> block-library -> src. Овде сваки блок има своју фасциклу и све што нам треба можемо пронаћи у index.js датотеци за сваки блок.

Конкретно за блок параграф можемо пронаћи име у константи name:

export const name = 'core/paragraph';

А доступне параметре у константи schema:

const schema = {
	content: {
		type: 'string',
		source: 'html',
		selector: 'p',
		default: '',
	},
	align: {
		type: 'string',
	},
	dropCap: {
		type: 'boolean',
		default: false,
	},
	placeholder: {
		type: 'string',
	},
	textColor: {
		type: 'string',
	},
	customTextColor: {
		type: 'string',
	},
	backgroundColor: {
		type: 'string',
	},
	customBackgroundColor: {
		type: 'string',
	},
	fontSize: {
		type: 'string',
	},
	customFontSize: {
		type: 'number',
	},
	direction: {
		type: 'string',
		enum: [ 'ltr', 'rtl' ],
	},
};

Дозвољене вредности за сваки параметар нису документоване па је могуће стећи погрешан утисак из назива параметра. На пример, textColor не прихвата кôд за боју већ slug предефинисане или прилагођене боје. У нашој теми би то биле: whitish, redish, grayish и blckish (functions.php – ‘editor-color-palette’). Исто важи и за fontSize, величина фонта није дозвољена вредност већ slug предефинисане или прилагођене величине.

Провера врсте чланка нам омогућава да веома лако раздвојимо шаблоне према врсти чланка што је прилично честа потреба. Тако можемо имати посебан шаблон за странице и посебан за чланке.

Закључавање шаблона

Постоје два нивоа закључавања шаблона:

• ‘insert’ – Не дозвољава додавање нових блокова али дозвољава промену места постојећим блоковима.
• ‘all’ – Не дозвољава ни додавање нових блокова ни промену места постојећим блоковима. Ово може бити веома корисно када је неопходно придржавати се дефинисаног распореда али треба имати у виду да је могућ губитак садржаја уколико постоје већ објављени чланци или странице пре него што им је шаблон додељен. Уколико дође до ове могућности, корисник ће бити упозорен обавештењем.

Важно је напоменути да се сви параметри могу мењати у току уноса садржаја без обзира да ли је шаблон закључан или не.

Варијације стилова блока

Неки од подразумеваних блокова долазе са неколико варијација стилова. Један овакав блок је pullquote. Помоћу registerBlockStyle можемо врло лако додати варијације стилова за сваки подразумевани блок.

Назив (вредност параметра name) нашег стила ће бити употребљен за генерисање нове CSS класе помоћу које можемо стилизовати варијацију и у уређивачу и на фронтенду. Модел за класу је:

.is-style-{НАЗИВ-СТИЛА}

Филтери

Javascript филтери у Вордпресу се понашају веома слично PHP филтерима. Имају три параметра: назив филтера, namespace и callback функцију у којој смо дефинисали шта и како желимо да променимо.

Филтер blocks.registerBlockType

Овај филтер нам даје приступ подешавањима блока што смо ми искористили да омогућимо системске класе за блокове листе, параграфа и заглавља, који су једини подразумевани блокови без ове класе: .wp-block-{ИМЕ-БЛОКА}.

Филтер blocks.getBlockDefaultClassName

Овај филтер нам даје директан приступ класама подразумеваних блокова где можемо додати наше прилагођене.

wp.i18n

Заједно са новим уређивачем, Вордпрес је добио и i18n подршку за Javascript. Ово нам омогућава да у Javascript датотекама користимо исте функције за интернационализацију које користимо и у PHP датотекама. Примена је врло једноставна, на почетку Javascript датотеке треба дефинисати функције које ће i18n да претражује.

const { __, _x, _n, _nx } = wp.i18n;

Након овога, помоћу једне команде Вордпресовог алата за командну линију, WP CLI, се једноставно генерише .pot датотека за дати директоријум.

wp i18n make-pot <ПУТАЊА-ДО-ДИРЕКТОРИЈУМА>

---

Комплетан код са радионице се може преузети са званичног налога Вордпрес Србија заједнице на Github-u.

У следећем термину прелазимо на могућности прилагођавача (Customizer) које можемо користити у теми.

Радионице су бесплатне али је потребно пријавити се на Meetup групи Вордпрес Србија заједнице.