CustomGradientPicker / Cover: Update UI (#20099)

* CustomGradientPicker: Update UI This update adjusts the UI/layout for elements related to the CustomGradientPicker, specifically as it appears in the `Cover` block. * Update and fix tests * Adjust margins for child elements in GradientPicker * Update CustomGradientPicker field styles Remove unused styles * Update Gradient Type UI * Adjust Gradient Type button margins and border radius * Fix border-radius of pressed Gradient type button
WordPress · Feb 7, 2020 · d2b45b7 · d2b45b7
1 parent 48133c7
commit d2b45b7
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 84 deletions.
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -9,20 +9,24 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   >
     <fieldset>
       <legend>
-        <span
-          className="components-base-control__label"
+        <div
+          className="block-editor-color-gradient-control__color-indicator"
         >
-          Test Color
           <span
-            aria-label="(Color: #f00)"
-            className="component-color-indicator"
-            style={
-              Object {
-                "background": "#f00",
+            className="components-base-control__label"
+          >
+            Test Color
+            <span
+              aria-label="(Color: #f00)"
+              className="component-color-indicator"
+              style={
+                Object {
+                  "background": "#f00",
+                }
               }
-            }
-          />
-        </span>
+            />
+          </span>
+        </div>
       </legend>
       <div
         className="components-circular-option-picker"

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
@@ -110,27 +110,29 @@ function ColorGradientControlInner( {
 		>
 			<fieldset>
 				<legend>
-					<BaseControl.VisualLabel>
-						<VisualLabel
-							currentTab={ currentTab }
-							label={ label }
-							colorValue={ colorValue }
-							gradientValue={ gradientValue }
-						/>
-					</BaseControl.VisualLabel>
+					<div className="block-editor-color-gradient-control__color-indicator">
+						<BaseControl.VisualLabel>
+							<VisualLabel
+								currentTab={ currentTab }
+								label={ label }
+								colorValue={ colorValue }
+								gradientValue={ gradientValue }
+							/>
+						</BaseControl.VisualLabel>
+					</div>
 				</legend>
 				{ canChooseAColor && canChooseAGradient && (
 					<ButtonGroup className="block-editor-color-gradient-control__button-tabs">
 						<Button
-							isLarge
+							isSmall
 							isPrimary={ currentTab === 'color' }
 							isSecondary={ currentTab !== 'color' }
 							onClick={ () => setCurrentTab( 'color' ) }
 						>
-							{ __( 'Solid Color' ) }
+							{ __( 'Solid' ) }
 						</Button>
 						<Button
-							isLarge
+							isSmall
 							isPrimary={ currentTab === 'gradient' }
 							isSecondary={ currentTab !== 'gradient' }
 							onClick={ () => setCurrentTab( 'gradient' ) }

diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -1,14 +1,23 @@
-.block-editor-color-gradient-control__button-tabs {
-	display: block;
+.block-editor-color-gradient-control {
+	&__color-indicator {
+		margin-bottom: $grid-size;
+	}
+
+	&__button-tabs {
+		display: block;
+		margin-bottom: $grid-size;
+	}
 }
 
 .block-editor-panel-color-gradient-settings {
 	.component-color-indicator {
 		vertical-align: text-bottom;
 	}
 
-	&__panel-title .component-color-indicator {
-		display: inline-block;
+	&__panel-title {
+		.component-color-indicator {
+			display: inline-block;
+		}
 	}
 
 	&.is-opened &__panel-title .component-color-indicator {

diff --git a/packages/block-editor/src/components/colors-gradients/test/control.js b/packages/block-editor/src/components/colors-gradients/test/control.js
@@ -27,7 +27,7 @@ const getButtonWithAriaLabelStartPredicate = ( ariaLabelStart ) => (
 	);
 };
 
-const colorTabButtonPredicate = getButtonWithTestPredicate( 'Solid Color' );
+const colorTabButtonPredicate = getButtonWithTestPredicate( 'Solid' );
 const gradientTabButtonPredicate = getButtonWithTestPredicate( 'Gradient' );
 
 describe( 'ColorPaletteControl', () => {

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -388,7 +388,7 @@ function CoverEdit( {
 									gradientValue,
 									onColorChange: setOverlayColor,
 									onGradientChange: setGradient,
-									label: __( 'Overlay' ),
+									label: __( 'Color' ),
 								},
 							] }
 						>

diff --git a/packages/components/src/custom-gradient-picker/icons.js b/packages/components/src/custom-gradient-picker/icons.js
@@ -3,13 +3,12 @@
  */
 import { withInstanceId } from '@wordpress/compose';
 import {
-	SVG,
-	G,
-	Rect,
-	Defs,
-	RadialGradient,
+	Circle,
 	LinearGradient,
+	Path,
+	RadialGradient,
 	Stop,
+	SVG,
 } from '@wordpress/primitives';
 
 /**
@@ -18,56 +17,56 @@ import {
 export const LinearGradientIcon = withInstanceId( ( { instanceId } ) => {
 	const linerGradientId = `linear-gradient-${ instanceId }`;
 	return (
-		<SVG width="20" height="20" xmlns="http://www.w3.org/2000/svg">
-			<Defs>
-				<LinearGradient
-					y2="0"
-					x2="0.5"
-					y1="1"
-					x1="0.5"
-					id={ linerGradientId }
-				>
-					<Stop offset="0" stopColor="#000000" />
-					<Stop offset="1" stopColor="#fff" />
-				</LinearGradient>
-			</Defs>
-			<G>
-				<Rect
-					fill={ `url(#${ linerGradientId })` }
-					height="20"
-					width="20"
-					y="-1"
-					x="-1"
-				/>
-			</G>
+		<SVG
+			fill="none"
+			height="20"
+			viewBox="0 0 20 20"
+			width="20"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<LinearGradient
+				id={ linerGradientId }
+				gradientUnits="userSpaceOnUse"
+				x1="10"
+				x2="10"
+				y1="1"
+				y2="19"
+			>
+				<Stop offset="0" stopColor="#000000" />
+				<Stop offset="1" stopColor="#ffffff" />
+			</LinearGradient>
+			<Path d="m1 1h18v18h-18z" fill={ `url(#${ linerGradientId })` } />
 		</SVG>
 	);
 } );
 
 export const RadialGradientIcon = withInstanceId( ( { instanceId } ) => {
 	const radialGradientId = `radial-gradient-${ instanceId }`;
 	return (
-		<SVG width="20" height="20" xmlns="http://www.w3.org/2000/svg">
-			<Defs>
-				<RadialGradient
-					cy="0.5"
-					cx="0.5"
-					spreadMethod="pad"
-					id={ radialGradientId }
-				>
-					<Stop offset="0" stopColor="#fff" />
-					<Stop offset="1" stopColor="#000000" />
-				</RadialGradient>
-			</Defs>
-			<G>
-				<Rect
-					fill={ `url(#${ radialGradientId })` }
-					height="20"
-					width="20"
-					y="-1"
-					x="-1"
-				/>
-			</G>
+		<SVG
+			fill="none"
+			height="20"
+			viewBox="0 0 20 20"
+			width="20"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<RadialGradient
+				id={ radialGradientId }
+				cx="0"
+				cy="0"
+				gradientTransform="matrix(0 9 -9 0 10 10)"
+				gradientUnits="userSpaceOnUse"
+				r="1"
+			>
+				<Stop offset="0" stopColor="#000000" />
+				<Stop offset="1" stopColor="#ffffff" />
+			</RadialGradient>
+			<Circle
+				cx="10"
+				cy="10"
+				fill={ `url(#${ radialGradientId })` }
+				r="9"
+			/>
 		</SVG>
 	);
 } );
diff --git a/packages/components/src/custom-gradient-picker/index.js b/packages/components/src/custom-gradient-picker/index.js
@@ -75,6 +75,7 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 		<BaseControl className="components-custom-gradient-picker__type-picker">
 			<BaseControl.VisualLabel>{ __( 'Type' ) }</BaseControl.VisualLabel>
 			<ToolbarGroup
+				className="components-custom-gradient-picker__toolbar"
 				controls={ [
 					{
 						icon: <LinearGradientIcon />,

diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss
@@ -1,5 +1,9 @@
 $components-custom-gradient-picker__padding: 3px; // 24px container, 18px handles inside, that leaves 6px padding, half of which is 3.
 
+.components-custom-gradient-picker {
+	margin-top: $grid-size;
+}
+
 .components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
 	opacity: 0.4;
 }
@@ -8,7 +12,7 @@ $components-custom-gradient-picker__padding: 3px; // 24px container, 18px handle
 	width: 100%;
 	height: $icon-button-size-small;
 	border-radius: $icon-button-size-small;
-	margin-bottom: $grid-size;
+	margin-bottom: $grid-size-large;
 	padding-left: $components-custom-gradient-picker__padding;
 	padding-right: $icon-button-size-small - $components-custom-gradient-picker__padding;
 
@@ -69,17 +73,27 @@ $components-custom-gradient-picker__padding: 3px; // 24px container, 18px handle
 }
 
 .components-custom-gradient-picker .components-custom-gradient-picker__ui-line {
-	.components-base-control.components-custom-gradient-picker__angle-picker,
+	.components-base-control.components-angle-picker,
 	.components-base-control.components-custom-gradient-picker__type-picker {
 		margin-bottom: 0;
 	}
 }
 
-.components-custom-gradient-picker__angle-picker-field {
-	display: block;
-	width: 100%;
-}
+.components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
+	border: none;
 
-.components-custom-gradient-picker__angle-picker {
-	width: 50%;
+	// Work-around to target the inner button containers rendered by <ToolbarGroup />
+	> div + div {
+		margin-left: 1px;
+	}
+
+	button {
+		&.is-pressed {
+			> svg {
+				background: $white;
+				border: 1px solid $dark-gray-200;
+				border-radius: 2px;
+			}
+		}
+	}
 }