Merge pull request #2020 from WordPress/polish/gallery-inspector-inse…

…rter Polish gallery inspector, inspector headings, slider
WordPress · Jul 31, 2017 · 1d7b1c6 · 1d7b1c6
2 parents dbc8680 + 3d0906c
commit 1d7b1c6
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 10 deletions.
diff --git a/blocks/inspector-controls/base-control/style.scss b/blocks/inspector-controls/base-control/style.scss
@@ -1,5 +1,5 @@
 .blocks-base-control {
-	margin: 1em 0 1.5em 0;
+	margin: 0 0 1.5em 0;
 }
 
 .blocks-base-control__label {

diff --git a/blocks/inspector-controls/range-control/style.scss b/blocks/inspector-controls/range-control/style.scss
@@ -3,12 +3,103 @@
 	justify-content: center;
 }
 
+// creating mixin because we can't do multiline variables, and we can't comma-group the selectors for styling the range slider
+@mixin range-thumb() {
+	height: 18px;
+	width: 18px;
+	border-radius: 50%;
+	cursor: pointer;
+	background: $dark-gray-500;
+	border: 4px solid transparent;
+	background-clip: padding-box;
+	box-sizing: border-box;
+}
+
+@mixin range-track() {
+	height: 3px;
+	cursor: pointer;
+	background: $light-gray-500;
+	border-radius: 1.5px;
+}
+
 .blocks-range-control__input {
 	width: 100%;
+	margin-left: $item-spacing;
+	padding: 0;
+	-webkit-appearance: none;
+	background: transparent;
+
+	/**
+ 	 * Thumb
+ 	 */
+
+	// webkit
+	&::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		@include range-thumb();
+		margin-top: -7px;	// necessary for chrome
+	}
+
+	// moz
+	&::-moz-range-thumb {
+		@include range-thumb();
+	}
+
+	// ie
+	&::-ms-thumb {
+		@include range-thumb();
+		margin-top: 0;	// necessary because edge inherits from chrome
+		height: 14px;
+		width: 14px;
+		border: 2px solid transparent;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	// webkit
+	&:focus::-webkit-slider-thumb {
+		box-shadow: $button-focus-style;;
+	}
+
+	// moz
+	&:focus::-moz-range-thumb {
+		box-shadow: $button-focus-style;;
+	}
+
+	// ie
+	&:focus::-ms-thumb {
+		box-shadow: $button-focus-style;;
+	}
+
+	/**
+ 	 * Track
+ 	 */
+
+	 // webkit
+	&::-webkit-slider-runnable-track {
+		@include range-track();
+		margin-top: -4px;
+	}
+
+	// moz
+	&::-moz-range-track {
+		@include range-track();
+	}
+
+	// ie
+	&::-ms-track {
+		margin-top: -4px;
+		background: transparent;
+		border-color: transparent;
+		color: transparent;
+		@include range-track();
+	}
 }
 
 .blocks-range-control__hint {
 	display: inline-block;
-	margin-left: 10px;
+	margin-left: $item-spacing;
 	font-weight: 500;
-}
+}
diff --git a/editor/header/saved-state/index.js b/editor/header/saved-state/index.js
@@ -59,7 +59,7 @@ export function SavedState( { isNew, isPublished, isDirty, isSaving, isSaveable,
 
 	return (
 		<Button className={ classnames( className, 'button-link' ) } onClick={ onClick }>
-			{ __( 'Save' ) }
+			{ __( 'Save Draft' ) }
 		</Button>
 	);
 }

diff --git a/editor/header/saved-state/test/index.js b/editor/header/saved-state/test/index.js
@@ -67,7 +67,7 @@ describe( 'SavedState', () => {
 		);
 
 		expect( wrapper.name() ).toBe( 'Button' );
-		expect( wrapper.childAt( 0 ).text() ).toBe( 'Save' );
+		expect( wrapper.childAt( 0 ).text() ).toBe( 'Save Draft' );
 		wrapper.simulate( 'click' );
 		expect( statusSpy ).toHaveBeenCalledWith( 'draft' );
 		expect( saveSpy ).toHaveBeenCalled();
@@ -87,7 +87,7 @@ describe( 'SavedState', () => {
 		);
 
 		expect( wrapper.name() ).toBe( 'Button' );
-		expect( wrapper.childAt( 0 ).text() ).toBe( 'Save' );
+		expect( wrapper.childAt( 0 ).text() ).toBe( 'Save Draft' );
 		wrapper.simulate( 'click' );
 		expect( statusSpy ).not.toHaveBeenCalled();
 		expect( saveSpy ).toHaveBeenCalled();

diff --git a/editor/sidebar/block-inspector/class-name.js b/editor/sidebar/block-inspector/class-name.js
@@ -36,10 +36,13 @@ class BlockInspectorClassName extends Component {
 		}
 
 		return (
-			<InspectorControls.TextControl
-				label={ __( 'Additional CSS Class' ) }
-				value={ selectedBlock.attributes.className }
-				onChange={ this.setClassName } />
+			<div>
+				<h3>{ __( 'Block Settings' ) }</h3>
+				<InspectorControls.TextControl
+					label={ __( 'Additional CSS Class' ) }
+					value={ selectedBlock.attributes.className }
+					onChange={ this.setClassName } />
+			</div>
 		);
 	}
 }