How do we attach our custom style sheets into FSE’s iframe location

  • Resolved klewis

    (@blackawxs)


    2 years, 8 months ago

    While playing around with FSE, I noticed that it’s wrapped in an iframe. My child theme’s style-sheet is enqueued into the admin side of the page, but only at the parent level of the DOM.

    My functions.php file:

    function _pm_child_scripts_admin()
{
    wp_enqueue_style(
        '_ac-child-stylesheet',
        get_stylesheet_directory_uri() . '/dist/css/pm_admin_bundle.css',
        '1.0.0',
        'all'
    );
}
add_action('admin_enqueue_scripts', '_pm_child_scripts_admin');

    But how can I also have my same stylesheet, or any custom style sheet, “inside” the iframe space of FSE so I can see my custom branding on html blocks that do “preview” mode?

    • This topic was modified 2 years, 8 months ago by klewis.
    • This topic was modified 2 years, 8 months ago by klewis.
    • This topic was modified 2 years, 8 months ago by klewis.
    • This topic was modified 2 years, 8 months ago by klewis.
Viewing 7 replies - 1 through 7 (of 7 total)

  • Using the add_editor_style() function should get your stylesheets enqueued correctly. To load more than one stylesheet, use an array:

    
function mzvbycfihn_editor_styles() {
  add_editor_style(
    array(
      'stylesheet-one.css',
      'stylesheet-two.css',
    )
  );
}

add_action( 'after_setup_theme', 'mzvbycfihn_editor_styles' );
    Thread Starter klewis

    (@blackawxs)

    Understood. But I am failing to see this work at all on my end. I placed the following into my functions.php file

    function _pm_fse_styles() {

  add_theme_support( 'editor-styles' );

  add_editor_style(
    array(
      'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap',
      '/dist/css/pm_admin_bundle.css',
     )
  );
}
add_action( 'after_setup_theme', '_pm_fse_styles' );

    But when I visit the Full Site Editor and inspect the DOM with Dev Tools, none of my array items are loaded within the iframe <head> area.

    How can I get my style-sheets there?

    • This reply was modified 2 years, 8 months ago by klewis.
    • This reply was modified 2 years, 8 months ago by klewis.
    • This reply was modified 2 years, 8 months ago by klewis.
    Thread Starter klewis

    (@blackawxs)

    I also tried…

    add_theme_support( 'editor-styles' );

function _pm_add_editor_styles() {
    add_editor_style( 'dist/css/pm_admin_bundle.css' );
}
add_action('after_setup_theme', '_pm_add_editor_styles');

    and…

    add_editor_style('dist/css/pm_admin_bundle.css');
add_editor_style( get_template_directory_uri() . '/dist/css/pm_admin_bundle.css' );

    but nothing.

    Hmm, I can confirm that snippet works as I’m using it for my own themes.

    You won’t see <link> tags for those assets. Instead, the contents of pm_admin_bundle.css and the Google font will be inlined within <style></style> tags in the <head> of the iframe.

    A quick way to check if the pm_admin_bundle.css styles have been injected: search for .editor-styles-wrapper. All of your styles get automatically wrapped in that class to stop them leaking into other parts of the editor UI.

    Two questions:
    – is your content being styled correctly, and it’s just a case of not seeing where the assets are loaded?
    – do you have any JS errors in your browser console?

    Thread Starter klewis

    (@blackawxs)

    I stand corrected. I see it working now thanks to your tip on the <style></style> area. Thank you!

    If yo don’t mind one more question, can you we use add_editor_style() to also inject .js files into FSE? or is that a different process?

    • This reply was modified 2 years, 8 months ago by klewis.

    Great ??

    enqueue_block_editor_assets is the hook to use for loading JS here:

    
function mzvbycfihn_editor_scripts() {
  // Enqueue your script here with wp_enqueue_script().
}

add_action( 'enqueue_block_editor_assets', 'mzvbycfihn_editor_scripts' );
    Thread Starter klewis

    (@blackawxs)

    Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How do we attach our custom style sheets into FSE’s iframe location’ is closed to new replies.