Jak dodać przycisk do edytora Gutenberg

Nienawidzony przez niektórych i kochany przez wielu, jasne jest, że nowy edytor bloków WordPress nie pozostawia Cię obojętnym. Jest z nami od ponad miesiąca i jest z nim kompatybilnych więcej wtyczek i motywów.

Jako twórca wtyczek muszę powiedzieć, że dostosowanie naszych produktów do Gutenberga nie było czymś, co można zrobić w kilka dni. W Nelio od dłuższego czasu śledzimy ewolucję i rozwój nowego edytora bloków, aby móc zachować te same funkcje naszych wtyczek bez znaczących zmian.

Jednym z kluczowych punktów umożliwiających dostosowanie Nelio Content do Gutenberga była możliwość dodawania przycisków w blokach tekstowych, aby kontynuować robienie tego samego, co robiliśmy z TinyMCE (klasycznym edytorem). Przypominam, że jedną z najciekawszych funkcji Nelio Content jest umożliwienie wyboru fraz w treści, aby udostępnić je bezpośrednio w sieciach społecznościowych, lub zaznaczenie ich, a następnie nasz algorytm wybierze najbardziej odpowiednie i ustawi serię automatycznych wiadomości promocyjnych. Wyjaśniłem ci to wcześniej w tym poście.

Aby uwzględnić dodatkowe przyciski w TinyMCE, WordPress ma całkiem kompletną dokumentację. Ale jak to robimy w Gutenbergu? Jak dodać przycisk w blokach tekstu sformatowanego w WordPressie?

Oczywiste jest, że utrzymanie tej funkcji jest kluczem do dalszego dostarczania wysokiej jakości produktu, takiego jak Nelio Content, nie tylko dla naszych klientów, ale także dla nas, ponieważ my również jesteśmy zainteresowani wykorzystaniem funkcji podświetlania zdań w Gutenbergu.

Z tego powodu postanowiłem otworzyć numer w GitHubie projektu Gutenberg wyjaśniając problem i prosząc o pomoc w styczniu 2018 (prawie rok temu, w momencie publikacji tego posta). Poprosiłem tam o możliwość dodania przycisków do bloków tekstowych Gutenberga w celu pracy z zaznaczonym tekstem w takich blokach.

Ewolucja problemu była pozytywna i ostatecznie taka funkcjonalność została dodana dzięki Typom formatów Gutenberga. Ponieważ dokumentacja jest nadal dość uboga (jak piszę ten post), wyjaśnię, jak dodać niestandardowy przycisk do bloków tekstowych edytora bloków, aby nie tracić czasu i mieć łatwiejszy czas niż ja.

W tym repozytorium GitHub znajdziesz cały kod wtyczki, który dodaje przycisk do edytora. Chociaż jest to dość proste, wyjaśnię bardziej szczegółowo najważniejsze części tego projektu.

Kluczowy plik projektu to ten, który znajdziesz w /src/js/gutenberg.js i który masz poniżej:

Funkcja registerFormatType jest specyficzna dla rdzenia WordPress i umożliwia dodanie nowego typu formatu wraz z przyciskiem wyzwalającym akcję. Przekazujesz nazwę ( 'nelio/button' ) i obiekt JavaScript z argumentami jako parametrami. Wśród tych argumentów jest metoda edit , która zwraca element React , czyli w naszym przypadku przycisk, który chcemy umieścić w bloku.

Ten przycisk to RichTextToolbarButton , który jest niczym innym jak komponentem React samego edytora Gutenberga, który można znaleźć tutaj zdefiniowany. Ten komponent wymaga ikony (która jest w tym przypadku plikiem SVG z logo Nelio), tytułu przycisku i funkcji, która zostanie wykonana po kliknięciu przycisku. Ta funkcja kończy się wywołaniem funkcji doTheJob , w której wybrany tekst jest pobierany i drukowany w konsoli przeglądarki. To miejsce, w którym możesz dodać dowolny kod JavaScript, który chcesz obsłużyć wybrany tekst.

W atrybucie icon RichTextToolbarButton możesz umieścić ciąg z nazwą Dashicon WordPressa zamiast SVG. Aby SVG działał, pamiętaj, że używamy pakietu svg-react-loader , który konwertuje pliki SVG na elementy Reacta, a tego właśnie potrzebują te komponenty Reacta.

Kod używa składni ES6+, aby był łatwiejszy do zrozumienia, ale aby działał, musisz go przetworzyć za pomocą Babel, a do tego mamy taką konfigurację w webpacku:

Nie będę wchodzić w szczegóły, do czego służy każda linia poprzedniego pliku konfiguracyjnego webpacka , ale jeśli na niego spojrzysz, zobaczysz, że używamy svg-react-loader dla plików SVG i babel-loader do przetwarzania JavaScript i konwersji to do kodu, który działa w dowolnej przeglądarce. O tych wszystkich nowoczesnych technologiach mówiłem już w tym poście.

Wynikiem jest plik JavaScript gutenberg.js , który pojawia się w /dist/js . Teraz musimy załadować ten plik do ekranu edycji WordPressa, używając (jak zawsze) wp_enqueue_script :

Zauważ, że skrypt jest umieszczany w kolejce w haku enqueue_block_editor_assets , który zapewnia nas, że skrypt zostanie załadowany tylko wtedy, gdy używany jest edytor bloków WordPress.

Jeśli chcesz wypróbować kod, pobierz projekt GitHub i przenieś folder do swojego WordPressa w /wp-content/plugins . Tam otwórz terminal i uruchom npm install . Aby wszystko działało, musisz mieć zainstalowany NodeJS i móc uwzględnić niezbędne zależności, których wymaga nasz kod.

Gdy masz zależności, uruchom npm run build w terminalu, aby wygenerować ostateczny kod (przetwarzanie kodu JavaScript itd.). Teraz możesz przejść do swojego WordPressa i aktywować wtyczkę, którą właśnie dodaliśmy.

Gdy otworzysz post do edycji, zobaczysz nowy przycisk w blokach tekstowych. Jeśli zaznaczysz fragment tekstu i klikniesz przycisk, zobaczysz, że zaznaczony tekst pojawi się w konsoli przeglądarki. Właśnie tego spodziewaliśmy się, jak widzieliśmy w powyższym kodzie.

Wiedzieć więcej…

To tylko minimalny przykład umieszczania przycisku w bloku tekstowym. Jeśli chcesz, aby zaznaczony tekst był modyfikowany po kliknięciu w przycisk, zachęcam do przejrzenia kodu tej wtyczki, w której dodano kilka przycisków o różnych, bardziej skomplikowanych formatach.

Z drugiej strony, dla tych z Was, którzy chcą zagłębić się w temat, polecam zajrzeć do kodu wtyczki GhostKit, która modyfikuje domyślny interfejs Gutenberga, dodając różne dodatkowe elementy. Jest to również kod, który jest bardzo dobrze ustrukturyzowany i łatwy do zrozumienia.

W pewnym momencie będziemy mieli oficjalną i szczegółową dokumentację obejmującą wszystkie aspekty funkcji Gutenberga, ale na razie musimy przeczytać kod, aby dowiedzieć się, jak zaimplementować tego typu modyfikacje edytora bloków WordPress. Powodzenia!

Polecane zdjęcie Ashima D'Silvy na Unsplash.