CSS-TricksのGutenbergの年。昨年末に、この目標(biāo)を設(shè)定しました。予想よりもはるかに速く進(jìn)行しており、すべての新しいコンテンツがブロックエディター1で作成されており、すべてがブロックエディターを有効にしているようになりました。これは、古い投稿のほとんどを開くと、「クラシック」ブロックにすべてが表示されることを意味します。このように見えます：

投稿のコンテンツ全體が単一のブロックにあるため、ブロックエディターを?qū)g際に活用していません。ブロックエディターのように、まだ「可視」ですが、Tinymceを使用している古いビジュアルエディターのようです。 HTMLに私が嫌いな方法で壊すように強(qiáng)制するので、私はそれを使用したことがありません。

私が最も心配していること

クラシックブロックを新しいブロックに変換することは、クラシックブロックを選択して「ブロックに変換」オプションを選択するのと同じくらい簡(jiǎn)単です。

ブロックエディターは、Convert to Blockオプションからこれを行うように指示するときに、古いコンテンツのブロッキングをどのように処理しますか？変換プロセス中にコンテンツが完全に破壊された場(chǎng)合はどうなりますか？切り替えることはできますか？

答えは次のとおりです。それは非常にうまくいきます。しかし…まだ問題があります。 「エラー」ではなく、古いコンテンツにカスタムHTMLが含まれている場(chǎng)合、それを処理する方法がわかりません。方法があります！

基本的なブロック変換

これは、「ブロック変換」のアイデアの起源です。すべての（まあ、ほとんど？）ネイティブブロックには、「から」と「From」の変換があります。あなたはすでにUIでそれがどのように振る舞うかに精通しているかもしれません。たとえば、パラグラフは參照に変換でき、その逆も同様です。この段落に関するスーパーメタスクリーンショットは次のとおりです。

これらの変換は魔法ではありません。それらは明示的にエンコードされています。ブロックを登録するときは、変換を指定します。獨(dú)自のカスタムコードブロックを登録しているとします。あなたはそれを変換できることを確認(rèn)する必要があります...

• 內(nèi)蔵コードブロックから、およびおそらく便利な他のブロックから。
• 內(nèi)蔵コードブロックに戻ります。

このように見えるかもしれません：

 <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>

これらは、他のブロックとの間での変換です。幸いなことに、それは非常にシンプルなブロックであり、コンテンツを動(dòng)かしているだけです。より複雑なブロックでは、より多くのデータを渡す必要があるかもしれませんが、私はまだこのケースを処理していません。

もっと魔法のようなもの：元のコードからの変換をブロックします

これが古いコンテンツの真実の瞬間です：

この場(chǎng)合、ブロックの作成は他のブロックからではなく、元のコードからのものです。文字通り、HTMLが表示されており、HTMLブロックから作成するブロックについて決定が下されています。これは、ブロックエディターがこのような素晴らしい選択の仕事をしている場(chǎng)所であり、物事がうまくいかない、悪いブロックの選択、またはコンテンツを破ることができる場(chǎng)所です。

私たちの古いコンテンツでは、投稿のコードブロック（非常に重要なこと）が次のようになります。

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

ブロック変換はこれらのブロックを処理し、それらをネイティブコードブロックに変換することがあります。しかし、いくつかの問題があります：

1. ネイティブのコードブロックは必要ありません。これを獨(dú)自の新しいコードブロックに変換したい（ここにブログ投稿があります）。
2. コードのタイプなど、新しいブロックの設(shè)定を通知するには、これらのプロパティにいくつかの情報(bào)が必要です。
3. 古いコードブロックのHTMLは逃げられていません。行き詰まらないようにする必要があります。

進(jìn)化するプロセスであるため、ここにはすべての答えがありませんが、今では非常にうまく実行されるブロック変換を?qū)g裝しています。 （「ブロック」変換とは対照的に）「生」変換が次のように見えます。

 <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>

isMatch関數(shù)は、見つかったすべてのHTMLノードで実行されるため、必要に応じて関數(shù)からtrueを返す絶好の機(jī)會(huì)です。上記のコードでは、私は特に次のようなものを探していることに注意してください

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


<p>「生の」変換は、あなたが「ブロックに変換する」ときだけ起こるわけではありません。これは、コンテンツをブロックエディターに貼り付けたときにも発生します。あなたはこれを以前に経験したことがあるかもしれません。どこかからテーブルマークアップをコピーしてブロックエディターに貼り付けたとします - テーブルとして貼り付けられる可能性があります。 YouTube URLは埋め込みに貼り付けられます。この種のことは、単語(yǔ)ドキュメントなどからコピー/貼り付けがブロックエディターで非常にうまく機(jī)能する傾向がある理由です。</p>



<p>エディターに何らかのタイプのURLを貼り付けたときに、特別な動(dòng)作を?qū)g行したいとします。これは、カスタムCodepen Embedブロックの使用方法です。 codepen.io URLが貼り付けられている場(chǎng)合、デフォルトの埋め込みの代わりにこのカスタムブロックを使用することを願(yuàn)っています。</p>



<p>これが次のように見える「From」変換です。</p>



{
  タイプ：「生」、
  優(yōu)先度：8、//デフォルトを打ち負(fù)かすための高い數(shù)字
  isMatch ：（ノード）=>
    node.nodename === "p" &&
    node.innertext.startswith（ "https://codepen.io/"）、

  変換：function（node）{
    return createblock（ "cp/codepen-gutenberg-embed-block"、{
      Penurl：node.innertext、
      Penid：getPenid（node.innertext）、//ヘルパー関數(shù)
    }）;
  }、
}


<h3>それで……</h3>


<p>面倒ですか？何か。しかし、それは強(qiáng)力であり、あなたのニーズを満たしています。多くのカスタムHTML、ショートコードなどを備えた古いWebサイトがある場(chǎng)合、ブロック変換に移行することが唯一の方法です。</p>



<p>今ブロックエディターが本當(dāng)に好きなので、これを習(xí)得できてうれしいです。コンテンツを書いて構(gòu)築することは喜びです。私はジャスティン?タドロックが言うことが好きです：</p>



<blockquote><p>ブロックシステムは消えません。 WordPressは、ブロックエディターを別のエンティティとして扱う必要がある段階を超えています。これはWordPressの不可欠な部分であり、最終的に畫面の編集外のより多くの領(lǐng)域に觸れます。</p></blockquote>



<p>それは常に存在します。ブロックエディターを受け入れ、それを私たちの願(yuàn)いに合わせることが鍵です。</p>




<ol><li>なぜ私たちはそれを呼ぶのですか？ 「グーテンバーグ」はもはや適していないようです。たとえその開発がまだGutenbergプラグインにあるとしても、それは消えていくように感じます。プラグインを特に參照しない限り、「ブロックエディター」と呼ぶだけです。</li></ol>

以上がWordPressブロック変換の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。