De nombreuses personnes se plaignent des obstacles \u00e0 surmonter pour se lancer dans la construction de blocs et d’applications Gutenberg. La courbe d’apprentissage est raide, principalement en raison de la difficult\u00e9 d’installer et de configurer l’environnement de d\u00e9veloppement. En outre, une solide connaissance de JavaScript, Node.js, React et Redux sont des ingr\u00e9dients indispensables pour cette recette assez complexe.<\/p>\n
Le manuel officiel de l’\u00e9diteur de blocs de WordPress<\/a> fournit aux d\u00e9veloppeurs une quantit\u00e9 consid\u00e9rable d’informations, mais vous risquez de vous perdre dans cette mer de d\u00e9tails.<\/p>\n Et il convient de mentionner ce que Mat\u00edas Ventura, architecte principal du projet Gutenberg, a rapport\u00e9 dans son entretien avec WP Tavern<\/a> :<\/p>\n Bien que certaines personnes puissent l’apprendre rapidement, c’est toujours un obstacle important pour les gens. Je pense qu’il y a plusieurs niveaux \u00e0 cela ; la documentation pourrait \u00eatre am\u00e9lior\u00e9e d’un ordre de grandeur \u00e0 la fois dans l’organisation et la pr\u00e9sentation. J’esp\u00e8re que nous pourrons faire beaucoup plus dans ce domaine.<\/em><\/p><\/blockquote>\n Dans cette optique, nous avons d\u00e9cid\u00e9 de fournir un tutoriel \u00e9tape par \u00e9tape visant \u00e0 aider nos lecteurs \u00e0 se lancer dans le d\u00e9veloppement de blocs Gutenberg.<\/p>\n Cela vous semble int\u00e9ressant ? Plongeons-y !<\/p>\n Pour ce tutoriel, les seules comp\u00e9tences requises sont une bonne connaissance du d\u00e9veloppement d’extensions WordPress et au moins une compr\u00e9hension basique de HTML<\/a>, CSS, JavaScript et React.<\/p>\n S’agira-t-il d’un projet ambitieux ? Bien s\u00fbr qu’il le sera !<\/p>\n Il n’a pas \u00e9t\u00e9 facile de trouver le bon compromis entre exhaustivit\u00e9 et simplicit\u00e9, ni de d\u00e9cider des sujets \u00e0 inclure et de ceux \u00e0 laisser de c\u00f4t\u00e9.<\/p>\n Esp\u00e9rons que les lecteurs interm\u00e9diaires et avanc\u00e9s nous pardonneront de ne pas approfondir certains concepts tels que React state<\/a>, Redux store<\/a>, les composants d’ordre \u00e9lev\u00e9<\/a>, etc. Ces sujets n\u00e9cessitent un espace et une attention suppl\u00e9mentaires et sont probablement trop avanc\u00e9s pour le d\u00e9veloppement de blocs par des d\u00e9butants (\u00e0 moins que vous ne soyez un d\u00e9veloppeur React).<\/p>\n Pour la m\u00eame raison, nous ne couvrirons pas certains des sujets les plus avanc\u00e9s li\u00e9s au d\u00e9veloppement des blocs Gutenberg, tels que les blocs dynamiques<\/a> et les bo\u00eetes m\u00e9ta<\/a>.<\/p>\n Gr\u00e2ce aux connaissances que vous aurez acquises \u00e0 la fin de cet article, vous pourrez commencer d\u00e8s maintenant \u00e0 vous amuser et \u00e0 \u00eatre productif.<\/p>\n Une fois que vous aurez commenc\u00e9 \u00e0 construire des blocs, vous serez en mesure d’am\u00e9liorer vos comp\u00e9tences et de construire vous-m\u00eame des blocs Gutenberg encore plus avanc\u00e9s.<\/p>\n\n Depuis sa premi\u00e8re sortie en d\u00e9cembre 2018, l’\u00e9diteur de blocs a \u00e9t\u00e9<\/a> grandement am\u00e9lior\u00e9 sur tous les plans : des API plus puissantes<\/a>, une interface utilisateur plus avanc\u00e9e, une utilisibalit\u00e9 am\u00e9lior\u00e9e, une tonne de nouveaux blocs, les premi\u00e8res impl\u00e9mentations de Full Site Editing<\/a>, et bien plus encore.<\/p>\n En bref, m\u00eame si Gutenberg est encore en plein d\u00e9veloppement, il a parcouru un long chemin – et aujourd’hui, l’\u00e9diteur de blocs est un candidat \u00e0 part enti\u00e8re en tant que constructeur de pages et de sites fiable et fonctionnel.<\/p>\n Du point de vue du d\u00e9veloppeur, Gutenberg est une application mono-page<\/a> (Single Page Application ou SPA) bas\u00e9e sur React qui permet aux utilisateurs de WordPress de cr\u00e9er, modifier et supprimer du contenu dans WordPress. Cependant, cela ne doit pas vous faire penser \u00e0 une version am\u00e9lior\u00e9e de l’\u00e9diteur de contenu traditionnel<\/a>.<\/p>\n Nous voulons que cela soit clair :<\/p>\nConditions pr\u00e9alables au d\u00e9veloppement de bloc Gutenberg<\/h2>\n
Qu’est-ce qu’un bloc Gutenberg ?<\/h2>\n