-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Allow Preview menu to be extendible by plugins: WIP
- Loading branch information
Showing
10 changed files
with
227 additions
and
15 deletions.
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
37 changes: 37 additions & 0 deletions
37
docs/designers-developers/developers/slotfills/plugin-preview-menu-item.md
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,37 @@ | ||
| # PluginPreviewMenuItem | ||
|
|
||
| This is designed to be used alongside the PluginPreview. | ||
|
|
||
| - PluginPreviewMenuItem: Adds a menu item to the "Preview" menu. | ||
| - PluginPreview: Renders the main content area when that menu item is chosen. | ||
|
|
||
| Each of these takes 2 props, `deviceName`, and `children`. | ||
|
|
||
| - `deviceName` - A string that serves as an internal identifier for your | ||
| preview. Must match across PluginPreviewMenuItem and PluginPreview. | ||
| - `children` - What gets rendered in that spot. | ||
|
|
||
| ## Example | ||
|
|
||
| ```js | ||
| import { registerPlugin } from '@wordpress/plugins'; | ||
| import { PluginPreview, PluginPreviewMenuItem } from '@wordpress/block-editor'; | ||
| import { Fragment } from '@wordpress/element'; | ||
|
|
||
| const PluginPreviewTest = () => ( | ||
| <Fragment> | ||
| <PluginPreviewMenuItem deviceName="preview-custom-1"> | ||
| Custom Preview 1 Menu Text | ||
| </PluginPreviewMenuItem> | ||
| <PluginPreview deviceName="preview-custom-1"> | ||
| <div> | ||
| <h4>Custom Preview 1 Content</h4> | ||
| </div> | ||
| </PluginPreview> | ||
| </Fragment> | ||
| ); | ||
|
|
||
| registerPlugin( 'plugin-preview-test', { | ||
| render: PluginPreviewTest, | ||
| } ); | ||
| ``` |
37 changes: 37 additions & 0 deletions
37
docs/designers-developers/developers/slotfills/plugin-preview.md
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,37 @@ | ||
| # PluginPreview | ||
|
|
||
| This is designed to be used alongside the PluginPreviewMenuItem. | ||
|
|
||
| - PluginPreviewMenuItem: Adds a menu item to the "Preview" menu. | ||
| - PluginPreview: Renders the main content area when that menu item is chosen. | ||
|
|
||
| Each of these takes 2 props, `deviceName`, and `children`. | ||
|
|
||
| - `deviceName` - A string that serves as an internal identifier for your | ||
| preview. Must match across PluginPreviewMenuItem and PluginPreview. | ||
| - `children` - What gets rendered in that spot. | ||
|
|
||
| ## Example | ||
|
|
||
| ```js | ||
| import { registerPlugin } from '@wordpress/plugins'; | ||
| import { PluginPreview, PluginPreviewMenuItem } from '@wordpress/block-editor'; | ||
| import { Fragment } from '@wordpress/element'; | ||
|
|
||
| const PluginPreviewTest = () => ( | ||
| <Fragment> | ||
| <PluginPreviewMenuItem deviceName="preview-custom-1"> | ||
| Custom Preview 1 Menu Text | ||
| </PluginPreviewMenuItem> | ||
| <PluginPreview deviceName="preview-custom-1"> | ||
| <div> | ||
| <h4>Custom Preview 1 Content</h4> | ||
| </div> | ||
| </PluginPreview> | ||
| </Fragment> | ||
| ); | ||
|
|
||
| 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
45 changes: 45 additions & 0 deletions
45
packages/block-editor/src/components/preview-options/plugin-preview-menu-item/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,45 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Fill, MenuItem } from '@wordpress/components'; | ||
| import { useSelect, useDispatch } from '@wordpress/data'; | ||
| import { check } from '@wordpress/icons'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { coreDeviceTypes } from '../index'; | ||
|
|
||
| export default function PluginPreviewMenuItem( { | ||
| children, | ||
| deviceName, | ||
| ...props | ||
| } ) { | ||
| const { | ||
| __experimentalSetPreviewDeviceType: setPreviewDeviceType, | ||
| } = useDispatch( 'core/edit-post' ); | ||
|
|
||
| const { deviceType } = useSelect( | ||
| ( select ) => ( { | ||
| deviceType: select( | ||
| 'core/edit-post' | ||
| ).__experimentalGetPreviewDeviceType(), | ||
| } ), | ||
| [] | ||
| ); | ||
|
|
||
| if ( coreDeviceTypes.includes( deviceName ) ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Fill name="core/block-editor/plugin-preview-menu" { ...props }> | ||
| <MenuItem | ||
| onClick={ () => setPreviewDeviceType( deviceName ) } | ||
| icon={ deviceType === deviceName && check } | ||
| > | ||
| { children } | ||
| </MenuItem> | ||
| </Fill> | ||
| ); | ||
| } |
15 changes: 15 additions & 0 deletions
15
packages/block-editor/src/components/preview-options/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,15 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Fill } from '@wordpress/components'; | ||
|
|
||
| export default function PluginPreview( { children, deviceName, ...props } ) { | ||
| return ( | ||
| <Fill | ||
| name={ 'core/block-editor/plugin-preview/' + deviceName } | ||
| { ...props } | ||
| > | ||
| { 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
25 changes: 25 additions & 0 deletions
25
packages/edit-post/src/components/visual-editor/visual-editor-or-plugin-preview.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,25 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { Slot } from '@wordpress/components'; | ||
| import { coreDeviceTypes } from '@wordpress/block-editor'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import VisualEditor from './index'; | ||
|
|
||
| function VisualEditorOrPluginPreview() { | ||
| const deviceType = useSelect( ( select ) => { | ||
| return select( 'core/edit-post' ).__experimentalGetPreviewDeviceType(); | ||
| }, [] ); | ||
|
|
||
| if ( ! coreDeviceTypes.includes( deviceType ) ) { | ||
| return ( | ||
| <Slot name={ 'core/block-editor/plugin-preview/' + deviceType } /> | ||
| ); | ||
| } | ||
| return <VisualEditor />; | ||
| } | ||
| export default VisualEditorOrPluginPreview; |