Merge pull request #2451 from vektor-inc/refactor/cover-for-deprecated

【二人目確認中】カバーブロック拡張のリファクタリング
vektor-inc · Feb 14, 2025 · f16512d · f16512d
2 parents ca2f8f2 + 4163d42
commit f16512d
Showing 1 changed file with 43 additions and 53 deletions.
diff --git a/src/extensions/core/cover/style.js b/src/extensions/core/cover/style.js
@@ -46,69 +46,59 @@ const enhanceCoverBlock = createHigherOrderComponent((BlockEdit) => {
 	};
 }, 'enhanceCoverBlock');
 
-const addLinkAttributesToCoverBlock = (settings, name) => {
+const extendCoverBlock = (settings, name) => {
 	if (!isCoverBlock(name)) {
 		return settings;
 	}
 
-	settings.attributes = {
-		...settings.attributes,
-		linkUrl: {
-			type: 'string',
-			default: '',
+	return {
+		...settings,
+		attributes: {
+			...settings.attributes,
+			linkUrl: {
+				type: 'string',
+				default: '',
+			},
+			linkTarget: {
+				type: 'string',
+				default: '_self',
+			},
 		},
-		linkTarget: {
-			type: 'string',
-			default: '_self',
-		},
-	};
+		edit: enhanceCoverBlock(settings.edit),
+		save: (props) => {
+			const { attributes } = props;
+			const { linkUrl, linkTarget } = attributes;
+			const saveElement = settings.save(props);
 
-	return settings;
-};
+			if (!linkUrl) {
+				return saveElement;
+			}
 
-const insertLinkIntoCoverBlock = (element, blockType, attributes) => {
-	if (blockType.name !== 'core/cover') {
-		return element;
-	}
-
-	const { linkUrl, linkTarget } = attributes;
-
-	if (!linkUrl) {
-		return element;
-	}
+			const existingClassName = saveElement.props.className || '';
+			const classNameWithLink =
+				`${existingClassName} ${linkUrl ? 'has-link' : ''}`.trim();
+			const existingStyle = saveElement.props.style || {};
+			const relAttribute =
+				linkTarget === '_blank' ? 'noopener noreferrer' : 'noopener';
 
-	// `element` から既存のクラスを取得し、リンクがある場合にのみ `has-link` を追加
-	const existingClassName = element.props.className || '';
-	const classNameWithLink =
-		`${existingClassName} ${linkUrl ? 'has-link' : ''}`.trim();
-	const existingStyle = element.props.style || {};
-
-	// rel 属性の設定
-	const relAttribute =
-		linkTarget === '_blank' ? 'noopener noreferrer' : 'noopener';
-
-	return (
-		<div className={classNameWithLink} style={existingStyle}>
-			{element.props.children}
-			<a
-				href={linkUrl}
-				target={linkTarget}
-				rel={relAttribute}
-				aria-label={__('Cover link', 'vk-blocks-pro')}
-				className="wp-block-cover-vk-link"
-			></a>
-		</div>
-	);
+			return (
+				<div className={classNameWithLink} style={existingStyle}>
+					{saveElement.props.children}
+					<a
+						href={linkUrl}
+						target={linkTarget}
+						rel={relAttribute}
+						aria-label={__('Cover link', 'vk-blocks-pro')}
+						className="wp-block-cover-vk-link"
+					></a>
+				</div>
+			);
+		},
+	};
 };
 
-addFilter('editor.BlockEdit', 'custom/enhance-cover-block', enhanceCoverBlock);
 addFilter(
 	'blocks.registerBlockType',
-	'custom/add-link-attributes',
-	addLinkAttributesToCoverBlock
-);
-addFilter(
-	'blocks.getSaveElement',
-	'custom/insert-link-into-cover-block',
-	insertLinkIntoCoverBlock
+	'custom/extend-cover-block',
+	extendCoverBlock
 );