Inserter: Try making the inline tokens less important (#8587)

* Inserter: Try making the inline tokens less important * Move the inline elements after the most used blocks * Fix inline tokens test
WordPress · Aug 6, 2018 · c59ca24 · c59ca24
1 parent 576872f
commit c59ca24
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 9 deletions.
diff --git 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' ) }
  >
- <InserterResultsPortal.Slot fillProps={ { filterValue } } />
 
  <ChildBlocks
  rootClientId={ rootClientId }
@@ -231,6 +230,9 @@ export class InserterMenu extends Component {
  <BlockTypesList items={ suggestedItems } onSelect={ onSelect } onHover={ this.onHover } />
  </PanelBody>
  }
+
+ <InserterResultsPortal.Slot fillProps={ { filterValue } } />
+
  { map( getCategories(), ( category ) => {
  const categoryItems = itemsPerCategory[ category.slug ];
  if ( ! categoryItems || ! categoryItems.length ) {
@@ -248,6 +250,7 @@ export class InserterMenu extends Component {
  </PanelBody>
  );
  } ) }
+
  { !! reusableItems.length && (
  <PanelBody
  title={ __( 'Reusable' ) }

diff --git a/packages/editor/src/components/inserter/results-portal.js b/packages/editor/src/components/inserter/results-portal.js
@@ -11,7 +11,7 @@ import { searchItems } from './menu';
 
 const { Fill, Slot } = createSlotFill( 'InserterResultsPortal' );
 
-const InserterResultsPortal = ( { items, title, onSelect, onHover } ) => {
+const InserterResultsPortal = ( { items, title, onSelect, onHover, ...props } ) => {
  return (
  <Fill>
  { ( { filterValue } ) => {
@@ -24,6 +24,8 @@ const InserterResultsPortal = ( { items, title, onSelect, onHover } ) => {
  return (
  <PanelBody
  title={ title }
+ { ...props }
+ className="editor-inserter__results-portal"
  >
  <BlockTypesList items={ filteredItems } onSelect={ onSelect } onHover={ onHover } />
  </PanelBody>

diff --git 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
@@ -69,6 +69,7 @@ class TokenUI extends Component {
  items={ this.props.items }
  onSelect={ this.onSelect }
  onHover={ this.onHover }
+ initialOpen={ false }
  />
  { hovered &&
  <div

diff --git 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
@@ -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 }"]` );
 }