Merge pull request #2418 from vektor-inc/feature/icon/empty-atag-acce…

…ssibility

[ アイコン ]ツールバーからのリンク指定機能にnoreferrer、nofollow、link descriptionオプションを追加

readme.txt

@@ -107,7 +107,8 @@ e.g.
 1. VK Blocks examples.
 
 == Changelog ==
-[ Add function ][ Slider ] Added noreferrer, nofollow, and link description options to the link feature.
+
+[ Add function ][ Icon / Slider ] Added noreferrer, nofollow, and link description options to the link feature.
 
 [ Editor Design Bug Fix ] [ Grid Column (Pro) ] Fixed an issue where the 'is-vertical' layout of grid column items was not displayed vertically.
 

src/blocks/icon/block.json

@@ -48,6 +48,14 @@
 		"iconTarget": {
 			"type": "Boolean",
 			"default": false
+		},
+		"relAttribute": {
+			"type": "string",
+			"default": ""
+		},
+		"linkDescription": {
+			"type": "string",
+			"default": ""
 		}
 	},
 	"description": "Display icons with Font Awesome.",

src/blocks/icon/component.js

@@ -1,3 +1,4 @@
+import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import parse from 'html-react-parser';
 import { isHexColor } from '@vkblocks/utils/is-hex-color';
