Fix/title color recovery

readme.txt

@@ -4,7 +4,7 @@ Donate link:
 Tags: Gutenberg,FAQ,alert
 Requires at least: 5.7
 Tested up to: 5.8.2
-Stable tag: 1.20.5
+Stable tag: 1.20.6
 Requires PHP: 7.0
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -63,7 +63,9 @@ e.g.
 
 == Changelog ==
 
-[ fix ][ Button ] change option order in panel
+= 1.20.6 =
+[ Bug fix ][ Heading ] cope with custom color palette
+[ Bug fix ][ Button ] change option order in panel
 [ Bug fix ][ Grid Column(Pro) ] cope with custom color palette
 [ Bug fix ][ Heading ] cope with custom color palette
 [ Bug fix ][ Balloon ] cope with custom color palette

src/blocks/heading/deprecated/1.20.5a/save.js

@@ -0,0 +1,211 @@
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+import ReactHtmlParser from 'react-html-parser';
+import { isHexColor } from '@vkblocks/utils/is-hex-color';
+import classnames from 'classnames';
+
+const renderTitle = (level, contents, tStyle, headingStyle) => {
+	switch (level) {
+		case 1:
+			return (
+				<h1 style={tStyle} className={headingStyle}>
+					{contents}
+				</h1>
+			);
+		case 2:
+			return (
+				<h2 style={tStyle} className={headingStyle}>
+					{contents}
+				</h2>
+			);
+		case 3:
+			return (
+				<h3 style={tStyle} className={headingStyle}>
+					{contents}
+				</h3>
+			);
+		case 4:
+			return (
+				<h4 style={tStyle} className={headingStyle}>
+					{contents}
+				</h4>
+			);
+		case 5:
+			return (
+				<h5 style={tStyle} className={headingStyle}>
+					{contents}
+				</h5>
+			);
+		case 6:
+			return (
+				<h6 style={tStyle} className={headingStyle}>
+					{contents}
+				</h6>
+			);
+	}
+};
+
+export default function save(props) {
+	const { attributes } = props;
+	const {
+		level,
+		align,
+		title,
+		titleColor,
+		titleSize,
+		subText,
+		subTextFlag,
+		subTextColor,
+		subTextSize,
+		titleStyle,
+		titleMarginBottom,
+		outerMarginBottom,
+		fontAwesomeIconBefore,
+		fontAwesomeIconAfter,
+		fontAwesomeIconColor,
+	} = attributes;
+	const containerClass = `vk_heading vk_heading-style-${titleStyle}`;
+
+	const cStyle = {
+		marginBottom:
+			outerMarginBottom !== null && outerMarginBottom !== undefined
+				? outerMarginBottom + `rem`
+				: undefined,
+	};
+
+	let headingColorClassName = '';
+	// if (titleColor !== undefined) {
+	// 	headingColorClassName += `has-text-color`;
+	// 	if (!isHexColor(titleColor)) {
+	// 		headingColorClassName += ` has-${titleColor}-color`;
+	// 	}
+	// }
+
+	const headingStyle = classnames('vk_heading_title', {
+		[`vk_heading_title-style-${titleStyle}`]: !!titleStyle,
+		[`${headingColorClassName}`]: !!headingColorClassName,
+	});
+
+	const tStyle = {
+		color:
+			titleColor !== null &&
+			titleColor !== undefined &&
+			isHexColor(titleColor)
+				? titleColor
+				: undefined,
+		fontSize:
+			titleSize !== null && titleSize !== undefined
+				? titleSize + 'rem'
+				: undefined,
+		marginBottom:
+			titleMarginBottom !== null && titleMarginBottom !== undefined
+				? titleMarginBottom + 'rem'
+				: undefined,
+		textAlign: align !== null && align !== undefined ? align : undefined,
+	};
+
+	let subTextColorClassName = '';
+	// if (subTextColor !== undefined) {
+	// 	subTextColorClassName += `has-text-color`;
+	// 	if (!isHexColor(subTextColor)) {
+	// 		subTextColorClassName += ` has-${subTextColor}-color`;
+	// 	}
+	// }
+
+	const subTextClass = classnames('vk_heading_subtext', {
+		[`vk_heading_subtext-style-${titleStyle}`]: !!titleStyle,
+		[`${subTextColorClassName}`]: !!subTextColorClassName,
+	});
+
+	const subTextStyle = {
+		color:
+			subTextColor !== null &&
+			subTextColor !== undefined &&
+			isHexColor(subTextColor)
+				? subTextColor
+				: undefined,
+		fontSize:
+			subTextSize !== null && subTextSize !== undefined
+				? subTextSize + 'rem'
+				: undefined,
+		textAlign: align !== null && align !== undefined ? align : undefined,
+	};
+
+	let iconColorClassName = '';
+	// if (fontAwesomeIconColor !== undefined) {
+	// 	iconColorClassName += `has-text-color`;
+	// 	if (!isHexColor(fontAwesomeIconColor)) {
+	// 		iconColorClassName += ` has-${fontAwesomeIconColor}-color`;
+	// 	}
+	// }
+
+	const fontAwesomeIconStyle =
+		fontAwesomeIconColor && isHexColor(fontAwesomeIconColor)
+			? `style="color:${fontAwesomeIconColor};"`
+			: '';
+
+	let iconBefore = fontAwesomeIconBefore;
+	let iconAfter = fontAwesomeIconAfter;
+	//add class
+	if (iconBefore && iconColorClassName) {
+		const faIconFragmentBefore = iconBefore.split('<i class="');
+		faIconFragmentBefore[0] =
+			faIconFragmentBefore[0] + `<i class="${iconColorClassName} `;
+		iconBefore = faIconFragmentBefore.join('');
+	}
+
+	if (iconAfter && iconColorClassName) {
+		const faIconFragmentAfter = iconAfter.split('<i class="');
+		faIconFragmentAfter[0] =
+			faIconFragmentAfter[0] + `<i class="${iconColorClassName} `;
+		iconAfter = faIconFragmentAfter.join('');
+	}
+
+	//add inline css
+	if (iconBefore && fontAwesomeIconStyle) {
+		const faIconFragmentBefore = iconBefore.split('<i');
+		faIconFragmentBefore[0] =
+			faIconFragmentBefore[0] + `<i ${fontAwesomeIconStyle} `;
+		iconBefore = faIconFragmentBefore.join('');
+	}
+
+	if (iconAfter && fontAwesomeIconStyle) {
+		const faIconFragmentAfter = iconAfter.split('<i');
+		faIconFragmentAfter[0] =
+			faIconFragmentAfter[0] + `<i ${fontAwesomeIconStyle} `;
+		iconAfter = faIconFragmentAfter.join('');
+	}
+
+	const titleContent = (
+		<>
+			{ReactHtmlParser(iconBefore)}
+			<RichText.Content tagName={'span'} value={title} />
+			{ReactHtmlParser(iconAfter)}
+		</>
+	);
+
+	let subtextContent;
+	if (subTextFlag === 'on') {
+		subtextContent = (
+			<RichText.Content
+				tagName={'p'}
+				value={subText}
+				style={subTextStyle}
+				className={subTextClass}
+			/>
+		);
+	}
+
+	const blockProps = useBlockProps.save({
+		className: ``,
+	});
+
+	return (
+		<div {...blockProps}>
+			<div className={containerClass} style={cStyle}>
+				{renderTitle(level, titleContent, tStyle, headingStyle)}
+				{subtextContent}
+			</div>
+		</div>
+	);
+}

