# 新規開発時に考慮する技術情報
###### tags: `技術情報`

---

## CSS

■ CSS Grid

CSS Grid Layout によるよくあるレイアウトの実現
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout

↑ の挙動確認
https://codepen.io/collection/JGyBEy?grid_type=list

5分で完璧に分かる！CSS Gridの基本的な使い方を解説
https://coliss.com/articles/build-websites/operation/css/learn-css-grid-in-5-minutes.html

2021年版、CSS Gridでどのように配置されるかをまとめたチートシート
https://coliss.com/articles/build-websites/operation/css/css-grid-cheat-sheets.html

モダンCSSによる絶対配置
https://coliss.com/articles/build-websites/operation/css/less-absolute-positioning-modern-css.html

■ head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
https://coliss.com/articles/build-websites/operation/css/css-snippet-for-performance-in-head.html

■ 画像の比率処理
https://coliss.com/articles/build-websites/operation/css/css-ways-to-create-fixed-aspect-ratio.html

■ :is() :where()
https://coliss.com/articles/build-websites/operation/css/css-new-pseudo-classes-is-and-where.html

■ max() / min() / clamp()

https://developer.mozilla.org/ja/docs/Web/CSS/max()
https://developer.mozilla.org/ja/docs/Web/CSS/clamp()

■ svw
https://zenn.dev/moneyforward/articles/svh-dvh-lvh-for-all-browser

---

## ブロック開発

■ チュートリアル
https://learn.wordpress.org/course/introduction-to-block-development-build-your-first-custom-block/

https://gutenberg.10up.com/
https://gutenberg.10up.com/reference/Blocks/block-extensions/

背景色と文字色と複数設定するやつは withColor を使う
https://awhitepixel.com/blog/how-to-add-color-settings-to-your-custom-gutenberg-block/

■ 6.5 から block.json で viewStyle プロパティが追加された

■ ストーリーブック
https://wordpress.github.io/gutenberg/?path=/story/docs-introduction--page

■ theme.json からブロックにCSSをあてる
https://developer.wordpress.org/news/2023/04/per-block-css-with-theme-json/

■ 部分同期パターン
https://github.com/WordPress/gutenberg/issues/53705
Inner Blocks のPartial Syncing
https://github.com/WordPress/gutenberg/pull/56348

### E2Eテスト

https://github.com/WordPress/gutenberg/tree/trunk/packages/e2e-tests/specs/editor/blocks

https://developer.wordpress.org/block-editor/reference-guides/packages/packages-e2e-test-utils/

■ Playwright

https://twitter.com/miminari/status/1697748872360312862

https://www.google.com/search?q=Playwright&oq=Playwright&aqs=chrome..69i57.711j0j9&sourceid=chrome&ie=UTF-8

### ガイドライン
https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/designers/block-design/

### アプリケーション
https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/data-basics/

### iframe にCSSを効かせる

function add_inline_css() {
  wp_add_inline_style( 'wp-edit-blocks', 'p{background: red;}' );
}
add_action( 'init', 'add_inline_css' );

### ダイナミックブロック

英語
https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/
日本語
https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/

https://github.com/WordPress/gutenberg/pull/42430
https://twitter.com/tetsuaki_hamano/status/1573327956830998528

### ナビゲーションなどインナーブロックに独自ブロックを許可するフック
https://make.wordpress.org/core/?mc_cid=7d85896d77&mc_eid=5eac8b8aa7#new-block-json-allowed-blocks

### 子ブロックに独自ブロックを指定できるようにする
https://make.wordpress.org/core/2024/03/09/miscellaneous-editor-changes-in-wordpress-6-5/#support-for-new-allowedblocks-field-in-block-json

---

## FSE

https://hackmd.io/Ieb51eNFQe6DYX5aMJ1HKw

## WordPress

管理バーの高さ制御
https://make.wordpress.org/core/2022/01/07/theme-focused-changes-and-filters-in-wordpress-5-9/

プラグインの依存
https://make.wordpress.org/core/2024/03/05/introducing-plugin-dependencies-in-wordpress-6-5/

/**
 * Plugin Name: Express Payment Gateway Checkout for Shop
 * Requires Plugins: shop, payment-gateway
 */

## PHP

動的なクラスと静的(static)なクラス
https://www.notion.so/static-543f57a014084f61b49208d8d3c6a654

オートローダー関連
https://blog.hinaloe.net/2019/06/25/jetpack-autoloader/

---

## クラシックメニューのカスタマイズ
https://developer.wordpress.org/reference/hooks/wp_nav_menu_item_custom_fields/

## アクセスビリティ

https://www.digital.go.jp/resources/introduction-to-web-accessibility-guidebook/

## e2eテスト

https://playwright.dev/docs/