Border panel: Update panel layout (#35938)

* Restore single-column styling for appropriate controls * Remove clear button from Color picker in ToolsPanel
WordPress · Nov 22, 2021 · a375152 · a375152
1 parent 414b960
commit a375152
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 0 deletions.
diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js
@@ -92,6 +92,7 @@ export function BorderColorEdit( props ) {
 			disableCustomColors={ disableCustomColors }
 			disableCustomGradients={ disableCustomGradients }
 			onColorChange={ onChangeColor }
+			clearable={ false }
 		/>
 	);
 }

diff --git a/packages/block-editor/src/hooks/border.scss b/packages/block-editor/src/hooks/border.scss
@@ -0,0 +1,5 @@
+.border-block-support-panel {
+	.single-column {
+		grid-column: span 1;
+	}
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
@@ -55,6 +55,7 @@
 @import "./components/warning/style.scss";
 @import "./hooks/anchor.scss";
 @import "./hooks/layout.scss";
+@import "./hooks/border.scss";
 @import "./hooks/typography.scss";
 
 @import "./components/block-toolbar/style.scss";

diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -176,6 +176,7 @@ export default function BorderPanel( { name } ) {
 						disableCustomColors={ disableCustomColors }
 						disableCustomGradients={ disableCustomGradients }
 						onColorChange={ handleOnChange( setBorderColor ) }
+						clearable={ false }
 					/>
 				</ToolsPanelItem>
 			) }

diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
@@ -39,6 +39,10 @@
 	border: 0;
 }
 
+.edit-site-global-styles-sidebar .components-tools-panel-item.single-column {
+	grid-column: span 1;
+}
+
 .edit-site-global-styles-sidebar__blocks-group {
 	padding-top: $grid-unit-30;
 	border-top: $border-width solid $gray-200;