Missing css/js on custom theme frontpage

[joey-kwl]

Description:

I'm loading a page with get_post() combined with apply_filters() into my frontpage of a custom theme, but when I load Otter's slider block all of the images are underneath eachother.

How to reproduce:

1. Make page with a slider from Otter
2. Load page in frontpage with get_post

Expected behaviour:

A slider like in the gutenberg

Current behaviour:

All of the images are shown underneath eachother

Reference:

Technical info

• WordPress version: 6.1.1
• Plugin version: 2.1.3

I tried adding this to my frontpage (index.php):

use ThemeIsle\GutenbergBlocks\CSS as OtterBlockCSS;
$css = new OtterBlockCSS\Block_Frontend();
$css->enqueue_styles("18", true)

Found here: https://wordpress.org/support/topic/otter-block-styles-on-other-page/
but enqueue_styles return NULL

Edit:
It seems like it went inside this part of class-block-frontend.php:

if ( ! has_blocks( $post_id ) ) {
	return;
}

[joey-kwl]

I found a workaround. Create a Post (not a page but a post) with a slider and you can publish it as private. The plugin will load all the css/js.

[HardeepAsrani]

Hey @chineseouchie,

Could you send us the custom theme that you've made so we could reproduce on it? Thank you!

[joey-kwl]

@HardeepAsrani I have added you to a temporary repo. If you go into the /dist folder you will see a zip and instructions file

[HardeepAsrani]

Hey @chineseouchie,

In the index.php file, I used the get_posts function to make a loop like:

<div>
	<?php
	global $post;

	$myposts = get_posts( array(
		'posts_per_page' => 5
	) );

	if ( $myposts ) {
		foreach ( $myposts as $post ) : 
			setup_postdata( $post ); ?>
			<?php the_content(); ?>
		<?php
		endforeach;
		wp_reset_postdata();
	}
	?>
</div>

And it seems to work properly with the slider. Am I missing something you are doing?

[HardeepAsrani]

You can use this function:

function enqueue_otter_style( $id ) {
	if ( ! class_exists( '\ThemeIsle\GutenbergBlocks\CSS\Block_Frontend', false ) ) {
		return;
	}

	$main_instance = ThemeIsle\GutenbergBlocks\Registration::instance();

	if ( ! method_exists( $main_instance, 'enqueue_dependencies' ) ) {
		return;
	}

	$block_frontend_instance = ThemeIsle\GutenbergBlocks\CSS\Block_Frontend::instance();

	if ( ! method_exists( $block_frontend_instance, 'enqueue_styles' ) ) {
		return;
	}

	$main_instance->enqueue_dependencies( $id );
	$block_frontend_instance->enqueue_styles( $id, true );
}

And pass the ID where it's being used and it should work. Let me know how it goes!

[joey-kwl]

Yes, that works.

Is it possible to do this "automatically", like when using Post? I have some pages in index.php and don't want to check them every time, but for now this is a working solution. Thanks

[HardeepAsrani]

@chineseouchie You can make a filter out of this and whenever you call for post/page ID, you can pass it through the filter.

[joey-kwl]

@HardeepAsrani Sorry to bother you again but how do I apply filters for the page? When using add_filter("the_content") I can't retreive the ID, even with get_the_ID() or the_id().

[HardeepAsrani]

For the options that you have, you can have a filter like this:

add_filter( 'theme_mod_about_us_content', function( $name ) {
	if ( false === get_theme_mod( $name, false ) ) {
		return $name;
	}

	$page = get_post( get_theme_mod( $name ) );

	if ( null !== $page ) {
		enqueue_otter_style( get_theme_mod( $name ) );
	}

	return $name;
});

It's a rough filter that I wrote without actually running it so make sure to test it first.