From 3ddf2c7c913a92d87c816cf88431bee759291d2c Mon Sep 17 00:00:00 2001 From: shimotmk Date: Thu, 28 Sep 2023 14:59:55 +0900 Subject: [PATCH] =?UTF-8?q?add=20custom=20variation=20style=E8=AA=BF?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ..._editor_before_custom-block-variation.scss | 14 ++ src/blocks/_pro/blog-card/edit/index.js | 22 ++ .../item/body-area/index.js | 186 +++++++++------- .../block-variation-form/index.js | 200 ++++++++++-------- .../variation-name/index.js | 8 +- .../common/custom-block-variation/utils.js | 6 +- 6 files changed, 264 insertions(+), 172 deletions(-) diff --git a/editor-css/_editor_before_custom-block-variation.scss b/editor-css/_editor_before_custom-block-variation.scss index d74193b65..10b39887c 100644 --- 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 index 442e4b0f4..6879fcdb8 100644 --- 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')} +

+ {__( + '現在のブロック設定をブロックバリエーションとして登録できます。', + 'vk-blocks-pro' + )} +
+ + {__( + 'ブロックバリエーションについてさらに詳しく', + 'vk-blocks-pro' + )} + +

{showPatternsExplorer && ( 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 index 6ef008f97..73f3334a0 100644 --- 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', }} > - onChange('title', value)} - placeholder={__('マイバリエーション', 'vk-blocks-pro')} - /> - {!variationState[index].title && ( -

- {__('title is required', 'vk-blocks-pro')} -

- )} - onChange('description', value)} - /> -

{__('スコープ (必須)', 'vk-blocks-pro')}

- {SCOPE_OPTIONS.filter((scopeOption) => - support.scope.includes(scopeOption.name) - ).map((scopeOption) => ( - +

{__('タイトル (必須)', 'vk-blocks-pro')}

+ { - 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 && ( +

+ {__('title is required', 'vk-blocks-pro')} +

+ )} + +
+

{__('説明', 'vk-blocks-pro')}

+ onChange('description', value)} /> - ))} - {variationState[index].scope.length === 0 && ( -

- {__('scope is required', 'vk-blocks-pro')} +

+
+

{__('スコープ (必須)', 'vk-blocks-pro')}

+

+ {__( + '登録したバリエーションをどこに表示するかを設定できます。表示した場所から呼び出せます。', + 'vk-blocks-pro' + )}

- )} + {SCOPE_OPTIONS.filter((scopeOption) => + support.scope.includes(scopeOption.name) + ).map((scopeOption) => ( + { + const newScope = isChecked + ? [ + ...(variationState[index].scope || []), + scopeOption.name, + ] + : variationState[index].scope.filter( + (item) => item !== scopeOption.name + ); + onChange('scope', newScope); + }} + /> + ))} + {variationState[index].scope.length === 0 && ( +

+ {__('scope is required', 'vk-blocks-pro')} +

+ )} +
{variationState[index].scope.includes('inserter') && ( - <> +

{__('Category')}

- {_getCategories.map((blockCategory) => ( - onChange('category', value)} - /> - ))} - +
+ {_getCategories.map((blockCategory) => ( + + onChange('category', value) + } + /> + ))} +
+
)} - onChange('icon', value)} - placeholder="embed-generic" - />
- - {__('Dashicons リスト', 'vk-blocks-pro')} - +

{__('アイコン', 'vk-blocks-pro')}

+ onChange('icon', value)} + placeholder="embed-generic" + help={__( + 'アイコンの名前は「dashicons-」を省いた英数字を入力してください。 例: embed-generic', + 'vk-blocks-pro' + )} + /> +
+ + {__('Dashicons リスト', 'vk-blocks-pro')} + +
+
+
+

{__('キーワード', 'vk-blocks-pro')}

+ onChange('keywords', value)} + />
- onChange('keywords', value)} - /> ); }; diff --git a/src/extensions/common/custom-block-variation/create-variation/block-variation-form/index.js b/src/extensions/common/custom-block-variation/create-variation/block-variation-form/index.js index f79715356..c3de909ea 100644 --- a/src/extensions/common/custom-block-variation/create-variation/block-variation-form/index.js +++ b/src/extensions/common/custom-block-variation/create-variation/block-variation-form/index.js @@ -75,101 +75,129 @@ export default function VariationForm(props) { setVariation={setVariation} /> )} - { - setVariation({ ...variation, title: value }); - }} - placeholder={__('マイバリエーション', 'vk-blocks-pro')} - /> - {!variation.title && ( -

- {__('title is required', 'vk-blocks-pro')} -

- )} - { - setVariation({ ...variation, description: value }); - }} - /> -

{__('スコープ (必須)', 'vk-blocks-pro')}

