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 the panel visibility state from the edit-post to the editor package #57012

Merged
merged 2 commits into from
Dec 14, 2023
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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions docs/reference-guides/data/data-core-edit-post.md
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,8 @@ Returns true if the template editing mode is enabled.

### isEditorPanelEnabled

> **Deprecated**

Returns true if the given panel is enabled, or false otherwise. Panels are enabled by default.

_Parameters_
Expand All @@ -157,6 +159,8 @@ _Returns_

### isEditorPanelOpened

> **Deprecated**

Returns true if the given panel is open, or false otherwise. Panels are closed by default.

_Parameters_
Expand All @@ -170,6 +174,8 @@ _Returns_

### isEditorPanelRemoved

> **Deprecated**

Returns true if the given panel was programmatically removed, or false otherwise. All panels are not removed by default.

_Parameters_
Expand Down Expand Up @@ -408,6 +414,8 @@ _Returns_

### removeEditorPanel

> **Deprecated**

Returns an action object used to remove a panel from the editor.

_Parameters_
Expand Down Expand Up @@ -484,6 +492,8 @@ Action that toggles Distraction free mode. Distraction free mode expects there a

### toggleEditorPanelEnabled

> **Deprecated**

Returns an action object used to enable or disable a panel in the editor.

_Parameters_
Expand All @@ -496,6 +506,8 @@ _Returns_

### toggleEditorPanelOpened

> **Deprecated**

Opens a closed panel and closes an open panel.

_Parameters_
Expand Down
71 changes: 71 additions & 0 deletions docs/reference-guides/data/data-core-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -879,6 +879,45 @@ _Returns_

- `boolean`: Whether the post can be saved.

### isEditorPanelEnabled
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would be great if it explained a bit more what this editor panel is.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's just the panels that shows up in the sidebar of the editor: things like "post categories", "post featured image"...


Returns true if the given panel is enabled, or false otherwise. Panels are enabled by default.

_Parameters_

- _state_ `Object`: Global application state.
- _panelName_ `string`: A string that identifies the panel.

_Returns_

- `boolean`: Whether or not the panel is enabled.

### isEditorPanelOpened

Returns true if the given panel is open, or false otherwise. Panels are closed by default.

_Parameters_

- _state_ `Object`: Global application state.
- _panelName_ `string`: A string that identifies the panel.

_Returns_

- `boolean`: Whether or not the panel is open.

### isEditorPanelRemoved

Returns true if the given panel was programmatically removed, or false otherwise. All panels are not removed by default.

_Parameters_

- _state_ `Object`: Global application state.
- _panelName_ `string`: A string that identifies the panel.

_Returns_

- `boolean`: Whether or not the panel is removed.

### isFirstMultiSelectedBlock

_Related_
Expand Down Expand Up @@ -1226,6 +1265,18 @@ _Related_

- removeBlocks in core/block-editor store.

### removeEditorPanel

Returns an action object used to remove a panel from the editor.

_Parameters_

- _panelName_ `string`: A string that identifies the panel to remove.

_Returns_

- `Object`: Action object.

### replaceBlock

_Related_
Expand Down Expand Up @@ -1379,6 +1430,26 @@ _Related_

- toggleBlockMode in core/block-editor store.

### toggleEditorPanelEnabled

Returns an action object used to enable or disable a panel in the editor.

_Parameters_

- _panelName_ `string`: A string that identifies the panel to enable or disable.

_Returns_

- `Object`: Action object.

### toggleEditorPanelOpened

Opens a closed panel and closes an open panel.

_Parameters_

- _panelName_ `string`: A string that identifies the panel to open or close.

### toggleSelection

_Related_
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,10 @@ To programmatically toggle panels, use the following:

```js
import { useDispatch } from '@wordpress/data';
import { store as editPostStore } from '@wordpress/edit-post';
import { store as editorStore } from '@wordpress/editor';

const Example = () => {
const { toggleEditorPanelOpened } = useDispatch( editPostStore );
const { toggleEditorPanelOpened } = useDispatch( editorStore );
return (
<Button
variant="primary"
Expand All @@ -76,10 +76,10 @@ It is also possible to remove panels from the admin using the `removeEditorPanel

