Merge pull request #2453 from vektor-inc/refactor/columns-for-deprecated

カラムブロック拡張のリファクタリング
vektor-inc · Feb 27, 2025 · 8528752 · 8528752
2 parents 5ee2160 + f6cb713
commit 8528752
Showing 1 changed file with 59 additions and 55 deletions.
diff --git a/src/extensions/core/columns/style.js b/src/extensions/core/columns/style.js
@@ -23,32 +23,7 @@ import { ReactComponent as IconSVG } from './icon.svg';
 const isColumnsBlock = (name) => name === 'core/columns';
 const isColumnBlock = (name) => name === 'core/column';
 
-export const addAttribute = (settings) => {
-	if (isColumnsBlock(settings.name)) {
-		settings.attributes = {
-			...settings.attributes,
-			reverse: {
-				type: 'boolean',
-			},
-		};
-	} else if (isColumnBlock(settings.name)) {
-		settings.attributes = {
-			...settings.attributes,
-			linkUrl: {
-				type: 'string',
-				default: '',
-			},
-			linkTarget: {
-				type: 'string',
-				default: '_self',
-			},
-		};
-	}
-	return settings;
-};
-addFilter('blocks.registerBlockType', 'vk-blocks/columns-style', addAttribute);
-
-export const addBlockControl = createHigherOrderComponent((BlockEdit) => {
+export const enhanceColumnBlock = createHigherOrderComponent((BlockEdit) => {
 	return (props) => {
 		const { attributes, setAttributes } = props;
 		const { reverse, className, linkUrl, linkTarget } = attributes;
@@ -145,44 +120,73 @@ export const addBlockControl = createHigherOrderComponent((BlockEdit) => {
 		return <BlockEdit {...props} />;
 	};
 }, 'addMyCustomBlockControls');
-addFilter('editor.BlockEdit', 'vk-blocks/columns-style', addBlockControl);
 
-const insertLinkIntoColumnBlock = (element, blockType, attributes) => {
-	if (!isColumnBlock(blockType.name)) {
-		return element;
+const extendColumnBlock = (settings, name) => {
+	if (!isColumnBlock(name) && !isColumnsBlock(name)) {
+		return settings;
 	}
 
-	const { linkUrl, linkTarget } = attributes;
+	if (isColumnsBlock(settings.name)) {
+		settings.attributes = {
+			...settings.attributes,
+			reverse: {
+				type: 'boolean',
+				default: false,
+			},
+		};
+	}
 
-	if (!linkUrl) {
-		return element;
+	if (isColumnBlock(settings.name)) {
+		settings.attributes = {
+			...settings.attributes,
+			linkUrl: {
+				type: 'string',
+				default: '',
+			},
+			linkTarget: {
+				type: 'string',
+				default: '_self',
+			},
+		};
 	}
 
-	// rel 属性の設定
-	let relAttribute = '';
+	return {
+		...settings,
+		attributes: {
+			...settings.attributes,
+		},
 
-	if (linkTarget === '_blank') {
-		relAttribute = 'noopener noreferrer';
-	} else if (linkTarget === '_self' || linkTarget === '') {
-		relAttribute = 'noopener';
-	}
+		edit: enhanceColumnBlock(settings.edit),
+		save: (props) => {
+			const { attributes } = props;
+			const { linkUrl, linkTarget } = attributes;
+			const saveElement = settings.save(props);
 
-	return (
-		<div {...element.props}>
-			<a
-				href={linkUrl}
-				target={linkTarget}
-				rel={relAttribute}
-				aria-label={__('Column link', 'vk-blocks-pro')}
-				className="wp-block-column-vk-link"
-			></a>
-			{element.props.children}
-		</div>
-	);
+			if (!linkUrl) {
+				return saveElement;
+			}
+
+			const relAttribute =
+				linkTarget === '_blank' ? 'noopener noreferrer' : 'noopener';
+
+			return (
+				<div {...saveElement.props}>
+					<a
+						href={linkUrl}
+						target={linkTarget}
+						rel={relAttribute}
+						aria-label={__('Column link', 'vk-blocks-pro')}
+						className="wp-block-column-vk-link"
+					></a>
+					{saveElement.props.children}
+				</div>
+			);
+		},
+	};
 };
 
 addFilter(
-	'blocks.getSaveElement',
-	'vk-blocks/insert-link-into-column',
-	insertLinkIntoColumnBlock
+	'blocks.registerBlockType',
+	'custom/extend-cover-block',
+	extendColumnBlock
 );