Initial styling
This commit is contained in:
parent
b0ce2b5723
commit
65e0208073
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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', {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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 ) }
|
||||
/>
|
||||
) }
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue