From 3a449c2c935074d10e74ace40dc1e907f7407a97 Mon Sep 17 00:00:00 2001 From: Matt Sherman Date: Tue, 31 Oct 2023 13:16:39 -0400 Subject: [PATCH] Rename components --- .../block-inspector-tab-panel.tsx | 49 +++++++++++++++ .../block-inspector.tsx | 40 ------------ ...{expressions.tsx => expressions-panel.tsx} | 2 +- .../help-tab-panel.tsx | 62 +++++++++++++++++++ .../src/product-editor-dev-tools/help.tsx | 55 ---------------- .../product-editor-dev-tools-bar.tsx | 24 +++---- .../product-tab-panel.tsx | 36 +++++++++++ .../src/product-editor-dev-tools/product.tsx | 27 -------- 8 files changed, 160 insertions(+), 135 deletions(-) create mode 100644 plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector-tab-panel.tsx delete mode 100644 plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector.tsx rename plugins/woocommerce-beta-tester/src/product-editor-dev-tools/{expressions.tsx => expressions-panel.tsx} (98%) create mode 100644 plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help-tab-panel.tsx delete mode 100644 plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help.tsx create mode 100644 plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-tab-panel.tsx delete mode 100644 plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product.tsx diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector-tab-panel.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector-tab-panel.tsx new file mode 100644 index 00000000000..58bea2f284b --- /dev/null +++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector-tab-panel.tsx @@ -0,0 +1,49 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { TabPanel } from './tab-panel'; + +export function BlockInspectorTabPanel( { + isSelected, + blockInfo: { blockName, templateBlockId, templateBlockOrder }, +}: { + isSelected: boolean; + blockInfo: { + blockName?: string | null; + templateBlockId?: string | null; + templateBlockOrder?: number | null; + }; +} ) { + return ( + +
+ { ! blockName && ( +

+ { __( + 'Focus on a block to see its details.', + 'woocommerce' + ) } +

+ ) } + + { blockName && ( +
+
Block name
+
{ blockName }
+ +
Template block id
+
{ templateBlockId }
+ +
Template block order
+
{ templateBlockOrder }
+
+ ) } +
+ + ); +} diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector.tsx deleted file mode 100644 index 20182c0b937..00000000000 --- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/block-inspector.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; - -export function BlockInspector( { - blockInfo: { blockName, templateBlockId, templateBlockOrder }, -}: { - blockInfo: { - blockName?: string | null; - templateBlockId?: string | null; - templateBlockOrder?: number | null; - }; -} ) { - return ( -
- { ! blockName && ( -

- { __( - 'Focus on a block to see its details.', - 'woocommerce' - ) } -

- ) } - - { blockName && ( -
-
Block name
-
{ blockName }
- -
Template block id
-
{ templateBlockId }
- -
Template block order
-
{ templateBlockOrder }
-
- ) } -
- ); -} diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions-panel.tsx similarity index 98% rename from plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions.tsx rename to plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions-panel.tsx index 0c6fe56f558..89423dbe861 100644 --- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions.tsx +++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/expressions-panel.tsx @@ -6,7 +6,7 @@ import { evaluate } from '@woocommerce/expression-evaluation'; import { Button } from '@wordpress/components'; import { useState } from 'react'; -export function Expressions( { +export function ExpressionsPanel( { evaluationContext, }: { evaluationContext: { diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help-tab-panel.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help-tab-panel.tsx new file mode 100644 index 00000000000..acd07d78ebf --- /dev/null +++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help-tab-panel.tsx @@ -0,0 +1,62 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { TabPanel } from './tab-panel'; + +export function HelpTabPanel( { isSelected }: { isSelected: boolean } ) { + return ( + +
+

+ { __( + 'For help with WooCommerce product editor development, the following resources are available.', + 'woocommerce' + ) } +

+ +
+ + ); +} diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help.tsx deleted file mode 100644 index 2af2570514b..00000000000 --- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/help.tsx +++ /dev/null @@ -1,55 +0,0 @@ -/** - * External dependencies - */ -import { __ } from '@wordpress/i18n'; - -export function Help() { - return ( -
-

- { __( - 'For help with WooCommerce product editor development, the following resources are available.', - 'woocommerce' - ) } -

- -
- ); -} diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx index 4bf19104b0e..f2fb6a438b0 100644 --- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx +++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-editor-dev-tools-bar.tsx @@ -21,9 +21,9 @@ import { useEntityProp } from '@wordpress/core-data'; /** * Internal dependencies */ -import { BlockInspector } from './block-inspector'; -import { Help } from './help'; -import { Product } from './product'; +import { BlockInspectorTabPanel } from './block-inspector-tab-panel'; +import { HelpTabPanel } from './help-tab-panel'; +import { ProductTabPanel } from './product-tab-panel'; import { TabPanel } from './tab-panel'; import { useFocusedBlock } from './hooks/use-focused-block'; @@ -121,15 +121,15 @@ export function ProductEditorDevToolsBar( {
- - - - - - - - - + + +
diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-tab-panel.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-tab-panel.tsx new file mode 100644 index 00000000000..760b32f0a7a --- /dev/null +++ b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product-tab-panel.tsx @@ -0,0 +1,36 @@ +/** + * External dependencies + */ +import { Product } from '@woocommerce/data'; + +/** + * Internal dependencies + */ +import { ExpressionsPanel } from './expressions-panel'; +import { TabPanel } from './tab-panel'; + +export function ProductTabPanel( { + isSelected, + evaluationContext, +}: { + isSelected: boolean; + evaluationContext: { + postType: string; + editedProduct: Product; + }; +} ) { + return ( + +
+
+ { JSON.stringify( + evaluationContext.editedProduct, + null, + 4 + ) } +
+ +
+ + ); +} diff --git a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product.tsx b/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product.tsx deleted file mode 100644 index bb8dfcca057..00000000000 --- a/plugins/woocommerce-beta-tester/src/product-editor-dev-tools/product.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/** - * External dependencies - */ -import { Product } from '@woocommerce/data'; - -/** - * Internal dependencies - */ -import { Expressions } from './expressions'; - -export function Product( { - evaluationContext, -}: { - evaluationContext: { - postType: string; - editedProduct: Product; - }; -} ) { - return ( -
-
- { JSON.stringify( evaluationContext.editedProduct, null, 4 ) } -
- -
- ); -}