How to use the @wordpress/components.createSlotFill function in @wordpress/components

To help you get started, we’ve selected a few @wordpress/components examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Automattic / wp-calypso / client / gutenberg / editor / edit-post / components / sidebar / index.js View on Github external
/** @format */
/* eslint-disable wpcalypso/jsx-classname-namespace */
/**
 * External dependencies
 */
import React from 'react';

/**
 * WordPress Dependencies
 */
import { createSlotFill, withFocusReturn } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
import { ifCondition, compose } from '@wordpress/compose';

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

/**
 * Renders a sidebar with its content.
 *
 * @return {Object} The rendered sidebar.
 */
const Sidebar = ( { children, label } ) => {
	return (
		
			<div tabindex="-1" label="" aria-label="{" role="region">
				{ children }
			</div>
		
	);
};
github WordPress / gutenberg / packages / edit-post / src / components / sidebar / plugin-pre-publish-panel / index.js View on Github external
/**
 * WordPress dependencies
 */
import { createSlotFill, PanelBody } from '@wordpress/components';

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

/**
 * Renders provided content to the pre-publish side panel in the publish flow
 * (side panel that opens when a user first pushes "Publish" from the main editor).
 *
 * @param {Object} props Component props.
 * @param {string} [props.className] An optional class name added to the panel.
 * @param {string} [props.title] Title displayed at the top of the panel.
 * @param {boolean} [props.initialOpen=false] Whether to have the panel initially opened. When no title is provided it is always opened.
 *
 * @example ES5
 * ```js
 * // Using ES5 syntax
 * var __ = wp.i18n.__;
 * var PluginPrePublishPanel = wp.editPost.PluginPrePublishPanel;
 *
github DefinitelyTyped / DefinitelyTyped / types / wordpress__components / wordpress__components-tests.tsx View on Github external
(() =&gt; {
    const { Fill, Slot } = C.createSlotFill('Toolbar');

    const ToolbarItem = () =&gt; My item;

    const Toolbar = () =&gt; (
        <div>
            
        </div>
    );
})();
github dsifford / academic-bloggers-toolkit / src / js / gutenberg / sidebar / toolbar.tsx View on Github external
import { useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

import RemoveIcon from 'components/icons/remove';
import AddReferenceDialog from 'gutenberg/dialogs/add-reference';
import StyleDialog from 'gutenberg/dialogs/update-style';
import { readReferencesFile } from 'utils/file';

import ToolbarMenu from './toolbar-menu';
import styles from './toolbar.scss';

interface Props {
    selectedItems: readonly string[];
}

const { Slot: ToolbarButtonSlot, Fill: ToolbarButtonFill } = createSlotFill(
    'abt-toolbar-buttons',
);

export const ToolbarButton = (props: IconButton.Props) =&gt; (
    
        
    
);

export default function Toolbar({ selectedItems }: Props) {
    const { addReferences, removeFootnotes, removeReferences } = useDispatch(
        'abt/data',
    );
    const { clearSelectedItems } = useDispatch('abt/ui');
    const { createErrorNotice } = useDispatch('core/notices');
    const removeSelectedItems = useCallback(() =&gt; {
github Automattic / wp-calypso / client / gutenberg / editor / edit-post / components / header / plugins-more-menu-group / index.js View on Github external
/**
 * External dependencies
 */
import React from 'react';
import { isEmpty } from 'lodash';

/**
 * WordPress dependencies
 */
import { createSlotFill, MenuGroup } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

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

PluginsMoreMenuGroup.Slot = ( { fillProps } ) =&gt; (
	
		{ fills =&gt; ! isEmpty( fills ) &amp;&amp; { fills } }
	
);

export default PluginsMoreMenuGroup;
github WordPress / gutenberg / packages / edit-post / src / components / sidebar / index.js View on Github external
/**
 * WordPress Dependencies
 */
import { createSlotFill, withFocusReturn } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
import { ifCondition, compose } from '@wordpress/compose';

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

/**
 * Renders a sidebar with its content.
 *
 * @return {Object} The rendered sidebar.
 */
const Sidebar = ( { children, label } ) =&gt; {
	return (
		
			<div tabindex="-1" label="" aria-label="{" role="region">
				{ children }</div>
github WordPress / gutenberg / packages / edit-site / src / components / sidebar / index.js View on Github external
/**
 * WordPress dependencies
 */
import { createSlotFill, Panel } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const { Slot: TemplatesSlot, Fill: TemplatesFill } = createSlotFill(
	'EditSiteSidebarTemplates'
);
const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
	'EditSiteSidebarInspector'
);

function Sidebar() {
	return (
		<div tabindex="-1" aria-label="{" role="region">
			
				</div>
github WordPress / gutenberg / packages / block-editor / src / components / block-settings / button.native.js View on Github external
/**
 * WordPress dependencies
 */
import { createSlotFill, ToolbarButton } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { withDispatch } from '@wordpress/data';

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

const SettingsButton = ( { openGeneralSidebar } ) =&gt; (
	
);

const SettingsButtonFill = ( props ) =&gt; (
	
		
	
);

const SettingsToolbarButton = withDispatch( ( dispatch ) =&gt; {
github WordPress / gutenberg / packages / edit-site / src / components / sidebar / index.js View on Github external
/**
 * WordPress dependencies
 */
import { createSlotFill, Panel } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const { Slot: TemplatesSlot, Fill: TemplatesFill } = createSlotFill(
	'EditSiteSidebarTemplates'
);
const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill(
	'EditSiteSidebarInspector'
);

function Sidebar() {
	return (
		<div tabindex="-1" aria-label="{" role="region">
			
				
			
			
				</div>
github Automattic / wp-calypso / client / landing / gutenboarding / components / sidebar / index.tsx View on Github external
/**
 * External dependencies
 */
import classnames from 'classnames';
import React, { FunctionComponent } from 'react';
import { createSlotFill, Animate } from '@wordpress/components';
import { ifCondition } from '@wordpress/compose';

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

interface Props {
	className: string;
	label: string;
}

const Sidebar: FunctionComponent&lt; Props &gt; = ( { children, className, label } ) =&gt; {
	return (
		<div tabindex="{" label="" aria-label="{" role="region">
			{ children }
		</div>