From 00394f22687384353f07220e4c8f2118c08f2404 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 6 Aug 2018 11:39:31 +0100 Subject: [PATCH 1/3] Inserter: Try making the inline tokens less important --- packages/editor/src/components/inserter/menu.js | 4 +++- .../editor/src/components/inserter/results-portal.js | 4 +++- packages/editor/src/components/inserter/style.scss | 9 ++++----- .../editor/src/components/rich-text/tokens/ui/index.js | 1 + 4 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/editor/src/components/inserter/menu.js b/packages/editor/src/components/inserter/menu.js index 9ac2018e15ec2f..5d9bb2a826fda2 100644 --- a/packages/editor/src/components/inserter/menu.js +++ b/packages/editor/src/components/inserter/menu.js @@ -212,7 +212,6 @@ export class InserterMenu extends Component { role="region" aria-label={ __( 'Available block types' ) } > - ); } ) } + + + { !! reusableItems.length && ( { +const InserterResultsPortal = ( { items, title, onSelect, onHover, ...props } ) => { return ( { ( { filterValue } ) => { @@ -24,6 +24,8 @@ const InserterResultsPortal = ( { items, title, onSelect, onHover } ) => { return ( diff --git a/packages/editor/src/components/inserter/style.scss b/packages/editor/src/components/inserter/style.scss index a5e638c08a32bb..ad0fe6c29bc754 100644 --- a/packages/editor/src/components/inserter/style.scss +++ b/packages/editor/src/components/inserter/style.scss @@ -56,6 +56,10 @@ $block-inserter-search-height: 38px; } } +.editor-inserter__results-portal { + margin-top: -1px; +} + .editor-inserter__menu.is-bottom:after { border-bottom-color: $white; } @@ -101,11 +105,6 @@ $block-inserter-search-height: 38px; [role="presentation"] + .components-panel__body { border-top: none; } - - // Don't show the bottom border on the last panel, let the library itself show the border. - .components-panel__body:last-child { - border-bottom: none; - } } .editor-inserter__popover .editor-block-types-list { diff --git a/packages/editor/src/components/rich-text/tokens/ui/index.js b/packages/editor/src/components/rich-text/tokens/ui/index.js index db14ce01664fa4..9671551e2541b7 100644 --- a/packages/editor/src/components/rich-text/tokens/ui/index.js +++ b/packages/editor/src/components/rich-text/tokens/ui/index.js @@ -69,6 +69,7 @@ class TokenUI extends Component { items={ this.props.items } onSelect={ this.onSelect } onHover={ this.onHover } + initialOpen={ false } /> { hovered &&
Date: Mon, 6 Aug 2018 12:12:12 +0100 Subject: [PATCH 2/3] Move the inline elements after the most used blocks --- packages/editor/src/components/inserter/menu.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/inserter/menu.js b/packages/editor/src/components/inserter/menu.js index 5d9bb2a826fda2..4ed3a2d0f91406 100644 --- a/packages/editor/src/components/inserter/menu.js +++ b/packages/editor/src/components/inserter/menu.js @@ -230,6 +230,9 @@ export class InserterMenu extends Component { } + + + { map( getCategories(), ( category ) => { const categoryItems = itemsPerCategory[ category.slug ]; if ( ! categoryItems || ! categoryItems.length ) { @@ -248,8 +251,6 @@ export class InserterMenu extends Component { ); } ) } - - { !! reusableItems.length && ( Date: Mon, 6 Aug 2018 12:26:12 +0100 Subject: [PATCH 3/3] Fix inline tokens test --- test/e2e/specs/adding-inline-tokens.test.js | 2 +- test/e2e/support/utils.js | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/test/e2e/specs/adding-inline-tokens.test.js b/test/e2e/specs/adding-inline-tokens.test.js index 3d0457ef80d633..d3587aae2fd652 100644 --- a/test/e2e/specs/adding-inline-tokens.test.js +++ b/test/e2e/specs/adding-inline-tokens.test.js @@ -23,7 +23,7 @@ describe( 'adding inline tokens', () => { await page.click( '.editor-default-block-appender' ); await page.keyboard.type( 'a ' ); - await insertBlock( 'Inline Image' ); + await insertBlock( 'Inline Image', 'Inline Elements' ); // Wait for media modal to appear and upload image. await page.waitForSelector( '.media-modal input[type=file]' ); diff --git a/test/e2e/support/utils.js b/test/e2e/support/utils.js index c82935332718e5..c417d3e5cb2ca8 100644 --- a/test/e2e/support/utils.js +++ b/test/e2e/support/utils.js @@ -197,9 +197,14 @@ export async function searchForBlock( searchTerm ) { * result that appears. * * @param {string} searchTerm The text to search the inserter for. + * @param {string} panelName The inserter panel to open (if it's closed by default). */ -export async function insertBlock( searchTerm ) { +export async function insertBlock( searchTerm, panelName = null ) { await searchForBlock( searchTerm ); + if ( panelName ) { + const panelButton = ( await page.$x( `//button[contains(text(), '${ panelName }')]` ) )[ 0 ]; + await panelButton.click(); + } await page.click( `button[aria-label="${ searchTerm }"]` ); }