Template Part: Improve popover design.

WordPress · Jun 25, 2020 · 2769fc7 · 2769fc7
1 parent bbb0b5e
commit 2769fc7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 20 deletions.
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -81,6 +81,7 @@ export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { default as __experimentalLibrary } from './inserter/library';
+export { default as __experimentalSearchForm } from './inserter/search-form';
 export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';
 export { default as MultiSelectScrollIntoView } from './multi-select-scroll-into-view';
 export { default as NavigableToolbar } from './navigable-toolbar';

diff --git a/packages/block-editor/src/components/inserter/search-form.js b/packages/block-editor/src/components/inserter/search-form.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -6,15 +11,20 @@ import { __ } from '@wordpress/i18n';
 import { VisuallyHidden } from '@wordpress/components';
 import { Icon, search } from '@wordpress/icons';
 
-function InserterSearchForm( { onChange } ) {
+function InserterSearchForm( { className, onChange } ) {
 	const instanceId = useInstanceId( InserterSearchForm );
 
 	// Disable reason (no-autofocus): The inserter menu is a modal display, not one which
 	// is always visible, and one which already incurs this behavior of autoFocus via
 	// Popover's focusOnMount.
 	/* eslint-disable jsx-a11y/no-autofocus */
 	return (
-		<div className="block-editor-inserter__search">
+		<div
+			className={ classnames(
+				'block-editor-inserter__search',
+				className
+			) }
+		>
 			<VisuallyHidden
 				as="label"
 				htmlFor={ `block-editor-inserter__search-${ instanceId }` }

diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/packages/block-library/src/template-part/edit/placeholder/index.js
@@ -7,12 +7,12 @@ import { useDispatch } from '@wordpress/data';
 import { cleanForSlug } from '@wordpress/url';
 import {
 	Placeholder,
-	TextControl,
 	Dropdown,
 	ButtonGroup,
 	Button,
 } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
+import { __experimentalSearchForm as SearchForm } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -69,12 +69,9 @@ export default function TemplatePartPlaceholder( { setAttributes } ) {
 				) }
 				renderContent={ () => (
 					<>
-						<TextControl
-							label={ __( 'Search' ) }
-							placeholder={ __( 'header' ) }
-							value={ filterValue }
+						<SearchForm
 							onChange={ setFilterValue }
-							className="wp-block-template-part__placeholder-preview-filter-input"
+							className="wp-block-template-part__placeholder-preview-search-form"
 						/>
 						<div className="wp-block-template-part__placeholder-preview-container">
 							<TemplatePartPreviews

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
@@ -2,25 +2,16 @@
 .wp-block-template-part__placeholder-preview-dropdown-content {
 	.components-popover__content {
 		min-width: 320px;
-		padding-top: 0;
+		padding: 0;
 	}
 }
 
-.wp-block-template-part__placeholder-preview-filter-input {
-	background: $white;
+.wp-block-template-part__placeholder-preview-search-form {
 	border-bottom: $border-width solid $light-gray-500;
-	left: 0;
-	margin: 0 ( -$grid-unit-15 ) $grid-unit-15;
-	padding: $grid-unit-15;
-	position: sticky;
-	top: 0;
-	z-index: z-index(".wp-block-template-part__placeholder-preview-filter-input");
 }
 
 .wp-block-template-part__placeholder-preview-container {
 	background: $white;
-	border-radius: $radius-block-ui;
-	border: $border-width solid $light-gray-500;
 	padding-bottom: 16px;
 
 	.wp-block-template-part__placeholder-preview-item {
@@ -49,7 +40,7 @@
 	.wp-block-template-part__placeholder-preview-item-title {
 		padding: $grid-unit-05;
 		font-size: 12px;
-		text-align: center;
+		text-align: left;
 	}
 
 	.wp-block-template-part__placeholder-panel-group-header {