Rename components
This commit is contained in:
Matt Sherman
parent
10057b0d81
commit
3a449c2c93
|
|
@ -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 (
|
||||
<TabPanel isSelected={ isSelected }>
|
||||
<div className="woocommerce-product-editor-dev-tools-block-inspector">
|
||||
{ ! blockName && (
|
||||
<p>
|
||||
{ __(
|
||||
'Focus on a block to see its details.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</p>
|
||||
) }
|
||||
|
||||
{ blockName && (
|
||||
<dl className="woocommerce-product-editor-dev-tools-block-inspector__properties">
|
||||
<dt>Block name</dt>
|
||||
<dd>{ blockName }</dd>
|
||||
|
||||
<dt>Template block id</dt>
|
||||
<dd>{ templateBlockId }</dd>
|
||||
|
||||
<dt>Template block order</dt>
|
||||
<dd>{ templateBlockOrder }</dd>
|
||||
</dl>
|
||||
) }
|
||||
</div>
|
||||
</TabPanel>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<div className="woocommerce-product-editor-dev-tools-block-inspector">
|
||||
{ ! blockName && (
|
||||
<p>
|
||||
{ __(
|
||||
'Focus on a block to see its details.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</p>
|
||||
) }
|
||||
|
||||
{ blockName && (
|
||||
<dl className="woocommerce-product-editor-dev-tools-block-inspector__properties">
|
||||
<dt>Block name</dt>
|
||||
<dd>{ blockName }</dd>
|
||||
|
||||
<dt>Template block id</dt>
|
||||
<dd>{ templateBlockId }</dd>
|
||||
|
||||
<dt>Template block order</dt>
|
||||
<dd>{ templateBlockOrder }</dd>
|
||||
</dl>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -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: {
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { TabPanel } from './tab-panel';
|
||||
|
||||
export function HelpTabPanel( { isSelected }: { isSelected: boolean } ) {
|
||||
return (
|
||||
<TabPanel isSelected={ isSelected }>
|
||||
<div className="woocommerce-product-editor-dev-tools-help">
|
||||
<p>
|
||||
{ __(
|
||||
'For help with WooCommerce product editor development, the following resources are available.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/woocommerce/woocommerce/tree/trunk/docs/product-editor-development"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{ __(
|
||||
'Product Editor Development Handbook',
|
||||
'woocommerce'
|
||||
) }
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/woocommerce/woocommerce/discussions/categories/woocommerce-product-block-editor"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{ __(
|
||||
'Product Editor Discussion on GitHub',
|
||||
'woocommerce'
|
||||
) }
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://woocommerce.com/community-slack/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{ __(
|
||||
'WooCommerce Community Slack, in the #developers channel',
|
||||
'woocommerce'
|
||||
) }
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</TabPanel>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
||||
export function Help() {
|
||||
return (
|
||||
<div className="woocommerce-product-editor-dev-tools-help">
|
||||
<p>
|
||||
{ __(
|
||||
'For help with WooCommerce product editor development, the following resources are available.',
|
||||
'woocommerce'
|
||||
) }
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/woocommerce/woocommerce/tree/trunk/docs/product-editor-development"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{ __(
|
||||
'Product Editor Development Handbook',
|
||||
'woocommerce'
|
||||
) }
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/woocommerce/woocommerce/discussions/categories/woocommerce-product-block-editor"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{ __(
|
||||
'Product Editor Discussion on GitHub',
|
||||
'woocommerce'
|
||||
) }
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://woocommerce.com/community-slack/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{ __(
|
||||
'WooCommerce Community Slack, in the #developers channel',
|
||||
'woocommerce'
|
||||
) }
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -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( {
|
|||
</div>
|
||||
</div>
|
||||
<div className="woocommerce-product-editor-dev-tools-bar__panel">
|
||||
<TabPanel isSelected={ selectedTab === 'inspector' }>
|
||||
<BlockInspector blockInfo={ blockInfo } />
|
||||
</TabPanel>
|
||||
<TabPanel isSelected={ selectedTab === 'product' }>
|
||||
<Product evaluationContext={ evaluationContext } />
|
||||
</TabPanel>
|
||||
<TabPanel isSelected={ selectedTab === 'help' }>
|
||||
<Help />
|
||||
</TabPanel>
|
||||
<BlockInspectorTabPanel
|
||||
blockInfo={ blockInfo }
|
||||
isSelected={ selectedTab === 'inspector' }
|
||||
/>
|
||||
<ProductTabPanel
|
||||
evaluationContext={ evaluationContext }
|
||||
isSelected={ selectedTab === 'product' }
|
||||
/>
|
||||
<HelpTabPanel isSelected={ selectedTab === 'help' } />
|
||||
</div>
|
||||
</div>
|
||||
</WooFooterItem>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<TabPanel isSelected={ isSelected }>
|
||||
<div className="woocommerce-product-editor-dev-tools-product">
|
||||
<div className="woocommerce-product-editor-dev-tools-product-entity">
|
||||
{ JSON.stringify(
|
||||
evaluationContext.editedProduct,
|
||||
null,
|
||||
4
|
||||
) }
|
||||
</div>
|
||||
<ExpressionsPanel evaluationContext={ evaluationContext } />
|
||||
</div>
|
||||
</TabPanel>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<div className="woocommerce-product-editor-dev-tools-product">
|
||||
<div className="woocommerce-product-editor-dev-tools-product-entity">
|
||||
{ JSON.stringify( evaluationContext.editedProduct, null, 4 ) }
|
||||
</div>
|
||||
<Expressions evaluationContext={ evaluationContext } />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue