-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Do not expose menu item fill; simplify PluginPreview component
As per the review feedback, there seems to be no need to expose the Preview menu item fill at all. It should be sufficient to expose the title, icon, and click handler. This way we "protect" the Preview menu drop-down from injecting arbitrary, irrelevant elements into it. Thanks to that, the entire custom previews implementation could be simplified. It's now mostly contained within the `PluginPreview` component itself.
- Loading branch information
1 parent
ee1fba2
commit 0301e1d
Showing
11 changed files
with
147 additions
and
211 deletions.
There are no files selected for viewing
59 changes: 0 additions & 59 deletions
59
docs/designers-developers/developers/slotfills/plugin-preview-menu-item.md
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
78 changes: 78 additions & 0 deletions
78
packages/block-editor/src/components/plugin-preview/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| __experimentalUseSlot as useSlot, | ||
| createSlotFill, | ||
| Fill, | ||
| MenuItem, | ||
| } from '@wordpress/components'; | ||
| import { check } from '@wordpress/icons'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { coreDeviceTypes } from '../preview-options'; | ||
|
|
||
| const { | ||
| Fill: PluginPreviewMenuFill, | ||
| Slot: PluginPreviewMenuSlot, | ||
| } = createSlotFill( 'PluginPreviewMenu' ); | ||
|
|
||
| export { PluginPreviewMenuSlot }; | ||
|
|
||
| /** | ||
| * Component used to define a custom preview menu item and optional content. | ||
| * | ||
| * The children of this component will be displayed in the main area of the | ||
| * block editor, instead of the `VisualEditor` component. | ||
| * | ||
| * The `title` and `icon` are used to populate the Preview menu item. | ||
| * | ||
| * @param {Object} props Component properties. | ||
| * @param {WPElement} props.children Preview content. | ||
| * @param {WPIcon} props.icon Menu item icon to be rendered. | ||
| * @param {string} props.name A unique name of the custom preview. | ||
| * @param {Function} props.onClick Menu item click handler, e.g. for previews | ||
| * that provide no content (`children`). | ||
| * @param {string} props.title Menu item title. | ||
| */ | ||
| export default function PluginPreview( { | ||
| children, | ||
| icon, | ||
| name, | ||
| onClick, | ||
| title, | ||
| ...props | ||
| } ) { | ||
| const previewSlotName = `core/block-editor/plugin-preview/${ name }`; | ||
| const previewSlot = useSlot( previewSlotName ); | ||
|
|
||
| if ( coreDeviceTypes.includes( name ) ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <PluginPreviewMenuFill> | ||
| { ( { deviceType, setDeviceType } ) => ( | ||
| <MenuItem | ||
| onClick={ ( ...args ) => { | ||
| if ( name && previewSlot.fills?.length > 0 ) { | ||
| setDeviceType( name ); | ||
| } | ||
| if ( onClick ) { | ||
| onClick( ...args ); | ||
| } | ||
| } } | ||
| icon={ icon || ( deviceType === name && check ) } | ||
| { ...props } | ||
| > | ||
| { title } | ||
| </MenuItem> | ||
| ) } | ||
| </PluginPreviewMenuFill> | ||
| { children && <Fill name={ previewSlotName }>{ children }</Fill> } | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.