From 2d10ca6833da37a6be044cac95cfb41d69cbd0df Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 1 May 2020 14:26:30 +0100 Subject: [PATCH 1/3] Deprecate the original slot implementation and refactor usage --- .../block-settings-menu-controls/index.js | 25 +++++++--- .../components/block-settings-menu/index.js | 1 + .../inserter-menu-extension/index.js | 2 + .../src/components/inserter/block-list.js | 48 ++++++++++--------- .../rich-text/format-toolbar/index.js | 35 +++++++------- .../rich-text/format-toolbar/index.native.js | 1 + packages/components/src/slot-fill/index.js | 12 +++++ .../header/plugins-more-menu-group/index.js | 36 ++++++++------ .../header/tools-more-menu-group/index.js | 36 ++++++++------ .../src/components/options-modal/index.js | 2 +- .../plugin-post-status-info/test/index.js | 2 +- .../components/sidebar/post-status/index.js | 24 ++++------ .../sidebar/settings-sidebar/index.js | 2 +- .../components/complementary-area/index.js | 8 +++- .../src/components/pinned-items/index.js | 2 +- 15 files changed, 140 insertions(+), 96 deletions(-) diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js index 310d295b3dca52..e6d37bb0ca2392 100644 --- a/packages/block-editor/src/components/block-settings-menu-controls/index.js +++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js @@ -1,12 +1,16 @@ /** * External dependencies */ -import { isEmpty, map } from 'lodash'; +import { map } from 'lodash'; /** * WordPress dependencies */ -import { createSlotFill, MenuGroup } from '@wordpress/components'; +import { + createSlotFill, + MenuGroup, + __experimentalUseSlot as useSlot, +} from '@wordpress/components'; import { useSelect } from '@wordpress/data'; const { Fill: BlockSettingsMenuControls, Slot } = createSlotFill( @@ -25,13 +29,20 @@ const BlockSettingsMenuControlsSlot = ( { fillProps } ) => { ), }; }, [] ); + const slot = useSlot( 'BlockSettingsMenuControls' ); + const hasFills = Boolean( slot.fills && slot.fills.length ); + + if ( ! hasFills ) { + return null; + } return ( - - { ( fills ) => - ! isEmpty( fills ) && { fills } - } - + + + ); }; diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js index e4c2c64682a32f..0329fa23b8788d 100644 --- a/packages/block-editor/src/components/block-settings-menu/index.js +++ b/packages/block-editor/src/components/block-settings-menu/index.js @@ -78,6 +78,7 @@ export function BlockSettingsMenu( { clientIds } ) { <> <__experimentalBlockSettingsMenuFirstItem.Slot + bubblesVirtually fillProps={ { onClose } } /> { count === 1 && ( diff --git a/packages/block-editor/src/components/inserter-menu-extension/index.js b/packages/block-editor/src/components/inserter-menu-extension/index.js index c93b6fda2850b9..fa540ed82128fd 100644 --- a/packages/block-editor/src/components/inserter-menu-extension/index.js +++ b/packages/block-editor/src/components/inserter-menu-extension/index.js @@ -8,5 +8,7 @@ const { Fill: __experimentalInserterMenuExtension, Slot } = createSlotFill( ); __experimentalInserterMenuExtension.Slot = Slot; +__experimentalInserterMenuExtension.Slot.slotName = + '__experimentalInserterMenuExtension'; export default __experimentalInserterMenuExtension; diff --git a/packages/block-editor/src/components/inserter/block-list.js b/packages/block-editor/src/components/inserter/block-list.js index a1aafcd54061de..3b9e2f0a4e40d3 100644 --- a/packages/block-editor/src/components/inserter/block-list.js +++ b/packages/block-editor/src/components/inserter/block-list.js @@ -16,7 +16,10 @@ import { * WordPress dependencies */ import { __, _x, _n, sprintf } from '@wordpress/i18n'; -import { withSpokenMessages } from '@wordpress/components'; +import { + withSpokenMessages, + __experimentalUseSlot as useSlot, +} from '@wordpress/components'; import { addQueryArgs } from '@wordpress/url'; import { controlsRepeat } from '@wordpress/icons'; import { speak } from '@wordpress/a11y'; @@ -187,6 +190,10 @@ function InserterBlockList( { const hasItems = ! isEmpty( filteredItems ); const hasChildItems = childItems.length > 0; + const slot = { fills: [ 'test' ] }; //useSlot( __experimentalInserterMenuExtension.Slot.slotName ); + const hasInserterExtensionFills = Boolean( + slot.fills && slot.fills.length + ); return (
@@ -272,28 +279,23 @@ function InserterBlockList( { ) } - <__experimentalInserterMenuExtension.Slot - fillProps={ { - onSelect: onSelectItem, - onHover, - filterValue, - hasItems, - } } - > - { ( fills ) => { - if ( fills.length ) { - return ( - - { fills } - - ); - } - if ( ! hasItems ) { - return ; - } - return null; - } } - + { hasInserterExtensionFills && ! hasItems && ( + + <__experimentalInserterMenuExtension.Slot + bubblesVirtually + fillProps={ { + onSelect: onSelectItem, + onHover, + filterValue, + hasItems, + } } + /> + + ) } + + { ! hasInserterExtensionFills && ! hasItems && ( + + ) }
); } diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js index 3bbc0eadd680e3..9b24ca6dca475a 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar/index.js +++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.js @@ -9,7 +9,12 @@ import { orderBy } from 'lodash'; */ import { __ } from '@wordpress/i18n'; -import { Toolbar, Slot, DropdownMenu } from '@wordpress/components'; +import { + Toolbar, + Slot, + DropdownMenu, + __experimentalUseSlot as useSlot, +} from '@wordpress/components'; import { chevronDown } from '@wordpress/icons'; const POPOVER_PROPS = { @@ -18,6 +23,10 @@ const POPOVER_PROPS = { }; const FormatToolbar = () => { + const slot = useSlot( 'RichText.ToolbarControls' ); + const hasFills = Boolean( slot.fills && slot.fills.length ); + // This still needs to be fixed. + return (
@@ -26,24 +35,18 @@ const FormatToolbar = () => { ) ) } - - { ( fills ) => - fills.length !== 0 && ( - props ), - 'title' - ) } - popoverProps={ POPOVER_PROPS } - /> - ) - } - + { hasFills && ( + + ) }
); diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js index e7be93d4b43100..771e23d37bdb64 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js +++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.native.js @@ -11,6 +11,7 @@ const FormatToolbar = () => { ) ) } diff --git a/packages/components/src/slot-fill/index.js b/packages/components/src/slot-fill/index.js index f24ff8134dd15b..9d0aed72c059ca 100644 --- a/packages/components/src/slot-fill/index.js +++ b/packages/components/src/slot-fill/index.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import deprecated from '@wordpress/deprecated'; + /** * Internal dependencies */ @@ -12,6 +17,13 @@ export function Slot( { bubblesVirtually, ...props } ) { if ( bubblesVirtually ) { return ; } + + deprecated( 'Slots without event bubbling', { + hint: + "Set the bubblesVirtually prop to true for your slot and make sure it doesn't regress. On future versions, this prop will be enabled by default. Your slot name: " + + props.name, + } ); + return ; } diff --git a/packages/edit-post/src/components/header/plugins-more-menu-group/index.js b/packages/edit-post/src/components/header/plugins-more-menu-group/index.js index 50b7aa5efd69d7..89615883cda9ed 100644 --- a/packages/edit-post/src/components/header/plugins-more-menu-group/index.js +++ b/packages/edit-post/src/components/header/plugins-more-menu-group/index.js @@ -1,26 +1,32 @@ -/** - * External dependencies - */ -import { isEmpty } from 'lodash'; - /** * WordPress dependencies */ -import { createSlotFill, MenuGroup } from '@wordpress/components'; +import { + createSlotFill, + MenuGroup, + __experimentalUseSlot as useSlot, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; const { Fill: PluginsMoreMenuGroup, Slot } = createSlotFill( 'PluginsMoreMenuGroup' ); -PluginsMoreMenuGroup.Slot = ( { fillProps } ) => ( - - { ( fills ) => - ! isEmpty( fills ) && ( - { fills } - ) - } - -); +function PluginsMoreMenuGroupSlot( { fillProps } ) { + const slot = useSlot( 'PluginsMoreMenuGroup' ); + const hasFills = Boolean( slot.fills && slot.fills.length ); + + if ( ! hasFills ) { + return null; + } + + return ( + + + + ); +} + +PluginsMoreMenuGroup.Slot = PluginsMoreMenuGroupSlot; export default PluginsMoreMenuGroup; diff --git a/packages/edit-post/src/components/header/tools-more-menu-group/index.js b/packages/edit-post/src/components/header/tools-more-menu-group/index.js index d49db11a0b4afb..fc20661c825b84 100644 --- a/packages/edit-post/src/components/header/tools-more-menu-group/index.js +++ b/packages/edit-post/src/components/header/tools-more-menu-group/index.js @@ -1,26 +1,32 @@ -/** - * External dependencies - */ -import { isEmpty } from 'lodash'; - /** * WordPress dependencies */ -import { createSlotFill, MenuGroup } from '@wordpress/components'; +import { + createSlotFill, + MenuGroup, + __experimentalUseSlot as useSlot, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; const { Fill: ToolsMoreMenuGroup, Slot } = createSlotFill( 'ToolsMoreMenuGroup' ); -ToolsMoreMenuGroup.Slot = ( { fillProps } ) => ( - - { ( fills ) => - ! isEmpty( fills ) && ( - { fills } - ) - } - -); +function ToolsMoreMenuGroupSlot( { fillProps } ) { + const slot = useSlot( 'ToolsMoreMenuGroup' ); + const hasFills = Boolean( slot.fills && slot.fills.length ); + + if ( ! hasFills ) { + return null; + } + + return ( + + + + ); +} + +ToolsMoreMenuGroup.Slot = ToolsMoreMenuGroupSlot; export default ToolsMoreMenuGroup; diff --git a/packages/edit-post/src/components/options-modal/index.js b/packages/edit-post/src/components/options-modal/index.js index a4fa06cc512fca..7ce3e74b8739e6 100644 --- a/packages/edit-post/src/components/options-modal/index.js +++ b/packages/edit-post/src/components/options-modal/index.js @@ -49,7 +49,7 @@ export function OptionsModal( { isModalActive, isViewable, closeModal } ) { />
- + { isViewable && ( { My plugin post status info - + ).toJSON(); diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js index 11311e91849c2b..85da9c39d82c54 100644 --- a/packages/edit-post/src/components/sidebar/post-status/index.js +++ b/packages/edit-post/src/components/sidebar/post-status/index.js @@ -32,21 +32,15 @@ function PostStatus( { isOpened, onTogglePanel } ) { opened={ isOpened } onToggle={ onTogglePanel } > - - { ( fills ) => ( - <> - - - - - - - - { fills } - - - ) } - + + + + + + + + + ); } diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index befb270be4f668..81063ed3ee8a24 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -45,7 +45,7 @@ const SettingsSidebar = () => { { sidebarName === 'edit-post/document' && ( <> - + diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js index 2a60be08d3b456..456a71b58eb40e 100644 --- a/packages/interface/src/components/complementary-area/index.js +++ b/packages/interface/src/components/complementary-area/index.js @@ -19,7 +19,13 @@ import ComplementaryAreaHeader from '../complementary-area-header'; import PinnedItems from '../pinned-items'; function ComplementaryAreaSlot( { scope, ...props } ) { - return ; + return ( + + ); } function ComplementaryAreaFill( { scope, children, className } ) { diff --git a/packages/interface/src/components/pinned-items/index.js b/packages/interface/src/components/pinned-items/index.js index 59fc70003095bb..7a56f0d075e095 100644 --- a/packages/interface/src/components/pinned-items/index.js +++ b/packages/interface/src/components/pinned-items/index.js @@ -15,7 +15,7 @@ function PinnedItems( { scope, ...props } ) { function PinnedItemsSlot( { scope, className, ...props } ) { return ( - + { ( fills ) => ! isEmpty( fills ) && (
Date: Mon, 4 May 2020 13:19:45 +0100 Subject: [PATCH 2/3] Fix format toolbar --- .../rich-text/format-toolbar/index.js | 51 ++++++++++++++----- .../src/components/rich-text/style.scss | 6 +++ .../components/rich-text/toolbar-button.js | 31 ++++++++++- 3 files changed, 73 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js index 9b24ca6dca475a..6e180cfbf031c0 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar/index.js +++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.js @@ -1,20 +1,16 @@ -/** - * External dependencies - */ - -import { orderBy } from 'lodash'; - /** * WordPress dependencies */ - import { __ } from '@wordpress/i18n'; import { Toolbar, Slot, - DropdownMenu, + Dropdown, + Button, + NavigableMenu, __experimentalUseSlot as useSlot, } from '@wordpress/components'; +import { DOWN } from '@wordpress/keycodes'; import { chevronDown } from '@wordpress/icons'; const POPOVER_PROPS = { @@ -25,7 +21,6 @@ const POPOVER_PROPS = { const FormatToolbar = () => { const slot = useSlot( 'RichText.ToolbarControls' ); const hasFills = Boolean( slot.fills && slot.fills.length ); - // This still needs to be fixed. return (
@@ -40,11 +35,41 @@ const FormatToolbar = () => { ) ) } { hasFills && ( - { + const openOnArrowDown = ( event ) => { + if ( ! isOpen && event.keyCode === DOWN ) { + event.preventDefault(); + event.stopPropagation(); + onToggle(); + } + }; + + return ( + + ) } ); } From 8b818387dcae1e41acd613b5afa1c8b6332de2ff Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 5 May 2020 11:23:27 +0100 Subject: [PATCH 3/3] Fix inserter slot --- .../src/components/inserter/block-list.js | 35 ++++----- .../src/components/inserter/menu.js | 71 +++++++++++-------- .../src/slot-fill/bubbles-virtually/slot.js | 1 + 3 files changed, 61 insertions(+), 46 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-list.js b/packages/block-editor/src/components/inserter/block-list.js index 3b9e2f0a4e40d3..cbc75691706558 100644 --- a/packages/block-editor/src/components/inserter/block-list.js +++ b/packages/block-editor/src/components/inserter/block-list.js @@ -24,7 +24,7 @@ import { addQueryArgs } from '@wordpress/url'; import { controlsRepeat } from '@wordpress/icons'; import { speak } from '@wordpress/a11y'; import { createBlock } from '@wordpress/blocks'; -import { useMemo, useEffect } from '@wordpress/element'; +import { useMemo, useEffect, useCallback } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; @@ -100,22 +100,25 @@ function InserterBlockList( { } }, [] ); - const onSelectItem = ( item ) => { - const { name, title, initialAttributes, innerBlocks } = item; - const insertedBlock = createBlock( - name, - initialAttributes, - createBlocksFromInnerBlocksTemplate( innerBlocks ) - ); + const onSelectItem = useCallback( + ( item ) => { + const { name, title, initialAttributes, innerBlocks } = item; + const insertedBlock = createBlock( + name, + initialAttributes, + createBlocksFromInnerBlocksTemplate( innerBlocks ) + ); - onInsert( insertedBlock ); + onInsert( insertedBlock ); - if ( ! selectBlockOnInsert ) { - // translators: %s: the name of the block that has been added - const message = sprintf( __( '%s block added' ), title ); - speak( message ); - } - }; + if ( ! selectBlockOnInsert ) { + // translators: %s: the name of the block that has been added + const message = sprintf( __( '%s block added' ), title ); + speak( message ); + } + }, + [ onInsert, selectBlockOnInsert ] + ); const filteredItems = useMemo( () => { return searchBlockItems( items, categories, collections, filterValue ); @@ -190,7 +193,7 @@ function InserterBlockList( { const hasItems = ! isEmpty( filteredItems ); const hasChildItems = childItems.length > 0; - const slot = { fills: [ 'test' ] }; //useSlot( __experimentalInserterMenuExtension.Slot.slotName ); + const slot = useSlot( __experimentalInserterMenuExtension.Slot.slotName ); const hasInserterExtensionFills = Boolean( slot.fills && slot.fills.length ); diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 3d9864fc14a3e3..46219bbc271019 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -6,7 +6,7 @@ import { includes, pick } from 'lodash'; /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; +import { useState, useCallback } from '@wordpress/element'; import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes'; import { TabPanel } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -91,7 +91,7 @@ function InserterMenu( { // Since it's a function only called when the event handlers are called, // it's fine to extract it. // eslint-disable-next-line no-restricted-syntax - function getInsertionIndex() { + const getInsertionIndex = useCallback( () => { // If the clientId is defined, we insert at the position of the block. if ( clientId ) { return getBlockIndex( clientId, destinationRootClientId ); @@ -105,37 +105,48 @@ function InserterMenu( { // Otherwise, we insert at the end of the current rootClientId return getBlockOrder( destinationRootClientId ).length; - } + }, [ isAppender, clientId, destinationRootClientId ] ); - const onInsertBlocks = ( blocks ) => { - const selectedBlock = getSelectedBlock(); - if ( - ! isAppender && - selectedBlock && - isUnmodifiedDefaultBlock( selectedBlock ) - ) { - replaceBlocks( selectedBlock.clientId, blocks ); - } else { - insertBlocks( - blocks, - getInsertionIndex(), - destinationRootClientId, - __experimentalSelectBlockOnInsert - ); - } + const onInsertBlocks = useCallback( + ( blocks ) => { + const selectedBlock = getSelectedBlock(); + if ( + ! isAppender && + selectedBlock && + isUnmodifiedDefaultBlock( selectedBlock ) + ) { + replaceBlocks( selectedBlock.clientId, blocks ); + } else { + insertBlocks( + blocks, + getInsertionIndex(), + destinationRootClientId, + __experimentalSelectBlockOnInsert + ); + } - onSelect(); - }; + onSelect(); + }, + [ + isAppender, + getInsertionIndex, + destinationRootClientId, + __experimentalSelectBlockOnInsert, + ] + ); - const onHover = ( item ) => { - setHoveredItem( item ); - if ( item ) { - const index = getInsertionIndex(); - showInsertionPoint( destinationRootClientId, index ); - } else { - hideInsertionPoint(); - } - }; + const onHover = useCallback( + ( item ) => { + setHoveredItem( item ); + if ( item ) { + const index = getInsertionIndex(); + showInsertionPoint( destinationRootClientId, index ); + } else { + hideInsertionPoint(); + } + }, + [ getInsertionIndex, destinationRootClientId ] + ); const blocksTab = ( <> diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot.js b/packages/components/src/slot-fill/bubbles-virtually/slot.js index 0483a5057e1f22..f90f8b8f8628ca 100644 --- a/packages/components/src/slot-fill/bubbles-virtually/slot.js +++ b/packages/components/src/slot-fill/bubbles-virtually/slot.js @@ -33,6 +33,7 @@ export default function Slot( { // fillProps may be an update that interact with the layout, so // we useLayoutEffect + // Make sure to memoize your fill Props to avoid infinite loops. useLayoutEffect( () => { if ( slot.fillProps && ! isShallowEqual( slot.fillProps, fillProps ) ) { registry.updateSlot( name, ref, fillProps );