Gutenberg – нов редактор в WordPress

Помощен център

Gutenberg – нов редактор в WordPress

Вероятно мнозина са останали доста учудени, когато при нова инсталация на WordPress са забелязали следния блок в началната страница на администрацията:

gutenberg editor

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 editor

gutenberg editor

След инсталиране на Gutenberg в главното меню се появява допълнителен линк Gutenberg с подменю от четири линка:

gutenberg editor

  • Demo - зарежда кратка страница на английски език с описание на основни функции на Gutenberg.
  • Support - препраща към дискусионен форум в сайта на WordPress - https://wordpress.org/support/plugin/gutenberg.
  • Feedback - при кликане се зарежда страница, през която може да споделите впечатленията си от новия редактор - https://wordpressdotorg.survey.fm/gutenberg-support
  • Documentation - зарежда страница с техническа информация (предимно код), предназначена за разработчици на Gutenberg.

След инсталиране на Gutenberg, при създаване на нова статия или нова страница, имаме възможност за избор на редактор от падащото меню:

gutenberg editor

gutenberg editor

Ние ползваме Gutenberg, разбира се, кликаме линка с името и се зарежда новият интерфейс на редактора:

gutenberg editor

Нека започнем с инструментите в хоризонталното меню.

При кликане върху знакът + в горния ляв ъгъл се зарежда меню с всички налични блокове за вмъкване в статията:

gutenberg editor

Същата функционалност е налична в полето на редактора под последния публикуван блок:

gutenberg editor

Ето и пълното съдържание на блоковете в отделните категории:

Most Used - най-често използвани:

gutenberg editor

Common Blocks - основни блокове:

gutenberg editor

Formatting - Форматиране:

gutenberg editor

Layout Elements - структурни елементи:

gutenberg editor

Widgets - джаджи:

gutenberg editor

Embeds - блокове за вграждане (общо 34 на брой):

gutenberg editor

Отново в хоризонталното меню имаме Undo (връщане) и Redo (повторно изпълнение) функционалности:

gutenberg editor

gutenberg editor

При кликане на иконата с буквата i се зарежда панел с информация за публикуваните на страницата блокове:

gutenberg editor

При кликане на последната икона се зарежда панел за навигация между блоковете в статията - при кликане на линк към блок автоматично се поставя курсора на мишката в края на избрания текстов блок или се активира изображението:

gutenberg editor

Сега ще ви покажем два начина, по които може да сменяте местата на блоковете в публикацията.

Първият начин е чрез кликане на стрелките отляво на блока:

gutenberg editor

При кликане на стрелката нагоре текстовия блок се премества над изображението:

gutenberg editor

По същия начин преместваме и втория текстов блок над изображението:

gutenberg editor

Освен чрез кликане на стрелките блоковете може да се местят и чрез кликане и плъзгане (drag'n'drop). Кликнете върху точките между стрелките и задръжте бутона на мишката натиснат:

gutenberg editor

Плъзнете мишката в избраната посока (в примера - надолу) докато се появи синя линия под елемента:

gutenberg editor

Пуснете бутона на мишката - текста е успешно преместен под заглавието:

gutenberg editor

Сега ще разгледаме какви опции ни предлагат групата икони в десния ъгъл на панела:

gutenberg editor

Линка Save Draft ни помага да запазим текущото съдържание като чернова без да го публикуваме.

Бутона Preview отваря в нов прозорец на браузера публикацията след като я запазим като кликнем бутона Publish (Update).

При запазване на промените в публикацията се отваря панел със следните опции: Visibility, Publish и Suggestion:

gutenberg editor

Visibility - имаме избор между три типа публикуване - публикацията да бъде достъпна за потребителите (Public), да бъде достъпна само за логнати потребители (Private) или да бъде защитена с парола (Password Protected):

gutenberg editor

Publish - може да избираме произволна дата на публикацията:

gutenberg editor

Suggestion - оттук може да прикачваме съществуващи етикети (тагове) към публикацията или да създадем нови:

gutenberg editor

При кликане на бутона с икона зъбно колело се скрива/показва целия панел:

gutenberg editor

Няколко допълнителни опции са налични при кликане на бутона с трите вертикални точки.

Секция View

Top Toolbar - при кликане върху секцията (пред нея се появява символ отметка) лентата с инструменти, която се зарежда над блока при избирането му сега се зарежда до менюто в горния край на панела без значение къде в страницата се намира избрания блок:

gutenberg editor

gutenberg editor

gutenberg editor

Spotlight Mode - при избор на опцията всички блокове избледняват и само избраният блок (текста) е на фокус:

gutenberg editor

gutenberg editor

Fullscreen Mode - при кликане на опцията главното меню отляво и десния панел с инструменти се скриват за да може да се съсредоточи потребителя единствено върху съдържанието на документа:

gutenberg editor