@@ -16,6 +17,8 @@ export class VKBIcon extends Component {
 		const iconFontColor = this.props.lbFontColor;
 		const iconUrl = this.props.lbUrl;
 		const iconTarget = this.props.lbTarget;
+		const relAttribute = this.props.lbRelAttribute;
+		const linkDescription = this.props.lbLinkDescription;
 
 		// outer & align
 		let outerClass = 'vk_icon_frame';
@@ -145,16 +148,17 @@ export class VKBIcon extends Component {
 		let blockContentWrapper = '';
 		if (iconUrl !== null && iconUrl !== undefined && iconUrl !== '') {
 			blockContentWrapper = (
-				/*
-				 target=_blankで指定すると、WordPressが自動でnoopener noreferrerを付与する。
-				 ブロックでもrelを付与しないとブロックが壊れる。
-				 */
 				<a
 					href={iconUrl}
 					className="vk_icon_link"
-					target={iconTarget && '_blank'}
-					rel={iconTarget && 'noopener noreferrer'}
+					{...(iconTarget ? { target: '_blank' } : {})}
+					{...(relAttribute ? { rel: relAttribute } : {})}
 				>
+					<span className="screen-reader-text">
+						{linkDescription
+							? linkDescription
+							: __('Icon link', 'vk-blocks-pro')}
+					</span>
 					{blockContent}
 				</a>
 			);

src/blocks/icon/deprecated/1.94.2/component.js

@@ -0,0 +1,171 @@
+import { Component } from '@wordpress/element';
+import parse from 'html-react-parser';
+import { isHexColor } from '@vkblocks/utils/is-hex-color';
+
+export class VKBIcon extends Component {
+	render() {
+		let fontAwesomeIcon = this.props.lbFontAwesomeIcon;
+		const iconSize = this.props.lbSize;
+		const iconSizeUnit = this.props.lbSizeUnit;
+		const iconMargin = this.props.lbMargin;
+		const iconMarginUnit = this.props.lbMarginUnit;
+		const iconRadius = this.props.lbRadius;
+		const iconAlign = this.props.lbAlign;
+		const iconType = this.props.lbType;
+		const iconColor = this.props.lbColor;
+		const iconFontColor = this.props.lbFontColor;
+		const iconUrl = this.props.lbUrl;
+		const iconTarget = this.props.lbTarget;
+
+		// outer & align
+		let outerClass = 'vk_icon_frame';
+		if (iconAlign === 'center') {
+			outerClass += ' text-center';
+		} else if (iconAlign === 'right') {
+			outerClass += ' text-right';
+		}
+
+		// color style
+		let borderClass = 'vk_icon_border';
+		let borderStyle = {};
+
+		if (iconType === '0') {
+			// Solid color
+			if (
+				iconColor !== 'undefined' &&
+				iconColor !== null &&
+				iconColor !== undefined
+			) {
+				// Solid color
+				borderClass += ` has-background`;
+
+				if (isHexColor(iconColor)) {
+					// custom color
+					borderStyle = {
+						backgroundColor: `${iconColor}`,
+					};
+				} else {
+					// palette color
+					borderClass += ` has-${iconColor}-background-color`;
+				}
+			}
+		} else {
+			if (
+				iconColor !== 'undefined' &&
+				iconColor !== null &&
+				iconColor !== undefined
+			) {
+				borderClass += ` has-text-color`;
+
+				if (isHexColor(iconColor)) {
+					// custom color
+					borderStyle = {
+						color: `${iconColor}`,
+					};
+				} else {
+					// palette color
+					borderClass += ` has-${iconColor}-color`;
+				}
+			}
+
+			if (iconType === '1') {
+				// Icon & Frame
+				outerClass += ' is-style-outline';
+			} else {
+				// icon only
+				outerClass += ' is-style-noline';
+			}
+		}
+
+		// margin
+		if (
+			!(
+				iconSize === 36 &&
+				iconSizeUnit === 'px' &&
+				iconMargin === 22 &&
+				iconMarginUnit === 'px'
+			)
+		) {
+			borderStyle.width =
+				'calc(' +
+				(iconSize + iconSizeUnit) +
+				' + ' +
+				(iconMargin * 2 + iconMarginUnit) +
+				')';
+			borderStyle.height = borderStyle.width;
+		}
+
+		// border radius
+		if (iconRadius !== 50) {
+			borderStyle.borderRadius = iconRadius + `%`;
+		}
+
+		// icon font
+		let faIconTag = '';
+		if (fontAwesomeIcon) {
+			fontAwesomeIcon = fontAwesomeIcon.replace(/ fas/g, 'fas');
+
+			// font size
+			let fontStyle = ``;
+			let fontClass = ` vk_icon_font `;
+			if (!(iconSize === 36 && iconSizeUnit === 'px')) {
+				fontStyle = ` font-size:${iconSize}${iconSizeUnit};`;
+			}
+
+			// icon color
+			if (
+				iconFontColor !== 'undefined' &&
+				iconFontColor !== null &&
+				iconFontColor !== undefined
+			) {
+				if (isHexColor(iconFontColor)) {
+					// custom color
+					fontStyle += ` color:${iconFontColor};`;
+				} else {
+					// palette color
+					fontClass += ` has-text-color has-${iconFontColor}-color `;
+				}
+			}
+
+			// add class and inline css
+			const faIconFragment = fontAwesomeIcon.split(' ');
+			faIconFragment[0] = faIconFragment[0] + ` style="${fontStyle};"`;
+			faIconFragment[1] = ' ' + faIconFragment[1] + fontClass;
+			faIconTag = faIconFragment.join('');
+		}
+
+		const blockContent = (
+			<>
+				<div className={borderClass} style={borderStyle}>
+					{parse(faIconTag)}
+				</div>
+			</>
+		);
+
+		let blockContentWrapper = '';
+		if (iconUrl !== null && iconUrl !== undefined && iconUrl !== '') {
+			blockContentWrapper = (
+				/*
+				 target=_blankで指定すると、WordPressが自動でnoopener noreferrerを付与する。
+				 ブロックでもrelを付与しないとブロックが壊れる。
+				 */
+				<a
+					href={iconUrl}
+					className="vk_icon_link"
+					target={iconTarget && '_blank'}
+					rel={iconTarget && 'noopener noreferrer'}
+				>
+					{blockContent}
+				</a>
+			);
+		} else {
+			blockContentWrapper = blockContent;
+		}
+
+		return (
+			<>
+				<div className={outerClass}>{blockContentWrapper}</div>
+			</>
+		);
+	}
+}

src/blocks/icon/deprecated/1.94.2/save.js

@@ -0,0 +1,46 @@
+import { VKBIcon } from './component';
+import { useBlockProps } from '@wordpress/block-editor';
+
+export default function save({ attributes }) {
+	let {
+		faIcon,
+		iconSize,
+		iconSizeUnit,
+		iconMargin,
+		iconMarginUnit,
+		iconRadius,
+		iconAlign,
+		iconType,
+		iconColor,
+		iconFontColor,
+		iconUrl,
+		iconTarget,
+	} = attributes;
+
+	if (faIcon && !faIcon.match(/<i/)) {
+		faIcon = `<i class="${faIcon}"></i>`;
+	}
+
+	const blockProps = useBlockProps.save({
+		className: `vk_icon`,
+	});
+
+	return (
+		<div {...blockProps}>
+			<VKBIcon
+				lbFontAwesomeIcon={faIcon}
+				lbSize={iconSize}
+				lbSizeUnit={iconSizeUnit}
+				lbMargin={iconMargin}
+				lbMarginUnit={iconMarginUnit}
+				lbRadius={iconRadius}
+				lbAlign={iconAlign}
+				lbType={iconType}
+				lbColor={iconColor}
+				lbFontColor={iconFontColor}
+				lbUrl={iconUrl}
+				lbTarget={iconTarget}
+			/>
+		</div>
+	);
+}

src/blocks/icon/deprecated/index.js

@@ -1,5 +1,6 @@
 import save1_13_2 from './1.13.2/save';
 import save1_16_1 from './1.16.1/save';
+import save1_94_2 from './1.94.2/save';
 
 const blockAttributes = {
 	faIcon: {
@@ -48,26 +49,49 @@ const blockAttributes = {
 	},
 };
 
-/* 次回対応おねがいします
+const blockAttributes2 = {
+	...blockAttributes,
+	iconColor: {
+		type: 'string',
+	},
+	iconUrl: {
+		type: 'string',
+	},
+}
+
 const blockAttributes3 = {
 	...blockAttributes2,
 	iconFontColor: {
 		type: 'string',
 	},
 }
-*/
 
-const blockAttributes2 = {
-	...blockAttributes,
-	iconColor: {
+/* 次回対応おねがいします
+const blockAttributes4 = {
+	...blockAttributes3,
+	relAttribute: {
 		type: 'string',
+		default: ''
 	},
-	iconUrl: {
+	linkDescription: {
 		type: 'string',
-	},
+		default: ''
+	}
 }
+*/
 
 export const deprecated = [
+	{
+		attributes: blockAttributes3,
+		save: save1_94_2,
+		migrate: (attributes) => {
+			return {
+				...attributes,
+				relAttribute: '',
+				linkDescription: '',
+			};
+		},
+	},
 	{
 		attributes: blockAttributes2,
 		save: save1_16_1,

src/blocks/icon/edit.js

@@ -38,6 +38,8 @@ export default function IconEdit(props) {
 		iconColor,
 		iconFontColor,
 		iconUrl,
+		relAttribute,
+		linkDescription,
 		iconTarget,
 	} = attributes;
 
@@ -280,6 +282,14 @@ export default function IconEdit(props) {
 						setLinkTarget={(target) =>
 							setAttributes({ iconTarget: !!target })
 						}
+						relAttribute={relAttribute}
+						setRelAttribute={(rel) =>
+							setAttributes({ relAttribute: rel })
+						}
+						linkDescription={linkDescription}
+						setLinkDescription={(description) =>
+							setAttributes({ linkDescription: description })
+						}
 					/>
 				</ToolbarGroup>
 			</BlockControls>

src/blocks/icon/save.js

@@ -15,6 +15,8 @@ export default function save({ attributes }) {
 		iconFontColor,
 		iconUrl,
 		iconTarget,
+		relAttribute,
+		linkDescription,
 	} = attributes;
 
 	if (faIcon && !faIcon.match(/<i/)) {
@@ -40,6 +42,8 @@ export default function save({ attributes }) {
 				lbFontColor={iconFontColor}
 				lbUrl={iconUrl}
 				lbTarget={iconTarget}
+				lbRelAttribute={relAttribute}
+				lbLinkDescription={linkDescription}
 			/>
 		</div>
 	);

test/e2e-tests/fixtures/blocks/vk-blocks__icon__deprecated-1-94-2.html

@@ -0,0 +1,3 @@
+<!-- wp:vk-blocks/icon {"iconFontColor":"#ffff00"} -->
+<div class="wp-block-vk-blocks-icon vk_icon"><div class="vk_icon_frame"><div class="vk_icon_border"><i style="color:#ffff00" class="fas vk_icon_font fa-user"></i></div></div></div>
+<!-- /wp:vk-blocks/icon -->

test/e2e-tests/fixtures/blocks/vk-blocks__icon__deprecated-1-94-2__link.html

@@ -0,0 +1,3 @@
+<!-- wp:vk-blocks/icon {"iconFontColor":"#ffff00","iconUrl":"http://localhost:8888/","iconTarget":true,"relAttribute":"noreferrer nofollow","linkDescription":"test"} -->
+<div class="wp-block-vk-blocks-icon vk_icon"><div class="vk_icon_frame"><a href="http://localhost:8888/" class="vk_icon_link" target="_blank" rel="noreferrer nofollow"><span class="screen-reader-text">test</span><div class="vk_icon_border"><i style="color:#ffff00" class="fas vk_icon_font fa-user"></i></div></a></div></div>
+<!-- /wp:vk-blocks/icon -->