WordPressブロック変換

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

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

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

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

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

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

基本的なブロック変換

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 <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関数は、見つかったすべてのHTMLノードで実行されるため、必要に応じて関数からtrueを返す絶好の機会です。上記のコードでは、私は特に次のようなものを探していることに注意してください

<code>的HTML。当匹配时，转换运行，我可以返回一个`createBlock` 调用，该调用传入我使用JavaScript 从节点中提取的数据和内容。</code>別の例：貼り付けURL


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



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



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



{
  タイプ：「生」、
  優先度：8、//デフォルトを打ち負かすための高い数字
  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）、//ヘルパー関数
    }）;
  }、
}


<h3 id="それで">それで……</h3>


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



<p>今ブロックエディターが本当に好きなので、これを習得できてうれしいです。コンテンツを書いて構築することは喜びです。私はジャスティン・タドロックが言うことが好きです：</p>



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



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




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

以上がWordPressブロック変換の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。