Add/preview options component readme #25104
Conversation
| Renders the previews options of the editor in a dropdown menu. | ||
| ```jsx | ||
| import { PreviewOptions } from '@wordpress/block-editor'; |
There was a problem hiding this comment.
This component is still being exported as __experimental; we should probably document its usage as import { __experimentalPreviewOptions as PreviewOptions } from '@wordpress/block-editor';. There is some precedent for this in other experimental component readmes, though we'll have to then remember to update the docs once it's moved out of experimental status 😅
There was a problem hiding this comment.
So, it's fine to document experimental components I guess.
| deviceType={ deviceType } | ||
| setDeviceType={ setPreviewDeviceType } | ||
| > | ||
| ); |
There was a problem hiding this comment.
Given that this component accepts children, should we have an example documenting that? We have one instance of its use in that format so far.
There was a problem hiding this comment.
Hum 🤔, I guess we can do that. For the past docs PRs I sent, I tried to keep it short and only add examples for the component itself.
There was a problem hiding this comment.
Are you happy to do this? Not a blocker, more of a nice-to-have 🙂
There was a problem hiding this comment.
Sure thing.
I can do something like
import { Icon, MenuGroup } from '@wordpress/components';
import { PostPreviewButton } from '@wordpress/editor';
import { __experimentalPreviewOptions as PreviewOptions } from '@wordpress/block-editor';
const MyPreviewOptions = () => (
<PreviewOptions
isEnabled={ true }
className="edit-post-post-preview-dropdown"
deviceType={ deviceType }
setDeviceType={ setPreviewDeviceType }
>
<MenuGroup>
<div className="edit-post-header-preview__grouping-external">
<PostPreviewButton
className={
'edit-post-header-preview__button-external'
}
role="menuitem"
forceIsAutosaveable={ hasActiveMetaboxes }
forcePreviewLink={ isSaving ? null : undefined }
textContent={
<>
{ __( 'Preview in new tab' ) }
<Icon icon={ external } />
</>
}
/>
</div>
</MenuGroup>
>
);
using the DevicePreview example.
Looks good?
There was a problem hiding this comment.
Sure, that works! One thing: the snippet above is missing the closing </PreviewOptions> tag; should add it in for clarity.
| The CSS classes added to the component. | ||
| - Type: any |
There was a problem hiding this comment.
This should be Type: String.
| The device type in the preview options. It can be either Desktop or Tablet or Mobile among others. | ||
| - Type: `any` |
There was a problem hiding this comment.
This should be Type: String.
| Used to set the device type that will be used to display the preview inside the editor. | ||
| - Type: `any` |
There was a problem hiding this comment.
This should be Type: func.
| ); | ||
| ``` | ||
| ### Props |
There was a problem hiding this comment.
Might be good to also add to each prop whether it is Required; in this case only deviceType and setDeviceType are required props; the rest are optional.
| deviceType={ deviceType } | ||
| setDeviceType={ setPreviewDeviceType } | ||
| > | ||
| ); |
There was a problem hiding this comment.
Are you happy to do this? Not a blocker, more of a nice-to-have 🙂
Wiil see after the next commit if it'll pass. |
JustinyAhin requested review from ajitbohra, chrisvanpatten, gziolo, mkaz, mkevins, nerrad, ntwb, pinarol, Soean, spacedmonkey, talldan and TimothyBJacobs as code owners
JustinyAhin force-pushed the add/preview-options-component-readme branch from a6898a3 to 14a2c59 Compare
Description
Added documentation for the preview options component (see #22891)
How has this been tested?
N/A, documentation only
Types of changes
Documentation
Checklist: