【確認待ち】リンクツールバーに a タグのアクセシビリティや SEO に対応できるよう設定追加 (グリッドカラム)

readme.txt

@@ -108,6 +108,7 @@ e.g.
 == Changelog ==
 [ Bug fix ][ Category Badge (Pro) ] exclude tag.
 
+[ Add function ][ Grid Column (Pro) ] Added support for "rel" and link description settings in the link toolbar.
 [ Add function ][ Link toolbar ] Added settings for "rel" and link description.
 [ Add function ][ Outer (Pro) ] Added support for "rel" and link description settings in the link toolbar.
 [ Bug Fix ][ Post List Slider ( Pro ) ] Fix 404 Error of Load Module.

src/blocks/_pro/grid-column-item/block.json

@@ -96,6 +96,14 @@
 			"type": "string",
 			"default": ""
 		},
+		"relAttribute": {
+			"type": "string",
+			"default": ""
+		},
+		"linkDescription": {
+			"type": "string",
+			"default": ""
+		},
 		"marginBottom": {
 			"type": "number",
 			"default": null

src/blocks/_pro/grid-column-item/deprecated/1.92.1/save.js

@@ -0,0 +1,152 @@
+import { __ } from '@wordpress/i18n';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { convertToGrid } from '@vkblocks/utils/convert-to-grid';
+import { isHexColor } from '@vkblocks/utils/is-hex-color';
+
+export default function save({ attributes }) {
+	// eslint-disable-next-line camelcase
+	const {
+		col_xs,
+		col_sm,
+		col_md,
+		col_lg,
+		col_xl,
+		col_xxl,
+		marginBottom,
+		unit,
+		textColor,
+		backgroundColor,
+		paddingTop,
+		paddingX,
+		paddingBottom,
+		paddingUnit,
+		linkUrl,
+		linkTarget, // linkUrlとlinkTargetを追加
+		relAttribute,
+		linkDescription,
+	} = attributes;
+	// eslint-disable-next-line camelcase
+	const columnClass = `col-${convertToGrid(col_xs)} col-sm-${convertToGrid(
+		col_sm
+	)} col-md-${convertToGrid(col_md)} col-lg-${convertToGrid(
+		col_lg
+	)} col-xl-${convertToGrid(col_xl)} col-xxl-${convertToGrid(col_xxl)}`;
+	// margin bottom
+	let style;
+	if (marginBottom) {
+		style = { marginBottom: marginBottom + unit };
+	}
+
+	const columStyle = {
+		color:
+			textColor !== null &&
+			textColor !== undefined &&
+			isHexColor(textColor)
+				? textColor
+				: undefined,
+		background:
+			backgroundColor !== null &&
+			backgroundColor !== undefined &&
+			isHexColor(backgroundColor)
+				? backgroundColor
+				: undefined,
+		paddingTop:
+			paddingTop !== null && paddingTop !== undefined
+				? paddingTop + paddingUnit
+				: undefined,
+		paddingRight:
+			paddingX !== null && paddingX !== undefined
+				? paddingX + paddingUnit
+				: undefined,
+		paddingBottom:
+			paddingBottom !== null && paddingBottom !== undefined
+				? paddingBottom + paddingUnit
+				: undefined,
+		paddingLeft:
+			paddingX !== null && paddingX !== undefined
+				? paddingX + paddingUnit
+				: undefined,
+	};
+
+	let vkGridColumnTextColorClassName = '';
+	if (textColor !== undefined) {
+		vkGridColumnTextColorClassName += ` has-text-color`;
+		if (!isHexColor(textColor)) {
+			vkGridColumnTextColorClassName += ` has-${textColor}-color`;
+		}
+	}
+
+	let vkGridColumnbackgroundColorColorClassName = '';
+	if (backgroundColor !== undefined) {
+		vkGridColumnbackgroundColorColorClassName += ` has-background-color`;
+		if (!isHexColor(backgroundColor)) {
+			vkGridColumnbackgroundColorColorClassName += ` has-${backgroundColor}-background-color`;
+		}
+	}
+
+	const blockProps = useBlockProps.save({
+		className: `vk_gridColumn_item ${columnClass}`,
+		style,
+	});
+
+	const GetLinkUrl = () => (
+		<a
+			href={linkUrl}
+			target={linkTarget}
+			className="vk_gridColumn_item_link"
+			rel={relAttribute}
+			aria-label={
+				linkDescription
+					? linkDescription
+					: __('Grid column item link', 'vk-blocks-pro')
+			}
+		>
+			<span className="screen-reader-text">
+				{linkDescription
+					? linkDescription
+					: __('Grid column item link', 'vk-blocks-pro')}
+			</span>
+		</a>
+	);
+
+	const hasPadding =
+		columStyle.paddingTop !== undefined ||
+		columStyle.paddingRight !== undefined ||
+		columStyle.paddingBottom !== undefined ||
+		columStyle.paddingLeft !== undefined;
+
+	return (
+		<>
+			<div {...blockProps}>
+				{(() => {
+					if (
+						textColor !== undefined ||
+						backgroundColor !== undefined ||
+						hasPadding
+					) {
+						return (
+							<div
+								className={`vk_gridColumn_item_inner ${vkGridColumnTextColorClassName} ${vkGridColumnbackgroundColorColorClassName}`}
+								style={columStyle}
+							>
+								{linkUrl && GetLinkUrl()}
+								<InnerBlocks.Content />
+							</div>
+						);
+					}
+					return linkUrl ? (
+						<div
+							className={`vk_gridColumn_item_inner ${vkGridColumnTextColorClassName} ${vkGridColumnbackgroundColorColorClassName}`}
+							style={columStyle}
+						>
+							{GetLinkUrl()}
+							<InnerBlocks.Content />
+						</div>
+					) : (
+						<InnerBlocks.Content />
+					);
+				})()}
+			</div>
+		</>
+	);
+}

src/blocks/_pro/grid-column-item/deprecated/index.js

@@ -2,6 +2,7 @@ import save1_4_1 from './1.4.1/save';
 import save1_13_2 from './1.13.2/save';
 import save1_20_5 from './1.20.5/save';
 import save1_78_0 from './1.78.0/save';
+import save1_92_1 from './1.92.1/save';
 
 const blockAttributes = {
 	layout: {
@@ -123,8 +124,7 @@ const blockAttributes2 = {
 	}
 }
 
-/* 1.78.0よりあとのバージョンで追加された属性 */
-/*
+// 1.78.0よりあとのバージョンで追加された属性
 const blockAttributes3 = {
 	...blockAttributes2,
 	linkUrl: {
@@ -135,11 +135,26 @@ const blockAttributes3 = {
 		default: ''
 	}
 }
-*/
+
+const blockAttributes4 = {
+	...blockAttributes3,
+	relAttribute: {
+		type: 'string',
+		default: '',
+	},
+	linkDescription: {
+		type: 'string',
+		default: '',
+	}
+}
 
 const deprecated = [
 	{
-		attributes: blockAttributes2,
+		attributes: blockAttributes4,
+		save: save1_92_1,
+	},
+	{
+		attributes: blockAttributes3,
 		save: save1_78_0,
 	},
 	{

src/blocks/_pro/grid-column-item/edit.js

@@ -36,6 +36,8 @@ export default function GridColumnItemEdit(props) {
 		paddingUnit,
 		linkUrl,
 		linkTarget,
+		relAttribute,
+		linkDescription,
 	} = attributes;
 	const columnClass = `col-${convertToGrid(col_xs)} col-sm-${convertToGrid(
 		col_sm
@@ -93,6 +95,14 @@ export default function GridColumnItemEdit(props) {
 						setLinkTarget={(target) =>
 							setAttributes({ linkTarget: target })
 						}
+						relAttribute={relAttribute}
+						setRelAttribute={(rel) =>
+							setAttributes({ relAttribute: rel })
+						}
+						linkDescription={linkDescription}
+						setLinkDescription={(description) =>
+							setAttributes({ linkDescription: description })
+						}
 					/>
 				</ToolbarGroup>
 			</BlockControls>

src/blocks/_pro/grid-column-item/save.js

@@ -22,6 +22,8 @@ export default function save({ attributes }) {
 		paddingUnit,
 		linkUrl,
 		linkTarget, // linkUrlとlinkTargetを追加
+		relAttribute,
+		linkDescription,
 	} = attributes;
 	// eslint-disable-next-line camelcase
 	const columnClass = `col-${convertToGrid(col_xs)} col-sm-${convertToGrid(
@@ -87,19 +89,22 @@ export default function save({ attributes }) {
 		style,
 	});
 
-	const relAttribute =
-		linkTarget === '_blank' ? 'noopener noreferrer' : 'noopener';
-
 	const GetLinkUrl = () => (
 		<a
 			href={linkUrl}
 			target={linkTarget}
 			className="vk_gridColumn_item_link"
 			rel={relAttribute}
-			aria-label={__('Grid column item link', 'vk-blocks-pro')}
+			aria-label={
+				linkDescription
+					? linkDescription
+					: __('Grid column item link', 'vk-blocks-pro')
+			}
 		>
 			<span className="screen-reader-text">
-				{__('Grid column item link', 'vk-blocks-pro')}
+				{linkDescription
+					? linkDescription
+					: __('Grid column item link', 'vk-blocks-pro')}
 			</span>
 		</a>
 	);

test/e2e-tests/fixtures/blocks/vk-blocks__grid-column.html

@@ -12,7 +12,7 @@
     <!-- /wp:vk-blocks/grid-column-item -->
 
     <!-- wp:vk-blocks/grid-column-item {"linkUrl":"http://localhost:8888/"} -->
-    <div class="wp-block-vk-blocks-grid-column-item vk_gridColumn_item col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 col-xxl-4"><div class="vk_gridColumn_item_inner  "><a href="http://localhost:8888/" target="" class="vk_gridColumn_item_link" rel="noopener" aria-label="Grid column item link"><span class="screen-reader-text">Grid column item link</span></a><!-- wp:paragraph -->
+    <div class="wp-block-vk-blocks-grid-column-item vk_gridColumn_item col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 col-xxl-4"><div class="vk_gridColumn_item_inner  "><a href="http://localhost:8888/" target="" class="vk_gridColumn_item_link" rel="" aria-label="Grid column item link"><span class="screen-reader-text">Grid column item link</span></a><!-- wp:paragraph -->
     <p>本文</p>
     <!-- /wp:paragraph --></div></div>
     <!-- /wp:vk-blocks/grid-column-item --></div></div>

test/e2e-tests/fixtures/blocks/vk-blocks__grid-column__deprecated-1-92-1.html

@@ -0,0 +1,19 @@
+<!-- wp:vk-blocks/grid-column -->
+<div class="wp-block-vk-blocks-grid-column vk_gridColumn"><div class="row"><!-- wp:vk-blocks/grid-column-item -->
+    <div class="wp-block-vk-blocks-grid-column-item vk_gridColumn_item col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 col-xxl-4"><!-- wp:paragraph -->
+    <p>本文</p>
+    <!-- /wp:paragraph --></div>
+    <!-- /wp:vk-blocks/grid-column-item -->
+
+    <!-- wp:vk-blocks/grid-column-item -->
+    <div class="wp-block-vk-blocks-grid-column-item vk_gridColumn_item col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 col-xxl-4"><!-- wp:paragraph -->
+    <p>本文</p>
+    <!-- /wp:paragraph --></div>
+    <!-- /wp:vk-blocks/grid-column-item -->
+
+    <!-- wp:vk-blocks/grid-column-item {"linkUrl":"http://localhost:8888/"} -->
+    <div class="wp-block-vk-blocks-grid-column-item vk_gridColumn_item col-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 col-xxl-4"><div class="vk_gridColumn_item_inner  "><a href="http://localhost:8888/" target="" class="vk_gridColumn_item_link" rel="noopener" aria-label="Grid column item link"><span class="screen-reader-text">Grid column item link</span></a><!-- wp:paragraph -->
+    <p>本文</p>
+    <!-- /wp:paragraph --></div></div>
+    <!-- /wp:vk-blocks/grid-column-item --></div></div>
+    <!-- /wp:vk-blocks/grid-column -->