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: