Tout ce dont vous avez besoin pour démarrer avec WordPress Gutenberg

En 2018, WordPress vise à moderniser et simplifier l'expérience de création de contenu avec Gutenberg. Son nom vient de Johannes Gutenberg, le fondateur de l'imprimerie. Ceci est considéré comme l'un des plus grands changements pour l'expérience utilisateur WordPress et le flux de travail de développement de thème.

Qu'est-ce que Gutenberg ?

La plupart d'entre nous pensent que Gutenberg n'est qu'un nouvel éditeur, mais ce n'est pas que ça. Bien que l'éditeur se concentre actuellement, le projet aura finalement un impact sur l'ensemble de l'expérience de publication, y compris la personnalisation.

Jusqu'à présent, éditer une page signifiait modifier son titre, son corps et ses champs personnalisés. Avec Gutenberg, cette logique change complètement et on introduit la notion de blocs . Les blocs sont des composants d'interface utilisateur autonomes, isolés et dynamiques qui sont ajoutés dynamiquement via wp-admin. Je ne m'étendrai pas là-dessus, puisque la vidéo suivante explique tout en détail.

Présentation de Matt Mullenweg Gutenberg sur State of the Word 2017

Gutenberg est déjà disponible en tant que plugin, et il sera intégré à WordPress 5.0 dont le lancement est prévu en avril 2018. L'équipe derrière se concentre actuellement sur l'expérience de post-édition. Mais à partir de là, il élargira leur approche pour inclure la création de modèles, la création de sites, etc. Afin de faciliter la transition vers Gutenberg, il existe un plugin appelé Classic Editor qui permet aux équipes d'utiliser l'éditeur actuel pendant qu'elles travaillent sur leurs migrations.

Pourquoi Gutenberg est-il bon pour moi et qu'est-ce que cela signifie pour l'avenir de WordPress ?

Gutenberg est sans aucun doute un changement majeur et de nombreux développeurs devront s'y adapter. Cependant, à mon avis, c'est l'un des meilleurs changements que WordPress ait jamais connus. Parce qu'il modernise le processus de développement de thème et le rend plus modulaire avec une base de code plus propre, une meilleure maintenance et édition. Il offre plus de fiabilité et se débarrasse de son ancienne approche monolithique piratable.

Avec l'utilisation de blocs, il optimise et simplifie toutes les façons dont nous construisons une page (shortcodes, widgets, HTML personnalisé, médias, formatage du texte, intégrations et métaboxes). Comme Matt l'explique dans son article :

• Les développeurs et les agences pourront créer des modèles interactifs que les clients pourront facilement mettre à jour sans casser des éléments ni gérer des types de publication personnalisés.
• Les développeurs de plugins pourront s'intégrer complètement dans chaque partie de WordPress. Y compris les messages, les pages, les types de messages personnalisés et les barres latérales sans avoir à pirater TinyMCE ou à presser toute leur fonctionnalité derrière un bouton de la barre d'outils.
• Les développeurs de thèmes n'auront pas besoin de regrouper des tonnes de plugins ou de créer leurs propres constructeurs de pages. Il y aura un moyen standard et portable de créer des mises en page riches pour les messages et de guider les gens tout au long de la configuration directement dans l'interface. Pas besoin de tutoriels en 20 étapes ou de longues vidéos.
• Les développeurs principaux pourront travailler dans les technologies modernes et ne pas s'inquiéter de 15 ans de rétrocompatibilité.
• Les utilisateurs pourront enfin créer les sites qu'ils construisent avec leur imagination. Ils pourront faire des choses sur mobile qu'ils n'ont jamais faites auparavant. Ils n'auront plus jamais à revoir un shortcode. Le texte collé à partir de Word sera nettoyé et converti en blocs automatiquement et instantanément.

Démos et exemples

Dans cette conférence de WordCamp US 2017, Morten explique sur quoi les développeurs WordPress doivent se concentrer et comment WordPress sera transformé avec Gutenberg.

Morten Rand-Hendriksen : Gutenberg et le WordPress de demain

Dans ce screencast, Human Made démontre une série d'implémentations avancées des blocs Gutenberg.

Comment commencer

Jouez avec Frontenberg , une démo en direct limitée de l'éditeur Gutenberg qui vous aidera à vous familiariser avec l'environnement d'édition de Gutenberg.

Frontenberg - Un terrain de jeu Gutenberg déconnecté pour des tests instantanés

Lisez l' article suivant de Matias Ventura Bausero, l'un des principaux ingénieurs derrière Gutenberg .

Gutenberg, ou le vaisseau de Thésée – Comment un système peut-il évoluer fondamentalement sans changer radicalement ?

Jouez avec ces symboles Sketch et essayez de concevoir vos propres blocs personnalisés.

Automattic/gutenberg-themes-sketch – gutenberg-themes-sketch – Un ensemble de fichiers Sketch pour vous aider à concevoir des thèmes WordPress pilotés par blocs

Lisez le manuel officiel du développeur sur wordpress.org . C'est propre, facile à lire et il évolue constamment. Vous devez également vous inscrire à leur liste de diffusion afin de recevoir leurs mises à jour.

Introduction – « Gutenberg » est le nom de code du focus de l'éditeur WordPress 2017.

Creusez dans ReactJS puisque Gutenberg est construit dessus.

React – Une bibliothèque JavaScript pour créer des interfaces utilisateur – Une bibliothèque JavaScript pour créer des interfaces utilisateur

Découvrez ces exemples de Gutenberg construits par l'équipe principale de WordPress.

WordPress/gutenberg-examples = gutenberg-examples – Exemples d'extension de WordPress/Gutenberg avec des blocs

Lisez cet e-book détaillé de Human Made (l'une des meilleures agences de développement WP) .

Gutenberg, le nouvel éditeur WordPress (livre blanc) – Ce livre blanc couvre les principaux défis de la mise en œuvre et de l'adoption, ainsi que des conseils sur la façon dont les entreprises peuvent agir maintenant.

Découvrez ce cours de développement par Zac Gordon, éducateur sur certaines des plateformes éducatives les plus populaires FrontendMasters, Treehouse et Udemy.

Le cours de développement Gutenberg de Zac Gordon - Cours Gutenberg

Enfin, installez cette boîte à outils de développement sans configuration pour créer des plugins de bloc WordPress Gutenberg par Ahmad Awais

ahmadawais/create-guten-block – ‏ Une boîte à outils de développement #0CJS à configuration zéro pour créer des blocs WordPress Gutenberg.

C'est tout pour le moment, merci beaucoup d'avoir lu ce post et n'hésitez pas à laisser un commentaire si vous avez des idées, des questions ou des suggestions.

Si vous êtes une agence, une entreprise ou un développeur WordPress cherchant à améliorer les performances, la sécurité et l'expérience d'hébergement de votre site Web, parlez à notre équipe d'ingénieurs. Notre plateforme d'hébergement WordPress infogéré est considérée comme l'une des meilleures de son industrie avec des performances, une fiabilité et un support client technique inégalés.

Notre équipe a pour mission de redéfinir la façon dont les développeurs WordPress créent, hébergent et font évoluer leurs sites Web, alors restez en contact et n'hésitez pas à parler avec nous.