53 lines
1.1 KiB
JavaScript
53 lines
1.1 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { createSlotFill, Button } from '@wordpress/components';
|
|
import { registerPlugin } from '@wordpress/plugins';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { SETTINGS_SLOT_FILL_CONSTANT } from './settings-slots';
|
|
|
|
const { Fill } = createSlotFill( SETTINGS_SLOT_FILL_CONSTANT );
|
|
|
|
const SidebarContent = () => {
|
|
return (
|
|
<div>
|
|
<h2>This is content created by the Fill</h2>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ExampleSettingsViewSlotFill = () => {
|
|
const style = { margin: '36px 0px' };
|
|
return (
|
|
<Fill>
|
|
{ ( { toggleSidebar, setSidebarContent } ) => {
|
|
return (
|
|
<div style={ style }>
|
|
<h1>Example Settings View</h1>
|
|
<p>This is the main content using a SlotFill</p>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={ () => {
|
|
toggleSidebar();
|
|
setSidebarContent( SidebarContent );
|
|
} }
|
|
>
|
|
Show Sidebar
|
|
</Button>
|
|
</div>
|
|
);
|
|
} }
|
|
</Fill>
|
|
);
|
|
};
|
|
|
|
export const registerExampleSettingsView = () => {
|
|
registerPlugin( 'woocommerce-exampple-settings-view-slotfill', {
|
|
scope: 'woocommerce-settings',
|
|
render: ExampleSettingsViewSlotFill,
|
|
} );
|
|
};
|