src/blocks/heading/deprecated/index.js

@@ -13,6 +13,7 @@ import save0_60_1 from './0.60.1/save';
 import save1_3_2 from './1.3.2/save';
 import save1_9_1 from './1.9.1/save';
 import save1_20_5 from './1.20.5/save';
+import save1_20_5a from './1.20.5a/save';
 
 const blockAttributes = {
 	level: {
@@ -135,7 +136,46 @@ const blockAttributes4 = {
 	},
 }
 
+const blockAttributes5 = {
+	...blockAttributes4,
+	outerMarginBottom: {
+		type: "number",
+		default: null
+	},
+	titleColor: {
+		type: "string",
+	},
+	titleSize: {
+		type: 'number',
+	},
+	titleMarginBottom: {
+		type: "number",
+		default: null
+	},
+	subTextFlag: {
+		type: "string",
+		default: "off"
+	},
+	subTextColor: {
+		type: "string",
+	},
+	subTextSize: {
+		type: 'number',
+	},
+	fontAwesomeIconColor: {
+		type: 'string',
+	},
+}
+
 const deprecated = [
+	{
+		attributes: blockAttributes5,
+		save: save1_20_5a,
+	},
+	{
+		attributes: blockAttributes5,
+		save: save1_20_5,
+	},
 	{
 		attributes: blockAttributes4,
 		save: save1_20_5,

vk-blocks.php

@@ -3,8 +3,8 @@
  * Plugin Name: VK Blocks Pro
  * Plugin URI: https://github.com/vektor-inc/vk-blocks
  * Description: This is a plugin that extends Gutenberg's blocks.
- * Version: 1.20.5
- * Stable tag: 1.20.5
+ * Version: 1.20.6
+ * Stable tag: 1.20.6
  * Requires at least: 5.7
  * Author: Vektor,Inc.
  * Author URI: https://vektor-inc.co.jp