{"id":1938,"date":"2026-01-13T15:32:41","date_gmt":"2026-01-13T14:32:41","guid":{"rendered":"https:\/\/nice.wordcamp.org\/2026\/?post_type=wcb_session&p=1938"},"modified":"2026-03-26T16:21:42","modified_gmt":"2026-03-26T15:21:42","slug":"au-dela-de-la-query-loop-creer-des-blocs-connectes-a-des-apis-tierces","status":"publish","type":"wcb_session","link":"https:\/\/nice.wordcamp.org\/2026\/session\/au-dela-de-la-query-loop-creer-des-blocs-connectes-a-des-apis-tierces\/","title":{"rendered":"Au-del\u00e0 de la Query Loop : cr\u00e9er des blocs connect\u00e9s \u00e0 des APIs tierces"},"content":{"rendered":"
Presented by<\/span>Valentin GRENIER<\/a><\/span><\/div>\n\n\n

Le bloc \u00ab\u00a0Boucle de requ\u00eate\u00a0\u00bb de WordPress permet de r\u00e9cup\u00e9rer facilement les contenus internes (articles, pages, CPT), mais qu’en est-il des donn\u00e9es externes ?<\/p>\n\n\n\n

Comment afficher vos projets GitHub, vos articles Dev.to, ou toute autre source de donn\u00e9es tierce directement sur votre site WordPress ?<\/p>\n\n\n\n

Dans cet atelier pratique, nous allons cr\u00e9er un bloc Gutenberg connect\u00e9 \u00e0 l’API publique de GitHub pour afficher la liste de vos repositories publics sur votre portfolio ou votre site personnel, tout \u00e7a en partant de z\u00e9ro.<\/p>\n\n\n\n

Nous verrons ensemble :<\/p>\n\n\n\n

    \n
  • La structure d’un bloc Gutenberg dynamique avec connexion API<\/li>\n\n\n\n
  • L’utilisation de fetch pour r\u00e9cup\u00e9rer des donn\u00e9es externes<\/li>\n\n\n\n
  • La gestion des \u00e9tats : loading, succ\u00e8s, erreurs (user not found, rate limit)<\/li>\n\n\n\n
  • Les composants d’interface : controls pour param\u00e9trer le username, nombre de repos, tri<\/li>\n\n\n\n
  • Les bonnes pratiques : UX (loading states, fallbacks), performance (cache), s\u00e9curit\u00e9 Vous repartirez de cet atelier avec un bloc fonctionnel et r\u00e9utilisable, et les comp\u00e9tences pour connecter Gutenberg \u00e0 n’importe quelle API REST publique.<\/li>\n<\/ul>\n\n\n\n

    Si vous le souhaitez, vous pouvez suivre cet atelier sur votre ordinateur en m\u00eame temps que moi. Quelques pr\u00e9-requis sont \u00e0 prendre en compte :<\/strong><\/p>\n\n\n\n

      \n
    • Comp\u00e9tences :\n
        \n
      • Bases PHP et JavaScript\/React<\/li>\n\n\n\n
      • Utilisation de npm et du terminal<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Technique :\n
          \n
        • Une instance de WordPress install\u00e9e en local sur son ordinateur<\/li>\n\n\n\n
        • Node.js 20.x ou sup\u00e9rieur (LTS) + npm<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

          Le bloc \u00ab\u00a0Boucle de requ\u00eate\u00a0\u00bb de WordPress permet de r\u00e9cup\u00e9rer facilement les contenus internes (articles, pages, CPT), mais qu’en est-il des donn\u00e9es externes ? Comment afficher vos projets GitHub, vos articles Dev.to, ou toute autre source de donn\u00e9es tierce directement sur votre site WordPress ? Dans cet atelier pratique, nous allons cr\u00e9er un bloc Gutenberg […]<\/p>\n","protected":false},"author":20913861,"featured_media":0,"template":"","meta":{"jetpack_post_was_ever_published":false,"_wcpt_session_time":1772791200,"_wcpt_session_duration":5100,"_wcpt_session_type":"session","_wcpt_session_slides":"https:\/\/nice.wordcamp.org\/2026\/files\/2026\/03\/valentin-grenier-2026.pdf","_wcpt_session_video":"","_wcpt_speaker_id":[1937],"footnotes":""},"session_track":[39],"session_category":[53,52,46],"class_list":["post-1938","wcb_session","type-wcb_session","status-publish","hentry","wcb_track-massena","wcb_session_category-atelier","wcb_session_category-gutenberg","wcb_session_category-tech"],"jetpack_sharing_enabled":true,"session_date_time":{"date":"6 mars 2026","time":"11h00"},"session_speakers":[{"id":"1937","slug":"valentin-grenier","name":"Valentin GRENIER","link":"https:\/\/nice.wordcamp.org\/2026\/speaker\/valentin-grenier\/"}],"session_cats_rendered":"Atelier, Gutenberg, Tech","_links":{"self":[{"href":"https:\/\/nice.wordcamp.org\/2026\/wp-json\/wp\/v2\/sessions\/1938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nice.wordcamp.org\/2026\/wp-json\/wp\/v2\/sessions"}],"about":[{"href":"https:\/\/nice.wordcamp.org\/2026\/wp-json\/wp\/v2\/types\/wcb_session"}],"version-history":[{"count":4,"href":"https:\/\/nice.wordcamp.org\/2026\/wp-json\/wp\/v2\/sessions\/1938\/revisions"}],"predecessor-version":[{"id":3058,"href":"https:\/\/nice.wordcamp.org\/2026\/wp-json\/wp\/v2\/sessions\/1938\/revisions\/3058"}],"speakers":[{"embeddable":true,"href":"https:\/\/nice.wordcamp.org\/2026\/wp-json\/wp\/v2\/speakers\/1937"}],"author":[{"embeddable":true,"href":"https:\/\/nice.wordcamp.org\/2026\/wp-json\/wporg\/v1\/users\/valentingrenier"}],"wp:attachment":[{"href":"https:\/\/nice.wordcamp.org\/2026\/wp-json\/wp\/v2\/media?parent=1938"}],"wp:term":[{"taxonomy":"wcb_track","embeddable":true,"href":"https:\/\/nice.wordcamp.org\/2026\/wp-json\/wp\/v2\/session_track?post=1938"},{"taxonomy":"wcb_session_category","embeddable":true,"href":"https:\/\/nice.wordcamp.org\/2026\/wp-json\/wp\/v2\/session_category?post=1938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}