Avez-vous besoin de savoir comment réagir en tant que développeur WordPress? –

Cet article sur la nécessité de savoir que React en tant que développeur WordPress a été publié à l'origine par par Torque Magazine et est reproduit ici avec autorisation.

Le nouveau système d'édition de contenu WordPress Gutenberg alimentera le Éditeur de publication WordPress dans WordPress 5.0. Gutenberg est un éditeur «basé sur des blocs». Lors de la création de contenu, tout est un bloc. Si vous avez un article composé d'un paragraphe, d'un en-tête, puis de deux paragraphes, cela correspond à quatre blocs.

Gutenberg est livré avec un ensemble de blocs «principaux» par défaut – paragraphe, en-tête, publications récentes, image, citation de bloc, etc. Si vous utilisez Gutenberg pour créer du contenu, vous utilisez les blocs ou les blocs personnalisés fournis par les plugins WordPress que vous installez sur votre site.

Gutenberg est une interface JavaScript. Plus précisément, il est construit à l’aide de la bibliothèque d’interface utilisateur à code source libre «Facebook» de Facebook. Cet article explique un peu plus sur la création de vos propres blocs personnalisés pour une utilisation dans l'éditeur Gutenberg en utilisant JavaScript. Vous n'êtes pas obligé d'utiliser JavaScript pour créer des blocs. Advanced Custom Fields (ACF) a récemment annoncé un système élégant pour la création de blocs personnalisés avec PHP.

What Is React?

Dans le développement front-end, les éléments les moins performants que vous lisiez sont écrit à partir du DOM. Le référencement et la mise à jour du DOM est une tâche très difficile, de manière constante sur tous les navigateurs. React fournit un meilleur système pour cela, en implémentant un modèle de programmation réactif et une abstraction virtuelle du DOM.

Au lieu d'interagir directement avec le DOM, par exemple en utilisant jQuery.html () ou jQuery .val () React crée une représentation virtuelle du DOM. Nous appelons cela un DOM ou une VDOM virtuel. La VDOM est un objet JavaScript qui représente la structure du DOM. Chaque fois que votre code React communique avec Réagir une modification de l'une des données, le VDOM est recalculé. Après cela, React calcule la différence entre le DOM tel qu’il existait avant et après le changement. Ensuite, React (vraiment ReactDOM ou React Native) met à jour uniquement les parties du DOM à modifier. Cela n’a vraiment aucune importance.

Comment utilise-t-on React à Gutenberg?

React est une bibliothèque permettant de créer des composants réutilisables. Parce qu'ils sont réutilisables, nous pouvons composer des interfaces à partir de composants. C'est un projet open-source créé sur Facebook.

Tout est un bloc. Le texte, les images, les galeries, les widgets, les codes abrégés et même des morceaux de code HTML personnalisé, qu’ils soient ajoutés par des plugins ou autrement. Vous ne devriez avoir à apprendre à maîtriser qu’une seule interface: l’interface de bloc, puis vous savez tout faire. – Manuel de Gutenberg

Les blocs constituent l'unité de base de Gutenberg. Nous composons le contenu à partir d'un ou de plusieurs blocs.

Les composants sont l'unité atomique de React, nous composons les applications React à partir de composants. Gutenberg est créé avec React, de sorte que chaque bloc est composé d’un ou de plusieurs composants.

Il est important de noter, et je traiterai de cela davantage dans cette série de posts, mais Gutenberg ajoute une fine couche d’abstraction à React. Dans notre code de Gutenberg, nous utiliserons wp.createElement au lieu de React.createElement . Cela fonctionne de la même manière, mais lorsque l'API de React change, WordPress peut décider à quel moment prendre en charge ces modifications et fournir un wrapper à compatibilité ascendante ou décider de ne pas le faire.

C'est une bonne planification pour l'avenir, mais pour l'instant, il s'agit simplement de React.

Dois-je savoir comment réagir avec Gutenberg?

Cela nous amène donc à la grande question: avez-vous besoin d'apprendre à réagir? Non, vous pas. Rien de tout cela n'a d'importance si vous ne voulez pas créer vos propres blocs. Si vous souhaitez simplement utiliser les blocs fournis par core ou par des plugins, vous n’avez jamais besoin de créer vos propres types de bloc.

Non. Mais…

Vous pouvez créer un bloc de base sans connaître beaucoup de JavaScript. Jetez un coup d’œil à cet exemple de bloc de base, simplifié à partir des exemples officiels de Gutenberg:

 (fonction (blocs, élément) {
    var el = element.createElement;
    blocks.registerBlockType ('espace de noms / nom-bloc', {
        title: __ ('Exemple: Basic', 'gutenberg-examples'),
        icône: 'universal-access-alt',
        catégorie: 'layout',
        edit: function () {
            retourne el (
                'p',
                {},
                'Hello World, étape 1 (de l'éditeur).'
            )
        },
        save: function () {
            retourne el (
                'p',
                {},
                'Hello World, étape 1 (depuis le frontend).'
            )
        },
    });
} (
    window.wp.blocks,
    window.wp.element
));

La première chose qui pourrait être nouvelle est d'utiliser wp.createElement – dans cet exemple, il se trouve dans la variable «el» – pour créer du code HTML. C’est une façon élégante de créer un élément html de type «p». Je traiterai de cela dans mon prochain article de cette série.

WordPress possède une couche d'abstraction sur React, vous n'avez donc besoin que de quelques fonctions: wp.createElement qui crée HTML et setAttribute () qui est utilisé pour mettre à jour vos attributs de bloc .

Je vous recommande de parcourir la section Creating Blocks du manuel de Gutenberg, puis en consultant les exemples repo . ] ainsi que l'exemple de code de l'atelier WordCamp Miami 2018 Gutenberg . C'est tout le code que vous pouvez utiliser sans creuser dans React.

Oui, si…

Si vous devez créer de simples blocs, peut-être avec un ou deux contrôles, vous n'avez pas besoin de connaître React plus que ceux-là. deux concepts que j'ai mentionnés auparavant. Toutefois, si vous souhaitez créer un bloc plus complexe, partagez des composants entre Gutenberg et d'autres applications React, par exemple un écran de paramètres wp-admin ou une application mobile pour votre plug-in.

React est une bibliothèque vraiment amusante pour jouer avec la maîtrise de React est une compétence très commercialisable. Plus important encore, une fois que vous apprenez à réagir, vous pouvez comprendre plus facilement les concepts plus avancés de Gutenberg – gestion des états, tests unitaires, etc.

Comment apprendre à réagir à WordPress et à Gutenberg

Voici le début de la série sur le développement de React pour Gutenberg. La prochaine fois, je couvrirai Les principes de base de React puis la manière de les appliquer aux blocs de Gutenberg. À partir de là, nous allons créer des blocs dynamiques, puis examiner la gestion et les tests d’états.

J'ai une liste de discussions de développeurs de Gutenberg sur mon site qui pourraient vous être utiles. Dans cette série, j'expliquerai les concepts de React, mais si vous souhaitez apprendre le JavaScript et réagir profondément, Wes Bos et Zac Gordon proposent des cours de grande qualité sur React et JavaScript. a commencé.

Josh est un développeur et un éducateur WordPress. Il est le fondateur de Caldera Labs concepteur d’impressionnants outils WordPress, notamment Caldera Forms, un constructeur de formulaires WordPress réactif (glisser-déposer).