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