Gutenberg – нов редактор в WordPress
Съдържание
Вероятно мнозина са останали доста учудени, когато при нова инсталация на WordPress са забелязали следния блок в началната страница на администрацията:
Gutenberg, за тези, които не следят активно новините, е нов редактор за WordPress - работата по него е започнала през януари 2017г.
и това е една от най-значителните промени в WordPress от години.
Главната цел е да се опрости използването на WordPress от потребителите - за тези, които създават, редактират, публикуват и проектират уеб страници.
Експериментът по редактиране има за цел да даде на потребителите по-добро визуално представяне на това, което ще изглежда тяхната публикация или страница при публикуването.
Новият редактор на съдържание Gutenberg ще бъде редактор по подразбиране в новата версия на WordPress 5.0.
Какво ще стане с потребителите, които искат да актуализират своя WordPress до новата версия 5.0
, но не желаят да ползват редактора Gutenberg?
Класическият редактор от версия 4.9.8
ще бъде наличен за инсталиране като плъгин и ще се поддържа до 2022г.
според уверението на Matt Mullenweg, съосновател на WordPress и основател на компанията Automattic, която е главна движеща сила зад проектите WordPress.com, Jetpack, WooCommerce, Simplenote, Longreads, Atavist и много други.
За примерите в статията ние направихме нова инсталация на WordPress 4.9.8
на български и инсталирахме редактора Gutenberg като плъгин в WordPress:
След инсталиране на Gutenberg в главното меню се появява допълнителен линк Gutenberg с подменю от четири линка:
- Demo - зарежда кратка страница на английски език с описание на основни функции на Gutenberg.
- Support - препраща към дискусионен форум в сайта на WordPress -
https://wordpress.org/support/plugin/gutenberg
. - Feedback - при кликане се зарежда страница, през която може да споделите впечатленията си от новия редактор -
https://wordpressdotorg.survey.fm/gutenberg-support
- Documentation - зарежда страница с техническа информация (предимно код), предназначена за разработчици на Gutenberg.
След инсталиране на Gutenberg, при създаване на нова статия или нова страница, имаме възможност за избор на редактор от падащото меню:
Ние ползваме Gutenberg, разбира се, кликаме линка с името и се зарежда новият интерфейс на редактора:
Нека започнем с инструментите в хоризонталното меню.
При кликане върху знакът +
в горния ляв ъгъл се зарежда меню с всички налични блокове за вмъкване в статията:
Същата функционалност е налична в полето на редактора под последния публикуван блок:
Ето и пълното съдържание на блоковете в отделните категории:
Most Used - най-често използвани:
Common Blocks - основни блокове:
Formatting - Форматиране:
Layout Elements - структурни елементи:
Widgets - джаджи:
Embeds - блокове за вграждане (общо 34
на брой):
Отново в хоризонталното меню имаме Undo (връщане) и Redo (повторно изпълнение) функционалности:
При кликане на иконата с буквата i
се зарежда панел с информация за публикуваните на страницата блокове:
При кликане на последната икона се зарежда панел за навигация между блоковете в статията - при кликане на линк към блок автоматично се поставя курсора на мишката в края на избрания текстов блок или се активира изображението:
Сега ще ви покажем два начина, по които може да сменяте местата на блоковете в публикацията.
Първият начин е чрез кликане на стрелките отляво на блока:
При кликане на стрелката нагоре текстовия блок се премества над изображението:
По същия начин преместваме и втория текстов блок над изображението:
Освен чрез кликане на стрелките блоковете може да се местят и чрез кликане и плъзгане (drag'n'drop). Кликнете върху точките между стрелките и задръжте бутона на мишката натиснат:
Плъзнете мишката в избраната посока (в примера - надолу) докато се появи синя линия под елемента:
Пуснете бутона на мишката - текста е успешно преместен под заглавието:
Сега ще разгледаме какви опции ни предлагат групата икони в десния ъгъл на панела:
Линка Save Draft ни помага да запазим текущото съдържание като чернова без да го публикуваме.
Бутона Preview отваря в нов прозорец на браузера публикацията след като я запазим като кликнем бутона Publish (Update).
При запазване на промените в публикацията се отваря панел със следните опции: Visibility, Publish и Suggestion:
Visibility - имаме избор между три типа публикуване - публикацията да бъде достъпна за потребителите (Public), да бъде достъпна само за логнати потребители (Private) или да бъде защитена с парола (Password Protected):
Publish - може да избираме произволна дата на публикацията:
Suggestion - оттук може да прикачваме съществуващи етикети (тагове) към публикацията или да създадем нови:
При кликане на бутона с икона зъбно колело се скрива/показва целия панел:
Няколко допълнителни опции са налични при кликане на бутона с трите вертикални точки.
Секция View
Top Toolbar - при кликане върху секцията (пред нея се появява символ отметка) лентата с инструменти, която се зарежда над блока при избирането му сега се зарежда до менюто в горния край на панела без значение къде в страницата се намира избрания блок:
Spotlight Mode - при избор на опцията всички блокове избледняват и само избраният блок (текста) е на фокус:
Fullscreen Mode - при кликане на опцията главното меню отляво и десния панел с инструменти се скриват за да може да се съсредоточи потребителя единствено върху съдържанието на документа:
Следващата опция ни позволява да превключваме между два режима на работа на редактора - визуален (Visual Editor) и редактор на код (Code Editor):
Следващата секция ни дава достъп до следните опции:
Manage All Reusable Blocks - отваря страница, в която се съхраняват запазените за повторна употреба блокове (подробности по-долу):
Keyboard Shortcuts - дълъг списък с клавишни комбинации за бърз достъп до различни функционалности - много е вероятно да има конфликт с едни и същи комбинации в компютъра или други инсталирани програми:
Copy All Content - при кликане копира целия код на публикацията в клипборд (clipboard) паметта и може да бъде поставен (Paste) в друг редактор, изпратен в имейл и др.
Последната опция Options отваря панел, в който може да премахваме/добавяме елементи панела за инструменти като премахваме/поставяме отметка в съответното поле:
Ако маркираме опцията Custom Fields под публикацията се появява познатия панел за персонализирани полета:
Сега ще разгледаме достъп до какви функции ни предоставят двата раздела Document и Block в панела с инструменти.
Status & Visibility - тук може да редактираме статуса на публикуване (Public, Private и Password Protected), да редактираме времето на публикуване, да зададем Post Format от падащото меню, да 'залепим' публикацията за началната страница на сайта или да изтрием публикацията:
Permalink - показва името на конкретната публикация, което може да променим по следните начини.
Кликаме в полето URL, натискаме бутона End
от клавиатурата за да се премести курсора на мишката в края на адреса и изтриваме цялото съдържание на полето докато остане само четим текст:
Въвеждаме в същото поле новото име на публикацията и кликаме бутона Update:
Друг начин за промяна на Permalink е като кликнем върху заглавието на публикацията в редактора, кликнем бутона Edit за да влезем в режим на редактиране, въведем новият slug (машинното име на публикацията) и запазим промяната с кликане на бутона Save:
Новото име post-title
се появи и в панела с инструменти:
В секция Категории може да прикрепим публикацията към съществуваща категория или да създадем нова, може също да подреждаме публикациите по йерархия:
В секция Етикети прикачваме на публикацията съществуващ етикет (test) или създаваме нов (wordpress):
В секция Картинка за публикацията като кликнем в полето Задаване на картинка за публикацията се отваря панел за качване на изображение в медийната библиотека:
След избиране на изображение, то се зарежда в панела с инструменти, където имаме възможност да сменим или изтрием изображението:
В полето Excerpt може да въведем кратък описателен текст, който да се зарежда при включване на публикацията в архив, като резултат от търсене и др.:
В секция Discussion може да разрешите/забраните коментарите в публикацията, както и функционалностите Pingbacks & Trackbacks:
При избиране на блок от публикацията, освен хоризонталния панел с инструменти, се зареждат допълнителни инструменти, специфични за този блок, в раздела Block.
Ще дадем пример с допълнителните инструменти, които имаме на разположение при избиране (кликане) на текстов блок в публикацията.
Най-отгоре се появява информация за типа текст - може да бъде параграф (в примера), заглавие, списък и др.
В секция Text Settings имаме на разположение следните опции:
Да изберем големина на шрифта от падащото меню - Small, Normal, Medium, Large, Huge. Може да въведем стойност в цифри, напр. 24
. При кликане на бутона Reset се възстановява големината Normal.
Ако е включена опцията Drop Cap първата буква в блока се форматира като Large. За да изключите Drop Cap кликнете повторно върху радио бутона:
В секция Color Settings имаме възможност да променяме цветовете на фона (background) и на текста:
В секция Advanced може да създадем допълнителен CSS клас, който да пренапише кода по подразбиране само за текущата публикация:
Какво представлява блок за многократна употреба (Reusable Block)?
Създаване на съдържание, което да се използва многократно в сайта. При актуализиране на блока промените се прилагат навсякъде, където същия блок се използва.
За да създадем Reusable Block трябва да кликнем върху блока, в лентата с инструменти да кликнем последния бутон вдясно с трите вертикални точки и в падащото меню да кликнем линка Add to Reusable Blocks:
Зарежда се текстово поле Name, в което въвеждаме име на блока за многократна употреба и го запазваме като кликаме бутона Save:
Сега при кликане върху този блок в панела с инструменти в раздела Block се зарежда информация за Reusable Block: