Skip to content

Commit

Permalink
Edit Post: Automatically connect a menu item with the pinnable sideba…
Browse files Browse the repository at this point in the history 
…r plugin (#29081)

* Edit Post: Automatically connect a menu item with the pinnable sidebar plugin

* Add documentation for the changes applied

* Fix issues discovered during testing

* Ensure that there is no menu item created for the settings sidebar

* Update e2e tests to ensure that the plugin sidebar more menu item is used

* Prevent changes in the order of pinned items

* Address feedback left in review
Props to @youknowriad.

* Update test snapshots to reflect changes in the menu labels
  • Loading branch information
@gziolo
gziolo authored Feb 23, 2021
1 parent 3a794c4 commit 9534ac6
Show file tree
Hide file tree
Showing 11 changed files with 181 additions and 117 deletions.
54 changes: 25 additions & 29 deletions packages/e2e-tests/plugins/plugins-api/sidebar.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
( function() {
( function () {
var Button = wp.components.Button;
var PanelBody = wp.components.PanelBody;
var PanelRow = wp.components.PanelRow;
Expand All @@ -25,19 +25,16 @@
el(
'label',
{
'htmlFor': 'title-plain-text'
htmlFor: 'title-plain-text',
},
__( 'Title:' ),
__( 'Title:' )
),
el(
PlainText,
{
id: 'title-plain-text',
onChange: props.updateTitle,
placeholder: __( '(no title)' ),
value: props.title
}
)
el( PlainText, {
id: 'title-plain-text',
onChange: props.updateTitle,
placeholder: __( '(no title)' ),
value: props.title,
} )
),
el(
PanelRow,
Expand All @@ -46,7 +43,7 @@
Button,
{
isPrimary: true,
onClick: props.resetTitle
onClick: props.resetTitle,
},
__( 'Reset' )
)
Expand All @@ -55,27 +52,29 @@
}

var SidebarContentsWithDataHandling = compose( [
withSelect( function( select ) {
withSelect( function ( select ) {
return {
title: select( 'core/editor' ).getEditedPostAttribute( 'title' ),
title: select( 'core/editor' ).getEditedPostAttribute(
'title'
),
};
} ),
withDispatch( function( dispatch ) {
withDispatch( function ( dispatch ) {
function editPost( title ) {
dispatch( 'core/editor' ).editPost( {
title: title
title: title,
} );
}

return {
updateTitle: function( title ) {
updateTitle: function ( title ) {
editPost( title );
},
resetTitle: function() {
resetTitle: function () {
editPost( '' );
}
},
};
} )
} ),
] )( SidebarContents );

function MySidebarPlugin() {
Expand All @@ -86,25 +85,22 @@
PluginSidebar,
{
name: 'title-sidebar',
title: __( 'Sidebar title plugin' )
title: __( 'Plugin sidebar title' ),
},
el(
SidebarContentsWithDataHandling,
{}
)
el( SidebarContentsWithDataHandling, {} )
),
el(
PluginSidebarMoreMenuItem,
{
target: 'title-sidebar'
target: 'title-sidebar',
},
__( 'Sidebar title plugin' )
__( 'Plugin sidebar more menu title' )
)
);
}

registerPlugin( 'my-sidebar-plugin', {
icon: 'text',
render: MySidebarPlugin
render: MySidebarPlugin,
} );
} )();
4 changes: 2 additions & 2 deletions packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@

exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Setting sidebar 1`] = `"My Custom Panel"`;

exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;
exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Plugin sidebar title</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;

exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;
exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header interface-complementary-area-header__small\\"><span class=\\"interface-complementary-area-header__small-title\\">(no title)</span><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel__header interface-complementary-area-header\\" tabindex=\\"-1\\"><strong>Plugin sidebar title</strong><button type=\\"button\\" aria-pressed=\\"true\\" aria-expanded=\\"true\\" class=\\"components-button interface-complementary-area__pin-unpin-item is-pressed has-icon\\" aria-label=\\"Unpin from toolbar\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z\\"></path></svg></button><button type=\\"button\\" class=\\"components-button has-icon\\" aria-label=\\"Close plugin\\"><svg width=\\"24\\" height=\\"24\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body sidebar-title-plugin-panel is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-primary\\">Reset</button></div></div></div>"`;
12 changes: 6 additions & 6 deletions packages/e2e-tests/specs/editor/plugins/plugins-api.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,10 @@ describe( 'Using Plugins API', () => {

describe( 'Sidebar', () => {
const SIDEBAR_PINNED_ITEM_BUTTON =
'.interface-pinned-items button[aria-label="Sidebar title plugin"]';
'.interface-pinned-items button[aria-label="Plugin sidebar title"]';
const SIDEBAR_PANEL_SELECTOR = '.sidebar-title-plugin-panel';
it( 'Should open plugins sidebar using More Menu item and render content', async () => {
await clickOnMoreMenuItem( 'Sidebar title plugin' );
await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );

const pluginSidebarContent = await page.$eval(
'.edit-post-sidebar',
Expand Down Expand Up @@ -105,7 +105,7 @@ describe( 'Using Plugins API', () => {
await page.reload();
await page.waitForSelector( '.edit-post-layout' );
expect( await page.$( SIDEBAR_PINNED_ITEM_BUTTON ) ).toBeNull();
await clickOnMoreMenuItem( 'Sidebar title plugin' );
await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );
await page.click( 'button[aria-label="Pin to toolbar"]' );
expect( await page.$( SIDEBAR_PINNED_ITEM_BUTTON ) ).not.toBeNull();
await page.reload();
Expand All @@ -114,12 +114,12 @@ describe( 'Using Plugins API', () => {
} );

it( 'Should close plugins sidebar using More Menu item', async () => {
await clickOnMoreMenuItem( 'Sidebar title plugin' );
await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );

const pluginSidebarOpened = await page.$( '.edit-post-sidebar' );
expect( pluginSidebarOpened ).not.toBeNull();

await clickOnMoreMenuItem( 'Sidebar title plugin' );
await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );

const pluginSidebarClosed = await page.$( '.edit-post-sidebar' );
expect( pluginSidebarClosed ).toBeNull();
Expand All @@ -135,7 +135,7 @@ describe( 'Using Plugins API', () => {
} );

it( 'Should open plugins sidebar using More Menu item and render content', async () => {
await clickOnMoreMenuItem( 'Sidebar title plugin' );
await clickOnMoreMenuItem( 'Plugin sidebar more menu title' );

const pluginSidebarContent = await page.$eval(
'.edit-post-sidebar',
Expand Down
Loading

0 comments on commit 9534ac6

Please sign in to comment.