Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【確認待ち】管理画面の iframe で編集画面用CSSが効いていないのでインラインで強制的に追加登録 #1316

Merged
merged 10 commits into from
Jul 22, 2022

Conversation

kurudrive
Copy link
Member

@kurudrive kurudrive commented Jul 8, 2022

チケットへのリンク / 変更の理由(元のissueがあればリンクを貼り付ければOK)

#1313

どういう変更をしたか?

  • このプルリクで変更した事を記載してください

編集画面用のCSSを wp_add_inline_style で追加読み込むようにしました。

実装者の確認事項

実装者はレビュワーに回す前に以下の事を確認してチェックをつけてください。

  • 複数の意図の変更 ( 機能の不具合修正 + 別の機能追加など ) を含んでいないか?
  • Files changed (変更ファイル)の内容は目視で確認したか?
  • readme.txt に変更内容は書いたか?
  • 本当にちゃんと確認をしたか?

プログラムの変更の場合

テストを書かないのは普通ではありません。書けるテストは極力書くようにしてください。

  • 書けそうなテストは書いたか? → CSSなのでとりあえず目視のみ...

変更内容について何を確認したか、どういう方法で確認をしたかなど

実装者が確認した手順を箇条書きで記載してください。

  • develop で 新規投稿
  • ブロック挿入 → 検索で「プロフィール」と入力
  • 出てくるパターンのアイコンが縦並びになる
  • このブランチに切り替えてビルド
  • ブロック挿入 → 検索で「プロフィール」と入力
  • 出てくるパターンのアイコンが横並びになる

確認URL

( どこかのデモサイトかテストサーバーにデプロイ済みなどで確認できる場合はそのURL )

レビュワーに回す前の確認事項

  • 実装者はこのテンプレートのチェック項目をちゃんと確認してチェックしたか?

レビュワー確認方法・確認内容など

レビュワーがどういう手順で何を確認して欲しいかを記載してください。

  • 手順というより「そもそもの CSS の読み込ませ方に問題があったんだから wp_add_inline_style なんて使わなくてもこうすればええでー。」というのがあればご指摘いただけるとありがたいです。

レビュワー向け

レビュワーが確認して変更が反映されていない場合の確認事項

レビューしてみて意図した動作をしない場合は再度ビルドするなど以下の項目を確認してください。

  • プルしたか?
  • ビルドしたか?
  • ビルドしたディレクトリは正しいか(別の開発環境のディレクトリを見ていないか)?
  • npm install したか?
  • composer install したか?
  • キャッシュをクリアして確認したか?

@kurudrive kurudrive changed the title fix : 管理画面の iframe で編集画面用CSSが効いていないのでインラインで強制的に追加登録 【確認待ち】管理画面の iframe で編集画面用CSSが効いていないのでインラインで強制的に追加登録 Jul 8, 2022
@shimotmk
Copy link
Contributor

Copy link
Contributor

@shimotmk shimotmk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

横並びアイコンブロックなどがiframeで横並びになることは確認出来ました!

@@ -191,10 +191,17 @@ public function register_blocks_assets() {
wp_register_style( 'vk-blocks-build-css', VK_BLOCKS_DIR_URL . 'build/block-build.css', array(), VK_BLOCKS_VERSION );
}

// 編集画面のCSS登録 : 設定に関わらず結合CSSを登録 -> 各ブロックのindex.phpから呼び出される
// 編集画面のCSS登録 : 設定に関わらず結合CSSを登録 -> 各ブロックのindex.phpから呼び出される.
wp_register_style( 'vk-blocks-build-editor-css', VK_BLOCKS_DIR_URL . 'build/block-build-editor.css', array(), VK_BLOCKS_VERSION );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

inline_styleでblock-build-editor.cssを読み込む方法に変更するのであれば195行目と各ブロックのindex.phpのeditor_styleの指定も不要ではないですか?

wp_register_style( 'vk-blocks-build-editor-css', VK_BLOCKS_DIR_URL . 'build/block-build-editor.css', array(), VK_BLOCKS_VERSION );

// 編集画面のjs登録 : 設定に関わらず結合JSを登録 -> 各ブロックのindex.phpから呼び出される
// 編集画面の iframe でCSSが反映されないのでインラインで追加登録 .
$style_path = wp_normalize_path( VK_BLOCKS_DIR_PATH . '/build/block-build-editor.css' );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wp_normalize_path,file_exists
これは何のための処理でしょうか?教えていただければ幸いです🙏

@kurudrive kurudrive merged commit 1e3b886 into develop Jul 22, 2022
@kurudrive kurudrive deleted the fix/editor-css-iframe branch July 22, 2022 14:07
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.

3 participants