From 566a1b8507568fa324be246f96daa3bc2935fb9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 26 Jul 2018 12:15:04 +0200 Subject: [PATCH] Decouple editor and edit-post editor exposes the _BlockSettingsMenuPluginsExtension component that specific implementations can use. edit-post chooses to fill that slot with a component of their own (PluginBlockSettingsMenuGroup) which happens to be a slot as well. This way, third-party authors can hook into the edit-post specific implementation by using the PluginsBlockSettingsMenuItem fill. --- .../plugin-block-settings-menu-group.js | 2 +- edit-post/components/visual-editor/index.js | 5 +++++ edit-post/index.js | 1 - .../block-settings-menu-plugins-extension.js | 10 ++++++++++ editor/components/block-settings-menu/index.js | 4 ++-- editor/components/index.js | 1 + 6 files changed, 19 insertions(+), 4 deletions(-) create mode 100644 editor/components/block-settings-menu/block-settings-menu-plugins-extension.js diff --git a/edit-post/components/block-settings-menu/plugin-block-settings-menu-group.js b/edit-post/components/block-settings-menu/plugin-block-settings-menu-group.js index 799618e1db75e5..2018035e92ff6b 100644 --- a/edit-post/components/block-settings-menu/plugin-block-settings-menu-group.js +++ b/edit-post/components/block-settings-menu/plugin-block-settings-menu-group.js @@ -10,7 +10,7 @@ import { createSlotFill } from '@wordpress/components'; import { Fragment } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; -const { Fill: PluginBlockSettingsMenuGroup, Slot } = createSlotFill( 'BlockSettingsMenuPluginsGroup' ); +const { Fill: PluginBlockSettingsMenuGroup, Slot } = createSlotFill( 'PluginBlockSettingsMenuGroup' ); const PluginBlockSettingsMenuGroupSlot = ( { fillProps, selectedBlocks } ) => { selectedBlocks = map( selectedBlocks, ( block ) => block.name ); diff --git a/edit-post/components/visual-editor/index.js b/edit-post/components/visual-editor/index.js index c166c75484a211..df1852492117e3 100644 --- a/edit-post/components/visual-editor/index.js +++ b/edit-post/components/visual-editor/index.js @@ -11,6 +11,7 @@ import { BlockSelectionClearer, MultiSelectScrollIntoView, _BlockSettingsMenuFirstItem, + _BlockSettingsMenuPluginsExtension, } from '@wordpress/editor'; /** @@ -18,6 +19,7 @@ import { */ import './style.scss'; import BlockInspectorButton from './block-inspector-button'; +import PluginBlockSettingsMenuGroup from '../block-settings-menu/plugin-block-settings-menu-group'; function VisualEditor() { return ( @@ -34,6 +36,9 @@ function VisualEditor() { <_BlockSettingsMenuFirstItem> { ( { onClose } ) => } + <_BlockSettingsMenuPluginsExtension> + { ( { clientIds, onClose } ) => } + ); } diff --git a/edit-post/index.js b/edit-post/index.js index f0ab960b31d259..cf48901c741152 100644 --- a/edit-post/index.js +++ b/edit-post/index.js @@ -89,7 +89,6 @@ export function initializeEditor( id, postType, postId, settings, overridePost ) } export { default as PluginBlockSettingsMenuItem } from './components/block-settings-menu/plugin-block-settings-menu-item'; -export { default as PluginBlockSettingsMenuGroup } from './components/block-settings-menu/plugin-block-settings-menu-group'; export { default as PluginPostPublishPanel } from './components/sidebar/plugin-post-publish-panel'; export { default as PluginPostStatusInfo } from './components/sidebar/plugin-post-status-info'; export { default as PluginPrePublishPanel } from './components/sidebar/plugin-pre-publish-panel'; diff --git a/editor/components/block-settings-menu/block-settings-menu-plugins-extension.js b/editor/components/block-settings-menu/block-settings-menu-plugins-extension.js new file mode 100644 index 00000000000000..3357a6592fe0f4 --- /dev/null +++ b/editor/components/block-settings-menu/block-settings-menu-plugins-extension.js @@ -0,0 +1,10 @@ +/** + * WordPress dependencies + */ +import { createSlotFill } from '@wordpress/components'; + +const { Fill: _BlockSettingsMenuPluginsExtension, Slot } = createSlotFill( '_BlockSettingsMenuPluginsExtension' ); + +_BlockSettingsMenuPluginsExtension.Slot = Slot; + +export default _BlockSettingsMenuPluginsExtension; diff --git a/editor/components/block-settings-menu/index.js b/editor/components/block-settings-menu/index.js index 251b6cb00dd402..2c55d133e2b7d3 100644 --- a/editor/components/block-settings-menu/index.js +++ b/editor/components/block-settings-menu/index.js @@ -25,6 +25,7 @@ import SharedBlockDeleteButton from './shared-block-delete-button'; import BlockHTMLConvertButton from './block-html-convert-button'; import BlockUnknownConvertButton from './block-unknown-convert-button'; import _BlockSettingsMenuFirstItem from './block-settings-menu-first-item'; +import _BlockSettingsMenuPluginsExtension from './block-settings-menu-plugins-extension'; import withDeprecatedUniqueId from '../with-deprecated-unique-id'; export class BlockSettingsMenu extends Component { @@ -56,7 +57,6 @@ export class BlockSettingsMenu extends Component { focus, rootClientId, isHidden, - PluginExtension, } = this.props; const { isFocused } = this.state; const blockClientIds = castArray( clientIds ); @@ -128,7 +128,7 @@ export class BlockSettingsMenu extends Component { itemsRole="menuitem" /> ) } - { PluginExtension && ( ) } + <_BlockSettingsMenuPluginsExtension.Slot fillProps={ { clientIds, onClose } } />
{ count === 1 && (