L'année de Gutenberg de CSS-Tricks. à la fin de l'année dernière, nous avons fixé cet objectif. Nous progressons beaucoup plus rapidement que prévu, tous les nouveaux contenus sont créés dans l'éditeur de blocs1, et maintenant tout a activé l'éditeur de blocs. Cela signifie que lorsque nous ouvrons la plupart des anciens messages, nous voyons tout dans le bloc "classique". Cela ressemble à ceci:

L'ensemble du contenu de la publication est dans un seul bloc, il ne tire donc pas vraiment parti de l'éditeur de blocs. Il est toujours "visible", comme un éditeur de blocs, mais plus comme un ancien éditeur visuel utilisant TinyMCE. Je ne l'ai jamais utilisé parce que cela oblige le HTML à se casser d'une manière que je n'aime pas.

Ce qui m'inquiète le plus

La conversion d'un bloc classique en un nouveau bloc est aussi simple que de sélectionner un bloc classique et de sélectionner l'option "Convertir en bloc".

Comment l'éditeur de bloc gère le blocage de l'ancien contenu lorsque nous lui disons de le faire à partir de l'option Convert to Block? Et si le contenu est complètement détruit pendant le processus de conversion? Pouvons -nous changer?

La réponse est: elle se porte très bien . Mais… il y a encore des problèmes. Pas une "erreur", mais un cas où notre ancien contenu contient HTML personnalisé, qui ne sait pas comment y faire face - et encore moins comment le convertir en bloc que nous voulons. Il y a un moyen!

Conversion de bloc de base

C'est l'origine de l'idée de "conversion de blocs". Tous (enfin, la plupart?) Les blocs natifs ont des conversions "et" à partir ". Vous connaissez peut-être déjà la fa?on dont il se comporte dans l'interface utilisateur. Par exemple, les paragraphes peuvent être convertis en références et vice versa. Voici une capture d'écran Super Meta sur ce paragraphe:

Ces transformations ne sont pas magiques; Ils sont explicitement codés. Lors de l'enregistrement d'un bloc, vous spécifiez la conversion. Supposons que vous enregistrez votre propre bloc de code personnalisé. Vous devez vous assurer que vous pouvez le convertir ...

• De et vers les blocs de code intégrés par défaut, et peut-être d'autres blocs qui peuvent être utiles.
• Retournez au bloc de code intégré.

