WordPress 7.1 · core/group
<!-- wp:group {"style":{"spacing":{"padding":
{"top":"100px","bottom":"100px"}
}}} -->値は一つ。1440 では 100 ピクセル、390 でもやはり 100 ピクセルのままです。
BLOCKS
無料版あり
MevvBlocks
ヘッダーからフッターまで、ブロックエディターの中で。
WordPress のブロックエディターは高速でネイティブですが、一つの数値にデスクトップ・タブレット・モバイルそれぞれ別の値を与えることができません。これは WordPress 7.1 で改めて確認した事実であり、人がページビルダーを入れる最も多い技術的理由でもあります。MevvBlocks はこの穴を塞ぎ、さらに先へ進みます。101 個のブロック、ヘッダーからフッターまでのテーマテンプレート、投稿グリッドとループビルダー、フォームエンジン、ポップアップ、変形とマスク、サイト全体のカスタムコード、サイトパレットを一画面で扱う機能、画像の WebP と AVIF、ブロック単位のキャッシュ、ごまかさずに真実を伝えるアクセシビリティ監査、そして実際の訪問者のデータで満たされる Core Web Vitals 画面。キャンバスももはや近似ではありません。エディターはページが実際に出力するのと同じ CSS をサーバーに要求するため、並べたとおりのものが公開されます。うち 20 のブロックは WooCommerce 向けで、どれも WooCommerce を描き直しません。WooCommerce 自身のテンプレートを呼び出すので、テーマもプラグインもそのまま動き続けます。
課題
コアブロックが持てる数値は、一つだけです。
ブロックエディターでセクションに余白を与えると、その値はただ一つの数値になります。同じ数値が 1440 ピクセルの画面にも、390 ピクセルのスマートフォンにも出力されます。デスクトップでちょうどよく見える余白が、スマートフォンではページを分断してしまう。これまでの答えは、手書きの CSS かページビルダーのどちらかでした。これはその三つ目の答えです。同じ設定の隣に、タブレットとモバイルの値を置きました。
MevvBlocks · mevvsoft/container
<!-- wp:mevvsoft/container {"ayarlar":{
"padding": {"top":"100","unit":"px"},
"padding_tablet": {"top":"64", "unit":"px"},
"padding_mobile": {"top":"40", "unit":"px"}
}} -->同じ設定に、三つの値。ブロックのほかの部分は何も変わりません。
サーバーが出力するもの
.e-con-1a2b { --padding-top:100px }
@media (max-width:1024px) { .e-con-1a2b { --padding-top:64px } }
@media (max-width:767px) { .e-con-1a2b { --padding-top:40px } }保存された HTML は一つの画面サイズ分の値しか持てません。そのため CSS はリクエスト時に生成されます。ライセンスが失効したあともこれらの値が出力され続けるのは、これが理由です。
- デスクトップ 100 px
- タブレット · ≤1024 64 px
- モバイル · ≤767 40 px
コアブロックが画面サイズごとに値を変えられないことは、ドキュメントからの引き写しではなく WordPress 7.1 そのもので確認しました。core/group が対応しているのは余白、背景、最小高さ、境界線、そしてフレックスまたはグリッドレイアウトで、そのいずれもが単一の値です。上に示した画面の区切りはプラグイン独自のもので、メディアクエリも実際に書き出されるものです。
できること
出発点はスマートフォン。けれど、そこで終わりません。
サイトに必要なのは余白だけではありません。お問い合わせフォーム、あとから編集できるヘッダーとフッター、あとから変えられるパレット。空のページから作り始める方もいれば、ページビルダーから移ってくる方もいます。どちらにせよ、ここにある一つひとつは、それが無くて何かが壊れたから存在しています。
すべての数値を、画面幅ごとに
余白、文字サイズ、カラム数は、デスクトップ・タブレット・モバイルで別々の値を持てます。WordPress コアにはできません — これは 7.1 で実際に計測した結果であり、推測ではありません。同じパネルから、絶対配置や固定配置で要素を通常の流れから浮かせることもでき、そのオフセットと z-index も端末ごとに指定できます。
101 個のブロック
レイアウト、テキスト、メディア。メニュー、検索、投稿グリッド、ループビルダー。テーマテンプレート向けのサイトロゴ、ページタイトル、パンくず、投稿情報、著者ボックス。動画、ギャラリー、テーブル、FAQ、タイムライン、コード。フリップボックス、CTA、アニメーション見出し、ビフォー/アフター、ホットスポット、オフキャンバスパネル、連絡ボタン。さらに商品ギャラリーからカート、チェックアウトまで WooCommerce 向けが 20 個。WooCommerce を使わない場合は 78 個です。
エディターで見えるものが、そのままページに出力されます
キャンバスが表示するのは、もう近似ではありません。余白、間隔、方向、揃え、背景、角丸、影、変形、配置は、フロントエンドが実際に使う値のまま表示されます。その CSS を生成するスタイルエンジンは一つで、エディターはそれをサーバーから取得します。JavaScript で二つ目のエンジンを書けば、やがて食い違う二つの写しを抱えることになったはずです。計測値: 旧キャンバスはページと 24 個のレイアウトプロパティで食い違っていました。現在は 64 個中 0 個です。
実際の訪問者から得る Core Web Vitals
LCP、CLS、INP は、サイトを訪れた人のブラウザで計測され、画面には 28 日間の 75 パーセンタイルが表示されます。ラボ計測ではなく、Search Console が見るのと同じフィールドデータです。サンプルが 100 件に満たない場合は、数値を一切表示しません。わずかな計測数から出したパーセンタイルは、ただのノイズだからです。IP も Cookie も識別子も収集せず、データがお客様のサーバーの外へ出ることはありません。
お客様自身のキーで使う AI
文章の作成、書き直し、要約、翻訳、画像の代替テキスト生成。お客様がご自身の API キーを入力すると、リクエストはサイトから直接プロバイダーへ送られます。お客様のテキストが当社に届くことはなく、利用枠もお客様のものです。結果は提案として表示され、ブロックへ直接書き込まれることはありません。
訪問者には見えないメモ
どのブロックにもチーム用のメモを貼り付け、解決済みにしたり、削除したりできます。メモはエディターの中だけに存在し、それを出力しうるフロントエンドのフックは一つもありません。
速く、しかも計測済み
ブロックの出力はキャッシュされ、画像は元のファイルの隣に WebP または AVIF として変換されます。元のファイルには手を触れません。計測値: ブロックの描画時間は 33〜72% 減、画像の容量は 39〜78% 減。画像は <code><picture></code> 要素で配信されるため、誰にも同じ HTML が届きます。サーバー側で訪問者ごとに出し分けることこそが、ページキャッシュを汚す原因です。スマートフォンには別の画像を配信することもできます。同じ写真の小さな複製ではなく、別のカットです。それでも選ぶのはブラウザです。
依存先ではなく、フォームエンジンを
16 種類の項目、サーバー側での検証、黙って呑み込むハニーポット、そしてフォーム送信を保管する画面。フォームは JavaScript なしでも動きます。ページの中で実際に何かを行う唯一の部分だからです。
条件付きのテーマテンプレート
ヘッダー、フッター、個別ページ、アーカイブ、検索、404。いずれも、すでにお使いの WordPress エディターの中で作ります。コアに追随させ続けなければならない二つ目のエディターは要りません。
切り替えても生き残るポップアップ
読み込み時、スクロール量、離脱の兆候、クリック、無操作の経過で表示します。表示回数は訪問者自身のブラウザで数えるため、サーバー側で誰かを特定する必要はありません。
サイトのパレットを、一つの画面で
色とタイポグラフィを一箇所に、元の変数名のまま集めます。そのため、切り替え前に作られたページも、参照を失うことなく新しいパレットを受け取ります。
オーバーレイではなく、アクセシビリティ監査を
サイトはアクセシブルだと称するウィジェットを、ページに後付けすることはしません。各ブロックで足りていないもの — 代替テキストの欠落、崩れた見出し順、不足したコントラスト — を、編集している最中に報告します。
ライブラリなしのスライダー・タブ・アコーディオン
スクロールはネイティブの scroll-snap、アコーディオンは details 要素です。スクリプトが読み込まれなくても、何も隠れません。隠れたコンテンツは、たどり着けないコンテンツだからです。
サーバー側で描画し、ライセンスには縛られません
保存された HTML が持てるのは一つの画面幅の値だけなので、CSS はリクエスト時に生成します。その経路にライセンス確認は一つもありません。ライセンスが切れても、公開済みのページが暗くなることはありません。
仕組み
いつものエディターに、ビルダー並みの操作パネルを。
二つ目のキャンバスも、別のアプリケーションもありません。ブロックを選ぶと、右のパネルにページビルダーが与えてくれるものが並びます。しかもデスクトップ・タブレット・モバイルそれぞれに個別に設定できます。
ブロックを選べば、パネルはすぐそこに
レイアウトの種類、方向、最小高さ、コンテンツ幅、配置、間隔。いつものエディターの、いつものブロックです。新しく覚えることはなく、コンテンツは post_content のなかで標準のブロックマークアップのまま残ります。
すべてのブロックに、変形・マスク・チーム用メモ
回転、拡大縮小、傾斜、反転、マスク。いずれもデスクトップ・タブレット・モバイルで別々の値を持てます。さらに、チームに向けたメモをブロックに貼り付けられます。メモはエディターの中だけに存在し、ページには決して出力されません。
そして、実際にページ上で動きます
実際のページ上のフリップボックス。表面、裏面、そしてキーボードでも操作できるボタン。下の録画はモックアップではなく本物のページです。ブロックはサーバー側で描画されるため、ライセンスが切れても表示が失われることはありません。
さらに、訪問者が実際に体験した状態を教えてくれます
LCP、CLS、INP を実際の訪問者のブラウザーで計測し、28 日間の 75 パーセンタイルとして表示します。ラボの試験ではなく、Search Console が見るのと同じフィールドデータです。下の画面は実運用中のインストールです。数値の表示を拒んでいるセルが一つあることに注目してください。14 件のサンプルではパーセンタイルにならないからです。
画像: 元のファイルには手を触れずに WebP と AVIF へ
画面は一つ。小さくならなかったファイルは保存されません。そして、ほかのプラグインがこの仕事を本当に担っているなら、MevvBlocks は自ら身を引き、その理由を伝えます。問うているのは「インストールされているか」ではなく「実際に動作できるか」です。
自社のストアも、これで動かしています
mevvshop.com は実際に稼働している WooCommerce ストアで、そのページはヘッダーもフッターも商品カードも、すべてこれらのブロックで作られています。このページのすべての数値は、そこか当社のデモ環境で計測したものであり、推計ではありません。
計測値
丸めた数字ではなく、数えた数字です。
以下の数値はすべてプラグインのソースで数えられます。性能の主張に聞こえてしまう数値は、あえて出していません。ページの重さはテーマ、ホスティング、キャッシュに左右されるものであり、お客様の環境はまだ計測していないからです。
- 101
- 個のブロック — WooCommerce 未導入の場合は 78 個
- 3.217
- 件のテスト。すべて成功
- 16
- 種類のフォーム項目。Pro ではさらにファイル項目
- 6
- 種類のテンプレート: ヘッダー、フッター、個別、アーカイブ、検索、404
- 5
- 種類のポップアップ発火条件: 読み込み、スクロール、離脱、クリック、無操作
- 48
- 個の同梱アイコン。すべて 24 ピクセルの枠内で描画
- 29.828
- バイト。当社自身のストアで、メニュー・画像ボックス・ソーシャルアイコン・著作権表示の各ブロックが再び編集可能にした、凍結された HTML の量です
- 0
- 件。比較した 64 項目のうち、エディターのキャンバスと公開ページのあいだに生じたレイアウトの差
- 0
- 件。描画経路上のライセンス確認。テストで担保されています
2026 年 9 月 1 日にプラグインのソースで数えた値です。規模の目安として、あくまで目安としてのみ挙げると、無料版と Pro 版は PHP・JS・CSS 合わせて 1.5 MB と 46 KB です。一方 8 月 31 日に計測したインストールでは、Elementor、Ultimate Addons、Header Footer Elementor の三つでディスク上 178 MB を占めていました。これは占有面積の差であって速度の主張ではありません。しかもその大部分は、単に当社に無い機能の分です。訪問者に届くのは別の、もっと小さな数値です。1 ページあたり CSS 20 KB、JavaScript 5 KB。
料金
表示価格はすべて VAT 込みです。
ライセンスが切れても、ページが暗くなることはありません。 Pro の編集パネルが書き込んだ値は、無料版でも出力され続け、フォームも送信を受け付け続けます。閉じるのは編集パネルであって、サイトの見た目ではありません。
1 USD = 49,5932 ₺ (İşbank レート)
はじめる
ヘッダーからフッターまで、ブロックエディターの中で。
まずは無料版をインストールしてください。ブロック、フォーム、テーマテンプレート、ポップアップ、そして 19 種類の完成済みセクションとページが最初から入っています。Pro 版が加えるのは、デスクトップ・タブレット・モバイルの値を編集するパネルです。失われるのはパネルであって、サイトの見た目ではありません。ライセンスが切れても、それらの値は出力され続けます。
製品情報
- 製品の種類
- WordPress のブロックパック
- これは何か
- ブロックエディターの中のページビルダー
- ブロック数
- 101 個。WooCommerce 未導入の場合は 78 個
- 無料版
- ブロック、フォーム、テーマテンプレート、ポップアップ、グローバルスタイル、画像の最適化、ブロックのキャッシュ、カスタムコード、アクセシビリティ監査
- Pro
- デスクトップ/タブレット/モバイルのパネル、ブロックごとのカスタム CSS、フォームの条件分岐、ファイル項目
- 訪問者が読み込む量
- 1 ページあたり CSS 20 KB + JS 5 KB — wp-demo のトップページで 2026年9月1日に計測
- ソースの規模
- 無料版 1.5 MB + Pro 版 46 KB の PHP、JS、CSS。2026年9月1日時点
- 動作要件
- WordPress 6.0+、PHP 8.1+