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

readme.txt

@@ -107,6 +107,9 @@ e.g.
 1. VK Blocks examples.
 
 == Changelog ==
+[ Add function ][ group ] Added noreferrer, nofollow, and link description options to the link feature.
+
+[ Add function ][ Slider ] Added noreferrer, nofollow, and link description options to the link feature.
 
 [ 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/accordion/index.js

@@ -36,7 +36,7 @@ export const settings = {
 		},
 		{
 			name: 'vk_accordion-background-color-rounded',
-			label: __('Background color / Rounded ', 'vk-blocks-pro'),
+			label: __('Background color / Rounded', 'vk-blocks-pro'),
 		},
 		{
 			name: 'vk_accordion-background-color-rounded-border',

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

@@ -138,7 +138,7 @@ export default function CardItemEdit(props) {
 					value={excerpt_text} //eslint-disable-line camelcase
 					onChange={(value) => setAttributes({ excerpt_text: value })}
 					placeholder={__(
-						'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
+						'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
 						'vk-blocks-pro'
 					)}
 				/>

src/blocks/_pro/post-list-slider/edit.js

@@ -137,7 +137,7 @@ export default function PostListSliderEdit(props) {
 					initialOpen={false}
 				>
 					<BaseControl
-						label={__('Effect ', 'vk-blocks-pro')}
+						label={__('Effect', 'vk-blocks-pro')}
 						id={`vk_slider-effect`}
 					>
 						<SelectControl
@@ -158,7 +158,7 @@ export default function PostListSliderEdit(props) {
 						/>
 					</BaseControl>
 					<BaseControl
-						label={__('Loop ', 'vk-blocks-pro')}
+						label={__('Loop', 'vk-blocks-pro')}
 						id={`vk_slider-loop`}
 					>
 						<AdvancedToggleControl

src/blocks/balloon/edit.js

@@ -138,7 +138,7 @@ export default function BalloonEdit(props) {
 				/>
 
 				<p className={'mb-1 block-prop-title'}>
-					{__(' Image Border', 'vk-blocks-pro')}
+					{__('Image Border', 'vk-blocks-pro')}
 				</p>
 				<ToggleControl
 					label={__('Add border to image', 'vk-blocks-pro')}

src/blocks/slider/edit.js

@@ -395,7 +395,7 @@ export default function SliderEdit(props) {
 					initialOpen={false}
 				>
 					<BaseControl
-						label={__('Effect ', 'vk-blocks-pro')}
+						label={__('Effect', 'vk-blocks-pro')}
 						id={`vk_slider-effect`}
 					>
 						<SelectControl
@@ -416,7 +416,7 @@ export default function SliderEdit(props) {
 						/>
 					</BaseControl>
 					<BaseControl
-						label={__('Loop ', 'vk-blocks-pro')}
+						label={__('Loop', 'vk-blocks-pro')}
 						id={`vk_slider-loop`}
 					>
 						<AdvancedToggleControl

src/extensions/core/group/deprecated/1.95.2/save.js

@@ -0,0 +1,37 @@
+import {
+	useBlockProps,
+	InnerBlocks,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function save(props) {
+	const { attributes } = props;
+	const {
+		linkUrl,
+		linkTarget,
+		className = '',
+		tagName: CustomTag = 'div',
+	} = attributes;
+
+	const blockProps = useBlockProps.save({
+		className: linkUrl ? `${className} has-link` : className,
+	});
+
+	const relAttribute =
+		linkTarget === '_blank' ? 'noopener noreferrer' : 'noopener';
+
+	return (
+		<CustomTag {...blockProps}>
+			<InnerBlocks.Content />
+			{linkUrl && (
+				<a
+					href={linkUrl}
+					target={linkTarget}
+					rel={relAttribute}
+					aria-label={__('Group link', 'vk-blocks-pro')}
+					className="wp-block-group-vk-link"
+				></a>
+			)}
+		</CustomTag>
+	);
+}

src/extensions/core/group/deprecated/index.js

@@ -0,0 +1,23 @@
+import save1_95_2 from './1.95.2/save';
+
+const deprecated = [
+	{
+		targetVersion: 5,
+		attributes: {
+			color: { type: 'string', default: '' },
+			linkUrl: { type: 'string', default: '' },
+			linkTarget: { type: 'string', default: '' },
+			tagName: { type: 'string', default: 'div' },
+		},
+		migrate: (attributes) => {
+			return {
+				...attributes,
+				relAttribute: attributes.relAttribute || '',
+				linkDescription: attributes.linkDescription || '',
+			};
+		},
+		save: save1_95_2
+	},
+];
+
+export default deprecated;

src/extensions/core/group/style.js

@@ -16,7 +16,7 @@ import {
 } from '@wordpress/block-editor';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import LinkToolbar from '@vkblocks/components/link-toolbar';
-
+import deprecated from './deprecated/index';
 /**
  * Check if the block type is valid for customization.
  *
@@ -50,6 +50,14 @@ export const addAttribute = (settings) => {
 				type: 'string',
 				default: '',
 			},
+			relAttribute: {
+				type: 'string',
+				default: '',
+			},
+			linkDescription: {
+				type: 'string',
+				default: '',
+			},
 			tagName: {
 				type: 'string',
 				default: 'div',
@@ -91,6 +99,18 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => {
 								setLinkTarget={(target) =>
 									props.setAttributes({ linkTarget: target })
 								}
+								relAttribute={props.attributes.relAttribute}
+								setRelAttribute={(rel) =>
+									props.setAttributes({ relAttribute: rel })
+								}
+								linkDescription={
+									props.attributes.linkDescription
+								}
+								setLinkDescription={(description) =>
+									props.setAttributes({
+										linkDescription: description,
+									})
+								}
 							/>
 						</ToolbarGroup>
 					</BlockControls>
@@ -165,6 +185,8 @@ const save = (props) => {
 	const {
 		linkUrl,
 		linkTarget,
+		relAttribute,
+		linkDescription,
 		className = '',
 		tagName: CustomTag = 'div',
 	} = attributes;
@@ -175,8 +197,6 @@ const save = (props) => {
 	});
 
 	// Determine rel attribute based on linkTarget
-	const relAttribute =
-		linkTarget === '_blank' ? 'noopener noreferrer' : 'noopener';
 
 	// Extract prefix for custom link class
 	const prefix = 'wp-block-group';
@@ -187,11 +207,16 @@ const save = (props) => {
 			{linkUrl && (
 				<a
 					href={linkUrl}
-					target={linkTarget}
-					rel={relAttribute}
-					aria-label={__('Group link', 'vk-blocks-pro')}
+					{...(linkTarget ? { target: linkTarget } : {})}
+					{...(relAttribute ? { rel: relAttribute } : {})}
 					className={`${prefix}-vk-link`}
-				></a>
+				>
+					<span className="screen-reader-text">
+						{linkDescription
+							? linkDescription
+							: __('Group link', 'vk-blocks-pro')}
+					</span>
+				</a>
 			)}
 		</CustomTag>
 	);
@@ -203,15 +228,34 @@ import { assign } from 'lodash';
 /**
  * Override block settings to include custom save function and attributes.
  *
- * @param {Object} settings The block settings.
- * @param {string} name     The block name.
+ * @param {Object} settings          The block settings.
+ * @param {string} name              The block name.
+ * @param {Object} currentDeprecated
  * @return {Object} The modified block settings.
  */
-const overrideBlockSettings = (settings, name) => {
-	if (name === 'core/group') {
+const overrideBlockSettings = (settings, name, currentDeprecated) => {
+	if (name === 'core/group' && currentDeprecated === null) {
+		const newDeprecated = [...settings.deprecated];
+		// Sort deprecated items in descending order of targetVersion to prevent index shifting
+		const sortedDeprecated = [...deprecated].sort(
+			(a, b) =>
+				(b.targetVersion || newDeprecated.length) -
+				(a.targetVersion || newDeprecated.length)
+		);
+
+		sortedDeprecated.forEach((deprecatedItem) => {
+			const targetIndex =
+				deprecatedItem.targetVersion || newDeprecated.length;
+			// Create a copy of the deprecatedItem without targetVersion
+			const itemToInsert = { ...deprecatedItem };
+			delete itemToInsert.targetVersion;
+			newDeprecated.splice(targetIndex, 0, itemToInsert);
+		});
 		const newSettings = assign({}, settings, {
 			save,
+			deprecated: newDeprecated,
 		});
+
 		// Support for existing group blocks by adding default values for new attributes
 		if (!newSettings.attributes.linkUrl) {
 			newSettings.attributes.linkUrl = {
@@ -225,6 +269,18 @@ const overrideBlockSettings = (settings, name) => {
 				default: '',
 			};
 		}
+		if (!newSettings.attributes.relAttribute) {
+			newSettings.attributes.relAttribute = {
+				type: 'string',
+				default: '',
+			};
+		}
+		if (!newSettings.attributes.linkDescription) {
+			newSettings.attributes.linkDescription = {
+				type: 'string',
+				default: '',
+			};
+		}
 		if (!newSettings.attributes.tagName) {
 			newSettings.attributes.tagName = {
 				type: 'string',

src/utils/example-data.js

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 export const title = __('Lorem ipsum dolor', 'vk-blocks-pro');
 export const content = __(
-	'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
+	'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
 	'vk-blocks-pro'
 );
 export const iconName = __('Lorem ipsum', 'vk-blocks-pro');

src/utils/font-awesome-new.js

@@ -391,7 +391,7 @@ export const FontAwesome = (props) => {
 					'vk-blocks-pro'
 				)}
 				<br />
-				{__('Ex) ', 'vk-blocks-pro')}
+				{__('Ex)', 'vk-blocks-pro')}
 				{'<i class="fa-solid fa-circle-right"></i>'}
 			</p>
 			{canUserEdit && (