【グリッドカラムカード 】ツールバーからのリンク指定機能にnoreferrer、nofollow、link descriptionオプションを追加

readme.txt

@@ -108,9 +108,10 @@ e.g.
 
 == Changelog ==
 [ Add function ][ group ] 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.
+[ Add function ][ Grid Column Card (Pro) ] Added noreferrer and nofollow 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.
 [ Add function ][ Slider ] Added noreferrer, nofollow, and link description options to the link feature.
-
 [ Add function ][ Animation (Pro) / Fixed Display (Pro) / Outer (Pro) ] Added support for layout.allowJustification: false, allowing full-width/wide alignment in block themes where wrapped blocks previously did not appear as full-width or wide in the editor.
 [ Bug fix ][ Icon ] Fixed an unwanted bottom margin appearing.
 [ Specification change ] Fixed the zoom-out toggle not always displaying in the editor toolbar (updated blocks.json API version from 2 to 3).

src/blocks/_pro/gridcolcard-item/block.json

@@ -70,11 +70,16 @@
 			"type": "string"
 		},
 		"url": {
-			"type": "string"
+			"type": "string",
+			"default": ""
 		},
 		"urlOpenType": {
 			"type": "boolean",
 			"default": false
+		},
+		"relAttribute": {
+			"type": "string",
+			"default": ""
 		}
 	}
 }

src/blocks/_pro/gridcolcard-item/deprecated/1.95.0/save.js

@@ -0,0 +1,109 @@
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { isHexColor } from '@vkblocks/utils/is-hex-color';
+import { isGradientStyle } from '@vkblocks/utils/is-gradient-style';
+
+import classnames from 'classnames';
+
+export default function save(props) {
+	const { attributes } = props;
+	const {
+		backgroundColor,
+		textColor,
+		headerDisplay,
+		footerDisplay,
+		containerSpace,
+		borderRadius,
+		border,
+		borderColor,
+		borderWidth,
+		backgroundGradient,
+		url,
+		urlOpenType,
+	} = attributes;
+
+	// カラーパレットに対応
+	const containerClasses = classnames('vk_gridcolcard_item', {
+		[`vk_gridcolcard_item-noHeader`]: headerDisplay === 'delete',
+		[`vk_gridcolcard_item-noFooter`]: footerDisplay === 'delete',
+		[`has-background`]: !!backgroundColor,
+		[`has-border-color`]: !!border,
+		[`has-${backgroundColor}-background-color`]:
+			!!backgroundColor && !isHexColor(backgroundColor),
+		[`has-${backgroundGradient}-gradient-background`]:
+			!!backgroundGradient && !isGradientStyle(backgroundGradient),
+		[`has-${borderColor}-border-color`]:
+			!!border && !!borderColor && !isHexColor(borderColor),
+	});
+
+	const innerClasses = classnames('vk_gridcolcard_item_container', {
+		[`has-text-color`]: !!textColor,
+		[`has-${textColor}-color`]: !!textColor && !isHexColor(textColor),
+	});
+
+	const style = {
+		backgroundColor: null,
+		border: null,
+	};
+	if (borderRadius) {
+		style.borderRadius = `${borderRadius}`;
+	}
+
+	// 背景色
+	if (backgroundColor && isHexColor(backgroundColor)) {
+		// custom color
+		style.backgroundColor = `${backgroundColor}`;
+	}
+
+	// 背景グラデーション
+	if (backgroundGradient && isGradientStyle(backgroundGradient)) {
+		// custom color
+		style.background = `${backgroundGradient}`;
+	}
+
+	// 線の色と太さ
+	if (border) {
+		style.borderWidth = borderWidth;
+		if (isHexColor(borderColor)) {
+			// custom color
+			style.borderColor = `${borderColor}`;
+		}
+	}
+
+	// 文字色
+	const textColorCustom =
+		textColor && isHexColor(textColor) ? textColor : null;
+
+	const blockProps = useBlockProps.save({
+		className: classnames(containerClasses, {
+			'vk_gridcolcard_item-noHeader': headerDisplay === 'delete',
+			'vk_gridcolcard_item-noFooter': footerDisplay === 'delete',
+			[`vk_gridcolcard_item-header-${headerDisplay}`]:
+				headerDisplay !== 'delete',
+			[`vk_gridcolcard_item-footer-${footerDisplay}`]:
+				footerDisplay !== 'delete',
+		}),
+		style,
+	});
+
+	const TagName = url ? 'a' : 'div';
+
+	return (
+		<div {...blockProps}>
+			<TagName
+				className={innerClasses}
+				style={{
+					paddingTop: containerSpace.top,
+					paddingBottom: containerSpace.bottom,
+					paddingLeft: containerSpace.left,
+					paddingRight: containerSpace.right,
+					color: textColorCustom,
+				}}
+				href={url}
+				target={urlOpenType ? '_blank' : undefined}
+				rel={urlOpenType ? 'noopener noreferrer' : undefined}
+			>
+				<InnerBlocks.Content />
+			</TagName>
+		</div>
+	);
+}

