Développement du développement des blocs WordPress

Le développement WordPress est actuellement en cours de transition.

Bien que nous soyons en contact avec Block Editor depuis cinq ans, son développement est toujours difficile car la documentation est manquante ou dépassée. Cela reflète plus la situation actuelle de l'itération rapide des fonctions FSE.

Par exemple, en 2018, une série d'articles sur l'introduction au développement de Gutenberg a été publiée sur CSS-Tricks. Mais le temps s'est écoulé, et bien que cette méthode de développement soit toujours efficace, elle n'est plus recommandée (en outre, le projet de bloc de création sur lequel il est basé n'est plus maintenu).

Cet article est destiné à vous aider à démarrer le développement des blocs WordPress et à suivre l'approche actuelle. Bien sûr, les choses peuvent changer après la publication de cet article. Mais je vais essayer de me concentrer sur son idée de base, car même si l'outil se développe au fil du temps, le concept de base est susceptible de rester le même.

Qu'est-ce qu'un bloc WordPress?

Tout d'abord, clarifions certains termes, tels que "bloc". Tous les développements de ces fonctionnalités avant WordPress 5.0 ont été utilisés avec le nom de code "Gutenberg" (inventeur de l'impression).

Depuis lors, "Gutenberg" a été utilisé pour décrire tout ce qui concerne les blocs, y compris les éditeurs de blocs et les éditeurs de site, il est donc devenu si compliqué que certaines personnes détestent le nom. Plus important encore, il existe également un plugin Gutenberg pour tester des fonctionnalités expérimentales qui pourraient être incluses à l'avenir. Si vous pensez que l'appel de tous ces «édition à l'échelle du site Web» peut résoudre le problème, il y a aussi quelques préoccupations.

Ainsi, dans cet article, lorsque nous nous référons aux "blocs", nous nous référons à des composants qui créent du contenu dans WordPress Block Editor. Les blocs sont insérés dans des pages ou des articles et fournissent une structure pour des types spécifiques de contenu. WordPress est livré avec des blocs "core" pour les types de contenu communs, tels que les paragraphes, les listes, les images, les vidéos, l'audio, etc.