Следващата опция ни позволява да превключваме между два режима на работа на редактора - визуален (Visual Editor) и редактор на код (Code Editor):

gutenberg editor

Следващата секция ни дава достъп до следните опции:

gutenberg editor

Manage All Reusable Blocks - отваря страница, в която се съхраняват запазените за повторна употреба блокове (подробности по-долу):

gutenberg editor

Keyboard Shortcuts - дълъг списък с клавишни комбинации за бърз достъп до различни функционалности - много е вероятно да има конфликт с едни и същи комбинации в компютъра или други инсталирани програми:

gutenberg editor

Copy All Content - при кликане копира целия код на публикацията в клипборд (clipboard) паметта и може да бъде поставен (Paste) в друг редактор, изпратен в имейл и др.

Последната опция Options отваря панел, в който може да премахваме/добавяме елементи панела за инструменти като премахваме/поставяме отметка в съответното поле:

gutenberg editor

Ако маркираме опцията Custom Fields под публикацията се появява познатия панел за персонализирани полета:

gutenberg editor

Сега ще разгледаме достъп до какви функции ни предоставят двата раздела Document и Block в панела с инструменти.

gutenberg editor

Status & Visibility - тук може да редактираме статуса на публикуване (Public, Private и Password Protected), да редактираме времето на публикуване, да зададем Post Format от падащото меню, да 'залепим' публикацията за началната страница на сайта или да изтрием публикацията:

gutenberg editor

Permalink - показва името на конкретната публикация, което може да променим по следните начини.

Кликаме в полето URL, натискаме бутона End от клавиатурата за да се премести курсора на мишката в края на адреса и изтриваме цялото съдържание на полето докато остане само четим текст:

gutenberg editor

gutenberg editor

Въвеждаме в същото поле новото име на публикацията и кликаме бутона Update:

gutenberg editor

Друг начин за промяна на Permalink е като кликнем върху заглавието на публикацията в редактора, кликнем бутона Edit за да влезем в режим на редактиране, въведем новият slug (машинното име на публикацията) и запазим промяната с кликане на бутона Save:

gutenberg editor

Новото име post-title се появи и в панела с инструменти:

gutenberg editor

В секция Категории може да прикрепим публикацията към съществуваща категория или да създадем нова, може също да подреждаме публикациите по йерархия:

gutenberg editor

В секция Етикети прикачваме на публикацията съществуващ етикет (test) или създаваме нов (wordpress):

gutenberg editor

В секция Картинка за публикацията като кликнем в полето Задаване на картинка за публикацията се отваря панел за качване на изображение в медийната библиотека:

gutenberg editor

gutenberg editor

След избиране на изображение, то се зарежда в панела с инструменти, където имаме възможност да сменим или изтрием изображението:

gutenberg editor

В полето Excerpt може да въведем кратък описателен текст, който да се зарежда при включване на публикацията в архив, като резултат от търсене и др.:

gutenberg editor

В секция Discussion може да разрешите/забраните коментарите в публикацията, както и функционалностите Pingbacks & Trackbacks:

gutenberg editor

При избиране на блок от публикацията, освен хоризонталния панел с инструменти, се зареждат допълнителни инструменти, специфични за този блок, в раздела Block.

Ще дадем пример с допълнителните инструменти, които имаме на разположение при избиране (кликане) на текстов блок в публикацията.

Най-отгоре се появява информация за типа текст - може да бъде параграф (в примера), заглавие, списък и др.

В секция Text Settings имаме на разположение следните опции:

Да изберем големина на шрифта от падащото меню - Small, Normal, Medium, Large, Huge. Може да въведем стойност в цифри, напр. 24. При кликане на бутона Reset се възстановява големината Normal.

Ако е включена опцията Drop Cap първата буква в блока се форматира като Large. За да изключите Drop Cap кликнете повторно върху радио бутона:

gutenberg editor

gutenberg editor

В секция Color Settings имаме възможност да променяме цветовете на фона (background) и на текста:

gutenberg editor

В секция Advanced може да създадем допълнителен CSS клас, който да пренапише кода по подразбиране само за текущата публикация:

gutenberg editor

Какво представлява блок за многократна употреба (Reusable Block)?

Създаване на съдържание, което да се използва многократно в сайта. При актуализиране на блока промените се прилагат навсякъде, където същия блок се използва.

За да създадем Reusable Block трябва да кликнем върху блока, в лентата с инструменти да кликнем последния бутон вдясно с трите вертикални точки и в падащото меню да кликнем линка Add to Reusable Blocks:

gutenberg editor

Зарежда се текстово поле Name, в което въвеждаме име на блока за многократна употреба и го запазваме като кликаме бутона Save:

gutenberg editor

Сега при кликане върху този блок в панела с инструменти в раздела Block се зарежда информация за Reusable Block:

gutenberg editor