九つの製品、
一つの WordPress サイト、
すべての画面に理由があります。

ヘッダーからフッターまで、ブロックエディターの中で。

WordPressのブロックエディターは高速でネイティブですが、ひとつの数値にデスクトップ・タブレット・モバイルで別々の値を与えることはできません — WordPress 7.1でも改めて確認しました。ページビルダーを入れる技術的な理由として最も多いのがこれです。MevvBlocksはこの隙間を埋め、さらに先へ進みます:110のブロック、ヘッダーからフッターまでのテーマテンプレート、投稿グリッドとループビルダー、フォームエンジン、ポップアップ、変形とマスク、サイト全体のカスタムコード、サイトパレットを扱う1画面、画像のWebPとAVIF、ブロック単位のキャッシュ、取り繕わずに事実を伝えるアクセシビリティ監査、そして実際の訪問者のデータで動くCore Web Vitals画面。カタログはトグルと入れ子タブから、円グラフ、メディアプレイリスト、ツールチップ、ニュースレターフォーム、SVGアニメーションまで広がり、エディター標準のスタイルパネルに8つのブロックスタイルが並びます — そのすべてが、訪問者が動きの低減を求めていれば動くのをやめます。キャンバスももはや近似ではありません:エディターはページが出力するのと同じCSSをサーバーに要求するので、並べたものがそのまま公開されます。そのうち23のブロックはWooCommerce用で、どれもWooCommerceを描き直しません:WooCommerce自身のテンプレートを呼ぶので、テーマもプラグインもそのまま動きます。

すべての数値を、画面幅ごとに

余白、文字サイズ、カラム数は、デスクトップ・タブレット・モバイルで別々の値を持てます。WordPress コアにはできません — これは 7.1 で実際に計測した結果であり、推測ではありません。同じパネルから、絶対配置や固定配置で要素を通常の流れから浮かせることもでき、そのオフセットと z-index も端末ごとに指定できます。

110のブロック

レイアウト、テキスト、メディア。メニュー、検索、投稿グリッドとループビルダー。テーマテンプレート向けのサイトロゴ、ページタイトル、パンくず、投稿情報、著者ボックス。動画、音声、プレイリスト、ギャラリー、表、FAQ、タイムライン、コード。トグル、入れ子タブ、円グラフ、ツールチップ、ニュースレター、ソーシャルフィード、フリップボックス、行動喚起、アニメーション見出し、ビフォー/アフター、ホットスポット、オフキャンバスパネル、連絡ボタン — そしてWooCommerce用に23、商品ギャラリーからカート、チェックアウト、ミニカートまで。WooCommerceなしなら87。

8つのブロックスタイル、WordPressが既に用意しているパネルに

グラデーションオーバーレイ、ホバーまでグレースケールまたはぼかし、円形または角丸のマスク、浮き上がり、ズーム、傾き — コアのスタイルパネルから選ぶので、新しく覚えるコントロールはなく、選択はテーブルの設定ではなくマークアップ上のクラスとして残ります。ホバー時の変形は、訪問者のシステムが動きの低減を求めていればすべて無効になり、SVGアニメーションの静止画も同じように差し替えられます。

サービスを必要としないニュースレターフォーム

アドレス、任意の名前、同意チェックボックス、そして素のPOST — フォームエンジンと同じHMACで署名するので、キャッシュされたページが期限切れのnonceで死ぬことはありません。ハニーポットは黙って飲み込まれ、レート制限はアドレス単位で、アドレスは他のフォーム送信と同じ場所に届きます。リストもAPIキーも、どこかへの通信もありません:mevvblocks_newsletter_subscribeアクションが、確認済みのアドレスをあなたが既に使っている仕組みに渡します。

ACFフィールドを含む動的テキスト

見出し、テキスト、ボタン、画像は、入力した内容ではなく投稿から値を読み取れます:タイトル、抜粋、著者、日付、カテゴリー、タグ、アーカイブタイトル、検索語、WooCommerceの価格・SKU・在庫、あるいはキー指定のカスタムフィールド。Advanced Custom Fieldsが有効なときはフィールドをget_field()経由で読むので整形済みの値が得られ、アンダースコアで始まるキーは公開されずに拒否されます。

エディターで見えるものが、そのままページに出力されます

キャンバスが表示するのは、もう近似ではありません。余白、間隔、方向、揃え、背景、角丸、影、変形、配置は、フロントエンドが実際に使う値のまま表示されます。その CSS を生成するスタイルエンジンは一つで、エディターはそれをサーバーから取得します。JavaScript で二つ目のエンジンを書けば、やがて食い違う二つの写しを抱えることになったはずです。計測値: 旧キャンバスはページと 24 個のレイアウトプロパティで食い違っていました。現在は 64 個中 0 個です。

