Ръководство за Гутенберг за начинаещи разработчици: Създайте първия си плъгин за блок

Gutenberg Урок за начинаещи


Ако мислите да разработите нещо за WordPress през 2020 г., игнорирането на Гутенберг просто не е вариант. Всички приставки и теми трябва да си сътрудничат добре с Гутенберг и да предоставят потребителско изживяване, което е последователно във всичко, което потребителят може да види на таблото за управление на WordPress. И още повече, че Гутенберг вече е неразделна част от WordPress – просто наричан редактор на блокове.

Това се казва, че да започнем с Гутенберг не е толкова просто. Докато преди няколко години можете да напишете качествен WordPress плъгин, използвайки нищо друго освен Notepad, сега процесът стана много по-труден.

Гутенберг използва технологии като WordPress REST API, JavaScript и React. По този начин, за да се работи с Гутенберг, бяха необходими нови изисквания за плъгини и теми.

Добрата новина е, че днес ще говорим за всичко това! Тази публикация служи като урок за Гутенберг за начинаещи, които търсят да създадат плъгин за Гутенберг за първи път.

Ние се фокусираме основно върху различните аспекти на създаването на плъгин за Gutenberg – създаване на среда за разработка, създаване на основен плъгин и някои нюанси на работа с блокове.

1. Настройте вашата среда за развитие на Гутенберг

За да започнете с разработката на Гутенберг, трябва някои основни познания за JavaScript и React. Ето урок по JavaScript за разработчик на WordPress. Освен това за допълнителни пакети в Гутенберг може да се наложи използването на мениджър на пакети NodeJS, npm.

Можете да инсталирате последната стабилна версия на NodeJS на Windows или MacOS с помощта на инсталаторите на официалния сайт. Ако имате Linux сървър, можете или да компилирате изходния код или да използвате съответния мениджър на пакети (като apt и yum). Например, ако използвате Ubuntu, изпълнете следните команди на терминала.

актуална актуализация на судо
sudo apt инсталирате nodejs npm

След като инсталацията е успешна, можете да изпълните следната команда, за да проверите версията на NodeJS.

nodejs –версия

След като поставите отметки в тези полета, добре е да настроите вашия тестов уебсайт WordPress с екземпляр от текущия плъгин Gutenberg (самостоятелната приставка) или дори версията за разработка на него – можете да получите това от GitHub.

⚠️ Забележка; докато Гутенберг вече е вграден в WordPress, тази версия не е най-новата. Развитието в Гутенберг все още се случва доста отделно и всичко ново е включено първо в самостоятелния плъгин за Гутенберг. Действителната версия на Гутенберг в ядрото тепърва ще получава значителна актуализация след включването си в WordPress 5.0. Винаги искате да работите върху най-новата версия на Гутенберг, тъй като тя ви дава по-голям шанс да потвърдите работата си в бъдеще и да сте сигурни, че вашето творение ще бъде в тон с всичко, което идва в основата на WordPress по-късно.

Освен това, ако възнамерявате да допринесете за основния плъгин Gutenberg, хранилището има допринасящи насоки за това как да настроите местната си среда и да настроите промени за преглед.

�� Накрая, ако търсите да адаптирате съществуващите си приставки към Гутенберг, ето подробен урок как да постигнете това: част 1 и част 2.

За да започнете с директория с приставки за шаблони, която вече е готова да сътрудничи с Гутенберг, може да помислите да използвате приставката на котлона на Гутенберг. Такова решение ви помага с основната файлова структура, така че да можете да се съсредоточите върху съдържанието на приставката. За да използвате котлона, изтеглете и инсталирайте приставката от тук (цип). Инсталирането и активирането на приставката на котлената плочка активира примерните блокове, които ще изследваме в този урок. Можете да намерите кода за всеки блок в съответната му директория в мястото на приставката на котлона.

2. Първоначална конфигурация

Само да ви напомня, Гутенберг представя концепцията за блоковете, които са заместител на стандартното платно на редактора на TinyMCE. В някои случаи блоковете могат също така да заменят къси кодове и други допълнителни елементи на съдържание, които плъгини, използвани за добавяне към съдържанието на WordPress по различни начини.

Ако се интересувате от изграждането на Gutenberg, най-често срещаният подход е да създадете приставка, която създава нови блокове и ги прави достъпни за потребителя. Точно това ще направим в този урок за Гутенберг.

Следващите раздели описват процеса от началото до края.

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

Основите на изграждането на такъв плъгин трябва да са запознати. Започвате, като създавате нова директория в директорията с плъгини на WordPress. В него ще поставим четири файла:

  • index.php – Този файл съдържа метаданни за новия блок на Гутенберг.
  • block.js – Този JavaScript файл регистрира персонализирания блок Gutenberg.
  • editor.css – Този файл съдържа стилове за редактора.
  • style.css – Този файл съдържа стиловете за предния край на блока.

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

