diff --git a/blocks/inspector-controls/base-control/style.scss b/blocks/inspector-controls/base-control/style.scss
index 50fe2a2d59972..80d89bc403651 100644
--- 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
index af4fcd62796f3..b4c28d77505dc 100644
--- 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;
-}
\ No newline at end of file
+}
diff --git a/editor/header/saved-state/index.js b/editor/header/saved-state/index.js
index 9cf6d41d22840..0b5d4d5ceadd4 100644
--- 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 (
);
}
diff --git a/editor/header/saved-state/test/index.js b/editor/header/saved-state/test/index.js
index c622453d5fc10..810b235b9f279 100644
--- 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
index e4aa5c18c4ae4..f3ac1ee92f657 100644
--- 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 (
-