実際の訪問者から得る Core Web Vitals

LCP、CLS、INP は、サイトを訪れた人のブラウザで計測され、画面には 28 日間の 75 パーセンタイルが表示されます。ラボ計測ではなく、Search Console が見るのと同じフィールドデータです。サンプルが 100 件に満たない場合は、数値を一切表示しません。わずかな計測数から出したパーセンタイルは、ただのノイズだからです。IP も Cookie も識別子も収集せず、データがお客様のサーバーの外へ出ることはありません。

お客様自身のキーで使う AI

文章の作成、書き直し、要約、翻訳、画像の代替テキスト生成。お客様がご自身の API キーを入力すると、リクエストはサイトから直接プロバイダーへ送られます。お客様のテキストが当社に届くことはなく、利用枠もお客様のものです。結果は提案として表示され、ブロックへ直接書き込まれることはありません。

テーマのパレットを、書き写さずに使う

色とタイポグラフィは、有効化しているテーマのtheme.jsonから読み込み、プラグイン独自のパレットの空いている枠を埋めるのに使えます。この橋渡しはあえて一方向です — テーマ側に何かが書き戻されることは一切なく、テーマの更新時に自分のファイルが書き換えられていることもありません。有効化するまではオフです。

既にあるメニューに追加されるメガパネル

新しいブロックではなく、ナビゲーションブロックの設定です。サブメニューは最大4列のフル幅パネルとして開き、サブメニューのない項目でパネルをオンにすると、アクセシビリティチェックが空のボックスを表示する代わりにその旨を知らせます。

一文からのページの最初の下書き

ページの内容を説明すると、モデルがプラグイン独自のテンプレートライブラリからセクションを選びます。マークアップを書くことは一切ないため、ページに反映されるのは生成されたHTMLではなく編集可能なブロックです。存在しないセクション名が指定された場合は、推測で補うのではなく除外して報告します。ページは常に下書きとして保存され、APIキーはご自身のものを使います。

訪問者には見えないメモ

どのブロックにもチーム用のメモを貼り付け、解決済みにしたり、削除したりできます。メモはエディターの中だけに存在し、それを出力しうるフロントエンドのフックは一つもありません。

速く、しかも計測済み

ブロックの出力はキャッシュされ、画像は元のファイルの隣に WebP または AVIF として変換されます。元のファイルには手を触れません。計測値: ブロックの描画時間は 33〜72% 減、画像の容量は 39〜78% 減。画像は <picture> 要素で配信されるため、誰にも同じ HTML が届きます。サーバー側で訪問者ごとに出し分けることこそが、ページキャッシュを汚す原因です。スマートフォンには別の画像を配信することもできます。同じ写真の小さな複製ではなく、別のカットです。それでも選ぶのはブラウザです。

依存先ではなく、フォームエンジンを

16 種類の項目、サーバー側での検証、黙って呑み込むハニーポット、そしてフォーム送信を保管する画面。フォームは JavaScript なしでも動きます。ページの中で実際に何かを行う唯一の部分だからです。

条件付きのテーマテンプレート

ヘッダー、フッター、個別ページ、アーカイブ、検索、404。いずれも、すでにお使いの WordPress エディターの中で作ります。コアに追随させ続けなければならない二つ目のエディターは要りません。

切り替えても生き残るポップアップ

読み込み時、スクロール量、離脱の兆候、クリック、無操作の経過で表示します。表示回数は訪問者自身のブラウザで数えるため、サーバー側で誰かを特定する必要はありません。

サイトのパレットを、一つの画面で

色とタイポグラフィを一箇所に、元の変数名のまま集めます。そのため、切り替え前に作られたページも、参照を失うことなく新しいパレットを受け取ります。

オーバーレイではなく、アクセシビリティ監査を

サイトはアクセシブルだと称するウィジェットを、ページに後付けすることはしません。各ブロックで足りていないもの — 代替テキストの欠落、崩れた見出し順、不足したコントラスト — を、編集している最中に報告します。

ライブラリなしのスライダー・タブ・アコーディオン

スクロールはネイティブの scroll-snap、アコーディオンは details 要素です。スクリプトが読み込まれなくても、何も隠れません。隠れたコンテンツは、たどり着けないコンテンツだからです。

サーバー側で描画し、ライセンスには縛られません

保存された HTML が持てるのは一つの画面幅の値だけなので、CSS はリクエスト時に生成します。その経路にライセンス確認は一つもありません。ライセンスが切れても、公開済みのページが暗くなることはありません。

製品ページ ↗ ドキュメント ↗ ライブデモ ↗