[カスタム CSS] メディアクエリ演算子を保持

inc/css-customize/css-customize-single.php

@@ -18,7 +18,9 @@ function veu_insert_custom_css() {
 	if ( is_singular() ) {
 		global $post;
 		$css = veu_get_the_custom_css_single( $post );
-		if ( $css ){
+		if ( $css ) {
+			// HTMLエンティティをデコードし、HTMLタグとその内容を削除
+			$css = html_entity_decode($css, ENT_QUOTES | ENT_HTML5);
 			echo '<style type="text/css">/* '. esc_html( veu_get_short_name() ).' CSS Customize Single */' . $css . '</style>';
 		}
 	}
@@ -27,14 +29,20 @@ function veu_insert_custom_css() {
 function veu_get_the_custom_css_single( $post ) {
 	$css_customize = get_post_meta( $post->ID, '_veu_custom_css', true );
 	if ( $css_customize ) {
-		// delete br
+		// Delete br
 		$css_customize = str_replace( PHP_EOL, '', $css_customize );
-		// delete tab
+		// Delete tab
 		$css_customize = preg_replace( '/[\n\r\t]/', '', $css_customize );
-		// multi space convert to single space
-		$css_customize = preg_replace( '/\s(?=\s)/', '', $css_customize );
+		// Multi space convert to single space
+		$css_customize = preg_replace( '/\s+/', ' ', $css_customize );
+		// Ensure proper spacing and remove extra spaces
+		$css_customize = preg_replace( '/\s*([{}:;])\s*/', '$1', $css_customize );
 		// Delete Comment
-		$css_customize = preg_replace( '/[\s\t]*\/\*\/?(\n|[^\/]|[^*]\/)*\*\//', '', $css_customize );
+		$css_customize = preg_replace( '/\/\*.*?\*\//', '', $css_customize );
+		// Delete HTML tags, but keep <style> and <media> tags
+		$css_customize = preg_replace('/<(?!\/?style|\/?media\b)[^>]+>/', '', $css_customize);
+		// Delete leading and trailing spaces
+		$css_customize = trim($css_customize);
 	}
-	return strip_tags( $css_customize );
+	return $css_customize;
 }

inc/css-customize/css-customize.php

@@ -20,10 +20,10 @@ public static function load_css_action() {
 		add_action( $hook_point, array( get_called_class(), 'css_customize_push_css' ), 200 );
 	}
 
-	public  function set_hook() {
+	public function set_hook() {
 		add_action( 'admin_footer', array( $this, 'css_customize_page_js_and_css' ) );
-
 
+
 		// 編集画面への反映
 		// add_filter( 'tiny_mce_before_init', array( $this, 'css_customize_push_editor_css' ) );
 		//
@@ -91,7 +91,7 @@ public function css_customize_page_js_and_css( $hook_suffix ) {
 		if (
 			$hook_suffix == 'appearance_page_theme-css-customize' ||
 			$hook_suffix == 'appearance_page_bv_grid_unit_options'
-			) {
+			) {	
 		?>
 	 <script type="text/javascript">
 	jQuery(document).ready(function($){
@@ -115,66 +115,78 @@ public function css_customize_valid_form() {
 			'customCss' => '',
 		);
 
-		if ( isset( $_POST['bv-css-submit'] ) && ! empty( $_POST['bv-css-submit'] )
-			&& isset( $_POST['bv-css-css'] )
-			&& isset( $_POST['biz-vektor-css-nonce'] ) && wp_verify_nonce( $_POST['biz-vektor-css-nonce'], 'biz-vektor-css-submit' ) ) {
-			$cleanCSS = strip_tags( stripslashes( trim( $_POST['bv-css-css'] ) ) );
-
-			if ( update_option( 'vkExUnit_css_customize', $cleanCSS ) ) {
-				$data['mess'] = '<div id="message" class="updated"><p>' . __( 'Your custom CSS was saved.', 'biz-vektor' ) . '</p></div>'; }
-		} else {
-			if ( isset( $_POST['bv-css-submit'] ) && ! empty( $_POST['bv-css-submit'] ) ) {
-				$data['mess'] = '<div id="message" class="error"><p>' . __( 'Error occured. Please try again.', 'biz-vektor' ) . '</p></div>'; }
+		if (isset($_POST['bv-css-submit']) && !empty($_POST['bv-css-submit'])
+        && isset($_POST['bv-css-css'])
+        && isset($_POST['biz-vektor-css-nonce']) && wp_verify_nonce($_POST['biz-vektor-css-nonce'], 'biz-vektor-css-submit')) {
+            // 生のCSSをそのまま保存
+            $cleanCSS = stripslashes(trim($_POST['bv-css-css']));
+
+            if (update_option('vkExUnit_css_customize', $cleanCSS)) {
+                $data['mess'] = '<div id="message" class="updated"><p>' . __('Your custom CSS was saved.', 'biz-vektor') . '</p></div>';
+            }
+        } else {
+            if (isset($_POST['bv-css-submit']) && !empty($_POST['bv-css-submit'])) {
+                $data['mess'] = '<div id="message" class="error"><p>' . __('Error occured. Please try again.', 'biz-vektor') . '</p></div>';
+            }
+        }
+
+        $custom_css_option = get_option('vkExUnit_css_customize');
+        // htmlspecialchars_decode を使ってデコード
+        $custom_css_option = htmlspecialchars_decode($custom_css_option);
+        // 特定のHTMLエンティティを置換
+        $custom_css_option = str_replace('&gt;=', '>=', $custom_css_option);
+        $custom_css_option = str_replace('&lt;=', '<=', $custom_css_option);
+        $data['customCss'] = $custom_css_option !== false ? $custom_css_option : '';
+
+        return $data;
 		}
-
-		$data['customCss'] = get_option( 'vkExUnit_css_customize' );
-
-		return $data;
-	}
-
-	public static function css_customize_get_css_min() {
-
-		$css_customize = get_option( 'vkExUnit_css_customize' );
-
-		if ( $css_customize ) {
-			// delete br
-			$css_customize = str_replace( PHP_EOL, '', $css_customize );
-			// delete tab
-			$css_customize = preg_replace( '/[\n\r\t]/', '', $css_customize );
-			// multi space convert to single space
-			$css_customize = preg_replace( '/\s(?=\s)/', '', $css_customize );
-			// Delete Comment
-			$css_customize = preg_replace( '/[\s\t]*\/\*\/?(\n|[^\/]|[^*]\/)*\*\//', '', $css_customize );
+
+		public static function css_customize_get_css_min() {
+			$css_customize = get_option( 'vkExUnit_css_customize' );
+			if ( $css_customize ) {
+				// Remove HTML tags, but keep <style> and <media> tags
+				$css_customize = preg_replace('/<(?!\/?style|\/?media\b)[^>]+>/', '', $css_customize);
+				// Delete br
+				$css_customize = str_replace( PHP_EOL, '', $css_customize );
+				// Delete tab
+				$css_customize = preg_replace( '/[\n\r\t]/', '', $css_customize );
+				// Multi space convert to single space
+				$css_customize = preg_replace( '/\s+/', ' ', $css_customize );
+				// Ensure proper spacing and remove extra spaces
+				$css_customize = preg_replace( '/\s*([{}:;])\s*/', '$1', $css_customize );
+				// Delete comment
+				$css_customize = preg_replace( '/\/\*.*?\*\//', '', $css_customize );
+				// Trim leading and trailing spaces
+				$css_customize = trim($css_customize);
+			}
+			return $css_customize;
 		}
-		return $css_customize;
-
-	}
-
-	public static function css_customize_get_the_css_min() {
-		$css_customize = strip_tags( veu_css_customize::css_customize_get_css_min() );
-		return $css_customize;
+
+		public static function css_customize_get_the_css_min() {
+			$css_customize = self::css_customize_get_css_min();
+			return $css_customize;
+		}
+
+		public static function css_customize_push_css() {
+			$css_customize = self::css_customize_get_the_css_min();
+			if ( $css_customize ) {
+			?>
+		<style type="text/css">/* <?php echo veu_get_short_name(); ?> CSS Customize */<?php echo $css_customize; ?>/* End <?php echo veu_get_short_name(); ?> CSS Customize */</style>
+				<?php
+			}
+		}
+
+		// public function css_customize_push_editor_css( $settings ) {
+		// $css_customize = $this->css_customize_get_css_min();
+		//
+		// .editor-styles-wrapper h2 { font-size:30px; }
+		//
+		// if ( isset( $settings['content_style'] ) ) {
+		// $settings['content_style'] .= $css_customize;
+		// } else {
+		// $settings['content_style'] = $css_customize;
+		// }
+		// $settings['content_style'] = $css_customize;
+		// return $settings;
+		// }
 	}
-
-	public static function css_customize_push_css() {
-		$css_customize = veu_css_customize::css_customize_get_the_css_min();
-		if ( $css_customize ) {
-		?>
-<style type="text/css">/* <?php echo veu_get_short_name(); ?> CSS Customize */<?php echo $css_customize; ?>/* End <?php echo veu_get_short_name(); ?> CSS Customize */</style>
-			<?php
-		} // if ( get_option( 'vkExUnit_css_customize' ) ) {
-	} // public function css_customize_push_css() {
-
-	// public function css_customize_push_editor_css( $settings ) {
-	// $css_customize = $this->css_customize_get_css_min();
-	//
-	// .editor-styles-wrapper h2 { font-size:30px; }
-	//
-	// if ( isset( $settings['content_style'] ) ) {
-	// $settings['content_style'] .= $css_customize;
-	// } else {
-	// $settings['content_style'] = $css_customize;
-	// }
-	// $settings['content_style'] = $css_customize;
-	// return $settings;
-	// }
-}

readme.txt

@@ -81,6 +81,7 @@ e.g.
 
 == Changelog ==
 
+[ Bug fix ][ Custom CSS ] Preserving media query operators in custom CSS.
 [ Add setting ][ Post Type Manager ] Add a menu icon setting.
 
 = 9.97.2 =

tests/test-css-customize.php

@@ -13,29 +13,46 @@ class CssCustomizeTest extends WP_UnitTestCase {
 	/**
 	 * カスタマイズCSSのテスト
 	 */
-	function test_css_customize_get_the_css_min() {
-			$tests = array(
-				array(
-					'option'  => 'div > h1 { color:red;   }',
-					'correct' => 'div > h1 { color:red; }',
-				),
-				array(
-					'option'  => 'div > h1 {
-						color:red;
-						}',
-					'correct' => 'div > h1 {color:red;}',
-				),
-				array(
-					'option'  => '<script></script>div > h1 {color:red;}',
-					'correct' => 'div > h1 {color:red;}',
-				),
-			);
+	public function test_css_customize_get_the_css_min() {
+		$tests = array(
+			array(
+				'option'  => 'div > h1 { color:red;   }',
+				'correct' => 'div > h1{color:red;}',
+			),
+			array(
+				'option'  => 'div > h1 {
+					color:red;
+					}',
+				'correct' => 'div > h1{color:red;}',
+			),
+			array(
+				'option'  => '<script></script>div > h1 {color:red;}',
+				'correct' => 'div > h1{color:red;}',
+			),
+			// メディアクエリがある状態のテストケース
+			array(
+				'option'  => '@media (width > 1000px) {p { color: red   ;}}',
+				'correct' => '@media (width > 1000px){p{color:red;}}',
+			),
+			array(
+				'option'  => '@media (width > 1000px) {
+					p {
+						color: red;
+					}
+				}',
+				'correct' => '@media (width > 1000px){p{color:red;}}',
+			),
+			array(
+				'option'  => '<script></script>@media (width > 1000px) {p { color: red;}}',
+				'correct' => '@media (width > 1000px){p{color:red;}}',
+			),
+		);
 
-			print PHP_EOL;
-			print '------------------------------------' . PHP_EOL;
-			print 'veu_css_customize' . PHP_EOL;
-			print '------------------------------------' . PHP_EOL;
-			$before_option = get_option( 'vkExUnit_css_customize' );
+		print PHP_EOL;
+		print '------------------------------------' . PHP_EOL;
+		print 'veu_css_customize' . PHP_EOL;
+		print '------------------------------------' . PHP_EOL;
+		$before_option = get_option( 'vkExUnit_css_customize' );
 
 		foreach ( $tests as $key => $test_value ) {
 			update_option( 'vkExUnit_css_customize', $test_value['option'] );
@@ -45,30 +62,51 @@ function test_css_customize_get_the_css_min() {
 			print 'correct   :' . $test_value['correct'] . PHP_EOL;
 			$this->assertEquals( $test_value['correct'], $return );
 		} // foreach ( $tests as $key => $test_value ) {
-		$before_option = update_option( 'vkExUnit_css_customize', $before_option );
-	} // function test_css_customize_get_the_css_min() {
+			$before_option = update_option( 'vkExUnit_css_customize', $before_option );
+		} // function test_css_customize_get_the_css_min() {
 
-	/* Singular page css */
-	function test_veu_get_the_custom_css_single() {
+	/**
+	 * Singular page css
+	 */
+	public function test_veu_get_the_custom_css_single() {
 
 		// 要件と期待する結果
 		$test_array = array(
 			array(
 				'post_title' => 'タイトル',
 				'post_meta'  => 'div > h1 { color:red;   }',
-				'correct'    => 'div > h1 { color:red; }',
+				'correct'    => 'div > h1{color:red;}'
 			),
 			array(
 				'post_title' => 'タイトル',
 				'post_meta'  => 'div > h1 {
 						color:red;
 						}',
-				'correct'    => 'div > h1 {color:red;}',
+				'correct'    => 'div > h1{color:red;}',
 			),
 			array(
 				'post_title' => 'タイトル',
 				'post_meta'  => '<script></script>div > h1 {color:red;}',
-				'correct'    => 'div > h1 {color:red;}',
+				'correct'    => 'div > h1{color:red;}',
+			),// メディアクエリがある状態のテストケース
+			array(
+				'post_title' => 'タイトル',
+				'post_meta'  => '@media (width > 1000px) {p { color: red   ;}}',
+				'correct'    => '@media (width > 1000px){p{color:red;}}',
+			),
+			array(
+				'post_title' => 'タイトル',
+				'post_meta'  => '@media (width > 1000px) {
+					p {
+						color: red;
+					}
+				}',
+				'correct'    => '@media (width > 1000px){p{color:red;}}',
+			),
+			array(
+				'post_title' => 'タイトル',
+				'post_meta'  => '<script></script>@media (width > 1000px) {p { color: red;}}',
+				'correct'    => '@media (width > 1000px){p{color:red;}}',
 			),
 		);
 
@@ -80,7 +118,12 @@ function test_veu_get_the_custom_css_single() {
 		foreach ( $test_array as $key => $value ) {
 
 			// テスト用のデータを投稿する
-			$post_data['post_content'] = $value['post_title'];
+			$post_data = array(
+				'post_title'   => $value['post_title'],
+				'post_content' => $value['post_title'],
+				'post_status'  => 'publish',
+				'post_type'    => 'post',
+			);
 
 			// 投稿が成功すると投稿IDが返ってくる
 			$post_id = wp_insert_post( $post_data );
@@ -106,5 +149,4 @@ function test_veu_get_the_custom_css_single() {
 		} // foreach ( $test_array as $key => $value ) {
 
 	} // function test_veu_get_the_custom_css_single() {
-
 }