3. Регистриране на блока

В тази стъпка за регистриране на блок за Гутенберг, ние широко ще обхванем две неща:

  • регистриране на метаданни на приставката с PHP двигателя на WordPress,
  • регистриране на блока с рамката React, върху която работи Gutenberg.

Файлът index.php съдържа активите на enqueue на блока и редактора.

  • Първо, регистрирайте персонализираните функции чрез добавяне.
  • След това определете функциите, които изброяват пътя на JavaScript и CSS файловете за блока и редактора, като използвате функциите wp_enqueue_style и wp_enqueue_script.

Нека да обобщим това чрез PHP кода по-долу:

добавяне (‘enqueue_block_editor_assets’, ‘gb_block_01_basic_editor_assets’);

функция gb_block_01_basic_editor_assets () {
// Сценарии.
wp_enqueue_script (
“GB-блок-01-основния”,
plugins_url (‘block.js’, __FILE__),
масив (‘wp-блокове’, ‘wp-i18n’, ‘wp-елемент’),
filemtime (plugin_dir_path (__FILE__). ‘block.js’)
);

// Стилове.
wp_enqueue_style (
“GB-блок-01-основен-редактор”,
plugins_url (‘editor.css’, __FILE__),
масив (‘wp-edit-blocks’),
filemtime (plugin_dir_path (__FILE__). ‘editor.css’)
);
}

Това определя ресурсите за основния редактор. За блока е необходим само CSS файл, който се дефинира чрез функцията wp_enqueue_style.

Файлът block.js описва свойствата на блока в редактора на Гутенберг. Дефинираме следните атрибути и свойства:

  • title – Заглавието на блока
  • икона – Икона за показване на блока; можете да изберете всяка икона от тази колекция от дашикони
  • категория – групата, към която ще принадлежи блокът Примери за групи от блокове са "често срещани," "форматиране," "закрепвам."
  • редактиране – JavaScript функция, която връща DOM елемент. Използваме функцията wp.element.createElement, за да създадем персонализиран DOM елемент на абзаца, p, с персонализиран текст, написан в него. Гутенберг се позовава на това свойство, когато потребител кликне върху блока от редактора.

(функция () {
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType (‘gb / basic-01’, {
заглавие: __ („GB Basic“, „GB“),
икона: ‘щит-алт’,
категория: „общ“,

редактиране: функция (реквизит) {
върнете wp.element.createElement (
“Р”,
{className: props.className},
‘Здравей свят! – от редактора (01 Основен блок). ‘
);
},

});
}) ();

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

В горния код дефинирахме className на p елемента с props.className, който ще създаде име на клас, започващо с wp-блок, последвано от името на блока. В следващия раздел на този урок за Гутенберг дефинираме стиловете на този клас.

4. Персонализиране на блока

Както беше обсъдено в предишния раздел, следващата стъпка в този урок е да се определят свойствата на блоковите елементи. Нека определим цвят на фона, цвят на текста и рамка.

.wp-block-gb-basic-01 {
цвят: # 000;
фон: мигироза;
граница: 0.2rem плътно червено;
}

На мястото на CSS файловете можете също да добавите SCSS файлове и да ги компилирате с Node. По-нататък, ето урок за стилизиране на елементи на Гутенберг от трикове на CSS.

Резултати от първия ви урок за Гутенберг

Най-накрая сме готови да изпробваме блока, който сме създали. Ако плъгинът Gutenberg е активиран, преминете към + и проверете дали новият блок се появява там.

нов блок на Гутенберг

След това, ако щракнете върху блока, ще забележите, че съобщението отгоре се вижда с цвят на фона и рамка от CSS файла:

блок в действие

заключение

Стигаме до края на вашия първи урок за Гутенберг. Надявам се това да е било полезно. Разбира се, това, което сме изградили тук, не е супер сложно, но трябва да ви даде представа за основните структури при работа с Gutenberg и как да планирате следващия си плъгин.

Първо обсъдихме стъпките за създаване на среда за развитие в Гутенберг. На следващо място, ние въведохме приставка за котлони, за да помогнем за по-нататъшното развитие. След това фокусът на дискусията се измести към различни стъпки при регистрирането и стилизирането на нов блок.

Надявам се, че този урок за Гутенберг ви е помогнал в създаването на първия ви плъгин за Гутенберг!

Ако имате някакви въпроси, уволнете се в коментарите по-долу.

Не забравяйте да се присъедините към нашия крах курс за ускоряване на вашия сайт WordPress. С някои прости поправки можете да намалите времето за зареждане дори с 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map