- {SCOPE_OPTIONS.filter((scopeOption) => - support.scope.includes(scopeOption.name) - ).map((scopeOption) => ( - +

{__('タイトル (必須)', 'vk-blocks-pro')}

+ { + setVariation({ ...variation, title: value }); + }} + placeholder={__('マイバリエーション', 'vk-blocks-pro')} + /> + {!variation.title && ( +

+ {__('title is required', 'vk-blocks-pro')} +

+ )} + +
+

{__('説明', 'vk-blocks-pro')}

+ { - const newScope = isChecked - ? [...(variation.scope || []), scopeOption.name] - : variation.scope.filter( - (item) => item !== scopeOption.name - ); - setVariation({ ...variation, scope: newScope }); + value={variation.description} + onChange={(value) => { + setVariation({ ...variation, description: value }); }} /> - ))} - {variation.scope.length === 0 && ( -

- {__('scope is required', 'vk-blocks-pro')} +

+
+

{__('スコープ (必須)', 'vk-blocks-pro')}

+

+ {__( + '登録したバリエーションをどこに表示するかを設定できます。表示した場所から呼び出せます。', + 'vk-blocks-pro' + )}

- )} + {SCOPE_OPTIONS.filter((scopeOption) => + support.scope.includes(scopeOption.name) + ).map((scopeOption) => ( + { + const newScope = isChecked + ? [ + ...(variation.scope || []), + scopeOption.name, + ] + : variation.scope.filter( + (item) => item !== scopeOption.name + ); + setVariation({ ...variation, scope: newScope }); + }} + /> + ))} + {variation.scope.length === 0 && ( +

+ {__('scope is required', 'vk-blocks-pro')} +

+ )} +
{variation.scope.includes('inserter') && ( - <> +

{__('Category')}

- {_getCategories.map((blockCategory) => ( - { - setVariation({ - ...variation, - category: value, - }); - }} - /> - ))} - +
+ {_getCategories.map((blockCategory) => ( + { + setVariation({ + ...variation, + category: value, + }); + }} + /> + ))} +
+
)} - { - setVariation({ ...variation, icon: value }); - }} - placeholder="embed-generic" - />
- - {__('Dashicons リスト', 'vk-blocks-pro')} - +

{__('アイコン', 'vk-blocks-pro')}

+ { + setVariation({ ...variation, icon: value }); + }} + placeholder="embed-generic" + help={__( + 'アイコンの名前は「dashicons-」を省いた英数字を入力してください。 例: embed-generic', + 'vk-blocks-pro' + )} + /> +
+ + {__('Dashicons リスト', 'vk-blocks-pro')} + +
+
+
+

{__('キーワード', 'vk-blocks-pro')}

+ { + setVariation({ ...variation, keywords: value }); + }} + />
- { - setVariation({ ...variation, keywords: value }); - }} - /> ); diff --git a/src/extensions/common/custom-block-variation/create-variation/block-variation-form/variation-name/index.js b/src/extensions/common/custom-block-variation/create-variation/block-variation-form/variation-name/index.js index 548cf3802..5647daab0 100644 --- a/src/extensions/common/custom-block-variation/create-variation/block-variation-form/variation-name/index.js +++ b/src/extensions/common/custom-block-variation/create-variation/block-variation-form/variation-name/index.js @@ -47,10 +47,10 @@ export default function VariationName({ }, [blockName]); return ( - <> +
+

{__('名前/固有ID (必須)', 'vk-blocks-pro')}

{ value = value.trim(); @@ -60,8 +60,8 @@ export default function VariationName({ placeholder={__('my-variation', 'vk-blocks-pro')} /> {!canSave && ( -

{errorMessage}

+

{errorMessage}

)} - +
); } diff --git a/src/extensions/common/custom-block-variation/utils.js b/src/extensions/common/custom-block-variation/utils.js index 6f1e1ef85..7a83eea76 100644 --- a/src/extensions/common/custom-block-variation/utils.js +++ b/src/extensions/common/custom-block-variation/utils.js @@ -7,16 +7,16 @@ export const SCOPE_OPTIONS = [ { name: 'inserter', label: __('インサーター', 'vk-blocks-pro'), - help: __('インサーターに表示される', 'vk-blocks-pro'), + help: __('インサーターに表示されます', 'vk-blocks-pro'), }, { name: 'block', label: __('ブロック', 'vk-blocks-pro'), - help: __('バリエーションピッカーに表示される', 'vk-blocks-pro'), + help: __('バリエーションピッカーに表示されます', 'vk-blocks-pro'), }, { name: 'transform', label: __('変換', 'vk-blocks-pro'), - help: __('ブロックバリエーション変換で表示される', 'vk-blocks-pro'), + help: __('ブロックバリエーション変換で表示されます', 'vk-blocks-pro'), }, ];