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 ( - +
+

{ __( 'Block Settings' ) }

+ +
); } }