En plus de ces blocs de base, nous pouvons également créer des blocs personnalisés. Ceci est au centre du développement des blocs WordPress (vous pouvez également filtrer les blocs de base pour modifier leur fonctionnalité, mais vous n'en avez peut-être pas besoin pour le moment).

le rôle des blocs

Avant de plonger dans la création d'un bloc, nous devons d'abord comprendre comment le bloc fonctionne en interne. Cela nous évitera certainement beaucoup de problèmes à l'avenir.

J'aime comprendre les blocs abstraits comme: une entité avec certains attributs (appelés attributs) qui représentent certains contenus. Je sais que cela semble vague, mais soyez patient avec moi pour expliquer. Les blocs se manifestent essentiellement de deux manières: en tant qu'interfaces graphiques dans l'éditeur de blocs, ou en tant que blocs de données dans la base de données.

Lorsque vous ouvrez l'éditeur de blocs WordPress et insérez un bloc (par exemple, un bloc pullquote), vous obtenez une belle interface. Vous pouvez cliquer sur l'interface et modifier le texte référencé. Le panneau Paramètres sur le côté droit de l'interface utilisateur de l'éditeur de blocs fournit des options pour ajuster le texte et régler l'apparence d'un bloc.

Lorsque vous avez fini de créer une belle citation et de cliquer sur Publier, l'intégralité du post est stocké dans le tableau WP_Posts de la base de données. Ce n'est pas nouveau à cause de Gutenberg. C'est ainsi que les choses ont toujours fonctionné - WordPress stocke le contenu de l'article dans un tableau spécifié dans la base de données. Mais le nouveau est que la représentation du bloc pullquote fait partie du contenu stocké dans le champ post_content de la table WP_Posts.

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

- un attribut lié au bloc.

<code>...</code>

D'accord, cela ressemble à un bloc de pullquote. Eh bien ... il a également une propriété ... J'ai un fichier JavaScript qui me dit comment construire une interface graphique d'un bloc Pullquote dans l'éditeur en fonction de ses propriétés. Je devrais le faire maintenant pour que ce bloc soit présenté dans toute sa gloire.

Dites à WordPress que vous souhaitez enregistrer un type de bloc spécifique, ainsi que des détails connexes.
Fournit des fichiers JavaScript à l'éditeur de blocs, ce qui l'aidera à rendre le bloc dans l'éditeur tout en le "sérialisant" pour l'enregistrer dans la base de données.
fournit toutes les autres ressources requises pour que le bloc fonctionne correctement, tels que les styles et les polices.

dans le thème ou plusieurs blocs dans un seul plugin. Cependant, généralement si vous souhaitez faire un bloc, vous voudrez faire un plugin. Donc, si vous avez déjà créé un plugin WordPress, vous avez partiellement maîtrisé comment faire des blocs WordPress. Mais supposons que vous n'avez jamais mis en place un plugin WordPress, sans parler des blocs. Où commencez-vous même?

Assurez-vous que le nœud est installé

Cela vous donnera accès aux commandes NPM et NPX, où NPM installe les dépendances du bloc et aide à compiler le contenu, tandis que NPX exécute les commandes sur le package sans installer le package. Si vous utilisez MacOS, vous pouvez avoir un nœud installé et vous pouvez utiliser NVM pour mettre à jour la version. Si vous utilisez Windows, vous devez télécharger et installer le nœud.

Créer un dossier de projet

Maintenant, vous pouvez rencontrer d'autres tutoriels qui sautent directement sur la ligne de commande et vous demander d'installer un package appelé @ wordpress / create-block. Ce package est excellent car il génère un dossier de projet complet avec toutes les dépendances et les outils dont vous avez besoin pour démarrer votre développement.

Je prends personnellement cette approche lors de la mise en place de mes propres blocs, mais veuillez me tolérer un instant, car je veux éliminer le contenu subjectif qu'il introduit et me concentrer uniquement sur les parties nécessaires de l'environnement de développement de base pour la compréhension.

Ce sont les documents que je veux souligner spécifiquement:

• readme.txt: c'est un peu comme l'avant du répertoire du plugin, qui est généralement utilisé pour décrire le plugin et fournir plus de détails sur l'utilisation et l'installation. Si vous soumettez un bloc au répertoire du plugin WordPress, ce fichier aide à remplir la page du plugin. Si vous prévoyez de créer un référentiel GitHub pour le plugin Block, vous pouvez également envisager d'utiliser un fichier readme.md avec les mêmes informations afin qu'il s'y affiche bien.
• package.json: Ceci définit le package de nœud requis pour le développement. Nous l'ouvrirons lors de l'installation. Dans le développement de plugin WordPress classique, vous pouvez être habitué à utiliser des fichiers composer et composer.json. C'est son équivalent.
• plugin.php: c'est le fichier de plugin principal, oui, c'est un php classique! Nous placerons ici le titre du plugin et les métadonnées et l'utiliserons pour enregistrer le plugin.

En plus de ces fichiers, il existe également un répertoire SRC, qui doit contenir le code source du bloc.

Avoir ces fichiers et répertoires SRC est suffisant pour commencer. Dans ce groupe, veuillez noter que nous n'avons besoin que d'un fichier (plugin.php) pour fabriquer le plugin. Le reste fournit des informations ou est utilisé pour gérer l'environnement de développement.

Le package @ wordPress / Create-Block susmentionné construit ces fichiers pour nous (et plus). Vous pouvez le considérer comme un outil d'automatisation, pas comme une nécessité. Cela facilite le travail de toute façon, vous pouvez donc l'utiliser librement pour construire des blocs en exécutant la commande suivante:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Installation des dépendances en blocs

Supposons que vous ayez préparé les trois fichiers mentionnés dans la section précédente et qu'il est temps d'installer les dépendances. Tout d'abord, nous devons spécifier les dépendances dont nous aurons besoin. Nous le faisons en modifiant package.json. Lorsque vous utilisez l'utilitaire @ wordPress / Create-Block, ce qui suit est généré pour nous (l'annotation a été ajoutée; JSON ne prend pas en charge l'annotation, donc si vous copiez le code, veuillez supprimer l'annotation):

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

<code>...</code>

Maintenant que Package.json est configuré, nous devrions être en mesure d'installer toutes ces dépendances en accédant au dossier du projet dans la ligne de commande et en exécutant NPM Installer.

Ajouter le titre du plugin

Si vous êtes du développement classique du plugin WordPress, vous savez probablement que tous les plugins ont une information dans le fichier de plugin principal, qui aide WordPress à reconnaître le plugin et à afficher des informations à ce sujet sur l'écran du plug-in dans le panneau d'administration WordPress.

Ce qui suit est un plugin créé pour moi par @ wordPress / Create-Block pour un "Hello World":

npx @wordpress/create-block

Ceci est dans le fichier de plugin principal et vous pouvez le nommer comme vous le souhaitez. Vous pouvez le nommer un nom commun comme index.php ou plugin.php. Le package Create-Block le nomme automatiquement comme le nom du projet que vous avez fourni lors de l'installation. Étant donné que je fais référence à cet exemple comme "Exemple de bloc", le package nous donne un fichier Block-Example.php avec tout cela.

Vous devez modifier certains détails, comme vous faire un auteur, etc. Tout cela n'est pas nécessaire. Si je commence par "tête", alors cela peut être plus proche de ceci:

{
  // 定义项目名称
  "name": "block-example",
  // 使用语义版本控制设置项目版本号
  "version": "0.1.0",
  // 项目的简短描述
  "description": "Example block scaffolded with Create Block tool.",
  // 您可以将其替换为您自己
  "author": "The WordPress Contributors",
  // 标准许可信息
  "license": "GPL-2.0-or-later",
  // 定义主JavaScript文件
  "main": "build/index.js",
  // 我们在开发过程中构建和编译插件所需的一切
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  // 定义使用脚本包的哪个版本（撰写本文时为24.1.0）
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

Je n'entrerai pas dans les détails de l'objectif exact de chaque ligne, car il s'agit déjà d'un modèle complet dans le manuel du plugin WordPress.

Structure de fichiers

Nous avons affiché les fichiers requis pour le bloc. Cependant, si vous utilisez @ wordPress / Create-Block, vous verrez de nombreux autres fichiers dans le dossier du projet.

Ce qui suit est ce qui est actuellement inclus:

<code>
这里的@wordpress/scripts包是主要的依赖项。如您所见，它是一个devDependency，这意味着它有助于开发。如何？它公开了wp-scripts二进制文件，我们可以使用它来编译我们的代码，从src目录到build目录，等等。

WordPress维护了许多其他软件包，用于各种目的。例如，@wordpress/components软件包为WordPress区块编辑器提供了一些预制UI组件，可用于为区块创建一致的用户体验，并符合WordPress设计标准。

您实际上*不需要*安装这些软件包，即使您想使用它们也是如此。这是因为这些@wordpress依赖项不会与您的区块代码捆绑在一起。相反，任何引用实用程序软件包代码的导入语句——例如@wordpress/components——都用于在编译期间构造“资产”文件。此外，这些导入语句被转换为将导入映射到全局对象的属性的语句。例如，import { \_\_ } from "@wordpress/i18n"被转换为const \_\_ = window.wp.i18n.\_\_的缩小版本。（window.wp.i18n是一个保证在全局范围内可用的对象，一旦相应的i18n软件包文件被排队）。

在插件文件中注册区块期间，隐式使用“资产”文件来告诉WordPress区块的软件包依赖项。这些依赖项会自动排队。所有这些都在幕后完成，前提是您使用的是scripts软件包。也就是说，您仍然可以选择在package.json文件中本地安装依赖项以进行代码完成和参数信息：

```json
// etc.
"devDependencies": {
  "@wordpress/scripts": "^24.1.0"
},
"dependencies": {
  "@wordpress/components": "^19.17.0"
}</code>

wow, tellement! Soulignons le nouveau contenu:

• build /: Ce dossier reçoit des actifs compilés lors du traitement des fichiers de production de production.
• node_modules: Ce dossier contient toutes les dépendances de développement installées lorsque nous exécutons l'installation de NPM.
• src /: Ce dossier contient le code source du plugin, qui sera compilé et envoyé au répertoire de construction. Nous examinerons chacun d'eux plus tard.
• .EditorConfig: il contient des configurations pour peaufiner l'éditeur de code pour la cohérence du code.
• .gitignore: il s'agit d'un fichier de référentiel standard qui identifie les fichiers locaux qui doivent être exclus du suivi du contrôle de version. Vos Node_Modules devraient certainement être inclus ici.
• package-lock.json: il s'agit d'un fichier généré automatiquement qui suit les mises à jour des packages requis installés à l'aide de NPM Install.

Bloquer les métadonnées

Je veux fouiller dans le répertoire SRC avec vous, mais me concentrer d'abord sur l'un des fichiers: block.json. Si vous utilisez Create-Block, il est prêt pour vous; WordPress pousse dur pour l'utiliser comme méthode de spécification standard pour enregistrer un bloc en fournissant des métadonnées qui fournit un contexte pour que WordPress identifie simultanément le bloc et le rende dans l'éditeur de blocs.

Ce qui suit est ce qui suit @ wordpress / création-bloc génère pour moi:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

En fait, nous pouvons inclure beaucoup d'informations différentes ici, mais nous n'avons vraiment besoin que du nom et du titre. Une version super-lite peut ressembler à ceci:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Le schéma
• $ définit le format de schéma utilisé pour vérifier le contenu du fichier. Cela ressemble à une chose requise, mais il est totalement facultatif car il permet aux éditeurs de code pris en charge de vérifier la syntaxe et fournit des fonctionnalités supplémentaires telles que les infractions et la saisie semi-automatique.
• L'APIVERSION fait référence à la version de l'API de bloc utilisée par le plugin. Aujourd'hui, la version 2 est la dernière version.
• Le nom est une chaîne unique requise qui aide à identifier les plugins. Notez que j'ai ajouté CSS-Tricks / devant lui, que j'utilise comme espace de noms pour éviter les conflits avec d'autres plugins qui peuvent avoir le même nom. Vous pouvez choisir d'utiliser quelque chose comme votre acronyme (comme AS / Block-Example).
La version
• est recommandée par WordPress en tant que mécanisme de compensation de cache lors de la libération de nouvelles versions.
• Le titre est un autre champ requis qui définit le nom utilisé partout où le plugin d'affichage est.
• Les groupes de catégorie des blocs avec d'autres blocs et les affiche ensemble dans l'éditeur de blocs. Les catégories existent actuellement incluent le texte, les médias, la conception, les widgets, les thèmes et les incorporations, et vous pouvez même créer des catégories personnalisées.
L'icône
• vous permet de sélectionner quelque chose dans la bibliothèque Dascicons pour représenter visuellement votre bloc dans l'éditeur de blocs. J'utilise l'icône Format-Quote parce que nous faisons notre propre pullquote et quelque chose comme ça dans cet exemple. Nous pouvons profiter des icônes existantes au lieu d'avoir à créer la nôtre, ce qui est génial, bien que cela soit certainement possible.
• EDIDORScript est l'emplacement où se trouve le fichier JavaScript principal index.js.

Enregistrer le bloc

Une autre chose avant d'entrer dans le code réel est d'enregistrer le plugin. Nous avons simplement configuré toutes ces métadonnées et nous avons besoin d'un moyen d'obtenir WordPress pour l'utiliser. De cette façon, WordPress sait où trouver tous les actifs du plugin afin qu'ils puissent être mis en file d'attente pour une utilisation dans l'éditeur de blocs.

L'enregistrement d'un bloc est un processus en deux étapes. Nous devons l'enregistrer en PHP et JavaScript. Pour l'aspect PHP, ouvrez le fichier de plugin principal (dans ce cas, Block-Example.Php) et ajoutez ce qui suit après le titre du plugin:

<code>...</code>

C'est ce que l'utilitaire Create-Block génère pour moi, c'est pourquoi la fonction est nommée de cette manière. Nous pouvons utiliser différents noms. La clé est d'éviter les conflits avec d'autres plugins, il est donc préférable d'utiliser votre espace de noms ici pour le rendre aussi unique que possible:

npx @wordpress/create-block

Si le bloc.json contenant toutes les métadonnées de bloc est en SRC, pourquoi pointez-nous le répertoire de construction? En effet, notre code doit encore être compilé. Le package Scripts traite le code des fichiers dans le répertoire SRC et place les fichiers compilés utilisés dans la production dans le répertoire de build, tandis que Copier Block.json Fichier .

D'accord, allons à l'aspect JavaScript du bloc d'enregistrement. Ouvrez Src / index.js et assurez-vous qu'il ressemble à ceci:

{
  // 定义项目名称
  "name": "block-example",
  // 使用语义版本控制设置项目版本号
  "version": "0.1.0",
  // 项目的简短描述
  "description": "Example block scaffolded with Create Block tool.",
  // 您可以将其替换为您自己
  "author": "The WordPress Contributors",
  // 标准许可信息
  "license": "GPL-2.0-or-later",
  // 定义主JavaScript文件
  "main": "build/index.js",
  // 我们在开发过程中构建和编译插件所需的一切
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  // 定义使用脚本包的哪个版本（撰写本文时为24.1.0）
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

Nous entrons dans le monde React et JSX! Cela indique WordPress:

• Importez le module RegisterBlockType du package @ wordPress / Blocks.
• Importez des métadonnées de Block.json.
• Importez les composants d'édition et d'enregistrement de leurs fichiers correspondants. Nous ajouterons du code à ces fichiers plus tard.
• Enregistrer les blocs et utiliser les composants d'édition et d'enregistrement pour rendre des blocs et enregistrer le contenu dans la base de données.

Que se passe-t-il avec les fonctions d'édition et d'enregistrement? L'une des subtilités du développement de blocs WordPress est la distinction entre "backend" et "frontend", qui sont utilisés pour rendre le contenu du bloc dans ces contextes, où Modifier gère le rendu backend, Save écrit le contenu de l'éditeur de bloc à la base de données pour rendre le contenu sur le frontend du site Web.

Test rapide

Nous pouvons opérer rapidement et voir si nos blocs fonctionnent dans l'éditeur de blocs et rendent à l'avant. Ouvrir à nouveau index.js et utilisons les fonctions d'édition et enregistrer pour retourner certaines bases pour illustrer comment elles fonctionnent:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Il s'agit essentiellement d'une version mince de notre code précédent, juste que nous pointons directement vers les métadonnées dans Block.json pour obtenir le nom du bloc et omettre les composants d'édition et d'enregistrement car nous exécutons la fonction directement à partir d'ici.

Nous pouvons le compiler en exécutant NPM Run build sur la ligne de commande. Après cela, nous pouvons accéder au bloc nommé "Exemple de bloc" dans l'éditeur de bloc:

Si nous mettons le bloc dans la zone de contenu, nous obtiendrons le message renvoyé de la fonction d'édition:

Si nous enregistrons et publions l'article, lors de la visualisation de front-end, nous devons faire revenir le message de la fonction de sauvegarde:

Créer un bloc

Il semble que tout soit normal! Maintenant que nous avons confirmé que tout va bien, nous pouvons restaurer ce qui est dans index.js avant le test:

<code>...</code>

Notez que les fonctions d'édition et d'enregistrement sont associées aux deux fichiers existants générés par @ wordPress / Create-Block dans le répertoire SRC et contiennent d'autres importations dont nous avons besoin dans chaque fichier. Plus important encore, ces fichiers créent des composants d'édition et d'enregistrement contenant des balises de bloc.

Backend Tag (src / edit.js)

npx @wordpress/create-block

Regardez ce que nous avons fait? Nous importons des accessoires du package @ wordPress / Block-Editor, qui nous permet de générer des classes qui peuvent être utilisées pour les styles plus tard. Nous importons également la fonction d'internationalisation __ pour le traitement de la traduction.

Balise frontale (src / sauve.js)

Cela créera un composant de sauvegarde, nous utiliserons presque le même contenu que SRC / Edit.js, mais avec un texte légèrement différent:

{
  // 定义项目名称
  "name": "block-example",
  // 使用语义版本控制设置项目版本号
  "version": "0.1.0",
  // 项目的简短描述
  "description": "Example block scaffolded with Create Block tool.",
  // 您可以将其替换为您自己
  "author": "The WordPress Contributors",
  // 标准许可信息
  "license": "GPL-2.0-or-later",
  // 定义主JavaScript文件
  "main": "build/index.js",
  // 我们在开发过程中构建和编译插件所需的一切
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  // 定义使用脚本包的哪个版本（撰写本文时为24.1.0）
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

De même, nous avons obtenu une belle classe qui peut être utilisée dans CSS:

Bloc de style

Nous venons d'introduire comment utiliser les propriétés de blocs pour créer des classes. Vous lisez ceci sur un site Web lié au CSS, donc j'ai l'impression de manquer quelque chose si nous ne couvrions pas spécifiquement comment écrire des styles de blocs.

Distinguer les styles frontaux et back-end

Si vous regardez Block.json dans le répertoire SRC, vous trouverez deux champs liés au style:

• EditorStyle fournit le chemin du style appliqué au backend.
Le style
• est le chemin vers les styles partagés appliqués sur le front-end et le back-end.

Kev Quirk a un article détaillé montrant sa façon de faire en sorte que l'éditeur backend ressemble à une interface utilisateur de frontend.

Rappelez-vous que le package @ wordpress / scripts copie le fichier block.json lorsqu'il traite le code dans le répertoire / src et place les actifs compilés dans le répertoire / build. Le fichier build / block.json utilisé pour enregistrer le bloc. Cela signifie que tout chemin que nous fournissons dans SRC / Block.json doit être écrit par rapport à Build / Block.json.

en utilisant sass

Nous pouvons mettre plusieurs fichiers CSS dans le répertoire de build, reporter au chemin de la voie dans src / block.json, exécuter la construction, puis c'est fait. Mais cela ne profite pas pleinement du processus de compilation @ wordpress / scripts, qui peut compiler SASS en CSS. Au lieu de cela, nous mettons les fichiers de style dans le répertoire SRC et les importons dans JavaScript.

En faisant cela, nous devons faire attention à la façon dont @ wordpress / scripts gère les styles:

• Le fichier nommé style.css ou style.scss ou style.sass importé dans le code javascript sera compilé dans style-index.css.
• Tous les autres fichiers de style seront compilés et regroupés dans index.css.

@ WordPress / Scripts Les packages sont regroupés à l'aide de WebPack et stylisés à l'aide du plugin PostCSS. POSTCSS peut être étendu avec d'autres plugins. Le package Scripts utilise des plugins à partir de SASS, SCSS et AutopRefixer, qui peuvent tous être utilisés sans installer des packages supplémentaires.

En fait, lorsque vous démarrez le bloc initial avec @ wordPress / Create-Block, vous pouvez très bien démarrer avec les fichiers SCSS, vous pouvez utiliser ces fichiers pour commencer rapidement:

• editor.scss contient tous les styles appliqués à l'éditeur backend.
• style.scss contient tous les styles partagés par le front-end et le back-end.

Maintenant, faisons-le en écrivant des sass que nous compilons dans le bloc CSS. Bien que ces exemples ne soient pas très savés, je les écris toujours dans un fichier SCSS pour démontrer le processus de compilation.

Styles frontaux et back-end

ok, commençons par les styles appliqués à la fin et au back-end. Tout d'abord, nous devons créer SRC / Style.SCSS (si vous utilisez @ wordPress / Create-Block, il existe déjà) et assurez-vous de l'importer, nous pouvons le faire dans index.js:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Ouvrez Src / Style.SCSS et y mettez des styles de base en utilisant la classe que nous avons générée à partir de l'attribut de bloc:

<code>...</code>

c'est tout maintenant! Lorsque nous exécutons Build, cela compile pour construire / style.css et est référencé par l'éditeur de blocs et frontal.

style back-end

Vous devrez peut-être écrire des styles spécifiques à l'éditeur de blocs. Pour ce faire, créez SRC / Editor.SCSS (encore une fois, @ wordPress / Create-Block, faites cela pour vous) et y mettez des styles:

npx @wordpress/create-block

puis l'importez-le dans edit.js, qui contient notre composant Edit (nous pouvons l'importer n'importe où, mais comme ces styles sont pour les éditeurs, il est plus logique d'importer des composants ici):

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Maintenant, lorsque nous exécutons NPM Run Build, le style sera appliqué aux blocs dans les deux contextes:

Style de référence dans Block.json

Nous avons importé les fichiers de style dans edit.js et index.js, mais n'oubliez pas que l'étape de compilation génère deux fichiers CSS pour nous dans le répertoire de construction: index.css et style-index.css. Nous devons faire référence à ces fichiers générés dans les métadonnées de bloc.

Ajoutons quelques instructions aux métadonnées Block.json:

<code>...</code>

Exécuter NPM Exécutez à nouveau la construction, installez et activez le plugin sur votre site Web WordPress et vous êtes prêt à l'utiliser!

Vous pouvez exécuter votre build en mode de surveillance à l'aide de NPM Run start, et votre code sera automatiquement compilé chaque fois que vous modifiez le code et l'enregistrez.

Nous venons de toucher la surface

Le bloc réel utilise la barre latérale des paramètres de l'éditeur de blocs et d'autres fonctionnalités fournies par WordPress pour créer une riche expérience utilisateur. De plus, puisque le bloc a réellement deux versions - modifier et sauver - vous devez également réfléchir à la façon d'organiser votre code pour éviter la duplication du code.

Mais j'espère que cela aide à supprimer le mystère du processus global de création de blocs WordPress. Il s'agit en effet d'une nouvelle ère de développement WordPress. Apprendre de nouvelles façons de faire est difficile, mais j'ai hâte de le voir se développer. Des outils comme @ wordPress / Create-Block Aide, mais même alors, il est bon de savoir ce qu'il fait et pourquoi.

Le contenu que nous introduisons ici changera-t-il? Très probablement! Mais au moins, vous avez une référence de référence, car nous continuons à nous concentrer sur la maturité des blocs WordPress, y compris les meilleures pratiques pour les faire.

référence

Encore une fois, mon objectif est de planifier un chemin efficace pour saisir le développement de blocs à cette époque à croissance rapide, et les documents WordPress sont un peu difficiles à suivre. Voici quelques ressources que j'ai utilisées pour organiser ces contenus:

• Concepts clés (manuel de l'éditeur de blocs WordPress)
• Créer un tutoriel de bloc (manuel de l'éditeur de blocs WordPress)
• Metadata dans Block.json (WordPress Block Editor Manual)
• Code source du bloc Core (WordPress GitHub)
• Configuration WebPack utilisée dans le package @ wordpress / scripts (WordPress github)
• Ingénieur backend Apprenant à construire des blocs d'éditeurs de blocs, partie 1 (Tom McFarlin)
• Ryan Welcher's Twitch Live Broadcast (Ryan est un défenseur des développeurs automatitiques)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!