Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor: Move PluginPostPublishPanel and PluginPrePublishPanel to editor package #60344

Merged
merged 2 commits into from
Apr 2, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
76 changes: 4 additions & 72 deletions packages/edit-post/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,43 +106,9 @@ _Returns_

### PluginPostPublishPanel

Renders provided content to the post-publish panel in the publish flow (side panel that opens after a user publishes the post).

_Usage_

```js
// Using ES5 syntax
var __ = wp.i18n.__;
var PluginPostPublishPanel = wp.editPost.PluginPostPublishPanel;

function MyPluginPostPublishPanel() {
return React.createElement(
PluginPostPublishPanel,
{
className: 'my-plugin-post-publish-panel',
title: __( 'My panel title' ),
initialOpen: true,
},
__( 'My panel content' )
);
}
```
> **Deprecated** since 6.6, use `wp.editor.PluginPostPublishPanel` instead.

```jsx
// Using ESNext syntax
import { __ } from '@wordpress/i18n';
import { PluginPostPublishPanel } from '@wordpress/edit-post';

const MyPluginPostPublishPanel = () => (
<PluginPostPublishPanel
className="my-plugin-post-publish-panel"
title={ __( 'My panel title' ) }
initialOpen={ true }
>
{ __( 'My panel content' ) }
</PluginPostPublishPanel>
);
```
Renders provided content to the post-publish panel in the publish flow (side panel that opens after a user publishes the post).

_Parameters_

Expand Down Expand Up @@ -203,43 +169,9 @@ _Returns_

### PluginPrePublishPanel

Renders provided content to the pre-publish side panel in the publish flow (side panel that opens when a user first pushes "Publish" from the main editor).

_Usage_

```js
// Using ES5 syntax
var __ = wp.i18n.__;
var PluginPrePublishPanel = wp.editPost.PluginPrePublishPanel;

function MyPluginPrePublishPanel() {
return React.createElement(
PluginPrePublishPanel,
{
className: 'my-plugin-pre-publish-panel',
title: __( 'My panel title' ),
initialOpen: true,
},
__( 'My panel content' )
);
}
```
> **Deprecated** since 6.6, use `wp.editor.PluginPrePublishPanel` instead.

```jsx
// Using ESNext syntax
import { __ } from '@wordpress/i18n';
import { PluginPrePublishPanel } from '@wordpress/edit-post';

const MyPluginPrePublishPanel = () => (
<PluginPrePublishPanel
className="my-plugin-pre-publish-panel"
title={ __( 'My panel title' ) }
initialOpen={ true }
>
{ __( 'My panel content' ) }
</PluginPrePublishPanel>
);
```
Renders provided content to the pre-publish side panel in the publish flow (side panel that opens when a user first pushes "Publish" from the main editor).

_Parameters_

Expand Down
4 changes: 2 additions & 2 deletions packages/edit-post/src/components/layout/actions-panel.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
import {
EntitiesSavedStates,
PostPublishPanel,
PluginPrePublishPanel,
PluginPostPublishPanel,
store as editorStore,
} from '@wordpress/editor';
import { useSelect, useDispatch } from '@wordpress/data';
Expand All @@ -14,8 +16,6 @@ import { useCallback } from '@wordpress/element';
/**
* Internal dependencies
*/
import PluginPostPublishPanel from '../sidebar/plugin-post-publish-panel';
import PluginPrePublishPanel from '../sidebar/plugin-pre-publish-panel';
import { store as editPostStore } from '../../store';

const { Fill, Slot } = createSlotFill( 'ActionsPanel' );
Expand Down
Original file line number Diff line number Diff line change
@@ -1,83 +1,28 @@
/**
* WordPress dependencies
*/
import { usePluginContext } from '@wordpress/plugins';
import { createSlotFill, PanelBody } from '@wordpress/components';

const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
import deprecated from '@wordpress/deprecated';
import { PluginPostPublishPanel } from '@wordpress/editor';

/**
* Renders provided content to the post-publish panel in the publish flow
* (side panel that opens after a user publishes the post).
*
* @deprecated since 6.6, use `wp.editor.PluginPostPublishPanel` instead.
*
* @param {Object} props Component properties.
* @param {string} [props.className] An optional class name added to the panel.
* @param {string} [props.title] Title displayed at the top of the panel.
* @param {boolean} [props.initialOpen=false] Whether to have the panel initially opened. When no title is provided it is always opened.
* @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
* @param {Element} props.children Children to be rendered
*
* @example
* ```js
* // Using ES5 syntax
* var __ = wp.i18n.__;
* var PluginPostPublishPanel = wp.editPost.PluginPostPublishPanel;
*
* function MyPluginPostPublishPanel() {
* return React.createElement(
* PluginPostPublishPanel,
* {
* className: 'my-plugin-post-publish-panel',
* title: __( 'My panel title' ),
* initialOpen: true,
* },
* __( 'My panel content' )
* );
* }
* ```
*
* @example
* ```jsx
* // Using ESNext syntax
* import { __ } from '@wordpress/i18n';
* import { PluginPostPublishPanel } from '@wordpress/edit-post';
*
* const MyPluginPostPublishPanel = () => (
* <PluginPostPublishPanel
* className="my-plugin-post-publish-panel"
* title={ __( 'My panel title' ) }
* initialOpen={ true }
* >
* { __( 'My panel content' ) }
* </PluginPostPublishPanel>
* );
* ```
*
* @return {Component} The component to be rendered.
*/
const PluginPostPublishPanel = ( {
children,
className,
title,
initialOpen = false,
icon,
} ) => {
const { icon: pluginIcon } = usePluginContext();

return (
<Fill>
<PanelBody
className={ className }
initialOpen={ initialOpen || ! title }
title={ title }
icon={ icon ?? pluginIcon }
>
{ children }
</PanelBody>
</Fill>
);
};

