Inline styles – validator.w3.org issue solution ?

Hi,
I have encountered (as some other users, see this thread – https://siteorigin.com/thread/how-to-load-inline-styles-in-the-header/) issue when validating page created with SO Page Builder, specifically “Layout builder” widget. The validator reports error with inline styles generated inside the body tag.

I looked at code in “siteorigin-panels.php” and found out that

add_action('wp_footer', 'siteorigin_panels_print_inline_css');

The solution that worked for me was to remove the footer action (inside a class) and add my own wp_footer action, and create styles in “wp-content/uploads” dir:

public function my_inline_css() {	
	remove_action('wp_footer', 'siteorigin_panels_print_inline_css');	
	add_action( 'wp_footer', array(self::$instance, 'generate_inline_style') );
}
public function generate_inline_style() {
			
	global $siteorigin_panels_inline_css;
	
	if( empty( $siteorigin_panels_inline_css ) ) return;
	
	$inline_css = $inline_css_id = '';
	
	foreach( $siteorigin_panels_inline_css as $post_id => $css ) {
		if( empty($css) ) continue;
		
		$inline_css		.= $css;
		$inline_css_id	.= $post_id;
		
		$siteorigin_panels_inline_css[$post_id] = '';
	}
	
	if( $inline_css ) {
		$uploads = wp_upload_dir();
		$my_uploads_dir	= trailingslashit( $uploads['basedir'] ) . 'SO_pagebuilder_styles'; // "wp-content/uploads" DIR
		$my_uploads_url	= trailingslashit( $uploads['baseurl']) . 'SO_pagebuilder_styles'; // "wp-content/uploads" URL
		
		global $wp_filesystem;
		if ( empty( $wp_filesystem ) ) {
			require_once ( ABSPATH . '/wp-admin/includes/file.php' );
			WP_Filesystem();
		}
		
		$target_dir = $wp_filesystem->is_dir( $my_uploads_dir );
		if( !$target_dir ) {
			wp_mkdir_p( $my_uploads_dir );
		}
		
		$my_uploads_dir_exists = is_dir( $my_uploads_dir );

		if( $my_uploads_dir_exists  ) {
			// create files in wp-content/uploads dir
			$wp_filesystem->put_contents( $my_uploads_dir . '/inline-styles-'.esc_attr( $inline_css_id ).'.css', $inline_css, 0644 );
			
		}
		
		echo '<link rel="stylesheet" id="my_inline_css-'.esc_attr($inline_css_id).'" href="'.esc_url( $my_uploads_url . '/inline-styles-'.esc_attr( $inline_css_id ).'.css' ).'" type="text/css" media="all">';
		
	}
				
}

Hope you’ll (or someone) have some use of it.
The downside of this method is too much writing of css files in uploads dir (especially on more page visits), so some method to check existence of files and /or changes of files before file creation would be needed.

Best regards, and thanks for great page builder.
Alen, Micemade