Skip to content

[ 機能追加 ] ビューポート(タブレット/モバイル)幅設定 UI を追加 - #4

Merged
AtsushiA merged 1 commit into
mainfrom
feature/viewport-breakpoint-settings
Aug 9, 2026
Merged

AtsushiA merged 1 commit into
mainfrom
feature/viewport-breakpoint-settings

Conversation

@AtsushiA

@AtsushiA AtsushiA commented Aug 9, 2026

Copy link
Copy Markdown
Owner

Summary

  • Gutenberg PR #79104(settings.viewport.mobile / tablet)に対応した専用 UI を新カテゴリ「ビューポート」として追加(v0.3.0 → v0.4.0)
  • 幅入力は px/em/rem の単位切り替えが必要なため、独自実装ではなく WordPress コアの UnitControl(wp-components)をそのまま採用。wp-element / wp-components をスクリプト依存に追加し、wp.element.createElement で admin.js(ビルド工程なし)から直接マウント。コアコンポーネント未読み込み時はテキスト入力にフォールバック
  • 単位はバックエンドの検証パターン(^(?:\d+|\d*\.\d+)(?:px|em|rem)$)に合わせて px/em/rem のみに制限
  • SPEC.md / CLAUDE.md を更新、e2e テストを1件追加

Test plan

  • wp-env + Playwright でトグル → UnitControl 表示 → 数値入力/単位変更 → Raw JSON 反映 → 保存 → リロード後も永続化を確認済み
  • composer run phpcs(クリーン)
  • composer run test:unit(3 tests, OK)
  • npx playwright test tests/e2e/admin-page.spec.ts(5 tests, 全パス)

Gutenberg PR #79104(settings.viewport.mobile / tablet)に対応し、
有効化トグル + 幅入力の専用 UI を新カテゴリ「ビューポート」として追加。

幅入力は px/em/rem の単位切り替えが必要なため、独自実装ではなく
WordPress コアの UnitControl(wp-components)をそのまま採用。
wp-element / wp-components をスクリプト依存に追加し、
wp.element.createElement で admin.js(ビルド工程なし)から直接マウント。
コアコンポーネント未読み込み時はテキスト入力にフォールバックする。

単位はバックエンドの検証パターン(px/em/rem)と合わせて制限。
@AtsushiA
AtsushiA merged commit 60af454 into main Aug 9, 2026
7 checks passed
@AtsushiA
AtsushiA deleted the feature/viewport-breakpoint-settings branch August 9, 2026 13:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant