V2.0.9 Some Custom CSS Causes Page Rendering Problems

When declaring a font-family, the norm is to surround family names that contain whitespace within quotation marks.

For example:

selector {
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
}

The use of quotation marks as shown above prevents the proper rendering of a page on the second and subsequent refreshes.

On the first refresh and after deleting any page-related CSS file from /uploads/themeisle-gutenberg/, everything appears as it should since the CSS required for proper rendering is found inline (<style type="text/css" media="all"></style>. On the next refresh, a zero length CSS file exists in /uploads/themeisle-gutenberg/.

Before continuing it is assumed that there is no desire to modify /vendor/tubalmartin/cssmin. But it is important to note that the minify function in Minifier.php cannot process certain CSS strings. Specifically, the call shown below fails silently when it attempts to handle escaped quotation marks.

$css = preg_replace_callback(
'/(?:"(?:[^\\"]|\\.|\\)")|'."(?:'(?:[^\\']|\\.|\\)')/S",
array($this, 'processStringsCallback'),
$css
);

After the call above, the CSS string may be empty if a failure occurred.

Problems originate in class-css-handler.php. The save_css_file function includes the following line which escapes all quotation marks. Without this line, the call to the compress function fails.

$css = wp_filter_nohtml_kses( $css );

Potentially, one could replace this line with the following line (note: caution this may create other problems).

css = wp_kses( stripslashes( $css ), 'strip' );

A better option seems to be adding the following lines immediately after the call to the compress function.

if ( empty( $css ) ) {
return self::delete_css_file( $post_id );
}

This option avoids creating (and using) a zero length CSS file in /uploads/themeisle-gutenberg/. Instead inline CSS is used every time.

This approach described above hides a problem. Otherwise, some kind of alert should tell users not to employ Custom CSS with certain characteristics like those noted above for a font-family.

Additionally, within the enqueue_styles function within class-block-frontend.php, the following block of code fails. It is assumed that wp_style_add_data causes the failure.

	add_action(
		'wp_enqueue_scripts',
		function () use ( $post_id, $file_name, $file_url, $file_path ) {
			wp_enqueue_style( 'otter-' . $file_name, $file_url, array( 'otter-blocks' ), OTTER_BLOCKS_VERSION );
			wp_style_add_data( 'otter-' . $file_name, 'path', $file_path );
		}
	);

Restoring the original line of code (shown below) fixes that problem.

return wp_enqueue_style( 'otter-' . $file_name, $file_url, array( 'otter-blocks' ), THEMEISLE_BLOCKS_VERSION );

Reproduce the custom CSS refresh problem and inspect class-css-handler.php, especially save_css_file and its compression result. Read vendor/tubalmartin/cssmin/Minifier.php and class-block-frontend.php around enqueue_styles to verify the reported failures. Done means quoted font-family CSS no longer produces an empty file or broken enqueue behavior, while inline or generated CSS renders correctly.