PluginPostPublishPanel.Slot = Slot;

export default PluginPostPublishPanel;
export default function EditPostPluginPostPublishPanel( props ) {
deprecated( 'wp.editPost.PluginPostPublishPanel', {
since: '6.6',
version: '6.8',
alternative: 'wp.editor.PluginPostPublishPanel',
} );
return <PluginPostPublishPanel { ...props } />;
}
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
/**
* WordPress dependencies
*/
import { createSlotFill, PanelBody } from '@wordpress/components';
import { usePluginContext } from '@wordpress/plugins';

const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
import deprecated from '@wordpress/deprecated';
import { PluginPrePublishPanel } from '@wordpress/editor';

/**
* Renders provided content to the pre-publish side panel in the publish flow
* (side panel that opens when a user first pushes "Publish" from the main editor).
*
* @deprecated since 6.6, use `wp.editor.PluginPrePublishPanel` instead.
*
* @param {Object} props Component props.
* @param {string} [props.className] An optional class name added to the panel.
* @param {string} [props.title] Title displayed at the top of the panel.
Expand All @@ -20,67 +20,13 @@ const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
* the sidebar is pinned to toolbar.
* @param {Element} props.children Children to be rendered
*
* @example
* ```js
* // Using ES5 syntax
* var __ = wp.i18n.__;
* var PluginPrePublishPanel = wp.editPost.PluginPrePublishPanel;
*
* function MyPluginPrePublishPanel() {
* return React.createElement(
* PluginPrePublishPanel,
* {
* className: 'my-plugin-pre-publish-panel',
* title: __( 'My panel title' ),
* initialOpen: true,
* },
* __( 'My panel content' )
* );
* }
* ```
*
* @example
* ```jsx
* // Using ESNext syntax
* import { __ } from '@wordpress/i18n';
* import { PluginPrePublishPanel } from '@wordpress/edit-post';
*
* const MyPluginPrePublishPanel = () => (
* <PluginPrePublishPanel
* className="my-plugin-pre-publish-panel"
* title={ __( 'My panel title' ) }
* initialOpen={ true }
* >
* { __( 'My panel content' ) }
* </PluginPrePublishPanel>
* );
* ```
*
* @return {Component} The component to be rendered.
*/
const PluginPrePublishPanel = ( {
children,
className,
title,
initialOpen = false,
icon,
} ) => {
const { icon: pluginIcon } = usePluginContext();

return (
<Fill>
<PanelBody
className={ className }
initialOpen={ initialOpen || ! title }
title={ title }
icon={ icon ?? pluginIcon }
>
{ children }
</PanelBody>
</Fill>
);
};

PluginPrePublishPanel.Slot = Slot;

export default PluginPrePublishPanel;
export default function EditPostPluginPrePublishPanel( props ) {
deprecated( 'wp.editPost.PluginPrePublishPanel', {
since: '6.6',
version: '6.8',
alternative: 'wp.editor.PluginPrePublishPanel',
} );
return <PluginPrePublishPanel { ...props } />;
}
2 changes: 2 additions & 0 deletions packages/editor/src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ export { default as PageAttributesParent } from './page-attributes/parent';
export { default as PageTemplate } from './post-template/classic-theme';
export { default as PluginDocumentSettingPanel } from './plugin-document-setting-panel';
export { default as PluginBlockSettingsMenuItem } from './block-settings-menu/plugin-block-settings-menu-item';
export { default as PluginPostPublishPanel } from './plugin-post-publish-panel';
export { default as PluginPrePublishPanel } from './plugin-pre-publish-panel';
export { default as PostTemplatePanel } from './post-template/panel';
export { default as PostAuthor } from './post-author';
export { default as PostAuthorCheck } from './post-author/check';
Expand Down
64 changes: 64 additions & 0 deletions packages/editor/src/components/plugin-post-publish-panel/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/**
* WordPress dependencies
*/
import { usePluginContext } from '@wordpress/plugins';
import { createSlotFill, PanelBody } from '@wordpress/components';

const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );

/**
* Renders provided content to the post-publish panel in the publish flow
* (side panel that opens after a user publishes the post).
*
* @param {Object} props Component properties.
* @param {string} [props.className] An optional class name added to the panel.
* @param {string} [props.title] Title displayed at the top of the panel.
* @param {boolean} [props.initialOpen=false] Whether to have the panel initially opened. When no title is provided it is always opened.
* @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
* @param {Element} props.children Children to be rendered
*
* @example
* ```jsx
* // Using ESNext syntax
* import { __ } from '@wordpress/i18n';
* import { PluginPostPublishPanel } from '@wordpress/edit-post';
*
* const MyPluginPostPublishPanel = () => (
* <PluginPostPublishPanel
* className="my-plugin-post-publish-panel"
* title={ __( 'My panel title' ) }
* initialOpen={ true }
* >
* { __( 'My panel content' ) }
* </PluginPostPublishPanel>
* );
* ```
*
* @return {Component} The component to be rendered.
*/
const PluginPostPublishPanel = ( {
children,
className,
title,
initialOpen = false,
icon,
} ) => {
const { icon: pluginIcon } = usePluginContext();

return (
<Fill>
<PanelBody
className={ className }
initialOpen={ initialOpen || ! title }
title={ title }
icon={ icon ?? pluginIcon }
>
{ children }
</PanelBody>
</Fill>
);
};

PluginPostPublishPanel.Slot = Slot;

export default PluginPostPublishPanel;