JavaScript @wordpress/components createSlotFill Examples

Example #1

File: jetpack-likes-and-sharing-panel.js Project: Automattic/jetpack

/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { createSlotFill, PanelBody } from '@wordpress/components';
import { registerPlugin } from '@wordpress/plugins';

/**
 * Internal dependencies
 */
import JetpackPluginSidebar from './jetpack-plugin-sidebar';

const { Fill, Slot } = createSlotFill( 'JetpackLikesAndSharingPanel' );

export { Fill as default };

registerPlugin( 'jetpack-likes-and-sharing-panel', {
	render() {
		return (
			<Slot>
				{ fills => {
					if ( ! fills.length ) {
						return null;
					}

					return (
						<JetpackPluginSidebar>
							<PanelBody title={ __( 'Likes and Sharing', 'jetpack' ) }>{ fills }</PanelBody>
						</JetpackPluginSidebar>
					);
				} }

Example #2

File: index.js Project: comeoninc/gutenberg

/**
 * External dependencies
 */
import { isEmpty } from 'lodash';

/**
 * WordPress dependencies
 */
import { createSlotFill } from '@wordpress/components';

const { Fill: PinnedPlugins, Slot } = createSlotFill( 'PinnedPlugins' );

PinnedPlugins.Slot = ( props ) => (
	<Slot { ...props }>
		{ ( fills ) => ! isEmpty( fills ) && (
			<div className="edit-post-pinned-plugins">
				{ fills }
			</div>
		) }
	</Slot>
);

export default PinnedPlugins;

Example #3

File: jetpack-plugin-sidebar.js Project: Automattic/jetpack

/**
 * External dependencies
 */
import { createSlotFill } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
import { registerPlugin } from '@wordpress/plugins';

/**
 * Internal dependencies
 */
import './jetpack-plugin-sidebar.scss';
import JetpackLogo from './jetpack-logo';

const { Fill, Slot } = createSlotFill( 'JetpackPluginSidebar' );

export { Fill as default };

registerPlugin( 'jetpack-sidebar', {
	render: () => (
		<Slot>
			{ fills => {
				if ( ! fills.length ) {
					return null;
				}

				return (
					<Fragment>
						<PluginSidebarMoreMenuItem target="jetpack" icon={ <JetpackLogo /> }>
							Jetpack
						</PluginSidebarMoreMenuItem>

Example #4

File: plugin-block-settings-menu-group.js Project: comeoninc/gutenberg

/**
 * External dependencies
 */
import { isEmpty, map } from 'lodash';

/**
 * WordPress dependencies
 */
import { createSlotFill } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import { withSelect } from '@wordpress/data';

const { Fill: PluginBlockSettingsMenuGroup, Slot } = createSlotFill( 'PluginBlockSettingsMenuGroup' );

const PluginBlockSettingsMenuGroupSlot = ( { fillProps, selectedBlocks } ) => {
	selectedBlocks = map( selectedBlocks, ( block ) => block.name );
	return (
		<Slot fillProps={ { ...fillProps, selectedBlocks } } >
			{ ( fills ) => ! isEmpty( fills ) && (
				<Fragment>
					<div className="editor-block-settings-menu__separator" />
					{ fills }
				</Fragment>
			) }
		</Slot>
	);
};

PluginBlockSettingsMenuGroup.Slot = withSelect( ( select, { fillProps: { clientIds } } ) => ( {
	selectedBlocks: select( 'core/editor' ).getBlocksByClientId( clientIds ),
} ) )( PluginBlockSettingsMenuGroupSlot );

Example #5

File: index.js Project: aravindajith/gutenberg

/**
 * WordPress dependencies
 */
import { createSlotFill, PanelBody } from '@wordpress/components';

const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );

const PluginPostPublishPanel = ( { children, className, title, initialOpen = false } ) => (
	<Fill>
		<PanelBody
			className={ className }
			initialOpen={ initialOpen || ! title }
			title={ title }
		>
			{ children }
		</PanelBody>
	</Fill>
);

PluginPostPublishPanel.Slot = Slot;

export default PluginPostPublishPanel;

Example #6

File: index.js Project: aravindajith/gutenberg

/**
 * WordPress dependencies
 */
import { createSlotFill } from '@wordpress/components';

/**
 * Internal dependencies
 */
import { ifBlockEditSelected } from '../block-edit/context';

const { Fill, Slot } = createSlotFill( 'BlockFormatControls' );

const BlockFormatControls = ifBlockEditSelected( Fill );

BlockFormatControls.Slot = Slot;

export default BlockFormatControls;