```js
import { useDispatch } from '@wordpress/data';
import { store as editPostStore } from '@wordpress/edit-post';
import { store as editorStore } from '@wordpress/editor';

const Example = () => {
const { removeEditorPanel } = useDispatch( editPostStore );
const { removeEditorPanel } = useDispatch( editorStore );
return (
<Button
variant="primary"
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/editor/various/sidebar.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ describe( 'Sidebar', () => {
expect( await findSidebarPanelWithTitle( 'Summary' ) ).toBeDefined();

await page.evaluate( () => {
const { removeEditorPanel } = wp.data.dispatch( 'core/edit-post' );
const { removeEditorPanel } = wp.data.dispatch( 'core/editor' );

removeEditorPanel( 'taxonomy-panel-category' );
removeEditorPanel( 'taxonomy-panel-post_tag' );
Expand Down
4 changes: 4 additions & 0 deletions packages/edit-post/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Deprecations

- Move the panels visibility actions and selectors to the editor package deprecating `toggleEditorPanelEnabled`, `toggleEditorPanelOpened`, `removeEditorPanel`, `isEditorPanelRemoved`, `isEditorPanelOpened` and `isEditorPanelEnabled`.

## 7.25.0 (2023-12-13)

## 7.24.0 (2023-11-29)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,7 @@
*/
import { Component } from '@wordpress/element';
import { withSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import { store as editPostStore } from '../../store';
import { store as editorStore } from '@wordpress/editor';

class MetaBoxVisibility extends Component {
componentDidMount() {
Expand Down Expand Up @@ -41,7 +37,5 @@ class MetaBoxVisibility extends Component {
}

export default withSelect( ( select, { id } ) => ( {
isVisible: select( editPostStore ).isEditorPanelEnabled(
`meta-box-${ id }`
),
isVisible: select( editorStore ).isEditorPanelEnabled( `meta-box-${ id }` ),
} ) )( MetaBoxVisibility );
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,12 @@
import { compose, ifCondition } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/interface';

/**
* Internal dependencies
*/
import { store as editPostStore } from '../../../store';
import { store as editorStore } from '@wordpress/editor';

export default compose(
withSelect( ( select, { panelName } ) => {
const { isEditorPanelEnabled, isEditorPanelRemoved } =
select( editPostStore );
select( editorStore );
return {
isRemoved: isEditorPanelRemoved( panelName ),
isChecked: isEditorPanelEnabled( panelName ),
Expand All @@ -22,6 +18,6 @@ export default compose(
ifCondition( ( { isRemoved } ) => ! isRemoved ),
withDispatch( ( dispatch, { panelName } ) => ( {
onChange: () =>
dispatch( editPostStore ).toggleEditorPanelEnabled( panelName ),
dispatch( editorStore ).toggleEditorPanelEnabled( panelName ),
} ) )
)( BaseOption );
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,10 @@ import {
PostComments,
PostPingbacks,
PostTypeSupportCheck,
store as editorStore,
} from '@wordpress/editor';
import { useDispatch, useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import { store as editPostStore } from '../../../store';

/**
* Module Constants
*/
Expand All @@ -23,14 +19,14 @@ const PANEL_NAME = 'discussion-panel';
function DiscussionPanel() {
const { isEnabled, isOpened } = useSelect( ( select ) => {
const { isEditorPanelEnabled, isEditorPanelOpened } =
select( editPostStore );
select( editorStore );
return {
isEnabled: isEditorPanelEnabled( PANEL_NAME ),
isOpened: isEditorPanelOpened( PANEL_NAME ),
};
}, [] );

const { toggleEditorPanelOpened } = useDispatch( editPostStore );
const { toggleEditorPanelOpened } = useDispatch( editorStore );

if ( ! isEnabled ) {
return null;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,6 @@ import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';

/**
* Internal dependencies
*/
import { store as editPostStore } from '../../../store';

/**
* Module Constants
*/
Expand All @@ -43,10 +38,12 @@ function FeaturedImage( { isEnabled, isOpened, postType, onTogglePanel } ) {
}

const applyWithSelect = withSelect( ( select ) => {
const { getEditedPostAttribute } = select( editorStore );
const {
getEditedPostAttribute,
isEditorPanelEnabled,
isEditorPanelOpened,
} = select( editorStore );
const { getPostType } = select( coreStore );
const { isEditorPanelEnabled, isEditorPanelOpened } =
select( editPostStore );

return {
postType: getPostType( getEditedPostAttribute( 'type' ) ),
Expand All @@ -56,7 +53,7 @@ const applyWithSelect = withSelect( ( select ) => {
} );

const applyWithDispatch = withDispatch( ( dispatch ) => {
const { toggleEditorPanelOpened } = dispatch( editPostStore );
const { toggleEditorPanelOpened } = dispatch( editorStore );

return {
onTogglePanel: ( ...args ) =>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,18 @@ import {
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';

/**
* Internal dependencies
*/
import { store as editPostStore } from '../../../store';

/**
* Module Constants
*/
const PANEL_NAME = 'page-attributes';

export function PageAttributes() {
const { isEnabled, isOpened, postType } = useSelect( ( select ) => {
const { getEditedPostAttribute } = select( editorStore );
const { isEditorPanelEnabled, isEditorPanelOpened } =
select( editPostStore );
const {
getEditedPostAttribute,
isEditorPanelEnabled,
isEditorPanelOpened,
} = select( editorStore );
const { getPostType } = select( coreStore );
return {
isEnabled: isEditorPanelEnabled( PANEL_NAME ),
Expand All @@ -35,7 +32,7 @@ export function PageAttributes() {
};
}, [] );

const { toggleEditorPanelOpened } = useDispatch( editPostStore );
const { toggleEditorPanelOpened } = useDispatch( editorStore );

if ( ! isEnabled || ! postType ) {
return null;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ import { createSlotFill, PanelBody } from '@wordpress/components';
import { usePluginContext } from '@wordpress/plugins';
import { useDispatch, useSelect } from '@wordpress/data';
import warning from '@wordpress/warning';
import { store as editorStore } from '@wordpress/editor';

/**
* Internal dependencies
*/
import { EnablePluginDocumentSettingPanelOption } from '../../preferences-modal/options';
import { store as editPostStore } from '../../../store';

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

Expand Down Expand Up @@ -78,7 +78,7 @@ const PluginDocumentSettingPanel = ( {
const { opened, isEnabled } = useSelect(
( select ) => {
const { isEditorPanelOpened, isEditorPanelEnabled } =
select( editPostStore );
select( editorStore );

return {
opened: isEditorPanelOpened( panelName ),
Expand All @@ -87,7 +87,7 @@ const PluginDocumentSettingPanel = ( {
},
[ panelName ]
);
const { toggleEditorPanelOpened } = useDispatch( editPostStore );
const { toggleEditorPanelOpened } = useDispatch( editorStore );

if ( undefined === name ) {
warning( 'PluginDocumentSettingPanel requires a name property.' );
Expand Down
Loading
Loading