Skip to content

Commit

Permalink
Editor: Move the panel visibility state from the edit-post to the edi…
Browse files Browse the repository at this point in the history
…tor package
  • Loading branch information
youknowriad committed Dec 13, 2023
1 parent 1f89b42 commit b9725db
Show file tree
Hide file tree
Showing 25 changed files with 452 additions and 255 deletions.
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

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

0 comments on commit b9725db

Please sign in to comment.