diff --git a/docs/designers-developers/developers/slotfills/plugin-preview-menu-item.md b/docs/designers-developers/developers/slotfills/plugin-preview-menu-item.md index 55ecfc33ec351e..8ff1e899114a8e 100644 --- a/docs/designers-developers/developers/slotfills/plugin-preview-menu-item.md +++ b/docs/designers-developers/developers/slotfills/plugin-preview-menu-item.md @@ -5,9 +5,9 @@ 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`. +Each of these takes 2 props, `previewId`, and `children`. -- `deviceName` - A string that serves as an internal identifier for your +- `previewId` - A string that serves as an internal identifier for your preview. Must match across PluginPreviewMenuItem and PluginPreview. - `children` - What gets rendered in that spot. @@ -20,10 +20,10 @@ import { Fragment } from '@wordpress/element'; const PluginPreviewTest = () => ( - + Custom Preview 1 Menu Text - +

Custom Preview 1 Content

diff --git a/docs/designers-developers/developers/slotfills/plugin-preview.md b/docs/designers-developers/developers/slotfills/plugin-preview.md index 905933eb5677bc..021df443584c15 100644 --- a/docs/designers-developers/developers/slotfills/plugin-preview.md +++ b/docs/designers-developers/developers/slotfills/plugin-preview.md @@ -5,9 +5,9 @@ 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`. +Each of these takes 2 props, `previewId`, and `children`. -- `deviceName` - A string that serves as an internal identifier for your +- `previewId` - A string that serves as an internal identifier for your preview. Must match across PluginPreviewMenuItem and PluginPreview. - `children` - What gets rendered in that spot. @@ -20,10 +20,10 @@ import { Fragment } from '@wordpress/element'; const PluginPreviewTest = () => ( - + Custom Preview 1 Menu Text - +

Custom Preview 1 Content

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 3c4be89470f9a1..62dc725c2702ef 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -240,15 +240,7 @@ Undocumented declaration. # **coreDeviceTypes** -This is an array of strings. The strings returned represent deviceType values -that belong to the core system. When the deviceType, returned by -`__experimentalGetPreviewDeviceType()`, is one of these values, the built in -VisualEditor is responsible for rendering a preview of that type. - -When the deviceType is something other than one of the coreDeviceTypes, we are -rendering a custom deviceType registered by the and - components, and defer to a filled by the plugin to -draw the preview. +Undocumented declaration. # **createCustomColorsHOC** @@ -461,26 +453,26 @@ _Related_ # **PluginPreview** -React Component; Used by a plugin to define the contents of a "custom +Component used by a plugin to define the contents of a "custom preview". The children of this component will be displayed in the main editor screen when this "custom preview" is chosen from the preview menu. _Parameters_ - _props_ `Object`: Component properties. -- _props.deviceName_ `string`: The internal name of this custom preview. Must - match the _deviceName_ given to `PluginPreviewMenuItem`. +- _props.previewId_ `string`: The internal name of this custom preview. Must match the _previewId_ given to `PluginPreviewMenuItem`. - _props.children_ `WPElement`: Children to be rendered. # **PluginPreviewMenuItem** -React Component; Used by a plugin to define the contents of a menu item that +Component used by a plugin to define the contents of a menu item that selects a "custom preview". The children of this component will be displayed inside the preview menu. Typically a single string is good enough. +_Parameters_ + - _props_ `Object`: Component properties. -- _props.deviceName_ `string`: The internal name of this custom preview. Must - match the _deviceName_ given to `PluginPreview`. +- _props.previewId_ `string`: The internal name of this custom preview. Must match the _previewId_ given to `PluginPreview`. - _props.children_ `WPElement`: Children to be rendered. # **PreserveScrollInReorder** diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js index 6872c84ad7e8a7..ab60cdcb6fb459 100644 --- a/packages/block-editor/src/components/preview-options/index.js +++ b/packages/block-editor/src/components/preview-options/index.js @@ -11,6 +11,18 @@ import { DropdownMenu, MenuGroup, MenuItem, Slot } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { check } from '@wordpress/icons'; +/* + * coreDeviceTypes: An array of strings. The strings returned represent + * deviceType values that belong to the core system. When the deviceType, + * returned by `__experimentalGetPreviewDeviceType()`, is one of these values, + * the built in VisualEditor is responsible for rendering a preview of that + * type. + + * When the deviceType is something other than one of the coreDeviceTypes, we are + * rendering a custom deviceType registered by the and + * components, and defer to a filled by the plugin to + * draw the preview. + */ export const coreDeviceTypes = [ 'Desktop', 'Tablet', 'Mobile' ]; export default function PreviewOptions( { diff --git a/packages/block-editor/src/components/preview-options/plugin-preview-menu-item/index.js b/packages/block-editor/src/components/preview-options/plugin-preview-menu-item/index.js index b0cbd71d6c6c9d..538cb217d47b9f 100644 --- a/packages/block-editor/src/components/preview-options/plugin-preview-menu-item/index.js +++ b/packages/block-editor/src/components/preview-options/plugin-preview-menu-item/index.js @@ -10,9 +10,18 @@ import { check } from '@wordpress/icons'; */ import { coreDeviceTypes } from '../index'; +/** + * Component used by a plugin to define the contents of a menu item that + * selects a "custom preview". The children of this component will be displayed + * inside the preview menu. Typically a single string is good enough. + * + * @param {Object} props Component properties. + * @param {string} props.previewId The internal name of this custom preview. Must match the _previewId_ given to `PluginPreview`. + * @param {WPElement} props.children Children to be rendered. + */ export default function PluginPreviewMenuItem( { children, - deviceName, + previewId, ...props } ) { const { @@ -28,15 +37,15 @@ export default function PluginPreviewMenuItem( { [] ); - if ( coreDeviceTypes.includes( deviceName ) ) { + if ( coreDeviceTypes.includes( previewId ) ) { return null; } return ( setPreviewDeviceType( deviceName ) } - icon={ deviceType === deviceName && check } + onClick={ () => setPreviewDeviceType( previewId ) } + icon={ deviceType === previewId && check } > { children } diff --git a/packages/block-editor/src/components/preview-options/plugin-preview/index.js b/packages/block-editor/src/components/preview-options/plugin-preview/index.js index 1f05ecbabd337f..02025afd19ee08 100644 --- a/packages/block-editor/src/components/preview-options/plugin-preview/index.js +++ b/packages/block-editor/src/components/preview-options/plugin-preview/index.js @@ -3,10 +3,19 @@ */ import { Fill } from '@wordpress/components'; -export default function PluginPreview( { children, deviceName, ...props } ) { +/** + * Component used by a plugin to define the contents of a "custom + * preview". The children of this component will be displayed in the main editor + * screen when this "custom preview" is chosen from the preview menu. + * + * @param {Object} props Component properties. + * @param {string} props.previewId The internal name of this custom preview. Must match the _previewId_ given to `PluginPreviewMenuItem`. + * @param {WPElement} props.children Children to be rendered. + */ +export default function PluginPreview( { children, previewId, ...props } ) { return ( { children }