Cela pourrait ressembler à ceci:

 <code>registerBlockType("my/code-block", { title: __("My Code Block"), ... transforms: { from: [ { type: "block", priority: 7, blocks: ["core/code", "core/paragraph", "core/preformatted"], transform: function (attributes) { return createBlock("my/code-block", { content: attributes.content, }); }, }, ], to: [ { type: "block", blocks: ["core/code"], transform: ({ content }) => createBlock("core/code", { content }), }, ], ...</code>

Ce sont les conversions vers et depuis d'autres blocs . Heureusement, c'est un bloc très simple et nous déplacons simplement le contenu. Des blocs plus complexes peuvent nécessiter de passer plus de données, mais je n'ai pas encore traité ce cas.

Quelque chose de plus magique: la conversion de blocage du code d'origine

Voici le moment de vérité de l'ancien contenu:

Dans ce cas, la création du bloc n'est pas des autres blocs, mais du code d'origine. Littéralement, HTML est visualisé et des décisions sont prises sur les blocs à créer à partir de blocs HTML. C'est là que l'éditeur de blocs fait un si excellent travail de sélection, et où les choses peuvent mal tourner, faire de mauvaises sélections de blocs ou casser le contenu.

Dans notre ancien contenu, les blocs de code (des choses très importantes ) dans le post ressemblent à ceci:

 <code><code markup="tt">let html = `</code></code> cool `;

Parfois, la conversion des blocs traite ces blocs, en les convertissant en blocs de code natifs. Mais il y a quelques problèmes:

1. Je ne veux pas de blocs de code natif. Je veux convertir cela en notre nouveau bloc de code (il y a un article de blog ici).
2. J'ai besoin de quelques informations dans ces propriétés pour éclairer les paramètres du nouveau bloc, tels que le type du code.
3. Le HTML dans notre ancien bloc de code n'est pas échappé , j'en ai besoin pour ne pas rester coincé.

Je n'ai pas toutes les réponses ici parce que c'est un processus en évolution, mais j'ai mis en ?uvre des conversions de blocs qui fonctionnent très bien maintenant. Voici à quoi ressemble la conversion "brute" (par opposition à la conversion "bloc"):

 <code>registerBlockType("my/code-block", { title: __("My Code Block"), // ... transforms: { from: [ { type: "block", priority: 7, // ... }, { type: "raw", priority: 8, isMatch: (node) => node.nodeName === "PRE" && node.children.length === 1 && node.firstChild.nodeName === "CODE", transform: function (node) { let pre = node; let code = node.querySelector("code"); let codeType = "html"; if (pre.classList.contains("language-css")) { codeType = "css"; } if (pre.getAttribute("rel") === "CSS") { codeType = "css"; } if (pre.classList.contains("language-javascript")) { codeType = "javascript"; } if (code.classList.contains("language-javascript")) { codeType = "javascript"; } // ... other data wrangling... return createBlock("csstricks/code-block", { content: code.innerHTML, codeType: codeType, }); }, }, ], to: [ // ... ], // ... }</code>

La fonction isMatch s'exécute sur chaque n?ud HTML qu'il trouve, c'est donc une excellente occasion de retourner true de la fonction si vous en avez besoin. Notez que dans le code ci-dessus, je cherche surtout quelque chose qui ressemble

<code>的HTML。當(dāng)匹配時，轉(zhuǎn)換運(yùn)行，我可以返回一個`createBlock` 調(diào)用，該調(diào)用傳入我使用JavaScript 從節(jié)點(diǎn)中提取的數(shù)據(jù)和內(nèi)容。</code> Un autre exemple: URL coller


<p>La conversion "brute" ne se produit pas seulement lorsque vous "Converti en bloc". Cela se produit également lorsque vous collez le contenu dans l'éditeur de blocs. Vous avez peut-être déjà vécu cela. Supposons que vous ayez copié un balisage de table de quelque part et que vous l'avez collé dans l'éditeur de blocs - il pourrait être collé comme table. L'URL YouTube peut être collée dans l'intégration. Ce genre de chose est la raison pour laquelle la copie / coller à partir de documents Word, etc. a tendance à fonctionner si bien avec l'éditeur de blocs.</p>



<p>Supposons que vous souhaitiez effectuer un comportement spécial lorsque vous collez une URL d'un certain type dans l'éditeur. C'est ainsi que j'utilise un bloc d'intégration de codepen personnalisé. J'espère que si l'URL Codepen.io est collée, elle utilisera ce bloc personnalisé au lieu de l'intégration par défaut.</p>



<p>Voici une conversion "de" qui ressemble à ceci:</p>



{
  Type: "brut",
  Priorité: 8, // Nombre plus élevé pour battre le défaut
  Ismatch: (n?ud) =>
    Node.NodeName === "P" &&
    node.innertext.startswith ("https://codepen.io/"),

  transform: function (node) {
    return CreateBlock ("CP / Codepen-Gutenberg-Embed-Block", {
      Penurl: node.innertext,
      pénide: getPenid (node.innertext), // fonction d'assistance
    });
  },
}


<h3>donc……</h3>


<p>Est-ce en désordre? Quelque chose. Mais il est puissant et répond à vos besoins. Si vous avez un ancien site Web avec beaucoup de HTML personnalisés, du code court et plus encore, alors entrer dans la conversion de blocs est la seule issue.</p>



<p>Je suis heureux de ma?triser cela, car j'aime vraiment l'éditeur de blocs en ce moment. C'est un plaisir d'écrire et de créer du contenu avec. J'aime ce que Justin Tadlock dit:</p>



<blockquote><p>Le système de bloc ne dispara?tra pas. WordPress est allé au-delà du stade où nous devons traiter l'éditeur de blocs comme une entité distincte. Il fait partie intégrante de WordPress et finira par toucher plus de zones en dehors des écrans d'édition.</p></blockquote>



<p>Il existera toujours. Il est essentiel d'embrasser l'éditeur de blocs et de le faire correspondre à nos souhaits.</p>




<ol><li>Pourquoi l'appelons-nous? "Gutenberg" semble ne plus convenir. On a l'impression de s'estomper, même si son développement est toujours dans le plugin Gutenberg. Je pense que je l'appellerais simplement un "éditeur de blocs", sauf en faisant référence spécifiquement au plugin.</li></ol>

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!