Construire des blocs Gutenberg personnalisés: tutoriel pour développer les blocs finaux
Beaucoup de gens se plaignent d’avoir rencontré des obstacles pour commencer à construire des blocs et des applications Gutenberg. La courbe d’apprentissage est abrupte, principalement en raison des difficultés d’installation et de configuration de l’environnement de développement. De plus, vous avez une connaissance solide du JavaScript et des noeuds. JS, REACT et Redux font partie intégrante de cette recette assez complexe. Le manuel officiel de l’éditeur de blocs WordPress fournit beaucoup d’informations aux développeurs, mais vous pourriez vous retrouver perdu dans cet océan de détails. Il convient de mentionner que Matias Ventura, architecte en chef du Projet Gutenberg, a déclaré au WP Tavern:
Bien que quelqu’un puisse apprendre rapidement, c’est toujours un énorme obstacle pour les gens. Je pense qu’il y a différents niveaux; La documentation peut être un meilleur ordre de grandeur, que ce soit dans l’Organisation ou dans la présentation. J’espère qu’on en fera plus là – Bas. Dans cet esprit, nous avons décidé d’offrir un tutoriel étape par étape conçu pour aider le lecteur à commencer à développer les blocs de Gutenberg. Ça a l’air marrant? Plongeons! Conditions préalables au développement de Gutenberg Block pour ce tutoriel, les seules compétences requises sont une bonne connaissance du développement de plug – ins WordPress et au moins des bases de HTML, css, Javascript et React.
Est – ce un projet ambitieux? C’est sûr! Il n’est pas facile de trouver le bon compromis entre l’intégrité et la simplicité, ni de décider quels sujets insérer et quels sujets omettre. J’espère que les lecteurs intermédiaires et avancés nous pardonneront de ne pas avoir approfondi certains concepts, tels que l’état de réaction, le stockage Redux, les composants de haut niveau, etc. Ces sujets nécessitent plus d’espace et d’attention et peuvent être trop avancés pour démarrer le développement de blocs (à moins que vous ne soyez un développeur REACT). Pour l’art.
A combine le concept de ce que nous mettons en œuvre aujourd’hui dans WordPress avec du Code court, du HTML personnalisé, et intègre la découverte dans une API et une expérience utilisateur unifiées. Les titres, paragraphes, colonnes, images, bibliothèques et tous les éléments qui composent l’interface de l’éditeur, du panneau latéral aux contrôles de bloc de barre d’outils, sont des composants de React.
Qu’est – ce qu’un ingrédient réactif? W3schools fournit la définition suivante: les composants sont des bits de code indépendants et réutilisables. Ils sont utilisés de la même manière que les fonctions Javascript, mais ils fonctionnent indépendamment et renvoient HTML via la fonction render ().
Utilisez le bloc Gutenberg dans WordPress 5.8. Bien que l’expérience d’édition offerte par Gutenberg soit nouvelle par rapport aux éditeurs WordPress classiques, la façon dont WordPress stocke le contenu dans sa base de données n’a pas changé du tout. C’est parce que Gutenberg est une application qui fonctionne dans WordPress, mais qui ne change pas la façon dont CMS fonctionne.
Les messages créés avec Gutenberg (y compris les messages personnalisés, les pages et les types de messages) sont toujours stockés dans la table WP _ posts, comme avec l’éditeur de classe. Mais dans les messages créés par Gutenberg, vous trouverez plus d’informations dans le tableau qui représente la différence fondamentale entre les messages créés avec l’éditeur classique et ceux créés par Gutenberg. Cette information ressemble à un commentaire HTML et a une fonctionnalité spécifique: bloc de séparation: Un billet de blog dans la vue de l’éditeur de code. Le séparateur de bloc indique à WordPress quel bloc afficher à l’écran. Ils fournissent également des valeurs pour les attributs de bloc dans les objets json. Ces objets de scène déterminent comment les blocs sont affichés à l’écran:
Un billet de blog stocké dans la table WP _ posts. Configurer l’environnement de développement WordPress configurer l’environnement de développement JavaScript moderne
Une solide connaissance des technologies de pointe telles que webpack, REACT et jsx, Babel, eslint est nécessaire. Effrayé? Ne fais pas ça! La communauté WordPress a fourni des outils puissants pour vous aider à éviter le processus de configuration manuelle confus. Pour simplifier les choses, nous ne discuterons pas de transpiration dans cet article (cependant, nous vous recommandons de vous familiariser avec les bases du développement de blocs une fois que vous les aurez apprises). Au lieu de cela, nous vous présenterons deux outils optionnels que vous pouvez utiliser pour configurer rapidement et facilement l’environnement de développement JavaScript moderne en quelques minutes. C’est à vous de choisir le projet qui vous convient le mieux.
La configuration de l’environnement de développement Javascript pour créer un bloc Gutenberg nécessite trois étapes: l’installation d’un noeud. Configuration JS et NPM environnement de développement configurer le plug – in de verrouillage commençons. 1. Installez le noeud. JS et NPM doivent installer des noeuds avant d’installer l’environnement de développement et d’enregistrer le premier bloc. JS et Node Pack Manager (NPM). Informations sur le noeud. JS est l’exécution JavaScript du moteur JavaScript V8 basé sur Chrome. NPM, communément appelé Node Pack Manager, est considéré comme le « plus grand registre de logiciels au monde ». Vous pouvez installer des noeuds. JS et NPM sont différents. Mais d’abord, vous devrez peut – être vérifier si le logiciel est déjà installé sur votre ordinateur.
Pour ce faire, démarrez le terminal et exécutez la commande suivante: Node – V si le résultat n’est pas trouvé, node. JS n’est pas installé sur votre ordinateur, vous pouvez continuer l’installation. Pour cet article, nous avons choisi l’option d’installation la plus simple, l’installateur de noeuds. Il vous suffit de télécharger la version correspondant au système d’exploitation et de lancer l’assistant d’installation: Page de téléchargement du noeud. JS. Après l’installation du noeud. JS, lancez à nouveau Node – V dans le terminal. Vous pouvez également lancer com
Rea exécute l’instance docker du site WordPress. Toute modification apportée au Code est immédiatement reflétée dans l’instance WordPress. Étape 2: utilisez docker et Node pour installer @ WordPress \/ ENV à partir de la ligne de commande. JS fonctionne sur votre ordinateur et vous pouvez continuer à installer l’environnement de développement WordPress. Vous pouvez installer WP ENV globalement ou localement. Pour ce faire globalement, vous devez exécuter la commande suivante à partir du Répertoire plug – in (plus d’informations dans la boîte d’avertissement importante ci – dessous): NPM install – G @ WordPress \/ env analysons le paquet d’installation: NPM install – G ajouter à la commande pour installer globalement le paquet spécifié WordPress \/ ENV est le paquet que vous installez. Important: par défaut, les paquets de noeuds sur Mac ou Linux sont installés dans le module \/ usr \/ local \/ LIB \/ node _ module. Si l’utilisateur actuel n’a pas la permission d’écrire dans ce répertoire, une erreur eacces est émise. En savoir plus sur la résolution des erreurs d’autorisation eacces lors de l’installation globale des paquets. Pour confirmer que Wp ENV est installé correctement, lancez la commande suivante: WP env – – version vous devriez voir la version actuelle de WP ENV, ce qui signifie que vous pouvez maintenant démarrer votre environnement en utilisant la commande suivante dans le dossier plug – in: WP ENV Start vous pouvez accéder au tableau de bord WordPress à l’adresse suivante: http:\/\/localhost:8888\/wp Les identifiants Administrateur \/ par défaut sont les suivants: nom d’utilisateur: mot de passe administrateur: mot de passe configurer votre plug – in de verrouillage maintenant vous devez vous fier à un plug – in de verrouillage de base. Cependant, au lieu de créer manuellement un plug – in de bloc de développement qui contient tous les fichiers et dossiers nécessaires, lancez simplement un outil de développement qui fournit tous les fichiers et configurations nécessaires pour démarrer le développement de bloc. Encore une fois, vous avez deux options.
Faites défiler le bloc vers le bas pour l’insérer dans la section widgets et sélectionnez un nouveau bloc: Exemple de bloc créé avec @ WordPress \/ Create block. Maintenant, retournez au terminal, changez le répertoire courant en mon premier bloc: CD mon premier bloc, et lancez la commande suivante: NPM Start cela vous permet d’exécuter le plug – in en mode développement. Pour créer un code de production, Vous devez utiliser la commande suivante: NPM Run Build Option 2: configurer le plug – in de bloc en utilisant create Guten Block create Guten Block est un outil de développement tiers pour créer des blocs Gutenberg: créer Guten Block est une boîte à outils de configuration zéro Dev (# 0cjs) pour développer des blocs Gutenberg WordPress en quelques minutes sans configurer React, webpack, es6 \/ 7 \/ 8 \/ Next,, Eslint, Babel, etc. Comme l’outil officiel create Block, create Guten Block est basé sur l’application create REACT et vous aide à générer le premier plug – in block en douceur. Le kit fournit tout ce dont vous avez besoin pour créer un plugin wordpress moderne, y compris le support pour la syntaxe React, jsx et es6. Processus de développement \/ production de paquets Web en coulisse. Les langues autres que es6 agissent comme des opérateurs de diffusion d’objets. CSS et autorefix, donc vous n’avez pas besoin de – webkit ou d’autres préfixes. Un script compilé pour grouper JS, css et images pour la production à l’aide de la carte source. Ces outils sont mis à jour de façon transparente en utilisant une seule dépendance de script CGB. Notez l’avertissement suivant: le compromis est que ces outils sont pré – configurés pour fonctionner d’une manière spécifique. Si votre projet nécessite plus de personnalisation, vous pouvez l’éjecter et le personnaliser, mais vous devez maintenir cette configuration. Une fois que vous avez un site WordPress local en main, lancez l’outil en ligne de commande et allez dans le dossier \/ WP content \/ plugins pour l’installation et ESEG
Er est l’outil officiel de développement de blocs de création parce qu’il est utilisé dans le manuel de l’éditeur de blocs. Cependant, même si vous décidez d’utiliser des outils tiers comme create Guten Block, votre expérience ne sera pas très différente. C’est – à – dire, examinons de plus près les outils de création de blocs. Jetez un coup d’oeil à l’outil de développement de blocs de création mentionné ci – dessus, create Block est l’outil en ligne de commande officiel pour créer des blocs Gutenberg. Lancez @ WordPress \/ Create Block dans le terminal pour générer des fichiers PHP, JS et scss, et le Code nécessaire pour enregistrer un nouveau type de bloc: npx @ WordPress \/ Create Block [OPTIONS] [segments] [segments] (facultatif): pour assigner des blocs et installer [OPTIONS] plug – ins – par défaut, assigner des modèles esnext. Cela signifie que vous obtiendrez la prochaine version javascript avec la syntaxe jsx ajoutée. Si vous omettez le nom du bloc, la commande s’exécute en mode interactif, vous permettant de personnaliser plusieurs options avant de générer le fichier: npx @ WordPress \/ Create Block La création de blocs est effectuée en mode interactif. L’illustration suivante montre la structure du fichier du plug – in de bloc créé à l’aide de l’outil officiel create Block: Fichiers et dossiers pour les plug – ins Block créés avec @ WordPress \/ Create block. C’est – à – dire, examinons les principaux fichiers et dossiers du nouveau plug – in de verrouillage. Nom du plug – in: mon premier bloc * Description: bloc d’échantillon écrit en utilisant la norme esnext et le support jsx – nécessite des étapes de construction Minimum requis: 5.8 * nécessite PHP: 7.0 * Version: 0.1.0 * auteur: contributeur WordPress * licence: GPL – 2.0 ou plus * URI de licence: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html Champ texte: mon premier bloc * * @ paquet créer un bloc * \/ \/ * * * enregistrez le bloc en utilisant les métadonnées chargées à partir du bloc. Json ` fi
Dans cet article, nous utiliserons la commande suivante: NPM Run Build: create production Build (Compressed). NPM Run start – crée une construction de développement (non compressée). Les dépendances et devdependency sont deux objets qui associent le nom du paquet à la version. Les dépendances sont nécessaires dans la production, tandis que les dépendances Dev ne sont nécessaires que dans le développement local (voir plus). La seule dépendance de développement par défaut est le paquet @ WordPress \/ scripts, défini comme une « collection de scripts réutilisables personnalisés pour le développement de wordpress». Bloc de fichiers. Json commence par WordPress 5.8 (fichier bloc de métadonnées). Json est une méthode canonique pour enregistrer les types de blocs. A des blocs de fichiers. Json offre de nombreux avantages, y compris une meilleure performance et une meilleure visibilité dans le catalogue des plug – ins WordPress: du point de vue de la performance, utilisez des blocs d’enregistrement de bloc lorsque le thème supporte un chargement lent des ressources. Json optimisera immédiatement la file d’attente des ressources. Les actifs de première ligne CSS et Javascript listés dans les propriétés de style ou de script ne sont ajoutés que s’il y a des blocs sur la page, réduisant ainsi la taille de la page. Lancez la commande @ WordPress \/ Create Block pour générer les blocs de fichiers suivants. Json: {apiversion: 2, \
Titre du bloc – titre affiché pour un bloc de catégorie – icône de catégorie de bloc – description de l’icône dashicon Slug ou personnalisée SVG – brève description visible dans l’inspecteur de bloc prise en charge: un ensemble d’options pour contrôler les fonctionnalités utilisées dans l’éditeur de domaine de texte – plug – in de script d’éditeur de domaine de texte – définition de script d’éditeur Éditeur de style – définition de style de l’éditeur: fournit un style alternatif pour un bloc en plus des propriétés énumérées ci – dessus, vous pouvez (ou pouvez) Définir un objet d’attribut qui fournit des informations sur les données stockées dans le bloc. Dans votre quartier. Json peut définir n’importe quel nombre d’attributs dans une paire clé \/ valeur, où la clé est le nom de l’attribut et la valeur est la définition de l’attribut. Voir les exemples de définitions d’attributs suivants: {attributs \
Enregistrer les composants sur le client. Cette fonction prend deux paramètres: le nom de bloc espace de noms \/ nom de bloc (identique au nom enregistré sur le serveur) et l’objet de configuration de bloc. La fonction Edit fournit l’interface de bloc qui est rendue dans l’éditeur de bloc, tandis que la fonction Save fournit la structure qui sera sérialisée et sauvegardée dans la base de données (voir plus). Édition Édition JS. JS est l’endroit où vous créez l’interface de gestion de bloc: importer à partir de \
Emo the following details: block Slug: My affiliate Block Internal namespace: My affiliate plugin Block Displays the title: A Short Description of the affiliate Block Block Block: a sample Block for kinsta dashicon Reader: Currency Category name: Design plugin Author: Your Name license: – link to license Text: – Current plugin version: 0.1.0 il faut quelques minutes pour installer le plug – in et toutes les dépendances. À la fin du processus, vous verrez les réponses suivantes: Le bloc affilié a été installé et enregistré pour le développement. Maintenant, lancez la commande suivante à partir du dossier \/ WP content \/ plugins: CD my affiliate Block À propos si vous exécutez un environnement WordPress, vous devriez d’abord démarrer docker Desktop, puis lancer WP ENV Start à partir du dossier plugins. Pour que vous puissiez commencer http:\/\/localhost:8888\/wp – Connectez – vous à partir d’un navigateur Web et accédez au tableau de bord WordPress en utilisant le nom d’utilisateur: admin et mot de passe: mot de passe. Exécutez la commande à partir du terminal de code Visual Studio. Enfin, à partir de votre dossier plug – in (dans notre exemple, mon bloc accessoire), vous pouvez commencer à développer: NPM Start now ouvre l’écran plug – in pour localiser et activer le plug – in de bloc accessoire: Plug – in de bloc accessoire. Créez un nouveau billet, ouvrez l’inserteur de bloc et faites défiler vers le bas vers la catégorie de conception. Cliquez pour ajouter un bloc associé: Bloc initial créé avec @ WordPress \/ Create block. Bloc Comme indiqué ci – dessus, l’enregistrement des blocs côté serveur se fait dans un fichier. Php primaire. Cependant, nous ne définissons pas les paramètres dans le fichier. Php. Nous utiliserons des blocs de fichiers. Json. Ensuite, ouvrez à nouveau le bloc. Json et Examinez les paramètres par défaut: {apiversion: 2, \
Exemple de bloc pour les lecteurs kinsta, \
Ile. Tous les attributs localisés sont automatiquement enveloppés dans l’appel de fonction _ X (à partir de @ WordPress \/ i18n Package), comme il fonctionne lorsqu’il utilise Register block type from Metadata en PHP. La seule exigence est de définir l’attribut textdomain dans le bloc. Fichier json. Ici, nous utilisons la fonction registerblocktype au lieu de registerblocktypefrommetadata parce que cette dernière est obsolète depuis Gutenberg 10.7, mais le mécanisme est le même. Utilisez les composants intégrés: les éléments qui composent le bloc Gutenberg à partir des composants richtext sont des composants React auxquels vous pouvez accéder à partir de la variable globale WP. Par exemple, essayez de taper WP. Modifier dans la console du navigateur. Cela vous donnera une liste complète des composants inclus dans WP. Éditeur de modules. Faites défiler la liste et devinez ce que signifie le nom du composant. De même, vous pouvez vérifier la liste des composants contenus dans WP. Module composant: Composants de l’éditeur WP. La programmation modulaire est une technique de conception logicielle qui met l’accent sur la Division des fonctions d’un programme en modules distincts et interchangeables, de sorte que chaque module contient tout ce qui est nécessaire pour exécuter un seul aspect de la fonction souhaitée (Source: wikipedia). Retournez à l’édition. Fichier JS et regardez attentivement le script: importer {{} de \
Les composants requis pour le paquet WordPress incluent les éléments correspondants dans le Code jsx pour définir les attributs nécessaires dans le fichier bloc. Json Definition Event Manager enregistrer les données Étape 1: importer les composants requis du paquet WordPress ouvre maintenant le fichier d’édition. JS et modifier l’instruction d’importation suivante: importer {useblockprops} à partir de ‘@ WordPress \/ Block Editor’… Importer {useblockprops, richtext} de \
Ligne: tagname – tagname of modifiable HTML element onChange – function called when the Content of the element change allowedformats – a Array of allowedformats. Par défaut, tous les formats permettent des valeurs – chaîne HTML qui rend les substituants modifiables: texte du substituant affiché lorsque l’élément est vide Étape 3: définir les attributs nécessaires dans le bloc de fichiers. La propriété json fournit des informations sur les données stockées par bloc, telles que le contenu avancé, la couleur de fond, l’URL, etc. Vous pouvez définir n’importe quel nombre d’attributs dans un objet d’attribut dans une paire clé \/ valeur, où la clé est le nom de l’attribut et la valeur est la définition de l’attribut. Ouvrez le bloc maintenant. Json et ajouter l’attribut suivant: {attributs \
Ou «; Importer Édition Scss’; Export default Function Edit ({Attributes, setattributes}) {Const blockprops = useblockprops (); const onchangecontent = (newcontent) = > {setattributes ({content: newcontent}}}} returned ); } Enregistrez maintenant le fichier et lancez NPM Run Start dans la fenêtre du terminal. Ensuite, retournez au tableau de bord WordPress, créez un nouveau billet ou une nouvelle page et ajoutez vos pièces jointes: Sortie du composant richtext dans l’éditeur de bloc. Ajouter du texte et passer à la vue de code. Votre code devrait être le suivant: C’est mon premier bloc Gutenberg modifiable. Si vous sauvegardez la page maintenant et Examinez les résultats de première ligne, vous pourriez être un peu déçu parce que vos changements n’affecteront pas le site. C’est parce que vous devez modifier et enregistrer le fichier. JS stocke l’entrée de l’utilisateur dans la base de données lors de l’enregistrement des messages. Étape 5: enregistrer les données ouvre maintenant le fichier enregistrer. JS et modifier le script comme suit: importer \} à partir de \
Contrôles de la barre d’outils bloc la barre d’outils bloc contient un ensemble de contrôles qui vous permettent de manipuler une partie du contenu du bloc. Pour chaque contrôle de barre d’outils, vous trouverez un composant:
Barre d’outils pour le bloc de paragraphe principal. Par exemple, vous pouvez ajouter un contrôle d’alignement de texte à un bloc. Tout ce que vous avez à faire est d’importer deux composants du paquet @ WordPress \/ Block editor. Nous allons suivre les mêmes étapes que dans l’exemple précédent: importer les composants nécessaires pour le paquet WordPress, y compris les éléments correspondants dans le Code jsx, et définir les attributs nécessaires dans le fichier bloc. Json Definition Event Manager Save Data Step 1: Import blockcontrols and alignmentcontrol Components from @ WordPress \/ Block Editor to add Alignment controls to block toolbar, you need two components: fatigué de prendre en charge l’hébergement WordPress de bas niveau 1 sans réponse? Essayez notre équipe de soutien de classe mondiale! Jetez un coup d’oeil au calendrier de rendu de notre barre d’outils de contrôle dynamique (non enregistrée) blockcontrols. Alignmentcontrol crée un menu déroulant qui affiche les options d’alignement pour le bloc sélectionné (en savoir plus) et ouvre le fichier d’édition. JS et modifier la Déclaration d’importation comme suit: importer {useblockprops, richtext, alignmentcontrol, blockcontrols} de \
Accessoires. Enregistrer (); Retour ( ); } Enfin, pour rendre le code plus lisible, vous pouvez utiliser la syntaxe d’assignation de déconstruction pour extraire un seul attribut de l’objet attribut: exporter la fonction par défaut Save ({attributes}) {Const blockprops = useblockprops.save (); const {content, align} = attributes; Retour (
); } Enregistrer le fichier, redémarrer le processus et retourner à l’éditeur en mode éditeur de code. Les codes doivent être les suivants: C’est ma première édition. Gutenberg Bloc Aligne le texte à droite. C’est tout! Vous venez d’ajouter un contrôle d’alignement à la barre d’outils bloc et vous pouvez lire plus d’informations sur les contrôles de la barre d’outils bloc dans le manuel de l’éditeur de bloc. Personnaliser la barre latérale des paramètres de bloc vous permet également d’ajouter des contrôles à la barre latérale des paramètres de bloc (et même de créer une nouvelle barre latérale pour votre application). L’API fournit le composant inspectorcontrol à cette fin. Le manuel de l’éditeur de bloc explique comment utiliser les barres latérales de configuration: les barres latérales de configuration sont utilisées pour afficher les paramètres qui utilisent moins de paramètres ou qui nécessitent plus d’espace à l’écran. Les barres latérales de réglage ne peuvent être utilisées que pour les réglages au niveau du bloc. Si le réglage n’affecte que la sélection dans le bloc (par exemple, le réglage en gras du texte sélectionné dans le paragraphe): ne le placez pas dans la barre latérale paramètres. Lorsque vous modifiez un bloc en mode HTML, la barre latérale paramètres apparaît également, de sorte qu’elle ne devrait contenir que les paramètres au niveau du bloc. Encore une fois: les composants d’importation requis pour les paquets WordPress incluent des éléments correspondants dans les attributs de définition de Code jsx
{Const blockprops = useblockprops.save (); const {content, align, backgroundcolor, textcolor} = attribut; Retour ( ); } Arrêtez maintenant le processus (^ c) et lancez NPM Run Start New. Mettre à jour la page, supprimer toute instance du bloc et l’ajouter au Post:
Bloc personnalisé avec panneau de configuration des couleurs. Faites des changements, sauvegardez le message et visualisez – le à l’avant. Les modifications apportées à l’éditeur de bloc doivent être signalées au site principal. Ajouter et personnaliser des liens externes dans cette section, vous ajoutez un nouveau composant à un type de bloc: un composant de liaison externe qui permet à l’utilisateur d’ajouter des liens personnalisables à plusieurs contrôles de barre latérale à un bloc satellite, qui permet à l’utilisateur de personnaliser l’étape de configuration du lien 1. Importer des composants de @ WordPress \/ Components vous devez maintenant importer plusieurs composants de @ WordPress \/ components. Ouvrez le fichier d’édition. JS et ajouter la Déclaration d’importation suivante: importer {textcontrol, panelbody, panelrow, togglecontrol, externalink} de \
Correspond à l’entrée de l’utilisateur. Étape 5: enregistrer les données Enfin, nous devons mettre à jour la fonction enregistrer à enregistrer. В: exporter la fonction par défaut Save ({attributes}) {Const {align, content, backgroundcolor, textcolor, affiliatelink, linklabel, haslinknofollow} = attribut; Const blockprops = utilisez blockprops. Enregistrer (); Retour ( {linklabel} ); } Notez que nous utilisons ici des éléments réguliers plutôt que des liens externes: Paramètres du lien de bloc d’association. Sauvegardez maintenant les données et redémarrez l’environnement. Ajouter plusieurs styles de blocs dans la section précédente, vous avez appris à ajouter des contrôles de barre d’outils de blocs qui permettent à l’utilisateur d’aligner l’entrée de l’utilisateur. Nous pouvons ajouter plusieurs contrôles de style à la barre d’outils de bloc, mais nous pouvons également fournir un certain nombre de styles de bloc prédéfinis à partir desquels vous pouvez sélectionner en un seul clic. Pour ce faire, nous utiliserons une fonctionnalité utile du bloc: l’API de style bloc. Tout ce que vous avez à faire est de définir les propriétés du bloc de style. Json et déclare le style approprié dans la Feuille de style. Par exemple, vous pouvez ajouter le tableau de styles suivant: styles: [{name \
Contenu obscène du noeud. JS, webpack, Babel et React sont essentiels pour créer des blocs Gutenberg avancés et se positionner en tant que développeurs Gutenberg professionnels. Cependant, vous n’avez pas besoin de construire une expérience React pour commencer à profiter du développement de blocs. Le développement de blocs peut vous donner l’impulsion et l’objectif d’acquérir des compétences en constante évolution dans la technologie derrière le bloc Gutenberg. Ce guide est donc loin d’être complet. Ce n’est qu’une introduction à une grande variété de sujets qui vous aideront à commencer à construire vos premiers blocs de Gutenberg. Nous vous recommandons donc d’approfondir vos connaissances en lisant attentivement la documentation et les guides en ligne. Parmi les nombreuses ressources disponibles, nous vous recommandons ce qui suit: Tutoriels officiels pour créer des blocs de débutants tutoriels officiels pour les développeurs intermédiaires méta – blocs dynamiques créer des barres latérales pour les plug – ins si vous venez de commencer le développement WordPress, vous pourriez avoir besoin de comprendre les concepts de base du développement frontal. Voici une liste rapide de ressources pour vous aider à démarrer: Comment installer WordPress localement (free ebook) Quelle est la vraie valeur de l’hébergement WordPress (free ebook) javascript? Html vs HTML5 comment modifier CSS dans WordPress qu’est – ce que php? Camp de crochet WordPress: comment utiliser des actions personnalisées, des filtres et des crochets, rappelez – vous que le code complet de cet exemple de guide est disponible sur GIST. C’est votre tour maintenant: Avez – vous développé les blocs de Gutenberg? Quelles sont les principales difficultés que vous avez rencontrées jusqu’à présent? Veuillez nous faire part de votre expérience dans vos commentaires!
