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: Unify PluginMoreMenuItem API between post and site editors #60778

Merged
merged 6 commits into from
Apr 17, 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.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 1 addition & 54 deletions packages/edit-post/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,60 +49,7 @@ Undocumented declaration.

### PluginMoreMenuItem

Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided. The text within the component appears as the menu item label.

_Usage_

```js
// Using ES5 syntax
var __ = wp.i18n.__;
var PluginMoreMenuItem = wp.editPost.PluginMoreMenuItem;
var moreIcon = React.createElement( 'svg' ); //... svg element.

function onButtonClick() {
alert( 'Button clicked.' );
}

function MyButtonMoreMenuItem() {
return React.createElement(
PluginMoreMenuItem,
{
icon: moreIcon,
onClick: onButtonClick,
},
__( 'My button title' )
);
}
```

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

function onButtonClick() {
alert( 'Button clicked.' );
}

const MyButtonMoreMenuItem = () => (
<PluginMoreMenuItem icon={ more } onClick={ onButtonClick }>
{ __( 'My button title' ) }
</PluginMoreMenuItem>
);
```

_Parameters_

- _props_ `Object`: Component properties.
- _props.href_ `[string]`: When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor.
- _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
- _props.onClick_ `[Function]`: The callback function to be executed when the user clicks the menu item.
- _props.other_ `[...*]`: Any additional props are passed through to the underlying [MenuItem](https://github.com/WordPress/gutenberg/tree/HEAD/packages/components/src/menu-item/README.md) component.

_Returns_

- `Component`: The component to be rendered.
Undocumented declaration.

### PluginPostPublishPanel

Expand Down
2 changes: 1 addition & 1 deletion packages/edit-post/src/components/header/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
}
/>
{ ( isWideViewport || ! showIconLabels ) && (
<PinnedItems.Slot scope="core/edit-post" />
<PinnedItems.Slot scope="core" />
) }
<MoreMenu showIconLabels={ showIconLabels } />
</motion.div>
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-post/src/components/header/more-menu/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,13 @@ const MoreMenu = ( { showIconLabels } ) => {
{ showIconLabels && ! isLargeViewport && (
<PinnedItems.Slot
className={ showIconLabels && 'show-icon-labels' }
scope="core/edit-post"
scope="core"
/>
) }
<WritingMenu />
<ModeSwitcher />
<ActionItem.Slot
name="core/edit-post/plugin-more-menu"
name="core/plugin-more-menu"
label={ __( 'Plugins' ) }
as={ MenuGroup }
fillProps={ { onClick: onClose } }
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default function PluginSidebarMoreMenuItem( props ) {
// Menu item is marked with unstable prop for backward compatibility.
// @see https://github.com/WordPress/gutenberg/issues/14457
__unstableExplicitMenuItem
scope="core/edit-post"
scope="core"
{ ...props }
/>
);
Expand Down
7 changes: 3 additions & 4 deletions packages/edit-post/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -170,9 +170,8 @@ function Layout( { initialPost } ) {
showMetaBoxes:
select( editorStore ).getRenderingMode() === 'post-only',
sidebarIsOpened: !! (
select( interfaceStore ).getActiveComplementaryArea(
editPostStore.name
) || select( editorStore ).isPublishSidebarOpened()
select( interfaceStore ).getActiveComplementaryArea( 'core' ) ||
select( editorStore ).isPublishSidebarOpened()
),
isFullscreenActive:
select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
Expand Down Expand Up @@ -309,7 +308,7 @@ function Layout( { initialPost } ) {
secondarySidebar={ secondarySidebar() }
sidebar={
! isDistractionFree && (
<ComplementaryArea.Slot scope="core/edit-post" />
<ComplementaryArea.Slot scope="core" />
)
}
notices={ <EditorSnackbars /> }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export default function PluginSidebarEditPost( { className, ...props } ) {
panelClassName={ className }
className="edit-post-sidebar"
smallScreenTitle={ postTitle || __( '(no title)' ) }
scope="core/edit-post"
scope="core"
toggleShortcut={ shortcut }
{ ...props }
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -154,9 +154,8 @@ const SettingsSidebar = () => {
keyboardShortcutsStore
).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' );

const sidebar = select( interfaceStore ).getActiveComplementaryArea(
editPostStore.name
);
const sidebar =
select( interfaceStore ).getActiveComplementaryArea( 'core' );
const _isEditorSidebarOpened = [
sidebars.block,
sidebars.document,
Expand Down
7 changes: 4 additions & 3 deletions packages/edit-post/src/hooks/commands/use-common-commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,10 @@ export default function useCommonCommands() {
const { get } = select( preferencesStore );

return {
activeSidebar: select(
interfaceStore
).getActiveComplementaryArea( editPostStore.name ),
activeSidebar:
select( interfaceStore ).getActiveComplementaryArea(
'core'
),
isPublishSidebarEnabled:
select( editorStore ).isPublishSidebarEnabled(),
isFullscreen: get( 'core/edit-post', 'fullscreenMode' ),
Expand Down
3 changes: 2 additions & 1 deletion packages/edit-post/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
import {
PluginBlockSettingsMenuItem,
PluginDocumentSettingPanel,
PluginMoreMenuItem,
privateApis as editorPrivateApis,
store as editorStore,
} from '@wordpress/editor';
Expand Down Expand Up @@ -164,7 +165,7 @@ export function reinitializeEditor() {

export { PluginBlockSettingsMenuItem };
export { PluginDocumentSettingPanel };
export { default as PluginMoreMenuItem } from './components/header/plugin-more-menu-item';
export { PluginMoreMenuItem };
export { default as PluginPostPublishPanel } from './components/sidebar/plugin-post-publish-panel';
export { default as PluginPostStatusInfo } from './components/sidebar/plugin-post-status-info';
export { default as PluginPrePublishPanel } from './components/sidebar/plugin-pre-publish-panel';
Expand Down
14 changes: 4 additions & 10 deletions packages/edit-post/src/store/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { addFilter } from '@wordpress/hooks';
* Internal dependencies
*/
import { getMetaBoxContainer } from '../utils/meta-boxes';
import { store as editPostStore } from '.';
import { unlock } from '../lock-unlock';

const { interfaceStore } = unlock( editorPrivateApis );
Expand All @@ -29,7 +28,7 @@ export const openGeneralSidebar =
( { registry } ) => {
registry
.dispatch( interfaceStore )
.enableComplementaryArea( editPostStore.name, name );
.enableComplementaryArea( 'core', name );
};

/**
Expand All @@ -38,9 +37,7 @@ export const openGeneralSidebar =
export const closeGeneralSidebar =
() =>
( { registry } ) =>
registry
.dispatch( interfaceStore )
.disableComplementaryArea( editPostStore.name );
registry.dispatch( interfaceStore ).disableComplementaryArea( 'core' );

/**
* Returns an action object used in signalling that the user opened a modal.
Expand Down Expand Up @@ -223,14 +220,11 @@ export const togglePinnedPluginItem =
( { registry } ) => {
const isPinned = registry
.select( interfaceStore )
.isItemPinned( 'core/edit-post', pluginName );
.isItemPinned( 'core', pluginName );

registry
.dispatch( interfaceStore )
[ isPinned ? 'unpinItem' : 'pinItem' ](
'core/edit-post',
pluginName
);
[ isPinned ? 'unpinItem' : 'pinItem' ]( 'core', pluginName );
};

/**
Expand Down
17 changes: 4 additions & 13 deletions packages/edit-post/src/store/selectors.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,7 @@ export const getEditorMode = createRegistrySelector(
export const isEditorSidebarOpened = createRegistrySelector(
( select ) => () => {
const activeGeneralSidebar =
select( interfaceStore ).getActiveComplementaryArea(
'core/edit-post'
);
select( interfaceStore ).getActiveComplementaryArea( 'core' );
return [ 'edit-post/document', 'edit-post/block' ].includes(
activeGeneralSidebar
);
Expand All @@ -60,9 +58,7 @@ export const isEditorSidebarOpened = createRegistrySelector(
export const isPluginSidebarOpened = createRegistrySelector(
( select ) => () => {
const activeGeneralSidebar =
select( interfaceStore ).getActiveComplementaryArea(
'core/edit-post'
);
select( interfaceStore ).getActiveComplementaryArea( 'core' );
return (
!! activeGeneralSidebar &&
! [ 'edit-post/document', 'edit-post/block' ].includes(
Expand All @@ -88,9 +84,7 @@ export const isPluginSidebarOpened = createRegistrySelector(
*/
export const getActiveGeneralSidebarName = createRegistrySelector(
( select ) => () => {
return select( interfaceStore ).getActiveComplementaryArea(
'core/edit-post'
);
return select( interfaceStore ).getActiveComplementaryArea( 'core' );
}
);

Expand Down Expand Up @@ -350,10 +344,7 @@ export const isFeatureActive = createRegistrySelector(
*/
export const isPluginItemPinned = createRegistrySelector(
( select ) => ( state, pluginName ) => {
return select( interfaceStore ).isItemPinned(
'core/edit-post',
pluginName
);
return select( interfaceStore ).isItemPinned( 'core', pluginName );
}
);

Expand Down
12 changes: 4 additions & 8 deletions packages/edit-post/src/store/test/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ describe( 'actions', () => {
expect(
registry
.select( interfaceStore )
.getActiveComplementaryArea( 'core/edit-post' )
.getActiveComplementaryArea( 'core' )
).toBe( 'test/sidebar' );

registry
Expand All @@ -54,7 +54,7 @@ describe( 'actions', () => {
expect(
registry
.select( interfaceStore )
.getActiveComplementaryArea( 'core/edit-post' )
.getActiveComplementaryArea( 'core' )
).toBeNull();
} );

Expand All @@ -79,15 +79,11 @@ describe( 'actions', () => {
// Sidebars are pinned by default.
// @See https://github.com/WordPress/gutenberg/pull/21645
expect(
registry
.select( interfaceStore )
.isItemPinned( editPostStore.name, 'rigatoni' )
registry.select( interfaceStore ).isItemPinned( 'core', 'rigatoni' )
).toBe( false );
registry.dispatch( editPostStore ).togglePinnedPluginItem( 'rigatoni' );
expect(
registry
.select( interfaceStore )
.isItemPinned( editPostStore.name, 'rigatoni' )
registry.select( interfaceStore ).isItemPinned( 'core', 'rigatoni' )
).toBe( true );
} );

Expand Down
Loading
Loading