src/blocks/_pro/gridcolcard-item/deprecated/index.js

@@ -1,6 +1,7 @@
 import save1_38_0 from './1.38.0/save';
 import save1_71_0 from './1.71.0/save';
 import save1_87_0 from './1.87.0/save';
+import save1_95_0 from './1.95.0/save';
 
 const blockAttributes = {
 	editLock: {
@@ -63,12 +64,45 @@ const blockAttributes = {
 const blockAttributes2 = {
 	...blockAttributes,
 	borderWidth: {
-		type: 'number',
-		default: 1,
+		type: 'string',
+		default: '1px',
+	},
+};
+
+// 1.87.0 からの変更で追加したもの
+const blockAttributes3 = {
+	...blockAttributes2,
+	headerDisplay: {
+		type: 'string',
+		default: 'display'
+	},
+	footerDisplay: {
+		type: 'string',
+		default: 'display'
 	},
 };
 
+/* 次回対応おねがいします
+const blockAttributes4 = {
+	...blockAttributes3,
+	relAttribute: {
+		"type": "string",
+		"default": ""
+	}
+};
+*/
+
 const deprecated = [
+	{
+		attributes: blockAttributes3,
+		save: save1_95_0,
+		migrate: (attributes) => {
+			return {
+				...attributes,
+				relAttribute: ''
+			};
+		},
+	},
 	{
 		attributes: blockAttributes2,
 		save: save1_87_0,

src/blocks/_pro/gridcolcard-item/edit.js

@@ -8,25 +8,22 @@ import {
 	CheckboxControl,
 	TextControl,
 	ToolbarGroup,
-	ToolbarButton,
-	Dropdown,
 } from '@wordpress/components';
 import {
 	InspectorControls,
 	InnerBlocks,
 	useBlockProps,
 	BlockControls,
 	store as blockEditorStore,
-	URLInput,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 import CommonItemControl from '../gridcolcard/edit-common.js';
-import { link, linkOff, keyboardReturn } from '@wordpress/icons';
 import classnames from 'classnames';
 import { isHexColor } from '@vkblocks/utils/is-hex-color';
 import { isGradientStyle } from '@vkblocks/utils/is-gradient-style';
 import { isParentReusableBlock } from '@vkblocks/utils/is-parent-reusable-block';
+import LinkToolbar from '@vkblocks/components/link-toolbar';
 
 export default function Edit(props) {
 	const { attributes, setAttributes, clientId } = props;
@@ -57,6 +54,7 @@ export default function Edit(props) {
 		backgroundGradient,
 		url,
 		urlOpenType,
+		relAttribute,
 	} = attributes;
 
 	// editModeは値として保持させずに常にすべてのカラムモードでスタートさせる
@@ -224,78 +222,35 @@ export default function Edit(props) {
 		style,
 	});
 
+	const handleRelChange = (type, checked) => {
+		const rel = relAttribute ? relAttribute.split(' ') : [];
+		if (checked) {
+			rel.push(type);
+		} else {
+			const index = rel.indexOf(type);
+			if (index !== -1) {
+				rel.splice(index, 1);
+			}
+		}
+
+		setAttributes({ relAttribute: rel.join(' ') });
+	};
+
 	return (
 		<>
 			<BlockControls>
 				<ToolbarGroup>
-					<Dropdown
-						renderToggle={({ isOpen, onToggle }) => {
-							const setLink = () => {
-								if (isOpen && url !== '') {
-									// linkOff
-									setAttributes({ url: '' });
-								}
-								onToggle();
-							};
-							return (
-								<ToolbarButton
-									aria-expanded={isOpen}
-									icon={url !== '' && isOpen ? linkOff : link}
-									isActive={
-										url !== '' && isOpen ? true : false
-									}
-									label={
-										url !== '' && isOpen
-											? __('Unlink')
-											: __(
-													'Input Link URL',
-													'vk-blocks-pro'
-												)
-									}
-									onClick={setLink}
-								/>
-							);
-						}}
-						renderContent={(params) => {
-							return (
-								<form
-									onSubmit={() => {
-										params.onClose();
-									}}
-								>
-									<div className="vk-block-editor-url-input-wrapper">
-										<div className="block-editor-url-input">
-											<URLInput
-												__nextHasNoMarginBottom
-												value={url}
-												onChange={(value) => {
-													setAttributes({
-														url: value,
-													});
-												}}
-											/>
-										</div>
-										<Button
-											icon={keyboardReturn}
-											label={__('Submit')}
-											type="submit"
-										/>
-									</div>
-									<CheckboxControl
-										label={__(
-											'Open link new tab.',
-											'vk-blocks-pro'
-										)}
-										checked={urlOpenType}
-										onChange={(checked) =>
-											setAttributes({
-												urlOpenType: checked,
-											})
-										}
-									/>
-								</form>
-							);
+					<LinkToolbar
+						linkUrl={url}
+						setLinkUrl={(url) => setAttributes({ url })}
+						linkTarget={urlOpenType ? '_blank' : undefined}
+						setLinkTarget={(target) => {
+							setAttributes({ urlOpenType: !!target });
 						}}
+						relAttribute={relAttribute}
+						setRelAttribute={(rel) =>
+							setAttributes({ relAttribute: rel })
+						}
 					/>
 				</ToolbarGroup>
 			</BlockControls>
@@ -356,6 +311,23 @@ export default function Edit(props) {
 								setAttributes({ urlOpenType: checked })
 							}
 						/>
+
+						<CheckboxControl
+							label={__('Add noreferrer', 'vk-blocks-pro')}
+							checked={!!relAttribute?.includes('noreferrer')}
+							onChange={(checked) =>
+								handleRelChange('noreferrer', checked)
+							}
+						/>
+
+						<CheckboxControl
+							label={__('Add nofollow', 'vk-blocks-pro')}
+							checked={!!relAttribute?.includes('nofollow')}
+							onChange={(checked) =>
+								handleRelChange('nofollow', checked)
+							}
+						/>
+
 						<p className={alertClass}>
 							{__(
 								'If you set a link URL, do not place the link element (text or button) in the Grid Column Card Item. It may not be displayed correctly.',

src/blocks/_pro/gridcolcard-item/save.js

@@ -1,7 +1,6 @@
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { isHexColor } from '@vkblocks/utils/is-hex-color';
 import { isGradientStyle } from '@vkblocks/utils/is-gradient-style';
-
 import classnames from 'classnames';
 
 export default function save(props) {
@@ -19,6 +18,7 @@ export default function save(props) {
 		backgroundGradient,
 		url,
 		urlOpenType,
+		relAttribute,
 	} = attributes;
 
 	// カラーパレットに対応
@@ -98,9 +98,13 @@ export default function save(props) {
 					paddingRight: containerSpace.right,
 					color: textColorCustom,
 				}}
-				href={url}
-				target={urlOpenType ? '_blank' : undefined}
-				rel={urlOpenType ? 'noopener noreferrer' : undefined}
+				{...(TagName === 'a'
+					? {
+							href: url,
+							target: urlOpenType ? '_blank' : undefined,
+							rel: relAttribute || undefined,
+						}
+					: {})}
 			>
 				<InnerBlocks.Content />
 			</TagName>