Jamie Marsland がブロック エディターを使用して 20 分で WordPress.org のホームページを再作成
公開: 2022-08-19WordPress.org の新しいホームページとダウンロード ページのデザインを実装するのにどれくらいの時間がかかるかについての最近の論争に対応して、グーテンベルグの YouTuber Jamie Marsland は、ブロック エディターでそれを再作成することを試みることにしました.
Matt Mullenweg は、新しいデザインが開発に移行する計画についてコメントし、「実装に数週間ではなく数時間」かかるべきだったと述べています。 彼の最も扇動的なコメントは、WordPress の競合他社に言及し、ブロック エディターでの作業の現実についてその後の会話を引き起こしました。
「これは非常に基本的なレイアウトです。Squarespace、Wix、Webflow、または WP ページ ビルダーの 1 つを 1 人で 1 日以上使用することは想像しがたいです」と Mullenweg 氏は述べています。
マースランドは、グーテンベルグを使って挑戦することにしました。 この演習では、彼は WordPress の最新のデフォルト テーマである Twenty Twenty-Two を使用しました。 彼の結果は WordPress の新しいデザインと同じではありませんが、非常に近く、約 20 分でホームページを作り上げることができました。
ビデオ (下に埋め込まれています) では、Marsland がホームページの各セクションの作成について説明しています。 彼は、ブロック エディターのパワー ユーザーと呼ばれる人物です。 行、列、およびグループをすばやくシャッフルし、必要に応じてパディングとマージンを調整し、各セクションに対応するデザインの色を割り当てることができます。 現時点では、これはほとんどの平均的な WordPress ユーザーができることではありません。そのため、ビデオは視聴者から非常に強い反応を示しました。 Marsland の YouTube チャンネルは、ユーザーが Gutenberg を使用してページを作成し、WooCommerce を使用してストアを作成できるようにすることを中心にしています。
「私の結論は、設計の 95% をすばやく完了するのは非常に簡単ですが、私の経験では常に最後の 5% に最も時間がかかるということです」と Marsland 氏は言います。 「私の推測では、遅延の原因となったのは内部プロセスに関するものでしたが、関与せずに確実に言うのは難しいです. デザインを構築する際にグーテンベルクの問題ではないことを本当に示したかったのです (Matt Mullenweg が Wix と Squarespace と他の WP ページビルダーについて言及したように)。」
Automattic が後援するこのプロジェクトの寄稿者である Alex Shiels は、「a11y、応答性、ブラウザーの互換性、SEO、およびパフォーマンスに関する合理的な基準」に向けた取り組みなど、ブロック エディターとは関係のないいくつかの項目を挙げて、遅延を引き起こしました。さまざまな大陸の貢献者と協力しています。
Marsland 氏の試みに応えて、WordPress 開発者の Patrick Boehner 氏は、細かい部分が非常に重要であるとコメントしました。 「最初にデザインが主導したものと、エディターでデザインされたものを明確に区別できます」と Boehner 氏は言います。
グーテンベルクが WordPress に登場してから 5 年が経ちましたが、テーマ開発者は、ブロック ファーストのアプローチを念頭に置いて作成されていないデザインに命を吹き込むという課題にいまだに取り組んでいます。
WordPress開発者のJon Brown氏は、「伝統的にモックアップされたページデザインを採用し、ブロックを使用してそのデザインを実行することは、依然として根本的に困難または不可能です. "これは問題です。
「確かに、ブロックは「ブラウザでページをデザイン」し、ブロックから得られるものを受け入れるのに問題はありませんが、モックアップに基づいて応答性が高く、アクセスしやすく、ピクセル パーフェクトなレイアウトを生成するために必要な柔軟性とコントロールがブロックには引き続き欠けています。 .
「以前は 1 日と 12 行の php と 12 行の css が必要でしたが、今ではカスタム ブロックの構築に数週間かかっています。これは、コア ブロックをフックで簡単に調整できず、必要な基本的な制御が欠けているためです。」
Gutenberg の貢献者は流動的なタイポグラフィを導入することで進歩を遂げており、デザイン ツールの一貫性の向上に関連する多くの問題を追跡しています。 その間、テーマ開発者は、ブロック エディターが成熟し、デザインを即座に応答できるようにすることを望んでいる人々に対応するために、必要な成長の苦痛に耐えています。
「私は完全な FSE テーマをゼロから構築してきましたが、エディター、theme.json、および最小限のカスタム CSS を使用して、自分のデザインをどれだけうまく複製できたかに驚きました」と、ベテランのテーマ開発者である Mike McAlister 氏は述べています。 . 「確かに、いろいろいじくり回す必要がありましたが、それでも私は感銘を受けました。
「しかし、Jon が言及しているように、小さな画面 (エディターでモバイル ファーストのデザインを試す勇気がある場合は大きな画面) に合わせて何かを調整する必要があるとすぐに、壁にぶつかります。 これは、マージン、パディング、およびブロック ギャップで特に顕著であり、これらにはまだレスポンシブ コントロールがありません。 これは、.org の新しいテーマで CSS を介して調整されていることがわかります。」
応答性は、単にブロック エディターでデザインを再作成するよりもデザインの実装に時間がかかる理由として、Shiels 氏が挙げた問題の 1 つです。
「しかし、応答性に改善の兆しが見えています」と McAlister 氏はコメントしています。 「流動的なタイポグラフィとclamp()は確かにタイポグラフィをチェックするのに役立ちましたが、さらに細かい制御が必要な状況が常にあります. 他のすべてのサイト ビルダーはこれを解決しています。WordPress ができない、またはできないと考える理由はありません。 (最近ではトラフィックの 50 ～ 60% がモバイル デバイスから来ているので、そう願っています!)
「これらの増大する苦痛を乗り越える最善の方法の 1 つは、できるだけ多くのドッグフーディングを行うことです。エディターと FSE を使用して、これらの盲点を明らかにするために、できるだけ多くの現実のシナリオを構築します。」
Marsland の短い演習は、ブロック エディターの使い方を知っていれば、WordPress.org のデザインを短時間でどれだけ再現できるかを示しています。 彼は、Gutenberg のページ作成 UI が、他のアプリケーションで作成されたデザインを再現する際の足かせにならないことを証明することに成功しました。 むしろ、アクセシビリティ、応答性、SEO の考慮事項など、開発者が一般的にエディタの外で解決しなければならないその他すべての関連チェックリスト項目です。 グーテンベルクが応答性とアクセシビリティに関連する余分な作業を減らすことに近づくほど、自分で思いついたデザインを作成しようとする通常のユーザーにとって、より親しみやすくなります。