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はこの隙間を埋め、さらに先へ進みます:110のブロック、ヘッダーからフッターまでのテーマテンプレート、投稿グリッドとループビルダー、フォームエンジン、ポップアップ、変形とマスク、サイト全体のカスタムコード、サイトパレットを扱う1画面、画像のWebPとAVIF、ブロック単位のキャッシュ、取り繕わずに事実を伝えるアクセシビリティ監査、そして実際の訪問者のデータで動くCore Web Vitals画面。カタログはトグルと入れ子タブから、円グラフ、メディアプレイリスト、ツールチップ、ニュースレターフォーム、SVGアニメーションまで広がり、エディター標準のスタイルパネルに8つのブロックスタイルが並びます — そのすべてが、訪問者が動きの低減を求めていれば動くのをやめます。キャンバスももはや近似ではありません:エディターはページが出力するのと同じCSSをサーバーに要求するので、並べたものがそのまま公開されます。そのうち23のブロックは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 も端末ごとに指定できます。
110のブロック
レイアウト、テキスト、メディア。メニュー、検索、投稿グリッドとループビルダー。テーマテンプレート向けのサイトロゴ、ページタイトル、パンくず、投稿情報、著者ボックス。動画、音声、プレイリスト、ギャラリー、表、FAQ、タイムライン、コード。トグル、入れ子タブ、円グラフ、ツールチップ、ニュースレター、ソーシャルフィード、フリップボックス、行動喚起、アニメーション見出し、ビフォー/アフター、ホットスポット、オフキャンバスパネル、連絡ボタン — そしてWooCommerce用に23、商品ギャラリーからカート、チェックアウト、ミニカートまで。WooCommerceなしなら87。
8つのブロックスタイル、WordPressが既に用意しているパネルに
グラデーションオーバーレイ、ホバーまでグレースケールまたはぼかし、円形または角丸のマスク、浮き上がり、ズーム、傾き — コアのスタイルパネルから選ぶので、新しく覚えるコントロールはなく、選択はテーブルの設定ではなくマークアップ上のクラスとして残ります。ホバー時の変形は、訪問者のシステムが動きの低減を求めていればすべて無効になり、SVGアニメーションの静止画も同じように差し替えられます。
サービスを必要としないニュースレターフォーム
アドレス、任意の名前、同意チェックボックス、そして素のPOST — フォームエンジンと同じHMACで署名するので、キャッシュされたページが期限切れのnonceで死ぬことはありません。ハニーポットは黙って飲み込まれ、レート制限はアドレス単位で、アドレスは他のフォーム送信と同じ場所に届きます。リストもAPIキーも、どこかへの通信もありません:<code>mevvblocks_newsletter_subscribe</code>アクションが、確認済みのアドレスをあなたが既に使っている仕組みに渡します。
ACFフィールドを含む動的テキスト
見出し、テキスト、ボタン、画像は、入力した内容ではなく投稿から値を読み取れます:タイトル、抜粋、著者、日付、カテゴリー、タグ、アーカイブタイトル、検索語、WooCommerceの価格・SKU・在庫、あるいはキー指定のカスタムフィールド。Advanced Custom Fieldsが有効なときはフィールドを<code>get_field()</code>経由で読むので整形済みの値が得られ、アンダースコアで始まるキーは公開されずに拒否されます。
エディターで見えるものが、そのままページに出力されます
キャンバスが表示するのは、もう近似ではありません。余白、間隔、方向、揃え、背景、角丸、影、変形、配置は、フロントエンドが実際に使う値のまま表示されます。その 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% 減。画像は <code><picture></code> 要素で配信されるため、誰にも同じ HTML が届きます。サーバー側で訪問者ごとに出し分けることこそが、ページキャッシュを汚す原因です。スマートフォンには別の画像を配信することもできます。同じ写真の小さな複製ではなく、別のカットです。それでも選ぶのはブラウザです。
依存先ではなく、フォームエンジンを
16 種類の項目、サーバー側での検証、黙って呑み込むハニーポット、そしてフォーム送信を保管する画面。フォームは JavaScript なしでも動きます。ページの中で実際に何かを行う唯一の部分だからです。
条件付きのテーマテンプレート
ヘッダー、フッター、個別ページ、アーカイブ、検索、404。いずれも、すでにお使いの WordPress エディターの中で作ります。コアに追随させ続けなければならない二つ目のエディターは要りません。
切り替えても生き残るポップアップ
読み込み時、スクロール量、離脱の兆候、クリック、無操作の経過で表示します。表示回数は訪問者自身のブラウザで数えるため、サーバー側で誰かを特定する必要はありません。
サイトのパレットを、一つの画面で
色とタイポグラフィを一箇所に、元の変数名のまま集めます。そのため、切り替え前に作られたページも、参照を失うことなく新しいパレットを受け取ります。
オーバーレイではなく、アクセシビリティ監査を
サイトはアクセシブルだと称するウィジェットを、ページに後付けすることはしません。各ブロックで足りていないもの — 代替テキストの欠落、崩れた見出し順、不足したコントラスト — を、編集している最中に報告します。
ライブラリなしのスライダー・タブ・アコーディオン
スクロールはネイティブの scroll-snap、アコーディオンは details 要素です。スクリプトが読み込まれなくても、何も隠れません。隠れたコンテンツは、たどり着けないコンテンツだからです。
サーバー側で描画し、ライセンスには縛られません
保存された HTML が持てるのは一つの画面幅の値だけなので、CSS はリクエスト時に生成します。その経路にライセンス確認は一つもありません。ライセンスが切れても、公開済みのページが暗くなることはありません。
カタログ
110のブロック、5つのグループに。
これはプラグインが自身のショーケースページで使うのと同じ5つのグループで、以下のブロックはすべてサーバー側で描画されます:スクリプトが1本も走る前からページの中にあります。ここでPro専用なのは、そう書かれている3つのブロックだけです。
テキストとアクション
見出し、リッチテキスト、文字を打ち込めるアニメーション見出し、ボタン、行動喚起、アイコンボックス、アイコンリストとチェックリスト、区切り線、そして閉じられるようにできるアラート — 閉じるとフォーカスは消えずに次へ移ります。トグル、独自のパネルを持つ入れ子タブ、アコーディオン、FAQはいずれもdetails/summaryとARIAのタブパターンの上に作られているので、スクリプトが届かなかった読者にも何も隠れません。
データと価格
カウンター、進捗バー、データバー、数値ボックス、そして値をリストとしても出力する円・ドーナツグラフ — 誰にも読めないグラフはただの飾りだからです。料金表と価格リスト、お客様の声、星評価、お客様の声カルーセル、チームメンバー。Proではコンテンツスイッチャーが加わります:バッジ付きの月額/年額タブ列と、好きなブロックを置けるパネル。
ポートフォリオと地図
タイムライン — 縦、または広い画面では横になり、狭い画面では読み順を変えずに縦へ戻ります —、ステップ、正しい列見出しを持つアクセシブルなデータ表、そして比較ブロック。地図は読み込む前に同意を求めるOpenStreetMapの埋め込みです。Proではポートフォリオが加わります:サーバー側で描画されるカード、外部へ通信せずブラウザーで適用されるタクソノミー絞り込み、そしてアーカイブへのリンク。モーダルもページ送りもありません。
メディアとフォーム
動画と音声、字幕とポスター付きのプレイリスト — スクリプトが触れる前はどのトラックもただのリンクです —、ギャラリー、ビフォー/アフター、フリップボックス、バナー、ホットスポット、そしてホバー・フォーカス・タップで開くツールチップ。フォーム:16項目のエンジン、ログインと登録、そしてニュースレター — ハニーポットとレート制限を備えた署名付きPOSTが、アドレスをあなた自身のリストへ渡します。ソーシャルフィードは手で選んだリンクの一覧です:APIもトークンも、どこかへの通信もありません。
デザインと動き
登場アニメーション、固定表示、パララックス。コアのスタイルパネルに8つのブロックスタイル — グラデーションオーバーレイ、グレースケール、ぼかし、円形と角丸のマスク、浮き上がり、ズーム、傾き。ファイル内のスクリプトがページに届かないよう画像として表示され、動きの低減時には静止画へ差し替わるSVGアニメーション。アイコンフォントを使わない線画アイコン94点。そしてカスタムフィールドからの動的テキスト、Advanced Custom Fieldsがあればそれを通して読みます。スクロール連動のアニメーションはありません。
5つのグループはデモ環境で公開されているページです:ブロックカタログ — テキストとアクション、データと価格、ポートフォリオと地図、メディアとフォーム、デザイン。意図的に無いものも書き出してあります:ポートフォリオにモーダルとページ送りはなく、ソーシャルフィードの背後にAPIアダプターはなく、スクロール連動のタイムラインもありません。
仕組み
いつものエディターに、ビルダー並みの操作パネルを。
二つ目のキャンバスも、別のアプリケーションもありません。ブロックを選ぶと、右のパネルにページビルダーが与えてくれるものが並びます。しかもデスクトップ・タブレット・モバイルそれぞれに個別に設定できます。
ブロックを選べば、パネルはすぐそこに
レイアウトの種類、方向、最小高さ、コンテンツ幅、配置、間隔。いつものエディターの、いつものブロックです。新しく覚えることはなく、コンテンツは post_content のなかで標準のブロックマークアップのまま残ります。
すべてのブロックに、変形・マスク・チーム用メモ
回転、拡大縮小、傾斜、反転、マスク。いずれもデスクトップ・タブレット・モバイルで別々の値を持てます。さらに、チームに向けたメモをブロックに貼り付けられます。メモはエディターの中だけに存在し、ページには決して出力されません。
そして、実際にページ上で動きます
実際のページ上のフリップボックス。表面、裏面、そしてキーボードでも操作できるボタン。下の録画はモックアップではなく本物のページです。ブロックはサーバー側で描画されるため、ライセンスが切れても表示が失われることはありません。
さらに、訪問者が実際に体験した状態を教えてくれます
LCP、CLS、INP を実際の訪問者のブラウザーで計測し、28 日間の 75 パーセンタイルとして表示します。ラボの試験ではなく、Search Console が見るのと同じフィールドデータです。下の画面は実運用中のインストールです。数値の表示を拒んでいるセルが一つあることに注目してください。14 件のサンプルではパーセンタイルにならないからです。
画像: 元のファイルには手を触れずに WebP と AVIF へ
画面は一つ。小さくならなかったファイルは保存されません。そして、ほかのプラグインがこの仕事を本当に担っているなら、MevvBlocks は自ら身を引き、その理由を伝えます。問うているのは「インストールされているか」ではなく「実際に動作できるか」です。
自社のストアも、これで動かしています
mevvshop.com は実際に稼働している WooCommerce ストアで、そのページはヘッダーもフッターも商品カードも、すべてこれらのブロックで作られています。このページのすべての数値は、そこか当社のデモ環境で計測したものであり、推計ではありません。
利用例
カタログページからの11枚。
どの画面もwp-demo.mevvsoft.comの公開ページで、無料版プラグインとProを有効にした状態を1440ピクセルと390ピクセルで撮影し、示す範囲に切り抜いています。管理画面はなく、描き足しも修整もありません。
計測値
丸めた数字ではなく、数えた数字です。
以下の数値はすべてプラグインのソースで数えられます。性能の主張に聞こえてしまう数値は、あえて出していません。ページの重さはテーマ、ホスティング、キャッシュに左右されるものであり、お客様の環境はまだ計測していないからです。
- 110
- ブロック — WooCommerceを入れていなければ87
- 94
- 同梱アイコン、24ピクセルの枠で描画 — アイコンフォントなし
- 8
- コアのスタイルパネルにあるブロックスタイル、そのすべてが動きの低減時には静かなまま
- 42
- デモ環境の5つのカタログページに対する描画チェック — 42件合格、失敗0件
- 16
- 種類のフォーム項目。Pro ではさらにファイル項目
- 6
- 種類のテンプレート: ヘッダー、フッター、個別、アーカイブ、検索、404
- 5
- 種類のポップアップ発火条件: 読み込み、スクロール、離脱、クリック、無操作
- 29.828
- バイト。当社自身のストアで、メニュー・画像ボックス・ソーシャルアイコン・著作権表示の各ブロックが再び編集可能にした、凍結された HTML の量です
- 0
- 件。比較した 64 項目のうち、エディターのキャンバスと公開ページのあいだに生じたレイアウトの差
- 0
- 件。描画経路上のライセンス確認。テストで担保されています
2026年9月8日にプラグインのソースで数えました。規模の目安として、あくまで目安として:無料版とPro版はPHP・JS・CSSで1.8 MBと82 KB、一方で私たちが8月31日に計測した環境では、Elementor、Ultimate Addons、Header Footer Elementorの3つでディスク上178 MBでした。これは表面積の違いであって、速度についての主張ではありません — そしてその差の少なくない部分は、単に私たちが持たない機能です。42件の描画チェックは、<code>tools/katalog-dogrula.php</code>が、あなた自身がデモ環境で開ける5つのカタログページに対して実行するものです。
料金
表示価格はすべて VAT 込みです。
ライセンスが切れても、ページが暗くなることはありません。 Pro の編集パネルが書き込んだ値は、無料版でも出力され続け、フォームも送信を受け付け続けます。閉じるのは編集パネルであって、サイトの見た目ではありません。
1 USD = 50,8719 ₺ (İşbank レート)
インストール前によく聞かれること
新しいエディターを覚える必要がありますか?
いいえ。これは通常のブロックエディターで使う通常のWordPressブロックで、コンテンツは私たちのテーブルではなくpost_content内の標準的なブロックマークアップのまま残ります。プラグインを削除しても、コンテンツは読めるHTMLのままです。
無料版に入っていないものは?
110のブロックすべて、フォームエンジン、ニュースレター、テーマテンプレート、ポップアップ、ブロックスタイル、アイコン、画像最適化、ブロックキャッシュ、アクセシビリティ監査は無料です。Proが加えるのは、デスクトップ・タブレット・モバイルの値を編集するパネル、ブロック単位のカスタムCSS、コンテンツスイッチャー、絞り込み可能なポートフォリオ、Lottie埋め込み、そしてフォームの条件分岐、自動返信、Webhook、ファイル項目、CSV書き出しです。
ライセンスが切れるとどうなりますか?
ページはProのパネルが書いたタブレットとモバイルの値も含め、今のとおりに描画され続けます — 無料版のスタイルエンジンがそれらを出力します。閉じるのは編集パネルだけです。描画経路にはライセンス判定が1つもなく、リリースごとにそれをテストで確認しています。
ニュースレターのアドレスはどこへ行きますか?
あなた自身のサイトへ、他のフォーム送信と一緒に入ります。私たちのリストもAPIキーも、第三者への通信もありません:ブロックは確認済みのアドレスごとにmevvblocks_newsletter_subscribeアクションを発火するので、あなたが既に使っている仕組みへ渡せます。フォームはnonceではなくHMACで署名した素のPOSTです。nonceはページ全体のキャッシュの裏で静かに失効するからです。
訪問者の意思に反して動くものはありますか?
いいえ。ブロックスタイル、フリップボックス、マーキー、タイピング見出し、登場アニメーションのホバー変形はすべて、システムが動きの低減を求めていれば無効になり、SVGアニメーションは静止画へ切り替わります。タイピング見出しの最初の単語は常に出力されるので、文が空白になることはありません。
第三者から何かを読み込みますか?
プラグイン自身は一切通信しません:CDNのライブラリも、他人のサーバーのフォントも、テレメトリーもありません。外へ向かうのは3つだけで、いずれもあなたの判断です — AIアシスタント(鍵はあなたが入力します)、地図(先に同意を求めるOpenStreetMapの埋め込み)、そしてProのLottie埋め込み(同じように同意を求め、承諾するまで静止画を表示します)。ソーシャルフィードはどことも通信しません:あなたが選んだリンクの一覧です。
ブロックは私のACFフィールドを読めますか?
はい。見出し、テキスト、ボタン、画像はキー指定のカスタムフィールドから値を取れます。Advanced Custom Fieldsが有効なら値はget_field()経由で読まれるので整形済みの値になり、そうでなければ素の投稿メタにフォールバックします。アンダースコアで始まるキーは拒否されます — それらはWordPressの内部フィールドで、出力すればページが見せるつもりのなかったものが漏れます。
意図的に入れていないものは?
ポートフォリオにモーダルとページ送りはありません。ソーシャルフィードにAPIアダプターはありません。スクロール連動のアニメーションはありません。地図はマーカー1つで、スタイル指定も経路案内もありません。アクセシビリティオーバーレイも、CAPTCHAも、ライブ検索もありません。いずれも後から見つかった欠落ではなく、ソースに書き残された判断です。
はじめる
ヘッダーからフッターまで、ブロックエディターの中で。
無料版を入れてください:110のブロックすべて、フォーム、ニュースレター、テーマテンプレート、ポップアップ、8つのブロックスタイル、そして76の既製セクションとページが既に入っています。Proが加えるのは、デスクトップ・タブレット・モバイルの値を編集するパネルと、コンテンツスイッチャー、絞り込み可能なポートフォリオ、Lottie埋め込みです。失うのはパネルであって、サイトの見た目ではありません:ライセンスが切れても、それらの値は出力され続けます。
製品情報
- 製品の種類
- WordPress のブロックパック
- これは何か
- ブロックエディターの中のページビルダー
- ブロック数
- 110、WooCommerceなしなら87
- ブロックスタイル
- 8つ、コアのスタイルパネルに — すべて動きの低減に対応
- アイコン
- 24ピクセルの枠で描いた線画SVG 94点 — アイコンフォントなし
- パターン
- 76 種類: セクション 64 とフルページ 12
- 無料版
- ブロック、フォーム、ニュースレター、テーマテンプレート、ポップアップ、ブロックスタイル、グローバルスタイル、画像最適化、ブロックキャッシュ、カスタムコード、アクセシビリティ監査
- Pro
- デスクトップ/タブレット/モバイルのパネル、ブロック単位のカスタムCSS、コンテンツスイッチャー、絞り込み可能なポートフォリオ、Lottie埋め込み、フォームの条件分岐とファイル項目
- ソースの規模
- 無料版1.8 MB + Pro 82 KBのPHP・JS・CSS、2026年9月8日
- 動作要件
- WordPress 6.0+、PHP 8.1+