W poprzednich krokach nauczyliśmy się podstaw renderowania komponentów i atrybutów w bloku. W tym kroku skupimy się na tym, co WordPress (przynajmniej w kodzie) nazywa Inspektorem: na pasku bocznym po prawej stronie w edytorze. Omówimy kilka nowych komponentów, które warto umieścić na pasku bocznym i jak sobie z nimi radzić.
Komponent inspektora/paska bocznego
Aby wstawić ustawienia niestandardowe i kod HTML do paska bocznego Inspektora, umieścisz wszystko w komponencie o nazwie InspectorControls. Cokolwiek umieścisz w tym komponencie, zostanie wyświetlone na pasku bocznym, a nie w samym bloku/edytorze. Możesz w zasadzie umieścić składnik i jego zawartość wszędzie w zwrocie editfunkcji.
Poza tym będziesz obsługiwał ustawienia na pasku bocznym tak, jak były w bloku. Każde ustawienie wymaga atrybutu, a ładujesz i aktualizujesz atrybuty w ten sam sposób.
Przyjrzyjmy się najpierw, jak wygląda pasek boczny naszego bloku (kiedy nasz blok jest aktywny w edytorze), na podstawie kodu, który otrzymaliśmy w poprzednim kroku.
Wszystkie bloki będą domyślnie wyświetlały ikonę, nazwę i opis bloku oraz sekcję Zaawansowane – zwinięte. Wewnątrz Zaawansowane znajdziesz tekst do wprowadzania klasy CSS dla bloku.
Dodawanie sekcji paska bocznego i niektórych ustawień
Pasek boczny jest podzielony na sekcje (nazywane w kodzie panelami), a dla optymalnego projektu i funkcjonalności (w tym funkcji open-collapse) powinniśmy używać komponentów WordPressa do prawidłowego wyświetlania paneli.
Użyj komponentu PanelBodydo dodania sekcji (tych, które możesz otworzyć lub zwinąć), znajdującego się w wp.componentspakiecie. Komponent akceptuje kilka właściwości, na przykład tytuł i czy panel powinien być domyślnie otwarty lub zamknięty. Możesz również podać niestandardową klasę, ikonę i dołączyć funkcję zdarzenia do wyzwalacza otwórz-zamknij.
W PanelBodyWordPress zaleca użycie PanelRowkomponentu, który działa jak ogólne kontenery w panelu – aby zapewnić uproszczenie projektu. Ten składnik automatycznie stosuje pewne style marginesów i wierszy elastycznych do treści. Ze względu na flex-direction: rowstylizację „ " powinieneś owinąć każde ustawienie wewnątrz jednego PanelRow. Możesz też całkowicie pominąć je i wziąć odpowiedzialność za stylizację za pomocą divów i tym podobnych.
Dodawanie panelu i ustawień
Dodajmy panel paska bocznego do naszego bloku z kilkoma ustawieniami w środku, aby zobaczyć to w praktyce. Dodamy kontrolkę przełączania, wejście wyboru, selektor kolorów i pole wyboru – tylko po to, aby uzyskać trochę doświadczenia z różnymi typami komponentów wejściowych. Zostawiłem zawartość bloku (z dwoma RichTexts) i savefunkcję tak jak poprzednio.
const { registerBlockType } = wp.blocks;
const { RichText, InspectorControls } = wp.blockEditor;
const { ToggleControl, PanelBody, PanelRow, CheckboxControl, SelectControl, ColorPicker } = wp.components;
registerBlockType('awp/firstblock', {
title: 'My first block',
category: 'common',
icon: 'smiley',
description: 'Learning in progress',
keywords: ['example', 'test'],
attributes: {
myRichHeading: {
type: 'string',
},
myRichText: {
type: 'string',
source: 'html',
selector: 'p'
},
toggle: {
type: 'boolean',
default: true
},
favoriteAnimal: {
type: 'string',
default: 'dogs'
},
favoriteColor: {
type: 'string',
default: '#DDDDDD'
},
activateLasers: {
type: 'boolean',
default: false
}
},
edit: (props) => {
const { attributes, setAttributes } = props;
return (<div>
<InspectorControls>
<PanelBody
title="Most awesome settings ever"
initialOpen={true}
>
<PanelRow>
<ToggleControl
label="Toggle me"
checked={attributes.toggle}
onChange={(newval) => setAttributes({ toggle: newval })}
/>
</PanelRow>
<PanelRow>
<SelectControl
label="What's your favorite animal?"
value={attributes.favoriteAnimal}
options={[
{label: "Dogs", value: 'dogs'},
{label: "Cats", value: 'cats'},
{label: "Something else", value: 'weird_one'},
]}
onChange={(newval) => setAttributes({ favoriteAnimal: newval })}
/>
</PanelRow>
<PanelRow>
<ColorPicker
color={attributes.favoriteColor}
onChangeComplete={(newval) => setAttributes({ favoriteColor: newval.hex })}
disableAlpha
/>
</PanelRow>
<PanelRow>
<CheckboxControl
label="Activate lasers?"
checked={attributes.activateLasers}
onChange={(newval) => setAttributes({ activateLasers: newval })}
/>
</PanelRow>
</PanelBody>
</InspectorControls>
<RichText
tagName="h2"
placeholder="Write your heading here"
value={attributes.myRichHeading}
onChange={(newtext) => setAttributes({ myRichHeading: newtext })}
/>
<RichText
tagName="p"
placeholder="Write your paragraph here"
value={attributes.myRichText}
onChange={(newtext) => setAttributes({ myRichText: newtext })}
/>
</div>
);
},
save: (props) => {
const { attributes } = props;
return (<div>
<RichText.Content
tagName="h2"
value={attributes.myRichHeading}
/>
<RichText.Content
tagName="p"
value={attributes.myRichText}
/>
</div>
);
}
});Jak zwykle zaczynamy od destrukturyzacji komponentów i funkcji, których chcemy użyć. Wewnątrz definiujemy jeden atrybut attributesna registerBlockType()dane wejściowe i dopasowujemy typ – na przykład kontrolka przełączania oczekuje wartości logicznej, a ponieważ wartości listy rozwijanej są ciągami, atrybut powinien być również ciągiem typu.
Na linii #41zaczynamy InspectorControlskomponent i wszystko od tego punktu do linii #80pojawi się na pasku bocznym. Reszta pojawi się w samym edytorze i nie wprowadziłem tam żadnych zmian.
Wewnątrz najpierw tworzymy panel z PanelBodywłaściwościami initialOpenustawionymi na true i mówimy Gutenbergowi, że ten panel powinien być domyślnie otwarty. A potem od nas zależy, co dodać do każdego z nich PanelRow.
W przypadku komponentu ToggleControlużywamy tych samych właściwości, co poprzednio z danymi wejściowymi tekstowymi, z tym wyjątkiem, że zamiast właściwości valuepodajemy wartość atrybutu wewnątrz właściwości checked. Dotyczy to wszelkich danych wejściowych, które oczekują atrybutu check w zwykłym HTML, na przykład pól wyboru. W przypadku przycisków radiowych użyjesz prop selected, ponieważ tego użyjesz również w zwykłym HTML. Pamiętaj, że atrybut dla tego wejścia musi być typu boolean.
Jeśli chodzi o CheckboxControlobsługę pojedynczego pola wyboru, działa dokładnie tak samo, jak ToggleControl– zwraca wartość logiczną, niezależnie od tego, czy jest zaznaczone, czy nie.
Generuje listę rozwijaną wyboru i SelectControloczekuje możliwych wyborów jako tablicy we właściwości options. Każdy element musi być obiektem o właściwościach labeli value. To samo dotyczy pól wyboru i przycisków opcji (RadioControl). W normalnych okolicznościach prawdopodobnie wygenerujesz wybory jako zmienną poza danymi wyjściowymi HTML.
Możesz zauważyć, że ColorPickerdziała trochę inaczej niż inne, ponieważ jest to bardziej złożony komponent, a nie standardowe wejście HTML. Podaj rekwizyt colordla zapisanego koloru, a zamiast onChange(odpala raz po kliknięciu, ale także za każdym razem, gdy zmienia się wartość podczas przeciągania – co może skutkować wieloma pożarami) użyj onChangeComplete. Rekwizyt zwracany w tym zdarzeniu to również obiekt, w którym musimy zdecydować, którą część chcemy zapisać w naszym atrybucie. W tym przykładzie chcemy zapisać wartość szesnastkową (bez alpha/opacity), więc wewnątrz setAttributes()wyodrębniamy hexwłaściwość colorzwracanego obiektu. Dlatego też dodajemy właściwośćdisableAlphaaby usunąć interfejs użytkownika kanału alfa (do kontrolowania przezroczystości), ponieważ nie ma sensu oferować tego użytkownikowi, gdy nigdy nie zapisujemy wartości przezroczystości.
Każdy z komponentów ma labeldostępną rekwizyt, z wyjątkiem próbnika kolorów. Jeśli chcesz wypisać etykietę lub tekst przed nią, musisz pobawić się kodem HTML lub stylami, aby upewnić się, że wygląda dobrze.
Możesz oczywiście dodać tyle paneli, ile chcesz, po prostu dodaj kolejny PanelBodykomponent po poprzednim.
Jeśli chcesz dowiedzieć się więcej o dodawaniu ustawień bloków, mam oddzielne samouczki dotyczące bardziej złożonych ustawień i komponentów dla Inspektora; Jak dodać wybór obrazu i jak dodać panel ustawień kolorów.
Obsługiwaniesave
Zostawiłem savefunkcję tak, jak było wcześniej. To zależy od Ciebie i wszystko zależy od tego, czym sterują ustawienia na wyjściu. Wiesz już, jak uzyskać wartości każdego ustawienia. Jako przykład załóżmy, że atrybut logiczny activateLaserskontroluje, czy niestandardowy element HTML jest renderowany. Jeśli atrybut jest truediv powinien zostać wypisany, w przeciwnym razie nie. Możesz to zrobić za pomocą tradycyjnej opcji if-check lub użyć funkcji inline ifi &&operatora JSX. Przeczytaj więcej na ten temat w przewodniku React dotyczącym renderowania warunkowego.
save: (props) => {
const { attributes } = props;
return (<div>
<RichText.Content
tagName="h2"
value={attributes.myRichHeading}
/>
<RichText.Content
tagName="p"
value={attributes.myRichText}
/>
{attributes.activateLasers &&
<div className="lasers">Lasers activated</div>
}
</div>
);
}Ponieważ użyjemy RichTexttego wyjścia, nie będzie on widoczny w edytorze, ale pojawi się w interfejsie użytkownika.
Więcej komponentów znajdziesz w wp.components repozytorium Github. Większość z tych folderów powinna zawierać plik readme z dokumentacją, jak z niego korzystać. Większość tego nauczyłem się, zaglądając do tego repozytorium, a także do podstawowych komponentów WordPressa, jak to zrobili.
W następnym kroku serii skupimy się na kontrolowaniu paska narzędzi bloku. Dowiemy się, jak obsługiwać na przykład wyrównanie bloku i dodawać niestandardowe przyciski do paska narzędzi.