gutenberging

WordPressの新しい編集者であるGutenbergは、1年以上リリースされています。今、それを取り巻く論争は沈静化したようです。ユーザーエクスペリエンスと使いやすさを改善するのに十分な時間があるため、人々はその可能性をより明確に見ています。振り返ることはできません。

Haris Zulfiqarのような著者はそれについて楽観主義を表明し、Nick Hamzeはブロックが次世代編集者の方向であると信じていました。

まだいくつかの欠点があると思います（たとえば、ブロックリファレンスにリストを追加できないのはなぜですか？なぜリンクのクラスを追加できないのですか？なぜ矢印キーでブロックセレクターを閲覧できないのですか？）、私は一般的にとても気に入っています。そして、それは単なる概念的な好きなものではありません。私は2020年の目標の1つとしてGutenbergへのCSS-Tricksの移行をリストし、1月にすぐに実装を開始しました。

初めて甘さを味わった

プレスリリースの作成体験を新しい編集者に変換したため、Gutenbergを使用していくつかの経験を蓄積しました。私たちのプレスリリースは、パブリックURLに投稿されたCSS-Tricksのカスタム記事タイプで、カスタムRSSフィードがあり、MailChimpによってrawいされて読まれています。

Gutenberg Rampプラグインを介してプレスリリースのGutenbergを簡単に有効にすることができます。これは、単一のIDを使用したカスタム投稿タイプと投稿で非常にうまく機能しますが、新しいコンテンツのみでGutenbergを有効にしたいと思います。最後に、プラグインを変更しました。これが良い考えだと思うなら、私のプルリクエストをチェックしてください。

これは私にとって重要です。なぜなら、古い編集者で作成された数万の古い記事があり、編集のために開かれたときにGutenbergが破損していない場合でも、これらの記事や「クラシック」編集者の編集体験は提供されません（たとえば、特別なコードブロックなどの特別なボタンがあります）。

古いコンテンツを処理します

Gutenbergが古い投稿を開いたときに適切なブロックに変換できるのは素晴らしいことですが、今は夢のように思えます。これは、HTMLを解析し、どのブロックがブロックのように見えるかを特定し、最も重要なカスタムブロックを含む最も適切なブロックを特定し、間違っていない方法でこれを正確に行う必要があることを意味します。

現在、古いコンテンツは古いエディターを使用しています。編集者からの1つの記事にGutenbergを有効にする簡単な方法もあります。 （グーテンバーグランプの使用に値をハードコードできましたが、これは少し退屈です。）

古い編集者が悪化することを少し心配しています。たとえば、私がこれに取り組み始めた主な理由の1つは、このサイトで、古い編集者がページの下部にランダムにスクロールすることです。理由はわかりませんが、作成するのは非常に苦痛を感じさせます。それは私が積極的に開発している編集者と一緒にそれを体験したいと思うだけの些細なバグです。

しかし、たとえ古い編集者が本当に悪くなったとしても、すべてのためにグーテンバーグを可能にすることはそれほど悪くはありません。すべての古いコンテンツは大きな「クラシック」ブロックにあり、すべてが問題ありません。

とにかく - それはうまく機能します！

Gutenbergを新しい記事に有効にすること自体は大きな挑戦ですが、それを有効にしており、それを使用してすべての新しいコンテンツを作成しています。私はここで自分で話しているだけですが、私はそれが大好きです。それはコンテンツ作成のための大きなアップグレードであり、私はそれに少し取りつかれています。チームもとても幸せです。

カスタムブロックを作成します

派手なテキストブロックをご覧ください：

あなたは、カスタムブロックを作成するチャンスを考えているかもしれません。実際、大規模なシリーズでグーテンバーグブロックを学習して作成する方法を導入しました。しかし、これは非常に関連性のある質問を提起します：ブロックを構築しないとき。このブロックの唯一のユニークなことは、CSSがブロックをスタイリングするために使用する特別なクラス名があることです。それだけです。クラス名を追加することは、各ブロックの組み込み機能であるため、ここでカスタムブロックは必要ありません。

実際、さらに一歩進んで、この正確なクラスを「再利用可能なブロック」として作成して、クラス名を覚えたり入力したりする必要さえないようにすることができます。このクラスでテキストブロックを作成した後、Kebabメニューから「再利用可能なブロックに変換」を選択し、再利用可能なブロックとして永久に保存されます。

私たちは今、私たちの「記事シリーズ」ブロック（特別なものを持つもの）のような他のいくつかのものにそれを使用しました<div> - クラスのラッパーで<code><ul></ul>そして<ol></ol>）および脚注ブロックなど。しかし、いくつかのカスタムブロックも必要です。このため、Create-Guten-Blockを使用して特別なプラグインを作成して作成しました。私たちにとって非常に重要なブロックの1つは、コードブロックだと思います。コードブロックにはすでにネイティブブロックがあります。基本的にコードを1つに入れます

<code>标签中，并且来自Gutenberg的内容默认情况下已经转义。</code>派手なコードブロックを使用すると、言語を選択し、特定の行を強調し、カスタムタグを提供できます。これは、HTML属性を介して古い編集者ですべて可能であるため、このブロックはこれに加えて素晴らしいUIを提供します。



<p>ブロックはCSS-Tricksに非常に固有であるため、オープンソースをオープンソースにすることはあまり意味がありません。しかし、私が作成した他のブロックは、オープンソース、つまりCodepen Embedブロックです。 Codepenブログに書いています。</p>



<p>Codepen URLを貼り付けることができます。これは、Codepen埋め込みに変換されます。 Oembedはすでにこれをデフォルトで実行していますが、このプラグインを使用すると、高さ、テーマ、デフォルトのタブなどのすべてを制御できます。</p>



<p>作成中に埋め込まれたペンを実際に見るのは素晴らしいことです！</p>



<h3 id="未解決の課題">未解決の課題</h3>



<p>現在の最大の課題は、画像の処理です。古い編集者では、非常に非常に派手な雲のようなセットアップを統合しました。画像は自動的に雲のようにアップロードされ、ブレークポイントはプログラムで決定され、複数のサイズが作成され、レスポンシブ画像構文が作成され、HTMLで終わるものは、Cloudinary Hosted画像を備えた完璧なレスポンシブ画像構文です。これにより、CDNを利用して、最適な形式で画像を配信できます。</p>



<p>これは、Gutenbergで作成された記事では発生しません。 ？</p>



<p>ウェブサイト上のどこでも画像をうまく処理する新しいシステムを見つけたり開発したり、より簡単にメンテナンスされていないシステムを使用する必要があります。この問題を解決するためにCludynaryを使用するかもしれません。他のサービスを試してみるかもしれません。WordPressは、Jetpackサイトのアクセラレータを搭載した直接処理してもらうかもしれません。まだわかりません。常に何かすることがあります。</p>



<ol><li>WordPress自体もブロック足場ゲームに参加していると思います。彼らの「create-wordpress-block」コンセプトはGutenbergリポジトリ自体に入り、 `npm init @wordpress/block [options] [slug]`で開始できます。</li></ol>