{"id":322,"date":"2021-04-07T09:45:19","date_gmt":"2021-04-07T09:45:19","guid":{"rendered":"https:\/\/inserm.xyz\/kb\/?p=322"},"modified":"2022-09-13T11:42:33","modified_gmt":"2022-09-13T11:42:33","slug":"blocs-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/?p=322","title":{"rendered":"Blocs Gutenberg"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">L&rsquo;\u00e9diteur de WordPress s&rsquo;appuie sur le concept de blocs (souvent dits blocs Gutenberg). Certains blocs ont \u00e9t\u00e9 cr\u00e9es pour l&rsquo;Inserm et d&rsquo;autres ajout\u00e9s par des plugins. L&rsquo;apparence des blocs est de plus en partie d\u00e9pendante du th\u00e8me Inserm.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"table-des-matieres\">Table des mati\u00e8res<\/h2>\n\n\n\n<nav aria-label=\"Table des mati\u00e8res\" class=\"wp-block-table-of-contents\"><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/admin\/blocs-gutenberg\/#table-des-matieres\">Table des mati\u00e8res<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/admin\/blocs-gutenberg\/#\u00e0-propos-des-blocs\">\u00c0 propos des blocs<\/a><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/admin\/blocs-gutenberg\/#documentation-wp\">Documentation WP<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/admin\/blocs-gutenberg\/#usage-avanc\u00e9\">Usage avanc\u00e9<\/a><\/li><\/ol><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/admin\/blocs-gutenberg\/#les-blocs-sur-insermfr\">Les blocs sur inserm.fr<\/a><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/admin\/blocs-gutenberg\/#blocs-ajout\u00e9s-par-un-plugin\">Blocs ajout\u00e9s par un plugin<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/admin\/blocs-gutenberg\/#blocs-cr\u00e9es-pour-linserm\">Blocs cr\u00e9es pour l&rsquo;Inserm<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/admin\/blocs-gutenberg\/#masquer-un-bloc-dans-l\u00e9diteur\">Masquer un bloc dans l&rsquo;\u00e9diteur<\/a><\/li><\/ol><\/li><\/ol><\/nav>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u00e0-propos-des-blocs\">\u00c0 propos des blocs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dans WordPress, on ajoute du contenu en ins\u00e9rant des \u00ab\u00a0blocs\u00a0\u00bb dans son contenu. Les blocs peuvent \u00eatre n&rsquo;importe quoi : un paragraphe de texte, une image, un tableau, un titre, mais aussi un widget ou une colonne. Tout contenu cr\u00e9\u00e9 avec l&rsquo;\u00e9diteur est un assemblage de blocs. <a href=\"https:\/\/wordpress.org\/gutenberg\/\"><strong>Voir le site de d\u00e9mo<\/strong><\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Chaque bloc correspond \u00e0 un type particulier et dispose de param\u00e8tres sp\u00e9cifiques. Les param\u00e8tres d&rsquo;un bloc d\u00e9pendent  :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>de son type<\/strong>. Exemple : les param\u00e8tres <code>gras<\/code> et <code>italique<\/code> sont disponibles des blocs de texte, mais pas sur les blocs <code>vid\u00e9o<\/code> ou <code>image<\/code>.<\/li>\n\n\n\n<li><strong>du th\u00e8me<\/strong>. Exemple : le r\u00e9glage <code>couleur du texte<\/code> est disponible sur le bloc <code>paragraphe<\/code> uniquement si cela a \u00e9t\u00e9 pr\u00e9vu par le th\u00e8me.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Il est important de comprendre que les blocs peuvent :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>ajouter du contenu, de la mise en forme ou des fonctionnalit\u00e9s<\/li>\n\n\n\n<li>s&rsquo;imbriquer les uns dans les autres (syst\u00e8me parent \/ enfant)<\/li>\n\n\n\n<li>\u00eatre natifs \u00e0 WordPress ou ajout\u00e9s par un tiers<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Exemple : On peut cr\u00e9er des colonnes via le bloc <code>colonnes<\/code>, et ins\u00e9rer dans chaque colonne des blocs <code>image<\/code>. Si le bloc <code>colonnes<\/code> natif ne suffit pas, on peut trouver un bloc tiers faisant lui aussi des colonnes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On peut ajouter des blocs \u00e0 WordPress via l&rsquo;<a href=\"https:\/\/wordpress.org\/plugins\/\">annuaire des plugins<\/a>. Il y a 2 options : soit installer un plugin qui ajoute un ensemble de blocs ; soit installer un plugin qui ajoute un seul bloc (voir l&rsquo;<a href=\"https:\/\/wordpress.org\/plugins\/browse\/blocks\/\">annuaire des plugins \u00e0 un seul bloc<\/a>).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"documentation-wp\">Documentation WP<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/support\/article\/wordpress-editor\/\">l&rsquo;\u00e9diteur de contenu<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/support\/article\/blocks\/\">les blocs par d\u00e9faut<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/learn.wordpress.org\/workshops\/?series=&amp;topic=7&amp;language=en_US&amp;captions=\">cours sur l&rsquo;\u00e9diteur de bloc<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/\">documentation d\u00e9veloppeur<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"usage-avanc\u00e9\">Usage avanc\u00e9<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Il existe des assemblages complexes de blocs appel\u00e9s \u00ab\u00a0<a href=\"https:\/\/wordpress.org\/support\/article\/block-pattern\/\">compositions<\/a>\u00a0\u00bb (<em>block pattern<\/em>). Ces assemblages pr\u00eats \u00e0 l&#8217;emploi s&rsquo;appuient sur les blocs d\u00e9j\u00e0 install\u00e9s et permettent d&rsquo;ajouter rapidement des compositions complexes. Ils peuvent \u00eatre install\u00e9s par des plugins ou des th\u00e8mes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemple : un \u00ab\u00a0Encadr\u00e9 \u00e0 fond bleu\u00a0\u00bb peut \u00eatre une composition. Cette composition cr\u00e9e un bloc groupe, lui donne un fond bleu par d\u00e9faut, et ajoute quelques blocs paragraphes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress propose aussi des \u00ab\u00a0blocs r\u00e9utilisables\u00a0\u00bb. Il s&rsquo;agit de blocs ou de compositions dont le <strong>contenu<\/strong> est synchronis\u00e9 entre plusieurs pages. Cela permet d&rsquo;ajouter le m\u00eame texte \u00e0 plusieurs endroits du site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemple : un site veut mettre une incitation \u00e0 faire un don en bas de chacun de ses articles. Il \u00e9crit son incitation une fois et la met dans un bloc r\u00e9utilisable. En ajoutant ce bloc \u00e0 la fin de ses articles, le texte sera d&#8217;embl\u00e9e \u00e9crit. Si le texte est modifi\u00e9 \u00e0 un endroit, le changement se propagera sur toutes les pages o\u00f9 le bloc est pr\u00e9sent. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"les-blocs-sur-insermfr\">Les blocs sur inserm.fr<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nous avons fait une s\u00e9rie de choix structurants sur inserm.fr : <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Toujours privil\u00e9gier les blocs natifs<\/li>\n\n\n\n<li>Ne jamais installer de pack de blocs<\/li>\n\n\n\n<li>Minimiser l&rsquo;usage des blocs non natifs<\/li>\n\n\n\n<li>Si in\u00e9vitable, installer un plugin mono-bloc<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Privil\u00e9gier les blocs natifs<\/strong> : ces blocs sont natifs et sont donc plus fiables \u00e0 long terme (qualit\u00e9 ++, \u00e9volution ++, risque d&rsquo;abandon du bloc &#8211;). Si on doit faire une migration des contenus, c&rsquo;est plus s\u00fbr.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ne jamais installer de pack de blocs<\/strong> : ces packs contiennent des dizaines de blocs, alors qu&rsquo;on n&rsquo;en veut souvent qu&rsquo;un. Ils alourdissent le site, demandent des mise \u00e0 jour, et font souvent doublon avec le natif.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Minimiser l&rsquo;usage des blocs non-natifs<\/strong> : chaque bloc non-natif est une d\u00e9pendance et un risque lors des mises \u00e0 jour \/ \u00e9volution. Il faut les utiliser le moins possible, m\u00eame s&rsquo;ils sont disponibles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>S&rsquo;il est in\u00e9vitable d&rsquo;ajouter un bloc<\/strong> : pr\u00e9f\u00e9rer un plugin mono-bloc sobre, qui minimise les fonctionnalit\u00e9s. Cela simplifiera la migration s&rsquo;il devient plus tard possible de remplacer ce bloc par un bloc natif.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"blocs-ajout\u00e9s-par-un-plugin\">Blocs ajout\u00e9s par un plugin<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Bloc<\/th><th>Plugin associ\u00e9<\/th><th>Usage et perspectives<\/th><\/tr><\/thead><tbody><tr><td><s>Table des mati\u00e8res<\/s><\/td><td><a href=\"https:\/\/wordpress.org\/plugins\/gutentoc-advance-table-of-content\/\"><s>GutenTOC<\/s><\/a><\/td><td><s>Pour faire TDM. Remplacement par bloc natif quand dispo.<\/s><\/td><\/tr><tr><td>Accord\u00e9on<\/td><td><a href=\"https:\/\/wordpress.org\/plugins\/accordion-blocks\/\">Accordion Blocks<\/a><\/td><td>Faire des accord\u00e9ons. Utile.<\/td><\/tr><tr><td>FAQ<\/td><td><a href=\"https:\/\/www.seopress.org\/\">SEOPress<\/a> ?<\/td><td>Ne pas utiliser<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"blocs-cr\u00e9es-pour-linserm\">Blocs cr\u00e9es pour l&rsquo;Inserm<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">L&rsquo;Inserm a demand\u00e9 la cr\u00e9ation de certains blocs pour ses besoins particuliers. La <a href=\"https:\/\/inserm.xyz\/kb\/theme\/caracteristiques-du-theme-inserm\/\" data-type=\"post\" data-id=\"94\">documentation Be API et les specs<\/a> fourniront plus d&rsquo;info.<\/p>\n\n\n\n<p class=\"has-vivid-red-color has-text-color wp-block-paragraph\">\u00c0 savoir : Les blocs cr\u00e9\u00e9s pour l&rsquo;Inserm n&rsquo;utilisent pas la m\u00eame technologie que les blocs natifs. Cela explique leurs diff\u00e9rences d&rsquo;interfaces.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Bloc<\/th><th>Usage<\/th><\/tr><\/thead><tbody><tr><td>Push Article<\/td><td>Remonte un contenu, son image \u00e0 la une, et ses m\u00e9tas. Sert principalement sur la page d&rsquo;accueil.<\/td><\/tr><tr><td>Press Feed<\/td><td>Remonte le dernier communiqu\u00e9 de la Salle de Presse, avec son images et ses m\u00e9tas.<\/td><\/tr><tr><td>File external<\/td><td>T\u00e9l\u00e9charger un fichier h\u00e9berg\u00e9s sur un autre site. Imite le rendu du bloc natif <code>Fichier<\/code>. <\/td><\/tr><tr><td>Facet search<\/td><td>Ajoute un moteur de recherche FacetWP. Utilis\u00e9 sur la home (recherche dossiers) et dans des widgets.<\/td><\/tr><tr><td>Same subject<\/td><td>Bloc abandonn\u00e9. \u00c0 supprimer.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Techniquement, un block natif est fait avec du ReactJS. Un bloc Inserm est fait avec des champs personnalis\u00e9s (ACF). On ne peut donc pas s&rsquo;appuyer sur la documentation officielle pour comprendre le fonctionnement technique d&rsquo;un bloc Inserm.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"masquer-un-bloc-dans-l\u00e9diteur\">Masquer un bloc dans l&rsquo;\u00e9diteur<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Un utilisateur peut masquer un bloc depuis l&rsquo;\u00e9diteur en faisant <code>Options > Pr\u00e9f\u00e9rences > Bloc<\/code> (gestionnaire de blocs). <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Une fois un bloc masqu\u00e9, il n&rsquo;est plus propos\u00e9 \u00e0 l&rsquo;utilisateur. L&rsquo;utilisateur reste n\u00e9anmoins capable d&rsquo;\u00e9diter ou modifier ce bloc s&rsquo;il entre dans un contenu o\u00f9 le bloc est pr\u00e9sent.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les comptes des charg\u00e9s de communication sont configur\u00e9s pour masquer la plupart des blocs (widget, th\u00e8me, design, etc.) et ne laisser que les blocs fondamentaux. (Ao\u00fbt 2022)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>L&rsquo;\u00e9diteur de WordPress s&rsquo;appuie sur le concept de blocs (souvent dits blocs Gutenberg). Certains blocs ont \u00e9t\u00e9 cr\u00e9es pour l&rsquo;Inserm et d&rsquo;autres ajout\u00e9s par des plugins. L&rsquo;apparence des blocs est de plus en partie d\u00e9pendante du th\u00e8me Inserm. Table des mati\u00e8res \u00c0 propos des blocs Dans WordPress, on ajoute du contenu en ins\u00e9rant des \u00ab\u00a0blocs\u00a0\u00bb [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_analysis_target_kw":"","_crdt_document":"","footnotes":""},"categories":[35],"tags":[42],"class_list":["post-322","post","type-post","status-publish","format-standard","hentry","category-contenu","tag-custom"],"_links":{"self":[{"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/posts\/322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=322"}],"version-history":[{"count":16,"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/posts\/322\/revisions"}],"predecessor-version":[{"id":624,"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=\/wp\/v2\/posts\/322\/revisions\/624"}],"wp:attachment":[{"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress-kb.test.inserm.cloud-ed.fr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}