今週（8/17〜8/23）は、前号で予告したとおり8月19日（水）にWordPress 7.1がリリースされました。コードネームは「Mary Lou」。WordCamp US 2026の最終日にあたる日程での公開です。デザイン側では8月21日にFigmaのオートレイアウトに新しい余白オプションが追加されました。
読む章の目安です。WordPressサイトを運用しているなら1〜3章、とくにカスタムブロックやACFを使った案件を持っている人は2章と3章だけでも読んでください。デザインとCSSの話は4章、ブラウザとツールの動きは5章と6章です。なお今週はAI・フレームワーク周りに大きな発表はありませんでした。
WordPress 7.1「Mary Lou」リリース（8/19）
WordPress 7.1が予定どおり8月19日に公開されました。7.0で打ち出したAIと共同編集の路線を仕上げる位置づけです。
出典: WordPress.org — WordPress 7.1 “Mary Lou” / WordPress.org — Version 7.1
入ったものを整理すると:
- メディア処理がブラウザ側に移動: サーバーでのリサイズをやめ、アップロード前にブラウザ内で処理する方式に変更。AVIF・HEIC・HDRゲインマップにネイティブ対応し、サーバー負荷を下げつつファイルサイズも小さくなる
- 画像編集の強化: 自由形状とアスペクト比指定のクロップ、水平・垂直の反転、細かい角度指定とスナップ回転。通信が切れた場合はアップロードを自動で再試行
- スタイリング制御: ブロックを画面サイズごとに出し分けられるようになり、Buttonブロックには hover・focus・active の状態別スタイルが付いた
- ノート機能の強化: リッチテキストとメンションに対応し、ブロック単位だけでなく特定のテキストにノートを付けられる
- 新ブロック: Tabs（タブ切り替え）と Playlist（複数音声トラック）
- Abilities API: 6.9で入った基盤を拡張し、実行ライフサイクルのフィルタリング、カスタムバリデーション、共有ディスカバリに対応
前号で挙げた項目のうち、Abilities APIとメディア刷新は予定どおり入りました。一方でReact 19のCore投入については、公式アナウンスでは触れられていません。 事前情報では有力視されていましたが、現時点で確定的なことは言えない状況です。
画像処理がサーバーからブラウザに移ったのは、共有サーバーで運用しているサイトほど効きます。 大きな画像を上げたときにタイムアウトしたりメモリ不足で落ちたりする、あの手のトラブルの主因が減るからです。hover・focus・activeの指定がGUIに乗った点は歓迎ですが、対象がButtonブロックに限られるので、前号で書いたほど広範にカスタムCSSが消えるわけではありませんでした。
💡 今すぐ試せる: 手元の1サイトを7.1に上げて、大きめのJPEGとHEICをメディアライブラリに投げてみる。従来より速いか、エラーが出ないかで移行判断の材料になる
エディタが常にiframeになった — 何が壊れるのか（8/19）
7.1でいちばん影響が大きいのは、機能追加ではなく投稿エディタの完全iframe化です。7.0まではテーマの種類や登録されているブロックのAPIバージョンによってiframe化されたりされなかったりしていましたが、7.1では無条件でiframeになります。
出典: Make WordPress Core — Iframed Editor Changes in WordPress 7.1
原因はシンプルで、iframeは独立した document と window を持つためです。グローバルの document を見に行くコードは、エディタのキャンバス内にある要素を掴めなくなります。
壊れやすいのは次の3つ:
- エディタ用にenqueueしたCSS: キャンバスに適用されなくなる。エラーは出ず、無言でスタイルが外れる
- jQueryでDOMを操作しているメタボックス系プラグイン: ACFやMeta Boxに依存した案件は影響を受けやすい
- グローバル参照のJavaScript:
document.querySelectorでキャンバス内を掴んでいたコードは何も取れなくなる
とくに注意したいのが、これまでレガシーメタボックスを登録していたサイトは、そもそもiframe化されていなかったという点です。つまり「今まで平気だったから大丈夫」という判断が、今回は通用しません。
受託でカスタムブロックやACFを納品しているなら、自動更新を切って様子を見る判断もありだと思います。 プラグイン側の対応が追いつくまで時間がかかる可能性があるからです。jQueryでのDOM操作に依存したメタボックス系プラグインは対応に手間がかかると見られており、影響は一社にとどまらないと考えられます。
💡 今すぐ試せる: 案件サイトの一覧を開き、ACF・Meta Box・カスタムブロックを使っているものに印を付ける。そこが今回の要確認対象になる
iframe化への対応と、更新前の確認方法
公式が案内している対応は、キャンバス要素の ownerDocument と defaultView を経由してdocumentを取得し、イベントリスナーは useRefEffect で着脱する方法です。
// Before: グローバルの document を見ているため、iframe内の要素を掴めない
document.querySelector('.my-block').addEventListener('click', handler);
// After: ノードの ownerDocument からiframe内のdocumentを辿る
const ref = useRefEffect((node) => {
const doc = node.ownerDocument; // iframe内のdocument
const el = doc.querySelector('.my-block');
el.addEventListener('click', handler);
return () => el.removeEventListener('click', handler); // 後片付けまで書く
}, []);確認方法が用意されているのは救いです。 ステージング環境にGutenbergプラグイン22.6以降を入れて有効化すると、テーマの種類やBlock APIのバージョンに関係なくエディタが強制的にiframe化され、7.1と同じ条件を再現できます。本番を上げる前に、これで主要な編集画面を一通り触るのが安全です。
なお前号で触れた「Gutenberg 23.6」はTabsとPlaylistブロックが安定化したバージョンで、こちらとは別物です。iframe条件の再現に必要なのは22.6以降になります。
この確認を挟むかどうかで、月曜の朝の景色がかなり変わります。 カスタムフィールドの入力画面が真っ白になってからクライアントに連絡するのと、事前に把握して更新を保留するのとでは、同じ事象でも意味が違います。
💡 今すぐ試せる: 案件サイトのステージングにGutenbergプラグインを入れて有効化し、カスタムフィールドの入力画面とカスタムブロックの編集画面が壊れないか確認する
Figma のオートレイアウトに Around / Evenly が追加（8/21）
8月21日、Figmaのオートレイアウトの「auto spacing」に新しい選択肢「Around」と「Evenly」が追加されました。あわせて、これまで既定だった挙動が「Between」という名前になっています。
出典: Figma — Release notes（2026年8月21日） / Figma Learn — Use auto layout with CSS Flexbox in mind
3つはCSSの justify-content にそのまま対応します。Figma側のヘルプでも、Between・Evenly・Around が space-between・space-evenly・space-around に対応すると明記されています。
See the Pen Between / Around / Evenly — Figmaの新オプションとCSSの対応 by BaseKENT (@basekent) on CodePen.
.row { display: flex; }
.row { justify-content: space-between; } /* Figma: Between */
.row { justify-content: space-around; } /* Figma: Around */
.row { justify-content: space-evenly; } /* Figma: Evenly */違いは端の扱いです。Between は端に余白を取らず、要素の間だけを均等に配ります。Evenly は端も要素間もすべて同じ幅（1対1）。Around は要素間が端の2倍（2対1）になります。要素4つで実測すると、Between が「0 / 86 / 86 / 86 / 0」、Around が「32 / 64 / 64 / 64 / 32」、Evenly が「51 / 51 / 51 / 51 / 51」という配分でした。
デザインデータとCSSの用語が揃うのは、受け渡しの手間が減るという意味でありがたい変更です。 これまでは「均等に配置」とだけ指定されたときに、両端を空けるのかどうかを毎回確認する必要がありました。Figma側でEvenlyと指定されていれば、space-evenly をそのまま書けば済みます。
💡 今すぐ試せる: 進行中のデザインデータでオートレイアウトを使っている箇所を開き、意図した余白が Between / Around / Evenly のどれなのかを確認しておく
Chrome 152 安定版が来週火曜（8/25）
前号で紹介したChrome 152のベータが、来週8月25日（火）に安定版として公開される予定です。
ベータ時点の内容から変わっていなければ、:playing :paused :muted といったメディア状態の疑似クラス、既存の色から透明度だけを差し替えられる Relative Alpha Colors、デバイスのCPU性能を取得する CPU Performance API などが安定版で使えるようになります。
メディア疑似クラスもRelative Alpha Colorsも、当面はChromeのみの対応です。 実務投入するなら @supports でのフォールバックを前提に組む必要があります。前号で作ったデモでも、非対応ブラウザ用のクラス付与を併記しました。
💡 今すぐ試せる: 8/25以降にChromeを更新し、CSS.supports('selector(video:playing)') がtrueを返すか確認する
Webflow が「マーケティング基盤」へ舵を切っている（Conf は 9/1〜3）
8月第1週に取り上げたレガシーエディター廃止の続報です。Webflowはサイト制作ツールから、AI支援・計測・ABテストまで含んだマーケティング運用基盤へと立ち位置を移そうとしています。9月1日から3日にかけて Webflow Conf が予定されており、この方向性が具体化される見込みです。
出典: Webflow Blog
「サイトを作る」ツールから「サイトを運用して数字を出す」ツールへの移行は、制作者の立ち位置にも影響します。 納品して終わりではなく、公開後の計測や改善まで含めて任される前提の作りになっていくからです。単価を上げる機会と見ることもできますが、運用まで引き受けられない体制なら、早めに線引きを決めておいた方が良い変化だと思います。
💡 今すぐ試せる: Webflowでクライアントワークを持っているなら、Conf前に現在のプラン内容と請求額を確認しておく。機能拡張に伴う価格改定が入る可能性がある
今週のひとこと
WordPress 7.1は、機能追加より「エディタが常にiframeになった」という基盤の変更の方が影響が大きい回でした。派手さはありませんが、こういう変更こそ、気づかないまま更新して後から気づくパターンになりがちです。Gutenbergプラグインで事前確認できる導線が用意されているので、案件を抱えている方はステージングでの確認をおすすめします。来週火曜にはChrome 152の安定版も控えています。
