サポート » テーマ » register_block_pattern() 作成パターンの独自スタイルについて

  • 解決済 hatobane

    (@hatobane)


    掲題について、
    作成パターン内に独自CSSを組み込む方法はありますでしょうか。

    style.cssにスタイルを追記し、パターンを増やしていたところ
    各パターンのサムネイル(iframeタグ内)に全体のstyle.cssが一々読み込まれるようで、
    エディター画面がフリーズするようになってしまいました。
    ※CSSの読み込みを止めたところフリーズが無くなりましたので、原因は肥大したCSSかと思っています。

    なので全体のstyle.cssではなく、登録パターン内にスタイルを組み入れれば解決するかと考え、しかしstyleタグを使用するとHTMLブロックとしてエディターに掲出してしまい、今度はエディター画面が煩雑になってしまいました。

    marginやpaddingなどのスタイルはコメントアウトで組み込めますが、それ以外のスタイルをエディターに映らない形でパターン内に組み込む方法がありましたら、ご教授いただきたいです。

    何卒よろしくお願いいたします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • Aki Hamano

    (@wildworks)

    こんにちは。

    作成パターン内に独自CSSを組み込む方法はありますでしょうか。

    これは、カスタムHTMLブロックを使わない限り不可能だと思います。

    根本的な問題は、style.css全体をiframe内に読み込んでいる事だと思います。パターン、およびブロックスタイル等だけを定義したスタイルシートを読み込んでみてはどうでしょか。

    読み込み方は、WordPress6.3以降であればenqueue_block_assetsが良いと思います。エディターだけに読み込ませたい場合は、このコメントの実装が参考になると思います。

    nobita

    (@nobita)

    こんにちは

    なので全体のstyle.cssではなく、登録パターン内にスタイルを組み入れれば解決するかと考え、しかしstyleタグを使用するとHTMLブロックとしてエディターに掲出してしまい、今度はエディター画面が煩雑になってしまいました。

    styleは許可されていないので、使えません。

    パターンの最上位ブロックに、特有のクラスを追加して、このクラスを目印にstyleをロードすることはできるかもしれないです。(例は、フロントエンドのみに、投稿本文に追加されたパターンのみ対象)

    my-custom-pattern をパターンに追加した例

    add_filter( 'render_block_core/post-content', 'emulsion_test', 10, 2 );
    
    function emulsion_test($block_content, $block){
    	if( false !== strpos($block_content,'my-custom-pattern')){
    		wp_register_style( 'my-custom-pattern', get_template_directory_uri() . '/my-custom-pattern.css', array(), time(), 'all' );
    		wp_enqueue_style( 'my-custom-pattern' );
    	}
    	return $block_content;
    }

    以上で、パターン用のCSSをフロント側に追加することができますが、エディタには反映しません。

    これまで、editorに追加していた、style.css を省くと編集画面や、インサーターのプレビューなどではレイアウトは崩れます。
    個人的には、パターンは「大量のCSSの追加」を想定していないので、こういうやり方は、よい方法ではないと思っていますが、何とかしたい気持ちはわかります。
    エディタでの表示はある程度割り切って考えた方がいいと思います。

    • この返信は6ヶ月前にnobitaが編集しました。
    • この返信は6ヶ月前にnobitaが編集しました。
    トピック投稿者 hatobane

    (@hatobane)

    ご回答いただきありがとうございます、とても参考になりました。
    いろいろ試しましたが、今回はCSSはフロント側のみに反映で対処いたしました。

    存在するブロックに対して特定のCSSを読み込ませる事ができそうなので、時間がある際にそちらの方法を試してみようかと思います。

    この度はどうもありがとうございました、本当に助かりました。

    • この返信は5ヶ月、 3週前にhatobaneが編集しました。
3件の返信を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。