![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153621-61e511f57cf93.png\")
<\/a><\/p>\nLa fonction de s\u00e9lection de m\u00e9dia sera fonctionnellement exactement la m\u00eame que la fonction d’image en vedette de WordPress. Nous allons \u00e0 l’int\u00e9rieur d’Inspector ajouter un panneau compos\u00e9 d’un bouton pour choisir une image.<\/p>\n
Lorsque vous cliquez sur le bouton, la fen\u00eatre "S\u00e9lectionner ou t\u00e9l\u00e9charger un m\u00e9dia" s’affiche, vous permettant de s\u00e9lectionner un fichier dans la biblioth\u00e8que multim\u00e9dia. Nous limitons la biblioth\u00e8que multim\u00e9dia pour afficher uniquement les images. Une fois qu’une image est s\u00e9lectionn\u00e9e, la fen\u00eatre contextuelle se ferme et le panneau pr\u00e9visualise un petite vignette de l’image s\u00e9lectionn\u00e9e. Sous les boutons de pr\u00e9visualisation pour modifier et supprimer l’image appara\u00eetront. Exactement comme avec l’image s\u00e9lectionn\u00e9e.<\/p>\n
Ce didacticiel suppose que vous utiliserez l’image s\u00e9lectionn\u00e9e comme arri\u00e8re-plan du bloc – juste \u00e0 titre d’exemple. C’est pourquoi nous stockons l’URL de l’image. J’inclurai un exemple sur la fa\u00e7on d’utiliser l’image s\u00e9lectionn\u00e9e (\u00e0 la fois dans Nous stockons l’ID et l’URL du m\u00e9dia dans les attributs du bloc. Le code utilise J’emprunte \u00e9galement des noms de classe \u00e0 la fonctionnalit\u00e9 d’image en vedette de WordPress pour m’assurer que tout a l’air bien et qu’il n’est pas n\u00e9cessaire d’\u00e9crire de CSS vous-m\u00eame. Ceci est bien s\u00fbr facultatif.<\/p>\n Ce que vous devez enregistrer dans les attributs de votre bloc d\u00e9pend un peu de vous. Au minimum, nous devons stocker l’ID du m\u00e9dia, \u00e9videmment. Cela peut suffire si vous n’avez pas besoin d’utiliser l’URL du m\u00e9dia n’importe o\u00f9 dans le code du script. Par exemple, si vous utilisez Commen\u00e7ons par d\u00e9finir nos attributs. L’ID de m\u00e9dia doit \u00eatre un num\u00e9ro de type et la valeur par d\u00e9faut est 0. Cela facilite la comparaison. Et l’URL du m\u00e9dia doit \u00eatre une cha\u00eene de type avec une cha\u00eene vide par d\u00e9faut.<\/p>\n Pour rendre notre code plus ordonn\u00e9, nous d\u00e9finissons un composant s\u00e9par\u00e9 pour la fonction du bloc Dans le retour du composant, nous rendons un simple Mais d’abord, d\u00e9structurons le composant n\u00e9cessaire au d\u00e9but du fichier :<\/p>\n Au-dessus Maintenant, nous voulons rendre ce composant dans notre Si vous n’\u00eates pas familier avec Nous nous assurons de n’interroger le m\u00e9dia que si l’attribut d’ID de m\u00e9dia est r\u00e9ellement d\u00e9fini sur autre chose que 0. Voici \u00e0 quoi ressemblera notre fonction d’\u00e9dition\u00a0:<\/p>\n \u00c0 la toute fin, apr\u00e8s fermeture Vient enfin la partie amusante: la partie dans l’inspecteur.<\/p>\n Le composant qui nous int\u00e9resse est Le Il y a quelques autres accessoires disponibles pour D\u00e9structurez d’abord les nouveaux composants\u00a0;<\/p>\n Ajoutons Le code ci-dessus d\u00e9structure \u00c0 l’int\u00e9rieur du Lorsque vous cliquez sur le bouton, la fen\u00eatre contextuelle de la biblioth\u00e8que multim\u00e9dia doit appara\u00eetre. Cependant, la s\u00e9lection d’une image ne fonctionne pas pour le moment, car il nous manque les accessoires D\u00e9finissons la Remarque<\/strong>: je d\u00e9finis mes fonctions comme des fonctions fl\u00e9ch\u00e9es ( Juste avant l’instruction return du composant, je d\u00e9finis une Essayez-le maintenant et vous pourrez d\u00e9sormais s\u00e9lectionner une image dans la m\u00e9diath\u00e8que. Le m\u00e9dia s\u00e9lectionn\u00e9 est enregistr\u00e9 dans les attributs du bloc. Cependant, il n’y a pas encore de pr\u00e9visualisation dans l’Inspecteur, et parce que vous avez s\u00e9lectionn\u00e9 une image, le bouton de s\u00e9lection d’une image dispara\u00eet. Le panneau est maintenant vide. L’\u00e9tape suivante consiste \u00e0 afficher l’aper\u00e7u chaque fois qu’une image a \u00e9t\u00e9 s\u00e9lectionn\u00e9e, ainsi qu’\u00e0 fournir des options pour la supprimer ou la modifier.<\/p>\n \u00c0 l’int\u00e9rieur du Pour nous aider \u00e0 rendre un bel aper\u00e7u, nous utilisons le composant On d\u00e9structure d’abord le composant n\u00e9cessaire :<\/p>\n Comme vous pouvez le voir, nous acc\u00e9dons \u00e0 l’accessoire Vous devriez maintenant avoir un bel aper\u00e7u de l’image s\u00e9lectionn\u00e9e !<\/p>\n Parce que nous rendons l’image d’aper\u00e7u \u00e0 l’int\u00e9rieur, le fait Il n’existe actuellement aucun moyen de supprimer ou de r\u00e9initialiser l’image s\u00e9lectionn\u00e9e. R\u00e9parons \u00e7a\u00a0!<\/p>\n Nous devrions \u00e0 tout le moins offrir la possibilit\u00e9 \u00e0 l’utilisateur de supprimer l’image s\u00e9lectionn\u00e9e. \u00c0 partir de maintenant, une fois que vous avez s\u00e9lectionn\u00e9 une image, vous pouvez uniquement la modifier, mais pas la supprimer.<\/p>\n Nous le ferons de la m\u00eame mani\u00e8re que WordPress le fait pour l’image s\u00e9lectionn\u00e9e\u00a0: un nouveau Pour cet \u00e9v\u00e9nement, nous Cette fonction ne fait que r\u00e9initialiser nos deux valeurs d’attribut.<\/p>\n Nous aurons maintenant un joli lien clair pour supprimer l’image\u00a0:<\/p>\n Lorsque vous cliquez sur le nouveau bouton, l’image s\u00e9lectionn\u00e9e et le bouton lui-m\u00eame disparaissent, et le bouton de s\u00e9lection d’une image r\u00e9appara\u00eet.<\/p>\n Cette \u00e9tape est enti\u00e8rement facultative. Comme mentionn\u00e9 pr\u00e9c\u00e9demment, cliquer sur l’image d’aper\u00e7u de l’image ouvrira la biblioth\u00e8que multim\u00e9dia et vous permettra de modifier l’image. Cependant, cela pourrait ne pas \u00eatre aussi intuitif pour tout le monde \u00e0 comprendre. WordPress ajoute un bouton s\u00e9par\u00e9 pour changer l’image, juste pour le rendre tr\u00e8s clair. Nous pouvons faire la m\u00eame chose.<\/p>\n Pour rendre un bouton de changement d’image, nous r\u00e9p\u00e9tons essentiellement le code que nous avons pour s\u00e9lectionner l’image: un autre Alors maintenant, vous devriez obtenir ceci :<\/p>\nedit<\/code>et dans la save<\/code>fonction). Lors du choix d’une image, l’image appara\u00eetra en arri\u00e8re-plan de notre bloc, \u00e0 la fois dans l’\u00e9diteur et dans le frontend.<\/p>\nwithSelect<\/code>, un composant d’ordre sup\u00e9rieur fourni dans wp.data<\/code>le package, pour demander plus d’informations sur le m\u00e9dia s\u00e9lectionn\u00e9, par ID.<\/p>\nEnregistrement du m\u00e9dia s\u00e9lectionn\u00e9 dans les attributs<\/h2>\n
ServerSideRender<\/code>o\u00f9 PHP est responsable du rendu de la sortie du bloc. Dans ce cas, vous pouvez facilement obtenir l’URL de l’image \u00e0 partir de l’ID de m\u00e9dia en utilisant par exemple [wp_get_attachment_image_src](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_attachment_image_src\/)()<\/code>. Cependant, dans l’exemple ci-dessous, je montre un exemple simple d’affichage de l’image en arri\u00e8re-plan de notre bloc, donc je stocke \u00e9galement l’URL du m\u00e9dia en tant qu’attribut. Nous utiliserons l’attribut URL \u00e0 la fois dans edit<\/code>(pour ajouter l’arri\u00e8re-plan dans l’\u00e9diteur) et dans save<\/code>(pour ajouter l’arri\u00e8re-plan dans l’interface).<\/p>\nattributes: {\n mediaId: {\n type: 'number',\n default: 0\n },\n mediaUrl: {\n type: 'string',\n default: ''\n }\n},<\/code><\/pre>\nCr\u00e9ation du composant<\/h2>\n
edit<\/code>. Nous passerons plus tard ce composant \u00e0 withSelect<\/code>as pour l’envelopper autour de notre composant.<\/p>\n<div><\/code>pour le contenu du bloc. Je suppose que vous aurez ou aurez plus de contenu de bloc r\u00e9el pour remplacer l’exemple de contenu factice. Nous rendons \u00e9galement InspectorControls<\/code>(package wp.blockEditor<\/code>) afin d’ajouter une section \u00e0 l’inspecteur. Pour l’instant j’ajoute un vide PanelBody<\/code>\u00e0 l’int\u00e9rieur du InspectorControls<\/code>. J’ajoute un <div><\/code>avec la m\u00eame classe que la section d’images en vedette de WordPress. Cela garantit que notre style est beau. Plus tard, nous le remplirons PanelBody<\/code>avec le code de la fonctionnalit\u00e9 de s\u00e9lection de m\u00e9dia.<\/p>\nconst { InspectorControls } = wp.blockEditor;\nconst { PanelBody } = wp.components;\nconst { Fragment } = wp.element;<\/code><\/pre>\nregisterBlockType<\/code>, je d\u00e9finis un composant simple appel\u00e9 BlockEdit<\/code>. Si vous pr\u00e9f\u00e9rez d\u00e9placer ceci dans un fichier s\u00e9par\u00e9, vous pouvez le faire. C’est courant et recommand\u00e9, mais pour ce tutoriel, je garde les choses simples et je le garde dans le m\u00eame fichier.<\/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>fonction. Mais nous voulons l’envelopper dans un fichier withSelect<\/code>.<\/p>\nUtilisation
withSelect<\/code>dans la edit<\/code>fonction<\/h2>\nwithSelect<\/code>, il s’agit d’un composant utile d’ordre sup\u00e9rieur qui nous permet d’effectuer des requ\u00eates. Vous pouvez par exemple interroger les publications avec ceci. Nous utiliserons cependant la fonction select('core').getMedia()<\/code>pour interroger l’ID du m\u00e9dia. En r\u00e9ponse, nous recevrons un objet avec toutes les informations du m\u00e9dia. L’objet multim\u00e9dia que nous obtenons en r\u00e9ponse sera ensuite fourni comme accessoire dans notre BlockEdit<\/code>composant, pr\u00eat \u00e0 l’emploi. Astucieux.<\/p>\nedit: withSelect((select, props) => {\n return { media: props.attributes.mediaId? select('core').getMedia(props.attributes.mediaId): undefined };\n})(BlockEdit),<\/code><\/pre>\nwithSelect<\/code>de la ligne, #3<\/code>c’est l\u00e0 que nous demandons withSelect<\/code>de retourner notre BlockEdit<\/code>composant. Avec cela, notre BlockEdit<\/code>composant a maintenant acc\u00e8s \u00e0 props.media<\/code>.<\/p>\nRendu d’une s\u00e9lection de m\u00e9dia<\/h2>\n
MediaUpload<\/code>(package wp.blockEditor<\/code>). Si vous \u00eates int\u00e9ress\u00e9, le repo WordPress Github pour Gutenberg contient de la documentation sur ce composant<\/a>. Nous allons \u00e9galement envelopper ce composant dans un composant appel\u00e9 MediaUploadCheck<\/code>(package wp.blockEditor<\/code>). Ce composant s’assure que l’utilisateur actuel a les capacit\u00e9s d’utiliser la biblioth\u00e8que multim\u00e9dia, il est donc recommand\u00e9 de l’utiliser.<\/p>\nMediaUpload<\/code>composant a un accessoire requis\u00a0: render<\/code>. La fa\u00e7on dont ce composant fonctionne est que nous d\u00e9finissons une fonction pour le render<\/code>prop o\u00f9 nous rendons la sortie pour la "zone de t\u00e9l\u00e9chargement de m\u00e9dias". Dans notre cas, nous rendrons un Button<\/code>(package wp.components<\/code>). Dans le prop de rendu de MediaUpload, nous avons acc\u00e8s \u00e0 la open<\/code>fonction que nous pouvons appeler pour que WordPress ouvre la fen\u00eatre contextuelle de la biblioth\u00e8que multim\u00e9dia\u00a0:<\/p>\n<\/a><\/p>\nMediaUpload<\/code>. Nous couvrirons les \u00e9l\u00e9ments importants pour le rendre fonctionnel dans ce didacticiel, mais il y en a quelques autres avec lesquels vous pouvez jouer. Vous pourriez au moins \u00eatre int\u00e9ress\u00e9 par le prop allowedTypes<\/code>o\u00f9 vous pouvez limiter les types de fichiers qu’il est possible de s\u00e9lectionner dans la biblioth\u00e8que. Dans notre cas, nous l’avons configur\u00e9 pour n’autoriser que les images.<\/p>\nAjout de la
MediaUpload<\/code><\/h3>\nconst { Button } = wp.components;\nconst { MediaUpload, MediaUploadCheck } = wp.blockEditor;<\/code><\/pre>\nMediaUploadCheck<\/code>et MediaUpload<\/code>\u00e0 l’int\u00e9rieur de notre div<\/code>dans notre 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>\u00e0 l’int\u00e9rieur de la fonction pour render<\/code>. Nous rendons un simple Button<\/code>o\u00f9 sa onClick<\/code>propri\u00e9t\u00e9 ex\u00e9cutera la open<\/code>fonction. J’ai \u00e9galement ajout\u00e9 les m\u00eames noms de classe que la fonctionnalit\u00e9 d’image en vedette de WordPress pour nous assurer que nous n’avons pas besoin d’ajouter de style.<\/p>\nButton<\/code>composant, nous v\u00e9rifions si une image a \u00e9t\u00e9 d\u00e9finie ou non (attributes.mediaId<\/code>). Si ce n’est pas le cas, nous faisons \u00e9cho au texte \u00ab\u00a0Choisissez une image\u00a0\u00bb. Nous devrions maintenant avoir ceci dans notre bloc.<\/p>\nonSelect<\/code>et sur. R\u00e9glons cela maintenant. Nous d\u00e9finissons l’ID de m\u00e9dia s\u00e9lectionn\u00e9 et nous d\u00e9finissons pour ex\u00e9cuter une fonction que nous d\u00e9finirons plus tard dans notre composant.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>fonction dans notre composant.<\/p>\nGestion de la s\u00e9lection des m\u00e9dias<\/h3>\n
onSelectMedia =() => { }<\/code>). Les fonctions fl\u00e9ch\u00e9es sont assez nouvelles dans ESNext et plut\u00f4t astucieuses. L’inconv\u00e9nient est que l’utilisation des fonctions fl\u00e9ch\u00e9es n\u00e9cessite que vous ajoutiez la prise en charge de cela dans votre configuration Babel. Si vous ne l’avez pas encore fait, je vous recommande de regarder sous le titre "Configurer Babel" dans cet article<\/a>.<\/p>\nonSelectMedia<\/code>fonction. Tout ce dont nous avons besoin est de mettre \u00e0 jour nos attributs en utilisant setAttributes()<\/code>. En tant que param\u00e8tre, onSelectMedia<\/code>nous obtenons un objet multim\u00e9dia. Nous extrayons simplement ce dont nous avons besoin de l’objet m\u00e9dia. Dans notre cas, il s’agit de l’ID de m\u00e9dia et de l’URL compl\u00e8te, qui sont respectivement les propri\u00e9t\u00e9s id<\/code>et 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>\nRendu d’une image d’aper\u00e7u<\/h2>\n
Button<\/code>composant, nous rendons \u00e0 l’int\u00e9rieur MediaUpload<\/code>de la render<\/code>prop de nous \u00e9cho un texte "Choisissez une image" si une image n’est pas encore d\u00e9finie. Mais nous devons ajouter du code lorsqu’une image est d\u00e9finie \u00e0 l’int\u00e9rieur ici\u00a0; un aper\u00e7u.<\/p>\nResponsiveWrapper<\/code>(package wp.components<\/code>). Afin de ResponsiveWrapper<\/code>fonctionner pleinement, nous devons fournir des accessoires pour la hauteur et la largeur. Nous avons \u00e9galement besoin de l’URL de la vignette. Il ne sert \u00e0 rien d’utiliser l’URL compl\u00e8te (qui peut \u00eatre gigantesque) pour afficher un aper\u00e7u dans l’inspecteur. C’est l\u00e0 qu’intervient l’accessoire withSelect<\/code>. \u00c0 l’int\u00e9rieur du composant, nous rendons une simple <img><\/code>balise 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>fourni par le composant, props.media<\/code>. Nous r\u00e9cup\u00e9rons la largeur, la hauteur et l’URL de la taille de la vignette du m\u00e9dia \u00e0 partir de l’objet.<\/p>\nButton<\/code>de cliquer sur l’image d’aper\u00e7u d\u00e9clenchera la Button<\/code>fonction de onClick<\/code>– qui consiste \u00e0 ouvrir la m\u00e9diath\u00e8que. De cette fa\u00e7on, vous pouvez d\u00e9j\u00e0 modifier l’image s\u00e9lectionn\u00e9e.<\/p>\nAjout d’une fonction de suppression<\/h3>\n
Button<\/code>sous l’image d’aper\u00e7u (enti\u00e8rement en dehors de son MediaUploadCheck<\/code>). En fournissant quelques accessoires astucieux au Button<\/code>nous le faisons ressembler \u00e0 un lien (isLink<\/code>) avec une couleur de texte rouge (isDestructive<\/code>). Lisez la documentation de Button<\/a> pour voir ce qui est possible d’autre. Nous enveloppons le bouton dans un autre MediaUploadCheck<\/code>, juste pour nous assurer que l’utilisateur dispose des bonnes capacit\u00e9s.<\/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>ex\u00e9cutons onClick<\/code>une nouvelle fonction dans notre composant: removeMedia()<\/code>. Nous le d\u00e9finissons quelque part juste avant la fonction de retour du composant, comme nous l’avons fait avec onSelectMedia<\/code>.<\/p>\nconst removeMedia =() => {\n props.setAttributes({\n mediaId: 0,\n mediaUrl: ''\n });\n}<\/code><\/pre>\n<\/a><\/p>\nAjout d’un bouton de remplacement<\/h3>\n
MediaUpload<\/code>composant. Nous fournissons la m\u00eame fonction pour onSelect<\/code>, allowedFileTypes<\/code>et value<\/code>comme pr\u00e9c\u00e9demment. \u00c0 l’int\u00e9rieur de l’ render<\/code>accessoire, MediaUpload<\/code>nous en rendons simplement un autre Button<\/code>qui ouvre la m\u00e9diath\u00e8que. Pla\u00e7ons ce bouton avant le bouton Supprimer – car cela a plus de sens pour l’utilisateur final\u00a0:<\/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