updated styles to support dropdown from name panel

WordPress · Sep 4, 2020 · cae1768 · cae1768
1 parent f460306
commit cae1768
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 40 deletions.
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
@@ -9,7 +9,7 @@ import {
 } from '@wordpress/block-editor';
 import { Dropdown, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { update } from '@wordpress/icons';
+import { chevronUp, chevronDown } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -70,29 +70,31 @@ export default function TemplatePartEdit( {
 		return (
 			<BlockWrapper>
 				<BlockControls>
-					<TemplatePartNamePanel
-						postId={ postId }
-						setAttributes={ setAttributes }
-					/>
-					<Dropdown
-						className="wp-block-template-part__preview-dropdown-button"
-						contentClassName="wp-block-template-part__preview-dropdown-content"
-						position="bottom right left"
-						renderToggle={ ( { isOpen, onToggle } ) => (
-							<Button
-								label={ __( 'Choose another' ) }
-								onClick={ onToggle }
-								aria-expanded={ isOpen }
-								icon={ update }
-							/>
-						) }
-						renderContent={ ( { onClose } ) => (
-							<TemplatePartSelection
-								setAttributes={ setAttributes }
-								onClose={ onClose }
-							/>
-						) }
-					/>
+					<div className="wp-block-template-part__block-control-group">
+						<TemplatePartNamePanel
+							postId={ postId }
+							setAttributes={ setAttributes }
+						/>
+						<Dropdown
+							className="wp-block-template-part__preview-dropdown-button"
+							contentClassName="wp-block-template-part__preview-dropdown-content"
+							position="bottom right left"
+							renderToggle={ ( { isOpen, onToggle } ) => (
+								<Button
+									label={ __( 'Choose another' ) }
+									onClick={ onToggle }
+									aria-expanded={ isOpen }
+									icon={ isOpen ? chevronUp : chevronDown }
+								/>
+							) }
+							renderContent={ ( { onClose } ) => (
+								<TemplatePartSelection
+									setAttributes={ setAttributes }
+									onClose={ onClose }
+								/>
+							) }
+						/>
+					</div>
 				</BlockControls>
 				<TemplatePartInnerBlocks
 					postId={ postId }

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
@@ -7,10 +7,6 @@
 	}
 }
 
-.wp-block-template-part__preview-dropdown-button {
-	border-right: $border-width solid $gray-900;
-}
-
 .wp-block-template-part__selection-preview-search-form {
 	border-bottom: $border-width solid $gray-200;
 }
@@ -64,21 +60,28 @@
 	}
 }
 
-.wp-block-template-part__name-panel {
-	background-color: $white;
-	box-shadow: 0 0 0 $border-width $gray-900;
-	outline: 1px solid transparent;
-	padding: $grid-unit-10 $grid-unit-15;
+.wp-block-template-part__block-control-group {
+	display: flex;
+
+	.wp-block-template-part__name-panel {
+		background-color: $white;
+		outline: 1px solid transparent;
+		padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-15;
 
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-		margin-bottom: 0;
+		.components-base-control__field {
+			align-items: center;
+			display: flex;
+			margin-bottom: 0;
+		}
+
+		.components-base-control__label {
+			margin-bottom: 0;
+			margin-right: 8px;
+		}
 	}
 
-	.components-base-control__label {
-		margin-bottom: 0;
-		margin-right: 8px;
+	.wp-block-template-part__preview-dropdown-button {
+		border-right: $border-width solid $gray-900;
 	}
 }