![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153621-61e511f57cf93.png\")
<\/a><\/p>\nFunkcja wyboru multimedi\u00f3w b\u0119dzie funkcjonalnie dok\u0142adnie taka sama, jak funkcja polecanego obrazu WordPress. W Inspektorze dodamy panel sk\u0142adaj\u0105cy si\u0119 z przycisku do wyboru obrazu.<\/p>\n
Po klikni\u0119ciu przycisku pojawi si\u0119 okno \u201eWybierz lub prze\u015blij multimedia" umo\u017cliwiaj\u0105ce wybranie pliku z Biblioteki multimedi\u00f3w. Ograniczamy Bibliotek\u0119 multimedi\u00f3w do wy\u015bwietlania tylko obraz\u00f3w. Po wybraniu obrazu wyskakuj\u0105ce okienko zamyka si\u0119, a panel wy\u015bwietla podgl\u0105d ma\u0142a miniatura wybranego obrazu. Poni\u017cej pojawi\u0105 si\u0119 przyciski podgl\u0105du do zmiany i usuni\u0119cia obrazu. Dok\u0142adnie tak jak w przypadku polecanego obrazu.<\/p>\n
Ten samouczek zak\u0142ada, \u017ce \u200b\u200bu\u017cyjesz wybranego obrazu jako t\u0142a bloku \u2013 tylko jako przyk\u0142ad. Dlatego przechowujemy adres URL obrazu. Podam przyk\u0142ad, jak wykorzysta\u0107 wybrany obrazek (zar\u00f3wno w funkcji, jak Przechowujemy identyfikator multimedi\u00f3w i adres URL multimedi\u00f3w w atrybutach bloku. Kod u\u017cywa \u201ePo\u017cyczam” r\u00f3wnie\u017c nazwy klas z funkcji polecanych obraz\u00f3w WordPressa, aby upewni\u0107 si\u0119, \u017ce wszystko wygl\u0105da dobrze i nie ma potrzeby samodzielnego pisania CSS. Jest to oczywi\u015bcie opcjonalne.<\/p>\n To, co musisz zapisa\u0107 w atrybutach swojego bloku, zale\u017cy troch\u0119 od Ciebie. Jako minimum musimy oczywi\u015bcie przechowywa\u0107 identyfikator no\u015bnika. Mo\u017ce to wystarczy\u0107, je\u015bli nie musisz u\u017cywa\u0107 adresu URL multimedi\u00f3w w dowolnym miejscu w kodzie skryptu. Na przyk\u0142ad, je\u015bli u\u017cywasz Zacznijmy od zdefiniowania naszych atrybut\u00f3w. Identyfikator medi\u00f3w powinien by\u0107 numerem typu i domy\u015blnie r\u00f3wnym 0. U\u0142atwia to por\u00f3wnywanie. Adres URL medi\u00f3w powinien by\u0107 typu string z domy\u015blnym pustym ci\u0105giem.<\/p>\n Aby nasz kod by\u0142 bardziej uporz\u0105dkowany, definiujemy osobny komponent dla funkcji bloku W zwrocie komponentu renderujemy prost\u0105 Ale najpierw zdestrukturyzujmy niezb\u0119dny komponent na pocz\u0105tku pliku:<\/p>\n Powy\u017cej Teraz chcemy wyrenderowa\u0107 ten komponent w naszej Je\u015bli nie znasz Upewniamy si\u0119, \u017ce wysy\u0142amy zapytania do medi\u00f3w tylko wtedy, gdy atrybut ID medi\u00f3w jest rzeczywi\u015bcie ustawiony na co\u015b innego ni\u017c 0. Tak b\u0119dzie wygl\u0105da\u0107 nasza funkcja edycji:<\/p>\n Na samym ko\u0144cu, po zamkni\u0119ciu Wreszcie nadchodzi zabawna cz\u0119\u015b\u0107: rola w Inspektorze.<\/p>\n Interesuj\u0105cy nas komponent to Komponent Dost\u0119pnych jest jeszcze kilka rekwizyt\u00f3w dla Najpierw zdekonstruuj nowe komponenty;<\/p>\n Dodajmy Powy\u017cszy kod destrukturyzuje Wewn\u0105trz Po klikni\u0119ciu przycisku powinno pojawi\u0107 si\u0119 wyskakuj\u0105ce okienko Media Library. Jednak wyb\u00f3r obrazu nie dzia\u0142a w tej chwili, poniewa\u017c brakuje nam rekwizyt\u00f3w Zdefiniujmy Uwaga<\/strong>: moje funkcje definiuj\u0119 jako funkcje strza\u0142ek ( Tu\u017c przed instrukcj\u0105 return komponentu definiuj\u0119 Wypr\u00f3buj teraz, a teraz b\u0119dziesz m\u00f3g\u0142 wybra\u0107 obraz z Biblioteki multimedi\u00f3w. Wybrane media zostan\u0105 zapisane w atrybutach bloku. Jednak nie ma jeszcze podgl\u0105du tego w Inspektorze, a poniewa\u017c zaznaczy\u0142e\u015b obraz, przycisk wyboru obrazu znika. Panel jest teraz pusty. Nast\u0119pnym krokiem jest renderowanie podgl\u0105du po wybraniu obrazu oraz udost\u0119pnienie opcji jego usuni\u0119cia lub zmiany.<\/p>\n Wewn\u0105trz Aby pom\u00f3c nam wyrenderowa\u0107 \u0142adny podgl\u0105d, u\u017cywamy komponentu Najpierw destrukturyzujemy niezb\u0119dny sk\u0142adnik:<\/p>\n Jak wida\u0107, uzyskujemy dost\u0119p do podpory Powiniene\u015b teraz uzyska\u0107 \u0142adny podgl\u0105d wybranego obrazu!<\/p>\n Poniewa\u017c renderujemy obraz podgl\u0105du wewn\u0105trz, Obecnie nie ma mo\u017cliwo\u015bci usuni\u0119cia lub zresetowania wybranego obrazu. Naprawmy to!<\/p>\n Powinni\u015bmy przynajmniej zaoferowa\u0107 u\u017cytkownikowi mo\u017cliwo\u015b\u0107 usuni\u0119cia wybranego obrazu. W tej chwili po wybraniu obrazu mo\u017cesz go tylko zmieni\u0107, ale nie mo\u017cesz go usun\u0105\u0107.<\/p>\n Zrobimy to tak samo, jak WordPress w przypadku polecanego obrazu: Nowe W tym przypadku uruchamiamy now\u0105 funkcj\u0119 w naszym komponencie Wszystko, co robi ta funkcja, to resetowanie naszych dw\u00f3ch warto\u015bci atrybut\u00f3w.<\/p>\n Teraz b\u0119dziemy mieli \u0142adny, przejrzysty link do usuni\u0119cia obrazu:<\/p>\n Po klikni\u0119ciu nowego przycisku wybrany obraz i sam przycisk znikaj\u0105, a przycisk wyboru obrazu pojawia si\u0119 ponownie.<\/p>\n Ten krok jest w pe\u0142ni opcjonalny. Jak wspomniano wcze\u015bniej, klikni\u0119cie obrazu podgl\u0105du obrazu otworzy bibliotek\u0119 multimedi\u00f3w i umo\u017cliwi zmian\u0119 obrazu. Jednak mo\u017ce to nie by\u0107 tak intuicyjne, aby wszyscy mogli to zrozumie\u0107. WordPress dodaje osobny przycisk do zmiany obrazu, aby by\u0142 bardzo przejrzysty. Mo\u017cemy zrobi\u0107 to samo.<\/p>\n Aby wyrenderowa\u0107 przycisk zmiany obrazu, zasadniczo powtarzamy kod, kt\u00f3ry mamy do wyboru obrazu: inny Wi\u0119c teraz powiniene\u015b otrzyma\u0107 to:<\/p>\nedit<\/code>iw save<\/code>funkcji). Wybieraj\u0105c obraz, obraz pojawi si\u0119 jako t\u0142o dla naszego bloku, zar\u00f3wno w edytorze, jak i w interfejsie u\u017cytkownika.<\/p>\nwithSelect<\/code>, komponentu wy\u017cszego rz\u0119du dostarczonego w wp.data<\/code>pakiecie, do zapytania o wi\u0119cej informacji o wybranych mediach wed\u0142ug ID.<\/p>\nZapisywanie wybranych medi\u00f3w w atrybutach<\/h2>\n
ServerSideRender<\/code>gdzie PHP jest odpowiedzialne za renderowanie wyj\u015bcia bloku. W takim przypadku mo\u017cesz \u0142atwo uzyska\u0107 adres URL obrazu z identyfikatora medi\u00f3w, u\u017cywaj\u0105c na przyk\u0142ad [wp_get_attachment_image_src](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_attachment_image_src\/)()<\/code>. Jednak w poni\u017cszym przyk\u0142adzie pokazuj\u0119 prosty przyk\u0142ad wy\u015bwietlania obrazu jako t\u0142a naszego bloku, wi\u0119c przechowuj\u0119 r\u00f3wnie\u017c adres URL medi\u00f3w jako atrybut. U\u017cyjemy atrybutu URL zar\u00f3wno w edit<\/code>(aby doda\u0107 t\u0142o w edytorze), jak i w save<\/code>(aby doda\u0107 t\u0142o w interfejsie).<\/p>\nattributes: {\n mediaId: {\n type: 'number',\n default: 0\n },\n mediaUrl: {\n type: 'string',\n default: ''\n }\n},<\/code><\/pre>\nTworzenie komponentu<\/h2>\n
edit<\/code>. P\u00f3\u017aniej przeka\u017cemy ten komponent withSelect<\/code>, aby owin\u0105\u0107 go wok\u00f3\u0142 naszego komponentu.<\/p>\n<div><\/code>zawarto\u015b\u0107 bloku. Zak\u0142adam, \u017ce b\u0119dziesz lub mia\u0142 wi\u0119cej rzeczywistej zawarto\u015bci bloku, aby zast\u0105pi\u0107 fikcyjn\u0105 zawarto\u015b\u0107 przyk\u0142adu. Wykonujemy r\u00f3wnie\u017c renderowanie InspectorControls<\/code>(package wp.blockEditor<\/code>) w celu dodania sekcji do inspektora. Na razie dodaj\u0119 pusty PanelBody<\/code>w \u015brodku InspectorControls<\/code>. Dodaj\u0119 <div><\/code>klas\u0119 z t\u0105 sam\u0105 klas\u0105, kt\u00f3rej u\u017cywa sekcja z polecanymi obrazami WordPressa. Dzi\u0119ki temu nasza stylizacja b\u0119dzie dobrze wygl\u0105da\u0107. P\u00f3\u017aniej wype\u0142nimy PanelBody<\/code>go kodem wybranej funkcji multimedialnej.<\/p>\nconst { InspectorControls } = wp.blockEditor;\nconst { PanelBody } = wp.components;\nconst { Fragment } = wp.element;<\/code><\/pre>\nregisterBlockType<\/code>definiuj\u0119 prosty komponent o nazwie BlockEdit<\/code>. Je\u015bli wolisz przenie\u015b\u0107 to do osobnego pliku, mo\u017cesz to zrobi\u0107. Jest to powszechne i zalecane, ale w tym samouczku staram si\u0119 zachowa\u0107 prostot\u0119 i trzymam to w tym samym pliku.<\/p>\nconst BlockEdit = (props) => {\n const { attributes, setAttributes } = props;\n\u00a0\n return (<Fragment>\n <InspectorControls>\n <PanelBody\n title={__('Select block background image', 'awp')}\n initialOpen={ true }\n >\n <div className=\"editor-post-featured-image\">\n ...We will add code here...\n <\/div>\n <\/PanelBody>\n <\/InspectorControls>\n <div>\n ... Your block content here...\n <\/div>\n <\/Fragment>\n );\n};<\/code><\/pre>\nedit<\/code>funkcji. Ale chcemy go owin\u0105\u0107 w withSelect<\/code>.<\/p>\nKorzystanie
withSelect<\/code>w edit<\/code>funkcji<\/h2>\nwithSelect<\/code>, jest to przydatny sk\u0142adnik wy\u017cszego rz\u0119du, kt\u00f3ry umo\u017cliwia nam wykonywanie zapyta\u0144. Za pomoc\u0105 tego mo\u017cesz na przyk\u0142ad wyszukiwa\u0107 posty. Wykorzystamy jednak t\u0119 funkcj\u0119 select('core').getMedia()<\/code>do zapytania o identyfikator medi\u00f3w. W odpowiedzi otrzymamy obiekt ze wszystkimi informacjami medialnymi. Obiekt multimedialny, kt\u00f3ry otrzymamy w odpowiedzi, zostanie udost\u0119pniony jako prop w naszym BlockEdit<\/code>komponencie, gotowy do u\u017cycia. Sprytnie.<\/p>\nedit: withSelect((select, props) => {\n return { media: props.attributes.mediaId? select('core').getMedia(props.attributes.mediaId): undefined };\n})(BlockEdit),<\/code><\/pre>\nwithSelect<\/code>w kolejce #3<\/code>, prosimy withSelect<\/code>o zwrot naszego BlockEdit<\/code>komponentu. Dzi\u0119ki temu nasz BlockEdit<\/code>komponent ma teraz dost\u0119p do props.media<\/code>.<\/p>\nRenderowanie wyboru medi\u00f3w<\/h2>\n
MediaUpload<\/code>(pakiet wp.blockEditor<\/code>). Je\u015bli jeste\u015b zainteresowany, repozytorium WordPress Github dla Gutenberga ma troch\u0119 dokumentacji na temat tego komponentu<\/a>. Zawiniemy r\u00f3wnie\u017c ten komponent wewn\u0105trz komponentu o nazwie MediaUploadCheck<\/code>(package wp.blockEditor<\/code>). Ten sk\u0142adnik upewnia si\u0119, \u017ce bie\u017c\u0105cy u\u017cytkownik ma mo\u017cliwo\u015b\u0107 korzystania z Biblioteki multimedi\u00f3w, wi\u0119c korzystanie z tego jest dobr\u0105 praktyk\u0105.<\/p>\nMediaUpload<\/code>ma wymagan\u0105 w\u0142a\u015bciwo\u015b\u0107: render<\/code>. Spos\u00f3b dzia\u0142ania tego komponentu polega na tym, \u017ce definiujemy funkcj\u0119 dla w\u0142a\u015bciwo\u015bci, w render<\/code>kt\u00f3rej renderujemy dane wyj\u015bciowe dla \u201eobszaru przesy\u0142ania medi\u00f3w”. W naszym przypadku wyrenderujemy Button<\/code>(pakiet wp.components<\/code>). Wewn\u0105trz w\u0142a\u015bciwo\u015bci renderuj\u0105cej MediaUpload uzyskujemy dost\u0119p do open<\/code>funkcji, kt\u00f3r\u0105 mo\u017cemy wywo\u0142a\u0107, aby WordPress otworzy\u0142 wyskakuj\u0105ce okienko Media Library:<\/p>\n<\/a><\/p>\nMediaUpload<\/code>. W tym samouczku om\u00f3wimy najwa\u017cniejsze, aby dzia\u0142a\u0142y, ale jest jeszcze kilka, z kt\u00f3rymi mo\u017cesz si\u0119 bawi\u0107. Mo\u017cesz by\u0107 co najmniej zainteresowany propozycj\u0105, w allowedTypes<\/code>kt\u00f3rej mo\u017cesz ograniczy\u0107 typy plik\u00f3w, kt\u00f3re mo\u017cna wybra\u0107 w Bibliotece. W naszym przypadku ustawiamy go tak, aby zezwala\u0142 tylko na obrazy.<\/p>\nDodawanie
MediaUpload<\/code><\/h3>\nconst { Button } = wp.components;\nconst { MediaUpload, MediaUploadCheck } = wp.blockEditor;<\/code><\/pre>\nMediaUploadCheck<\/code>i MediaUpload<\/code>wewn\u0105trz naszych div<\/code>w naszym PanelBody<\/code>:<\/p>\n<div className=\"editor-post-featured-image\">\n <MediaUploadCheck>\n <MediaUpload\n allowedTypes={ ['image'] }\n render={({open}) => (<Button \n className={attributes.mediaId == 0? 'editor-post-featured-image__toggle': 'editor-post-featured-image__preview'}\n onClick={open}\n >\n {attributes.mediaId == 0 && __('Choose an image', 'awp')}\n <\/Button>\n )}\n \/>\n <\/MediaUploadCheck>\n<\/div><\/code><\/pre>\n<\/a><\/p>\nopen<\/code>wewn\u0105trz funkcji for render<\/code>. Renderujemy prosty, w Button<\/code>kt\u00f3rym jego onClick<\/code>w\u0142a\u015bciwo\u015b\u0107 b\u0119dzie uruchamia\u0107 open<\/code>funkcj\u0119. Doda\u0142em r\u00f3wnie\u017c te same nazwy klas, co funkcja obrazu w WordPressie, aby upewni\u0107 si\u0119, \u017ce nie musimy dodawa\u0107 \u017cadnych styl\u00f3w.<\/p>\nButton<\/code>komponentu sprawdzamy, czy zosta\u0142 ustawiony obrazek (attributes.mediaId<\/code>). Je\u015bli nie, powtarzamy tekst \u201eWybierz obraz”. Powinni\u015bmy to teraz dosta\u0107 w naszym bloku.<\/p>\nonSelect<\/code>i na. Naprawmy to teraz. Ustawiamy wybrany identyfikator no\u015bnika i uruchamiamy funkcj\u0119, kt\u00f3r\u0105 p\u00f3\u017aniej zdefiniujemy w naszym komponencie.value``MediaUpload``value``onSelect<\/code><\/p>\n...\n<MediaUploadCheck>\n <MediaUpload\n onSelect={onSelectMedia}\n value={attributes.mediaId}\n allowedTypes={ ['image'] }\n ...<\/code><\/pre>\nonSelectMedia<\/code>funkcj\u0119 w naszym komponencie.<\/p>\nObs\u0142uga wyboru medi\u00f3w<\/h3>\n
onSelectMedia =() => { }<\/code>). Funkcje strza\u0142ek s\u0105 ca\u0142kiem nowe w ESNext i ca\u0142kiem fajne. Minusem jest to, \u017ce u\u017cywanie funkcji strza\u0142ek wymaga dodania obs\u0142ugi tego w konfiguracji Babel. Je\u015bli jeszcze tego nie zrobi\u0142e\u015b, polecam zajrze\u0107 pod nag\u0142\u00f3wek \u201eKonfiguracja Babel” w tym po\u015bcie<\/a>.<\/p>\nonSelectMedia<\/code>funkcj\u0119. Wszystko, co musimy zrobi\u0107, to zaktualizowa\u0107 nasze atrybuty za pomoc\u0105 setAttributes()<\/code>. Jako parametr onSelectMedia<\/code>otrzymujemy obiekt media. Po prostu wydobywamy to, czego potrzebujemy z obiektu medialnego. W naszym przypadku jest to identyfikator medi\u00f3w i adres URL w pe\u0142nym rozmiarze, kt\u00f3re s\u0105 odpowiednio w\u0142a\u015bciwo\u015bciami id<\/code>.url<\/code><\/p>\nconst BlockEdit = (props) => {\n const { attributes, setAttributes } = props;\n\u00a0\n const onSelectMedia = (media) => {\n props.setAttributes({\n mediaId: media.id,\n mediaUrl: media.url\n });\n }\n\u00a0\n return(\n ...<\/code><\/pre>\nRenderowanie obrazu podgl\u0105du<\/h2>\n
Button<\/code>komponentu renderujemy wewn\u0119trzn\u0105 w\u0142a\u015bciwo\u015b\u0107, wy\u015bwietlamy tekst MediaUpload<\/code>\u201e render<\/code>Wybierz obraz”, je\u015bli obraz nie jest jeszcze ustawiony. Ale musimy doda\u0107 troch\u0119 kodu, gdy obraz jest tutaj ustawiany; podgl\u0105d.<\/p>\nResponsiveWrapper<\/code>(pakiet wp.components<\/code>). Aby w ResponsiveWrapper<\/code>pe\u0142ni funkcjonowa\u0107 musimy zapewni\u0107 podpory na wysoko\u015b\u0107 i szeroko\u015b\u0107. Potrzebujemy r\u00f3wnie\u017c adresu URL miniatury. Nie ma sensu u\u017cywa\u0107 pe\u0142nego adresu URL (kt\u00f3ry mo\u017ce by\u0107 gigantyczny) do renderowania podgl\u0105du w Inspektorze. St\u0105d pochodzi prop withSelect<\/code>. Wewn\u0105trz komponentu renderujemy prosty <img><\/code>znacznik HTML.<\/p>\nconst { ResponsiveWrapper } = wp.components;<\/code><\/pre>\n<Button \n className={attributes.mediaId == 0? 'editor-post-featured-image__toggle': 'editor-post-featured-image__preview'}\n onClick={open}\n>\n {attributes.mediaId == 0 && __('Choose an image', 'awp')}\n {props.media != undefined && \n <ResponsiveWrapper\n naturalWidth={ props.media.media_details.width }\n naturalHeight={ props.media.media_details.height }\n >\n <img src={props.media.source_url} \/>\n <\/ResponsiveWrapper>\n }\n<\/Button><\/code><\/pre>\nwithSelect<\/code>dostarczonego nam komponentu, props.media<\/code>. Z obiektu pobieramy szeroko\u015b\u0107, wysoko\u015b\u0107 i adres URL do rozmiaru miniaturki multimedi\u00f3w.<\/p>\nButton<\/code>klikni\u0119cie na obraz podgl\u0105du uruchomi funkcj\u0119 Button<\/code>\u2013 onClick<\/code>czyli otwarcie Biblioteki multimedi\u00f3w. W ten spos\u00f3b mo\u017cesz ju\u017c zmieni\u0107 wybrany obraz.<\/p>\nDodawanie funkcji usuwania<\/h3>\n
Button<\/code>pod obrazem podgl\u0105du (ca\u0142kowicie poza jego MediaUploadCheck<\/code>). Dodaj\u0105c kilka sprytnych rekwizyt\u00f3w Button<\/code>, sprawiamy, \u017ce wygl\u0105da on jak link (isLink<\/code>) z czerwonym kolorem tekstu (isDestructive<\/code>). Przeczytaj dokumentacj\u0119 przycisku<\/a>, aby zobaczy\u0107, co jeszcze jest mo\u017cliwe. Przycisk owijamy w jeszcze jeden MediaUploadCheck<\/code>, aby zapewni\u0107 u\u017cytkownikowi odpowiednie mo\u017cliwo\u015bci.<\/p>\n ...\n <\/MediaUploadCheck>\n {attributes.mediaId != 0 && \n <MediaUploadCheck>\n <Button onClick={removeMedia} isLink isDestructive>{__('Remove image', 'awp')}<\/Button>\n <\/MediaUploadCheck>\n }\n <\/div>\n<\/PanelBody><\/code><\/pre>\nButton<\/code>:. Definiujemy go gdzie\u015b tu\u017c przed funkcj\u0105 powrotu komponentu, tak jak zrobili\u015bmy to z .onClick``removeMedia()``onSelectMedia<\/code><\/p>\nconst removeMedia =() => {\n props.setAttributes({\n mediaId: 0,\n mediaUrl: ''\n });\n}<\/code><\/pre>\n<\/a><\/p>\nDodawanie przycisku wymiany<\/h3>\n
MediaUpload<\/code>komponent. Zapewniamy t\u0119 sam\u0105 funkcj\u0119 dla onSelect<\/code>i allowedFileTypes<\/code>jak value<\/code>poprzednio. Wewn\u0105trz render<\/code>rekwizytu MediaUpload<\/code>po prostu renderujemy inny Button<\/code>, kt\u00f3ry otwiera bibliotek\u0119 medi\u00f3w. Umie\u015b\u0107my ten przycisk przed przyciskiem Usu\u0144 \u2013 poniewa\u017c ma to wi\u0119cej sensu dla u\u017cytkownika ko\u0144cowego:<\/p>\n<\/MediaUploadCheck>\n{attributes.mediaId != 0 && \n <MediaUploadCheck>\n <MediaUpload\n title={__('Replace image', 'awp')}\n value={attributes.mediaId}\n onSelect={onSelectMedia}\n allowedTypes={['image']}\n render={({open}) => (<Button onClick={open} isDefault isLarge>{__('Replace image', 'awp')}<\/Button>\n )}\n \/>\n <\/MediaUploadCheck>\n}\n{attributes.mediaId != 0 && \n <MediaUploadCheck>\n <Button onClick={removeMedia} ...<\/code><\/pre>\n