Initial styling

This commit is contained in:
Matt Sherman 2023-10-26 16:04:17 -04:00
parent b0ce2b5723
commit 65e0208073
6 changed files with 94 additions and 13 deletions

View File

@ -2,7 +2,6 @@
* External dependencies
*/
import { useEffect, useState } from 'react';
import { WooFooterItem } from '@woocommerce/admin-layout';
function useFocusedBlock() {
const [ focusedElement, setFocusedElement ] = useState< Element | null >();
@ -46,15 +45,10 @@ export function BlockInspector() {
useFocusedBlock();
return (
<WooFooterItem>
<>
<div>Block Inspector</div>
<div>
<div>Block name: { blockName }</div>
<div>Template block id: { templateBlockId }</div>
<div>Template block order: { templateBlockOrder }</div>
</div>
</>
</WooFooterItem>
<div>
<div>Block name: { blockName }</div>
<div>Template block id: { templateBlockId }</div>
<div>Template block order: { templateBlockOrder }</div>
</div>
);
}

View File

@ -0,0 +1,16 @@
.woocommerce-product-editor-dev-tools-bar {
background-color: black;
color: white;
}
.woocommerce-product-editor-dev-tools-bar__header {
display: flex;
.components-button {
color: white;
}
}
.woocommerce-product-editor-dev-tools-bar__tabs {
flex: 1;
}

View File

@ -7,6 +7,7 @@ import { registerPlugin } from '@wordpress/plugins';
* Internal dependencies
*/
import { ProductEditorDevTools } from './product-editor-dev-tools';
import './index.scss';
export function registerProductEditorDevTools() {
registerPlugin( 'woocommerce-product-editor-dev-tools', {

View File

@ -0,0 +1,66 @@
/**
* External dependencies
*/
import { useState } from 'react';
import { WooFooterItem } from '@woocommerce/admin-layout';
import { Button, NavigableMenu } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { close } from '@wordpress/icons';
/**
* Internal dependencies
*/
import { BlockInspector } from './block-inspector';
export function ProductEditorDevToolsBar( {
onClose,
}: {
onClose: () => void;
} ) {
const [ selectedTab, setSelectedTab ] = useState< string >( 'inspector' );
function handleNavigate( _childIndex: number, child: HTMLButtonElement ) {
child.click();
}
function handleTabClick( tabName: string ) {
setSelectedTab( tabName );
}
return (
<WooFooterItem>
<div className="woocommerce-product-editor-dev-tools-bar">
<div className="woocommerce-product-editor-dev-tools-bar__header">
<div className="woocommerce-product-editor-dev-tools-bar__tabs">
<NavigableMenu
role="tablist"
orientation="horizontal"
onNavigate={ handleNavigate }
>
<Button
onClick={ () => handleTabClick( 'inspector' ) }
>
Block Inspector
</Button>
<Button onClick={ () => handleTabClick( 'about' ) }>
About
</Button>
</NavigableMenu>
</div>
<div className="woocommerce-product-editor-dev-tools-bar__actions">
<Button
icon={ close }
label={ __( 'Close', 'woocommerce' ) }
onClick={ onClose }
/>
</div>
</div>
<div>
{ selectedTab === 'inspector' && <BlockInspector /> }
{ selectedTab === 'about' && (
<div>About developer tools</div>
) }
</div>
</div>
</WooFooterItem>
);
}

View File

@ -6,7 +6,7 @@ import { useState } from 'react';
/**
* Internal dependencies
*/
import { BlockInspector } from './block-inspector';
import { ProductEditorDevToolsBar } from './product-editor-dev-tools-bar';
import { ProductEditorDevToolsMenu } from './product-editor-dev-tools-menu';
export function ProductEditorDevTools() {
@ -22,7 +22,11 @@ export function ProductEditorDevTools() {
} }
/>
{ shouldShowDevTools && <BlockInspector /> }
{ shouldShowDevTools && (
<ProductEditorDevToolsBar
onClose={ () => setShouldShowDevTools( false ) }
/>
) }
</>
);
}