W przypadku projektu, nad którym pracowałem, chciałem użyć Select2 jako Gutenberga InpectorControl
, aby umożliwić mi zastosowanie ustawień do bloku. Ten samouczek zapewni również podstawy potrzebne do wprowadzenia dowolnego komponentu React innej firmy do edytora WordPress Gutenberg.
Select2 to bardzo poręczny zamiennik wybranych pól w Twojej witrynie. W szczególności ma kilka świetnych opcji wyboru wielu przedmiotów.
Gotowy produkt, Select2 w WordPress Gutenberg InspectorControls
Dobrą wiadomością jest to, że nie musiałem budować komponentu React, aby wprowadzić Select2 do Gutenberga, react-select
komponent Jeda Watsona, już wykonuje świetną robotę, jednak sprawienie, by grał przyjemnie z Gutenbergiem, nie było tak łatwe, jak po prostu podążanie instrukcje.
Po pierwsze, musieliśmy zainstalować komponent w naszej kompilacji. Ponieważ było to w npm, wystarczyło wprowadzić do naszego terminala:
Wprowadzanie Select2 do bloku Gutenberg
Korzystając z repozytorium Zac Gordons Gutenberg Course Git (część fantastycznego kursu programistycznego Zac Gordons Gutenberg) jako podstawy dla mojej wtyczki (w szczególności InspectorControls
przykładu), react-select
musiałem dodać następujące dołączenia na górze mojego pliku:
import React from 'react';
import Select from 'react-select';
O nie! Kompilacja daje nam błąd:
Nie znaleziono modułu: Błąd: nie można rozwiązać problemu „zareagować"
Nie obawiaj się, ten świetny artykuł na temat „Jak używać zewnętrznych komponentów React w swoich blokach Gutenberga” autorstwa CSS Igniter przyszedł na ratunek, wystarczy zarejestrować externals
się w naszym webpack.config.js
pliku:
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
}
Tak jak:
module.exports = {
entry: {
'./assets/js/editor': './blocks/index.js',
'./assets/js/script': './blocks/script.js',
},
output: {
path: path.resolve( __dirname ),
filename: '[name].js',
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
}
...
Rejestracja InspektoraKontroli
Wewnątrz rolki panelu swojego <InspectorControls>
komponentu musisz dodać następujące elementy:
Jeszcze nie skończyliśmy, ponieważ będziemy musieli również zarejestrować selectedOption
atrybut i handleSelectChange
funkcję. Możemy to zrobić tak:
attributes: {
selectedOption: {
type: 'string',
default: null,
}
},
…a teraz funkcja…
Poczekaj, dlaczego potrzebujemy JSON.stringify()
i JSON.parse()
wartości? Cóż, ponieważ wartość, którą react-select
akceptuje komponent, jest tablicą, a ponieważ Gutenberg nie pozwoli nam zapisać tej wartości jako tablicy, jest to obejście, którego możemy użyć.
Składamy to razem
Nasz cały InspectorControls
obszar powinien teraz wyglądać tak:
Wygląda dobrze w Gutenberg
Jak widać na zrzucie ekranu, działa to całkiem nieźle:
Select2 jako Gutenberg InspectorControl
Idąc dalej
Użyłem tej kontroli Inspector w mojej wtyczce Secure Blocks for Gutenberg, dowiedz się, jak wypełniłem kontrolkę Select2 dynamicznymi danymi z WordPress REST API.