add custom variation

style調整
vektor-inc · Sep 28, 2023 · 3ddf2c7 · 3ddf2c7
1 parent 407359b
commit 3ddf2c7
Show file tree

Hide file tree

Showing 6 changed files with 264 additions and 172 deletions.
diff --git a/editor-css/_editor_before_custom-block-variation.scss b/editor-css/_editor_before_custom-block-variation.scss
@@ -21,4 +21,18 @@
 		flex-shrink: 0;
 		position: relative;
 	}
+	h4 {
+		margin-top: 0;
+		margin-bottom: 12px;
+	}
+	.block-variation-error-text {
+		margin-top: 0;
+		margin-bottom: 0;
+		color: #c00;
+	}
+	.block-variation-category-list {
+		.components-base-control {
+			margin-bottom: 12px;
+		}
+	}
 }
diff --git a/src/blocks/_pro/blog-card/edit/index.js b/src/blocks/_pro/blog-card/edit/index.js
@@ -9,6 +9,7 @@ import {
 	ToolbarGroup,
 	ToolbarButton,
 	Spinner,
+	ExternalLink,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -157,6 +158,27 @@ export default function BlogCardWrapperEdit(props) {
 								>
 									{__('バリエーション設定', 'vk-blocks-pro')}
 								</Button>
+								<p style={{ marginTop: '8px' }}>
+									{__(
+										'現在のブロック設定をブロックバリエーションとして登録できます。',
+										'vk-blocks-pro'
+									)}
+									<br />
+									<ExternalLink
+										href={__(
+											'https://ja.wordpress.org/team/handbook/block-editor/reference-guides/block-api/block-variations/',
+											// 'https://developer.wordpress.org/block-editor/reference-guides/block-api/block-variations/',
+											'vk-blocks-pro'
+										)}
+										target="_blank"
+										rel="noreferrer"
+									>
+										{__(
+											'ブロックバリエーションについてさらに詳しく',
+											'vk-blocks-pro'
+										)}
+									</ExternalLink>
+								</p>
 								{showPatternsExplorer && (
 									<VariationExplorerModal
 										onModalClose={() =>

diff --git a/src/extensions/common/custom-block-variation/block-variation-list/item/body-area/index.js b/src/extensions/common/custom-block-variation/block-variation-list/item/body-area/index.js
@@ -53,93 +53,121 @@ export const BodyArea = ({
 				borderTop: '1px solid #ccc',
 			}}
 		>
-			<TextControl
-				__nextHasNoMarginBottom
-				label={__('タイトル (必須)', 'vk-blocks-pro')}
-				value={variationState[index].title}
-				onChange={(value) => onChange('title', value)}
-				placeholder={__('マイバリエーション', 'vk-blocks-pro')}
-			/>
-			{!variationState[index].title && (
-				<p style={{ marginTop: '0', color: '#c00' }}>
-					{__('title is required', 'vk-blocks-pro')}
-				</p>
-			)}
-			<TextControl
-				__nextHasNoMarginBottom
-				label={__('説明', 'vk-blocks-pro')}
-				value={variationState[index].description}
-				onChange={(value) => onChange('description', value)}
-			/>
-			<h4>{__('スコープ (必須)', 'vk-blocks-pro')}</h4>
-			{SCOPE_OPTIONS.filter((scopeOption) =>
-				support.scope.includes(scopeOption.name)
-			).map((scopeOption) => (
-				<CheckboxControl
-					key={scopeOption.name}
+			<div>
+				<h4>{__('タイトル (必須)', 'vk-blocks-pro')}</h4>
+				<TextControl
 					__nextHasNoMarginBottom
-					checked={variationState[index].scope?.includes(
-						scopeOption.name
-					)}
-					help={scopeOption.help}
-					label={scopeOption.label}
-					onChange={(isChecked) => {
-						const newScope = isChecked
-							? [
-									...(variationState[index].scope || []),
-									scopeOption.name,
-							  ]
-							: variationState[index].scope.filter(
-									(item) => item !== scopeOption.name
-							  );
-						onChange('scope', newScope);
-					}}
+					value={variationState[index].title}
+					onChange={(value) => onChange('title', value)}
+					placeholder={__('マイバリエーション', 'vk-blocks-pro')}
+				/>
+				{!variationState[index].title && (
+					<p
+						className="block-variation-error-text"
+						style={{ marginTop: '0', color: '#c00' }}
+					>
+						{__('title is required', 'vk-blocks-pro')}
+					</p>
+				)}
+			</div>
+			<div>
+				<h4>{__('説明', 'vk-blocks-pro')}</h4>
+				<TextControl
+					__nextHasNoMarginBottom
+					value={variationState[index].description}
+					onChange={(value) => onChange('description', value)}
 				/>
-			))}
-			{variationState[index].scope.length === 0 && (
-				<p style={{ marginTop: '0', color: '#c00' }}>
-					{__('scope is required', 'vk-blocks-pro')}
+			</div>
+			<div>
+				<h4>{__('スコープ (必須)', 'vk-blocks-pro')}</h4>
+				<p style={{ marginTop: '0' }}>
+					{__(
+						'登録したバリエーションをどこに表示するかを設定できます。表示した場所から呼び出せます。',
+						'vk-blocks-pro'
+					)}
 				</p>
-			)}
+				{SCOPE_OPTIONS.filter((scopeOption) =>
+					support.scope.includes(scopeOption.name)
+				).map((scopeOption) => (
+					<CheckboxControl
+						key={scopeOption.name}
+						__nextHasNoMarginBottom
+						checked={variationState[index].scope?.includes(
+							scopeOption.name
+						)}
+						help={scopeOption.help}
+						label={scopeOption.label}
+						onChange={(isChecked) => {
+							const newScope = isChecked
+								? [
+										...(variationState[index].scope || []),
+										scopeOption.name,
+								  ]
+								: variationState[index].scope.filter(
+										(item) => item !== scopeOption.name
+								  );
+							onChange('scope', newScope);
+						}}
+					/>
+				))}
+				{variationState[index].scope.length === 0 && (
+					<p className="block-variation-error-text">
+						{__('scope is required', 'vk-blocks-pro')}
+					</p>
+				)}
+			</div>
 			{variationState[index].scope.includes('inserter') && (
-				<>
+				<div>
 					<h4>{__('Category')}</h4>
-					{_getCategories.map((blockCategory) => (
-						<RadioControl
-							key={blockCategory.slug}
-							selected={variationState[index].category}
-							options={[
-								{
-									label: blockCategory.title,
-									value: blockCategory.slug,
-								},
-							]}
-							onChange={(value) => onChange('category', value)}
-						/>
-					))}
-				</>
+					<div className="block-variation-category-list">
+						{_getCategories.map((blockCategory) => (
+							<RadioControl
+								key={blockCategory.slug}
+								selected={variationState[index].category}
+								options={[
+									{
+										label: blockCategory.title,
+										value: blockCategory.slug,
+									},
+								]}
+								onChange={(value) =>
+									onChange('category', value)
+								}
+							/>
+						))}
+					</div>
+				</div>
 			)}
-			<TextControl
-				__nextHasNoMarginBottom
-				label={__('アイコン', 'vk-blocks-pro')}
-				value={variationState[index].icon}
-				onChange={(value) => onChange('icon', value)}
-				placeholder="embed-generic"
-			/>
 			<div>
-				<ExternalLink
-					href="https://developer.wordpress.org/resource/dashicons/#embed-generic"
-					target="_blank"
-					rel="noreferrer"
-				>
-					{__('Dashicons リスト', 'vk-blocks-pro')}
-				</ExternalLink>
+				<h4>{__('アイコン', 'vk-blocks-pro')}</h4>
+				<TextControl
+					__nextHasNoMarginBottom
+					value={variationState[index].icon}
+					onChange={(value) => onChange('icon', value)}
+					placeholder="embed-generic"
+					help={__(
+						'アイコンの名前は「dashicons-」を省いた英数字を入力してください。 例: embed-generic',
+						'vk-blocks-pro'
+					)}
+				/>
+				<div>
+					<ExternalLink
+						href="https://developer.wordpress.org/resource/dashicons/#embed-generic"
+						target="_blank"
+						rel="noreferrer"
+					>
+						{__('Dashicons リスト', 'vk-blocks-pro')}
+					</ExternalLink>
+				</div>
+			</div>
+			<div>
+				<h4>{__('キーワード', 'vk-blocks-pro')}</h4>
+				<FormTokenField
+					label={__('キーワードを追加', 'vk-blocks-pro')}
+					value={variationState[index].keywords || []}
+					onChange={(value) => onChange('keywords', value)}
+				/>
 			</div>
-			<FormTokenField
-				label={__('キーワード', 'vk-blocks-pro')}
-				value={variationState[index].keywords || []}
-				onChange={(value) => onChange('keywords', value)}
-			/>
 		</VStack>
 	);
 };