Ten post jest dla Ciebie, który tworzy niestandardowy blok Gutenberga i potrzebuje sposobu na wybranie lub przesłanie obrazu z Biblioteki multimediów. Większość innych typów pól, takich jak pola wyboru, wprowadzanie tekstu lub selektory kolorów, jest dość łatwa do dodania, ale program do przesyłania multimediów wymaga nieco więcej kodu. Stworzymy komponent Inspector, który jest odpowiedzialny za renderowanie przycisku do otwierania Biblioteki multimediów, wybierania obrazu i opcjonalnie usuwania lub zmiany w późniejszym czasie. Wszystko przy użyciu standardowych komponentów WordPress.
Zanim zagłębimy się w kod, pamiętaj, że ten post wymaga pewnej wiedzy Gutenberga na temat pisania niestandardowych bloków. Skoncentrujemy się tylko na części do przesyłania multimediów, a nie na tym, jak zarejestrować się i zrobić sam blok Gutenberga. Jeśli nie masz pewności, jak napisać niestandardowy blok Gutenberga, mam serię samouczków obejmujących dokładnie to:
Pomijając to, zanurkujmy od razu!
Co zrobimy
Funkcja wyboru multimediów będzie funkcjonalnie dokładnie taka sama, jak funkcja polecanego obrazu WordPress. W Inspektorze dodamy panel składający się z przycisku do wyboru obrazu.
Po kliknięciu przycisku pojawi się okno „Wybierz lub prześlij multimedia" umożliwiające wybranie pliku z Biblioteki multimediów. Ograniczamy Bibliotekę multimediów do wyświetlania tylko obrazów. Po wybraniu obrazu wyskakujące okienko zamyka się, a panel wyświetla podgląd mała miniatura wybranego obrazu. Poniżej pojawią się przyciski podglądu do zmiany i usunięcia obrazu. Dokładnie tak jak w przypadku polecanego obrazu.
Ten samouczek zakłada, że użyjesz wybranego obrazu jako tła bloku – tylko jako przykład. Dlatego przechowujemy adres URL obrazu. Podam przykład, jak wykorzystać wybrany obrazek (zarówno w funkcji, jak editiw savefunkcji). Wybierając obraz, obraz pojawi się jako tło dla naszego bloku, zarówno w edytorze, jak i w interfejsie użytkownika.
Przechowujemy identyfikator multimediów i adres URL multimediów w atrybutach bloku. Kod używa withSelect, komponentu wyższego rzędu dostarczonego w wp.datapakiecie, do zapytania o więcej informacji o wybranych mediach według ID.
„Pożyczam” również nazwy klas z funkcji polecanych obrazów WordPressa, aby upewnić się, że wszystko wygląda dobrze i nie ma potrzeby samodzielnego pisania CSS. Jest to oczywiście opcjonalne.
Zapisywanie wybranych mediów w atrybutach
To, co musisz zapisać w atrybutach swojego bloku, zależy trochę od Ciebie. Jako minimum musimy oczywiście przechowywać identyfikator nośnika. Może to wystarczyć, jeśli nie musisz używać adresu URL multimediów w dowolnym miejscu w kodzie skryptu. Na przykład, jeśli używasz ServerSideRendergdzie PHP jest odpowiedzialne za renderowanie wyjścia bloku. W takim przypadku możesz łatwo uzyskać adres URL obrazu z identyfikatora mediów, używając na przykład [wp_get_attachment_image_src](https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/)(). Jednak w poniższym przykładzie pokazuję prosty przykład wyświetlania obrazu jako tła naszego bloku, więc przechowuję również adres URL mediów jako atrybut. Użyjemy atrybutu URL zarówno w edit(aby dodać tło w edytorze), jak i w save(aby dodać tło w interfejsie).
Zacznijmy od zdefiniowania naszych atrybutów. Identyfikator mediów powinien być numerem typu i domyślnie równym 0. Ułatwia to porównywanie. Adres URL mediów powinien być typu string z domyślnym pustym ciągiem.
attributes: {
mediaId: {
type: 'number',
default: 0
},
mediaUrl: {
type: 'string',
default: ''
}
},Tworzenie komponentu
Aby nasz kod był bardziej uporządkowany, definiujemy osobny komponent dla funkcji bloku edit. Później przekażemy ten komponent withSelect, aby owinąć go wokół naszego komponentu.
W zwrocie komponentu renderujemy prostą <div>zawartość bloku. Zakładam, że będziesz lub miał więcej rzeczywistej zawartości bloku, aby zastąpić fikcyjną zawartość przykładu. Wykonujemy również renderowanie InspectorControls(package wp.blockEditor) w celu dodania sekcji do inspektora. Na razie dodaję pusty PanelBodyw środku InspectorControls. Dodaję <div>klasę z tą samą klasą, której używa sekcja z polecanymi obrazami WordPressa. Dzięki temu nasza stylizacja będzie dobrze wyglądać. Później wypełnimy PanelBodygo kodem wybranej funkcji multimedialnej.
Ale najpierw zdestrukturyzujmy niezbędny komponent na początku pliku:
const { InspectorControls } = wp.blockEditor;
const { PanelBody } = wp.components;
const { Fragment } = wp.element;Powyżej registerBlockTypedefiniuję prosty komponent o nazwie BlockEdit. Jeśli wolisz przenieść to do osobnego pliku, możesz to zrobić. Jest to powszechne i zalecane, ale w tym samouczku staram się zachować prostotę i trzymam to w tym samym pliku.
Teraz chcemy wyrenderować ten komponent w naszej editfunkcji. Ale chcemy go owinąć w withSelect.
Korzystanie withSelectw editfunkcji
Jeśli nie znasz withSelect, jest to przydatny składnik wyższego rzędu, który umożliwia nam wykonywanie zapytań. Za pomocą tego możesz na przykład wyszukiwać posty. Wykorzystamy jednak tę funkcję select('core').getMedia()do zapytania o identyfikator mediów. W odpowiedzi otrzymamy obiekt ze wszystkimi informacjami medialnymi. Obiekt multimedialny, który otrzymamy w odpowiedzi, zostanie udostępniony jako prop w naszym BlockEditkomponencie, gotowy do użycia. Sprytnie.
Upewniamy się, że wysyłamy zapytania do mediów tylko wtedy, gdy atrybut ID mediów jest rzeczywiście ustawiony na coś innego niż 0. Tak będzie wyglądać nasza funkcja edycji:
Na samym końcu, po zamknięciu withSelectw kolejce #3, prosimy withSelecto zwrot naszego BlockEditkomponentu. Dzięki temu nasz BlockEditkomponent ma teraz dostęp do props.media.
Renderowanie wyboru mediów
Wreszcie nadchodzi zabawna część: rola w Inspektorze.
Interesujący nas komponent to MediaUpload(pakiet wp.blockEditor). Jeśli jesteś zainteresowany, repozytorium WordPress Github dla Gutenberga ma trochę dokumentacji na temat tego komponentu. Zawiniemy również ten komponent wewnątrz komponentu o nazwie MediaUploadCheck(package wp.blockEditor). Ten składnik upewnia się, że bieżący użytkownik ma możliwość korzystania z Biblioteki multimediów, więc korzystanie z tego jest dobrą praktyką.
Komponent MediaUploadma wymaganą właściwość: render. Sposób działania tego komponentu polega na tym, że definiujemy funkcję dla właściwości, w renderktórej renderujemy dane wyjściowe dla „obszaru przesyłania mediów”. W naszym przypadku wyrenderujemy Button(pakiet wp.components). Wewnątrz właściwości renderującej MediaUpload uzyskujemy dostęp do openfunkcji, którą możemy wywołać, aby WordPress otworzył wyskakujące okienko Media Library:
Dostępnych jest jeszcze kilka rekwizytów dla MediaUpload. W tym samouczku omówimy najważniejsze, aby działały, ale jest jeszcze kilka, z którymi możesz się bawić. Możesz być co najmniej zainteresowany propozycją, w allowedTypesktórej możesz ograniczyć typy plików, które można wybrać w Bibliotece. W naszym przypadku ustawiamy go tak, aby zezwalał tylko na obrazy.
DodawanieMediaUpload
Najpierw zdekonstruuj nowe komponenty;
const { Button } = wp.components;
const { MediaUpload, MediaUploadCheck } = wp.blockEditor;Dodajmy MediaUploadChecki MediaUploadwewnątrz naszych divw naszym PanelBody:
Powyższy kod destrukturyzuje openwewnątrz funkcji for render. Renderujemy prosty, w Buttonktórym jego onClickwłaściwość będzie uruchamiać openfunkcję. Dodałem również te same nazwy klas, co funkcja obrazu w WordPressie, aby upewnić się, że nie musimy dodawać żadnych stylów.
Wewnątrz Buttonkomponentu sprawdzamy, czy został ustawiony obrazek (attributes.mediaId). Jeśli nie, powtarzamy tekst „Wybierz obraz”. Powinniśmy to teraz dostać w naszym bloku.
Po kliknięciu przycisku powinno pojawić się wyskakujące okienko Media Library. Jednak wybór obrazu nie działa w tej chwili, ponieważ brakuje nam rekwizytów onSelecti na. Naprawmy to teraz. Ustawiamy wybrany identyfikator nośnika i uruchamiamy funkcję, którą później zdefiniujemy w naszym komponencie.value``MediaUpload``value``onSelect
Zdefiniujmy onSelectMediafunkcję w naszym komponencie.
Obsługa wyboru mediów
Uwaga: moje funkcje definiuję jako funkcje strzałek (onSelectMedia =() => { }). Funkcje strzałek są całkiem nowe w ESNext i całkiem fajne. Minusem jest to, że używanie funkcji strzałek wymaga dodania obsługi tego w konfiguracji Babel. Jeśli jeszcze tego nie zrobiłeś, polecam zajrzeć pod nagłówek „Konfiguracja Babel” w tym poście.
Tuż przed instrukcją return komponentu definiuję onSelectMediafunkcję. Wszystko, co musimy zrobić, to zaktualizować nasze atrybuty za pomocą setAttributes(). Jako parametr onSelectMediaotrzymujemy obiekt media. Po prostu wydobywamy to, czego potrzebujemy z obiektu medialnego. W naszym przypadku jest to identyfikator mediów i adres URL w pełnym rozmiarze, które są odpowiednio właściwościami id.url
Wypróbuj teraz, a teraz będziesz mógł wybrać obraz z Biblioteki multimediów. Wybrane media zostaną zapisane w atrybutach bloku. Jednak nie ma jeszcze podglądu tego w Inspektorze, a ponieważ zaznaczyłeś obraz, przycisk wyboru obrazu znika. Panel jest teraz pusty. Następnym krokiem jest renderowanie podglądu po wybraniu obrazu oraz udostępnienie opcji jego usunięcia lub zmiany.
Renderowanie obrazu podglądu
Wewnątrz Buttonkomponentu renderujemy wewnętrzną właściwość, wyświetlamy tekst MediaUpload„ renderWybierz obraz”, jeśli obraz nie jest jeszcze ustawiony. Ale musimy dodać trochę kodu, gdy obraz jest tutaj ustawiany; podgląd.
Aby pomóc nam wyrenderować ładny podgląd, używamy komponentu ResponsiveWrapper(pakiet wp.components). Aby w ResponsiveWrapperpełni funkcjonować musimy zapewnić podpory na wysokość i szerokość. Potrzebujemy również adresu URL miniatury. Nie ma sensu używać pełnego adresu URL (który może być gigantyczny) do renderowania podglądu w Inspektorze. Stąd pochodzi prop withSelect. Wewnątrz komponentu renderujemy prosty <img>znacznik HTML.
Najpierw destrukturyzujemy niezbędny składnik:
const { ResponsiveWrapper } = wp.components;Jak widać, uzyskujemy dostęp do podpory withSelectdostarczonego nam komponentu, props.media. Z obiektu pobieramy szerokość, wysokość i adres URL do rozmiaru miniaturki multimediów.
Powinieneś teraz uzyskać ładny podgląd wybranego obrazu!
Ponieważ renderujemy obraz podglądu wewnątrz, Buttonkliknięcie na obraz podglądu uruchomi funkcję Button– onClickczyli otwarcie Biblioteki multimediów. W ten sposób możesz już zmienić wybrany obraz.
Obecnie nie ma możliwości usunięcia lub zresetowania wybranego obrazu. Naprawmy to!
Dodawanie funkcji usuwania
Powinniśmy przynajmniej zaoferować użytkownikowi możliwość usunięcia wybranego obrazu. W tej chwili po wybraniu obrazu możesz go tylko zmienić, ale nie możesz go usunąć.
Zrobimy to tak samo, jak WordPress w przypadku polecanego obrazu: Nowe Buttonpod obrazem podglądu (całkowicie poza jego MediaUploadCheck). Dodając kilka sprytnych rekwizytów Button, sprawiamy, że wygląda on jak link (isLink) z czerwonym kolorem tekstu (isDestructive). Przeczytaj dokumentację przycisku, aby zobaczyć, co jeszcze jest możliwe. Przycisk owijamy w jeszcze jeden MediaUploadCheck, aby zapewnić użytkownikowi odpowiednie możliwości.
W tym przypadku uruchamiamy nową funkcję w naszym komponencie Button:. Definiujemy go gdzieś tuż przed funkcją powrotu komponentu, tak jak zrobiliśmy to z .onClick``removeMedia()``onSelectMedia
Wszystko, co robi ta funkcja, to resetowanie naszych dwóch wartości atrybutów.
Teraz będziemy mieli ładny, przejrzysty link do usunięcia obrazu:
Po kliknięciu nowego przycisku wybrany obraz i sam przycisk znikają, a przycisk wyboru obrazu pojawia się ponownie.
Dodawanie przycisku wymiany
Ten krok jest w pełni opcjonalny. Jak wspomniano wcześniej, kliknięcie obrazu podglądu obrazu otworzy bibliotekę multimediów i umożliwi zmianę obrazu. Jednak może to nie być tak intuicyjne, aby wszyscy mogli to zrozumieć. WordPress dodaje osobny przycisk do zmiany obrazu, aby był bardzo przejrzysty. Możemy zrobić to samo.
Aby wyrenderować przycisk zmiany obrazu, zasadniczo powtarzamy kod, który mamy do wyboru obrazu: inny MediaUploadkomponent. Zapewniamy tę samą funkcję dla onSelecti allowedFileTypesjak valuepoprzednio. Wewnątrz renderrekwizytu MediaUploadpo prostu renderujemy inny Button, który otwiera bibliotekę mediów. Umieśćmy ten przycisk przed przyciskiem Usuń – ponieważ ma to więcej sensu dla użytkownika końcowego:
Więc teraz powinieneś otrzymać to:
Korzystanie z wybranego obrazu
Do tej pory powinno być całkiem jasne, w jaki sposób możesz użyć wybranego obrazu. Masz identyfikator i adres URL mediów zapisane w atrybutach twojego bloku. Jednak jako prosty przykład podam kod, który ustawia wybrany obraz jako tło bloku. Kod można wykonać dokładnie tak samo w funkcjach editi savefunkcjach. Po prostu tworzymy obiekt stylu, który nakładamy na opakowanie div bloku. W obiekcie stylu ustawiamy obraz tła na adres URL mediów.
Z resztą niestandardowej zawartości bloku może to z łatwością wyglądać mniej więcej tak:
Jeśli zastosujesz styl blokowy w obu editi save, twój blok powinien teraz pobrać wybrane media jako tło. Zarówno wewnątrz edytora, jak i frontendu.
Wniosek
Wybór obrazu (lub pliku) z Biblioteki multimediów to funkcja, której Ty jako programista Gutenberg bez wątpienia będziesz potrzebować do swoich bloków. Nauczyliśmy się, jak dodać funkcję wyboru obrazu z Biblioteki multimediów w naszym niestandardowym bloku Gutenberga. Zrobiliśmy to w taki sam sposób, jak sam WordPress robi to dla polecanego obrazu. (Edytuj, maj 2020 r.: WordPress zaktualizował teraz polecany obraz, aby używać useSelectzamiast niego haka React). Dzięki temu nasz kod nie jest „hackowy” i wiąże się z wysokim ryzykiem złamania w przyszłych aktualizacjach.
Daj mi znać, jeśli miałeś z tego jakikolwiek użytek!
Pełny kod
Poniżej znajduje się pełny kod niestandardowego bloku, który zawiera wybrane funkcje multimedialne. I tak naprawdę nic więcej. Ta część zależy od Ciebie!