Handle when no block was focused

This commit is contained in:
Matt Sherman 2023-10-27 10:19:47 -04:00
parent cbda698e08
commit 63c629b14d
1 changed files with 24 additions and 8 deletions

View File

@ -1,3 +1,8 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
export function BlockInspector( {
blockInfo: { blockName, templateBlockId, templateBlockOrder },
}: {
@ -9,16 +14,27 @@ export function BlockInspector( {
} ) {
return (
<div className="woocommerce-product-editor-dev-tools-block-inspector">
<dl className="woocommerce-product-editor-dev-tools-block-inspector__properties">
<dt>Block name</dt>
<dd>{ blockName }</dd>
{ ! blockName && (
<p>
{ __(
'Focus on a block to see its details.',
'woocommerce'
) }
</p>
) }
<dt>Template block id</dt>
<dd>{ templateBlockId }</dd>
{ blockName && (
<dl className="woocommerce-product-editor-dev-tools-block-inspector__properties">
<dt>Block name</dt>
<dd>{ blockName }</dd>
<dt>Template block order</dt>
<dd>{ templateBlockOrder }</dd>
</dl>
<dt>Template block id</dt>
<dd>{ templateBlockId }</dd>
<dt>Template block order</dt>
<dd>{ templateBlockOrder }</dd>
</dl>
) }
</div>
);
}