Make the Preview Menu extensible #31984
There are no files selected for viewing
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,61 @@ | ||
| # PluginPreview | ||
|
|
||
| Renders the main content area when that menu item is chosen. | ||
|
|
||
| A 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. | ||
|
|
||
| ## Available Props | ||
|
|
||
| - **children** `WPElement`: Preview content. | ||
| - **icon** `WPIcon`: Menu item icon to be rendered. | ||
| - **name** `string`: A unique name of the custom preview. | ||
| - **onClick** `Function`: Menu item click handler, e.g. for previews that provide no content (`children`). | ||
| - **title** `string`: Menu item title. | ||
|
|
||
| ## Example | ||
|
|
||
| ```js | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { PluginPreview } from '@wordpress/block-editor'; | ||
| import { registerPlugin } from '@wordpress/plugins'; | ||
| import { external } from '@wordpress/icons'; | ||
|
|
||
| const PluginPreviewTest = () => ( | ||
| <> | ||
| <PluginPreview | ||
| name="preview-custom-1" | ||
| title={ __( 'Custom Preview 1' ) } | ||
| > | ||
| <h1> | ||
| { __( 'Custom Preview 1 Content' ) } | ||
| </h1> | ||
| </PluginPreview> | ||
|
|
||
| <PluginPreview | ||
| name="preview-custom-2" | ||
| title={ __( 'Custom Preview 2' ) } | ||
| onClick={ ( event ) => console.log( event ) } | ||
| > | ||
| <h1> | ||
| { __( 'Custom Preview 2 Content' ) } | ||
| </h1> | ||
| </PluginPreview> | ||
|
|
||
| <PluginPreview | ||
| name="custom-action" | ||
| title={ __( 'Custom Action' ) } | ||
| icon={ external } | ||
| onClick={ ( event ) => console.log( event ) } | ||
| /> | ||
| </> | ||
| ); | ||
|
|
||
| registerPlugin( "plugin-preview-test", { | ||
| render: PluginPreviewTest, | ||
| } ); | ||
| ``` |
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
| 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( { | ||
|
There was a problem hiding this comment. As noted in my previous comment, I don't think that this SlotFill should be located inside |
||
| children, | ||
| icon, | ||
| name, | ||
| onClick, | ||
| title, | ||
| ...props | ||
| } ) { | ||
| const previewSlotName = `core/block-editor/plugin-preview/${ name }`; | ||
| const previewSlot = useSlot( previewSlotName ); | ||
|
|
||
| if ( coreDeviceTypes.includes( name ) ) { | ||
|
There was a problem hiding this comment. Does it mean that custom plugins can't use the existing names like |
||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <PluginPreviewMenuFill> | ||
| { ( { deviceType, setDeviceType } ) => ( | ||
| <MenuItem | ||
| onClick={ ( ...args ) => { | ||
| if ( name && previewSlot.fills?.length > 0 ) { | ||
| setDeviceType( name ); | ||
|
There was a problem hiding this comment. In the examples provided with the documentation, I see for example |
||
| } | ||
| 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __experimentalUseSlot as useSlot, Slot } from '@wordpress/components'; | ||
| import { useSelect } from '@wordpress/data'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import VisualEditor from './index'; | ||
| import { store as editPostStore } from '../../store'; | ||
|
|
||
| /** | ||
| * Component that renders a preview slot fill if found or a VisualEditor instead. | ||
| * | ||
| * @param {Object} props Component properties. | ||
| */ | ||
| function VisualEditorOrPluginPreview( props ) { | ||
| const previewId = useSelect( | ||
| ( select ) => | ||
| select( editPostStore ).__experimentalGetPreviewDeviceType(), | ||
| [] | ||
| ); | ||
| const previewSlotName = `core/block-editor/plugin-preview/${ previewId }`; | ||
| const previewSlot = useSlot( previewSlotName ); | ||
|
|
||
| if ( previewSlot.fills?.length > 0 ) { | ||
| return <Slot name={ previewSlotName } fillProps={ props } />; | ||
| } | ||
|
|
||
| return <VisualEditor { ...props } />; | ||
| } | ||
| export default VisualEditorOrPluginPreview; |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you explain why
__experimentalPreviewOptionsandcoreDeviceTypesare proposed to become part of public API? They don't seem to be used outside of the package where they are defined.