Merge pull request #1395 from vektor-inc/add/block_css_filter

カスタムCSS機能
vektor-inc · Nov 2, 2022 · a8d5446 · a8d5446
2 parents 3c6b1ea + 84e3953
commit a8d5446
Show file tree

Hide file tree

Showing 19 changed files with 926 additions and 11 deletions.
diff --git a/editor-css/_editor_before.scss b/editor-css/_editor_before.scss
@@ -129,6 +129,8 @@ button.image-button:not(.button-delete) {
 @import "./editor_before_slider";
 // グリッドカラムカード
 @import "./editor_before_gridcolcard";
+// edit custom css extension
+@import "./editor_before_custom-css-extension";
 
 // VK Outer 編集パネル
 $color-danger: #dd3333;

diff --git a/editor-css/_editor_before_custom-css-extension.scss b/editor-css/_editor_before_custom-css-extension.scss
@@ -0,0 +1,31 @@
+.vk_edit_custom_css {
+	border: 1px dashed #ccc !important;
+	min-height:3em;
+	left:0;
+	&:before {
+		position:absolute;
+		right:0;
+		top:0;
+		font-size:10px;
+		background: #eeeeee;
+		padding: .2em .6em;
+		z-index: 1000;
+		line-height: 1.2;
+		letter-spacing: 1px;
+		content: 'Custom CSS' !important;
+	}
+}
+
+// animationブロックの中のブロックにカスタムCSSを使われた時にラベルがかぶらないようにずらす
+.vk_animation>.block-editor-inner-blocks>.block-editor-block-list__layout {
+	&>*[class*="vk_custom_css-"]:before {
+		top: 2em;
+	}
+}
+
+.vk-custom-css-sample-code {
+	white-space: pre-wrap;
+	padding: 16px;
+	display: block;
+	background: #f5f5f5;
+}
diff --git a/inc/vk-blocks-pro/admin-pro/admin-pro.php b/inc/vk-blocks-pro/admin-pro/admin-pro.php
@@ -12,6 +12,7 @@
  */
 function vk_blocks_pro_menu( $pro_menu_html ) {
 	$pro_menu_html = '<li><a href="#faq-setting">' . __( 'FAQ Setting', 'vk-blocks' ) . '</a></li>';
+	$pro_menu_html = '<li><a href="#custom-css-setting">' . __( 'Custom CSS Setting', /* 'カスタムCSS設定', */ 'vk-blocks' ) . '</a></li>';
 	return $pro_menu_html;
 }
 add_action( 'vk_blocks_pro_menu', 'vk_blocks_pro_menu' );
diff --git a/inc/vk-blocks-pro/extensions/common/custom-css-extension.php b/inc/vk-blocks-pro/extensions/common/custom-css-extension.php
@@ -0,0 +1,120 @@
+<?php
+/**
+ * VK Blocks - Custom Css Extension
+ *
+ * @package vk-blocks
+ */
+
+/**
+ * カスタムCSSをサポートしているかどうか
+ *
+ * @param string $block_name block_name.
+ * @return string
+ */
+function vk_blocks_has_custom_css_support( $block_name ) {
+	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
+	if ( ! block_has_support( $block_type, array( 'customClassName' ), true ) ) {
+		return false;
+	}
+
+	$return_bool = preg_match( '/core|vk-blocks/', $block_name ) ? true : false;
+
+	$exclude_blocks = array(
+		// ExUnitに入っているvk blocksブロック
+		'vk-blocks/share-button',
+		'vk-blocks/child-page-index',
+		'vk-blocks/contact-section',
+		'vk-blocks/page-list-ancestor',
+		'vk-blocks/sitemap',
+		'vk-blocks/cta',
+	);
+	foreach ( $exclude_blocks as $exclude_block ) {
+		if ( $block_name === $exclude_block ) {
+			$return_bool = false;
+		}
+	}
+	return $return_bool;
+};
+
+/**
+ * 各ブロックにvkbCustomCssのattributesを追加する
+ *
+ * @param string $settings settings.
+ * @param array  $metadata metadata.
+ * @return string
+ */
+function vk_blocks_add_custom_css_attributes( $settings, $metadata ) {
+	if ( ! vk_blocks_has_custom_css_support( $metadata['name'] ) ) {
+		return $settings;
+	}
+
+	$attributes = array();
+	if ( ! empty( $settings['attributes'] ) ) {
+		$attributes = $settings['attributes'];
+	}
+	$add_attributes = array(
+		'vkbCustomCss' => array(
+			'type'    => 'string',
+			'default' => '',
+		),
+	);
+
+	$settings['attributes'] = array_merge(
+		$attributes,
+		$add_attributes
+	);
+	return $settings;
+}
+add_filter( 'block_type_metadata_settings', 'vk_blocks_add_custom_css_attributes', 10, 2 );
+
+/**
+ * Render Custom Css Extension css
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/3358251ae150e33dd6c0e0fb15be110cca1b5c59/lib/block-supports/layout.php#L294
+ *
+ * @param string $block_content block_content.
+ * @param array  $block block.
+ * @return string
+ */
+function vk_blocks_render_custom_css( $block_content, $block ) {
+	if ( ! vk_blocks_has_custom_css_support( $block['blockName'] ) ) {
+		return $block_content;
+	}
+
+	if ( empty( $block['attrs']['vkbCustomCss'] ) ) {
+		return $block_content;
+	}
+
+	$css = $block['attrs']['vkbCustomCss'];
+	// selector文字列があるとき
+	if ( strpos( $css, 'selector' ) !== false ) {
+		// Uniqueクラスを生成
+		$unique_class = wp_unique_id( 'vk_custom_css_' );
+		// selectorをUniqueクラスに変換
+		$css = preg_replace( '/selector/', '.' . $unique_class, $css );
+
+		// vk_custom_cssをUniqueクラスに変換
+		if ( strpos( $block_content, ' vk_custom_css ' ) !== false ) {
+			// vk_custom_cssが途中に付いている e.g.class="hoge vk_custom_css huga"
+			$block_content = preg_replace( '/ vk_custom_css /', ' ' . $unique_class . ' ', $block_content, 1 );
+		} elseif ( strpos( $block_content, '="vk_custom_css ' ) !== false ) {
+			// vk_custom_cssから始まる 複数クラス
+			$block_content = preg_replace( '/="vk_custom_css /', '="' . $unique_class . ' ', $block_content, 1 );
+		} elseif ( strpos( $block_content, ' vk_custom_css"' ) !== false ) {
+			// vk_custom_cssで終わる 複数クラス
+			$block_content = preg_replace( '/ vk_custom_css"/', ' ' . $unique_class . '"', $block_content, 1 );
+		} else {
+			// vk_custom_cssのみ
+			$block_content = preg_replace( '/vk_custom_css/', $unique_class, $block_content, 1 );
+		}
+	}
+	$css = vk_blocks_minify_css( $css );
+	if ( function_exists( 'wp_enqueue_block_support_styles' ) ) {
+		wp_enqueue_block_support_styles( $css );
+		// 5.8のサポートを切るならelse内は削除する
+	} else {
+		$block_content = '<style>' . $css . '</style>' . $block_content;
+	}
+	return $block_content;
+}
+add_filter( 'render_block', 'vk_blocks_render_custom_css', 10, 2 );
diff --git a/inc/vk-blocks-pro/vk-blocks-pro-functions.php b/inc/vk-blocks-pro/vk-blocks-pro-functions.php
@@ -8,6 +8,8 @@
 // Pro 用の管理画面を読み込み.
 require_once dirname( __FILE__ ) . '/admin-pro/admin-pro.php';
 
+require_once dirname( __FILE__ ) . '/extensions/common/custom-css-extension.php';
+
 /**
  * Pro 専用のスクリプトの読み込み
  */

diff --git a/inc/vk-blocks/class-vk-blocks-block-loader.php b/inc/vk-blocks/class-vk-blocks-block-loader.php
@@ -150,7 +150,7 @@ public function register_blocks_assets() {
 			'vk-blocks-build-js',
 			$this->assets_build_url . 'block-build.js',
 			$asset_file['dependencies'],
-			VK_BLOCKS_VERSION,
+			$asset_file['version'],
 			true
 		);
 

diff --git a/inc/vk-blocks/class-vk-blocks-options.php b/inc/vk-blocks/class-vk-blocks-options.php
@@ -35,15 +35,15 @@ private function __construct() {
 	 */
 	public static function options_scheme() {
 		$default_options_schema = array(
-			'balloon_border_width'      => array(
+			'balloon_border_width'        => array(
 				'type'    => 'number',
 				'default' => 1,
 			),
-			'margin_unit'               => array(
+			'margin_unit'                 => array(
 				'type'    => 'string',
 				'default' => 'rem',
 			),
-			'margin_size'               => array(
+			'margin_size'                 => array(
 				'type'  => 'object',
 				'items' => array(
 					'xl' => array(
@@ -133,22 +133,26 @@ public static function options_scheme() {
 					),
 				),
 			),
-			'load_separate_option'      => array(
+			'load_separate_option'        => array(
 				'type'    => 'boolean',
 				'default' => false,
 			),
-			'vk_blocks_pro_license_key' => array(
+			'vk_blocks_pro_license_key'   => array(
 				'type'    => 'string',
 				'default' => null,
 			),
-			'display_vk_block_template' => array(
+			'display_vk_block_template'   => array(
 				'type'    => 'string',
 				'default' => 'display',
 			),
-			'new_faq_accordion'         => array(
+			'new_faq_accordion'           => array(
 				'type'    => 'string',
 				'default' => 'disable',
 			),
+			'show_custom_css_editor_flag' => array(
+				'type'    => 'string',
+				'default' => 'show',
+			),
 		);
 		return $default_options_schema;
 	}

diff --git a/inc/vk-blocks/vk-blocks-functions.php b/inc/vk-blocks/vk-blocks-functions.php
@@ -77,8 +77,15 @@ function vk_blocks_blocks_assets() {
 	} else {
 		wp_localize_script( 'vk-blocks-build-js', 'vk_blocks_check', array( 'is_pro' => false ) );
 	}
-	// ホーム URL を渡す用.
-	wp_localize_script( 'vk-blocks-build-js', 'vk_blocks_params', array( 'home_url' => home_url( '/' ) ) );
+
+	wp_localize_script(
+		'vk-blocks-build-js',
+		'vk_blocks_params',
+		array(
+			'home_url'                    => home_url( '/' ),
+			'show_custom_css_editor_flag' => $vk_blocks_options['show_custom_css_editor_flag'],
+		)
+	);
 
 	global $vk_blocks_common_attributes;
 	$vk_blocks_common_attributes = array(