Skip to content

Instantly share code, notes, and snippets.

@chrisvanpatten chrisvanpatten/panel.js

Last active Mar 5, 2020
Embed
What would you like to do?
import { PluginPrePublishPanel } from '@wordpress/edit-post';
import { registerPlugin } from '@wordpress/plugins';
import Required from './required';
const Test = () => {
<PluginPrePublishPanel>
<Required.Fill>
{ ( fills ) => fills.length > 0 ? fills : null ) }
</Required.Fill>
</PluginPrePublishPanel>
};
registerPlugin( 'test-plugin-fill-panel', { render: Test } );
import { createSlotFill } from '@wordpress/components';
const { Fill, Slot } = createSlotFill( 'OneCMSRequiredFields' );
const Required = ( props ) => {
const {
children,
isValid,
} = props;
return (
<>
{ ! isValid && (
<Slot>
{ children }
</Slot>
) }
{ children }
</>
);
};
Required.Fill = Fill;
export default Required;
import { TextControl } from '@wordpress/components';
import { PluginPrePublishPanel } from '@wordpress/edit-post';
import { useState } from '@wordpress/element';
import { registerPlugin } from '@wordpress/plugins';
import Required from './required';
const Test = () => {
const [ thing, setThing ] = useState( '' );
return (
<PluginDocumentSettingPanel
name="custom-panel"
title="Custom Panel"
className="custom-panel"
>
<Required isValid={ thing.length > 10 }>
<TextControl
onChange={ ( value ) => setThing( value ) }
value={ thing }
/>
</Required>
</PluginDocumentSettingPanel>
);
};
registerPlugin( 'test-plugin-doc-panel', { render: Test } );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.