diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index b0286b7587e1c2..04c2cf5de5a9ad 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -41,9 +41,8 @@ $grid-unit-60: 6 * $grid-unit; // 48px $icon-size: 24px; $button-size: 36px; $button-size-small: 24px; -$panel-padding: 16px; $header-height: 60px; -$panel-header-height: 50px; +$panel-header-height: $grid-unit-60; $admin-bar-height: 32px; $admin-bar-height-big: 46px; $admin-sidebar-width: 160px; diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index d519cbaeff31e5..ce5c9fe574407f 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -14,6 +14,7 @@ $z-layers: ( ".edit-post-sidebar .components-panel": -2, ".edit-post-text-editor__toolbar": 1, ".block-editor-inserter__tabs": 1, + ".edit-post-sidebar__panel-tab.is-active": 1, ".block-editor-inserter__tab.is-active": 1, ".components-panel__header": 1, ".components-modal__header": 10, diff --git a/packages/block-editor/src/components/block-compare/style.scss b/packages/block-editor/src/components/block-compare/style.scss index f1be4723ce4d69..4e275fbafd7314 100644 --- a/packages/block-editor/src/components/block-compare/style.scss +++ b/packages/block-editor/src/components/block-compare/style.scss @@ -14,14 +14,14 @@ .block-editor-block-compare__wrapper { display: flex; - padding-bottom: $panel-padding; + padding-bottom: $grid-unit-20; > div { display: flex; justify-content: space-between; flex-direction: column; width: 50%; - padding: 0 $panel-padding 0 0; + padding: 0 $grid-unit-20 0 0; min-width: 200px; button { diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss index f1dd6839a257d2..64ff2aa53ab6fb 100644 --- a/packages/block-editor/src/components/block-inspector/style.scss +++ b/packages/block-editor/src/components/block-inspector/style.scss @@ -20,6 +20,6 @@ display: block; font-size: $default-font-size; background: $white; - padding: ($panel-padding * 2) $panel-padding; + padding: ($grid-unit-20 * 2) $grid-unit-20; text-align: center; } diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index 1d167f4b77f3d4..98b03edb39b148 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -125,16 +125,14 @@ function ColorGradientControlInner( {
Currently selected link settings
"`; +exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; diff --git a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap index a5e0beb316a347..dd8516642921c9 100644 --- a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Basic rendering should render with required props 1`] = `"
Padding

Toggle between using the same value for all screen sizes or using a unique value per screen size.

All is used here for testing purposes to ensure we have access to details about the device.

"`; +exports[`Basic rendering should render with required props 1`] = `"
Padding

Toggle between using the same value for all screen sizes or using a unique value per screen size.

All is used here for testing purposes to ensure we have access to details about the device.

"`; diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss index 0250cb99e94155..47294b34712a55 100644 --- a/packages/block-editor/src/components/url-popover/style.scss +++ b/packages/block-editor/src/components/url-popover/style.scss @@ -61,7 +61,7 @@ .block-editor-url-popover__settings { display: block; - padding: $panel-padding; + padding: $grid-unit-20; border-top: $border-width solid $light-gray-500; } diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss index 47f0b3669d6cd2..64521de2d4ddc1 100644 --- a/packages/block-library/src/button/editor.native.scss +++ b/packages/block-library/src/button/editor.native.scss @@ -29,7 +29,7 @@ border-radius: $border-width * 4; padding: $block-spacing; border-width: $border-width; - margin: 2 * $panel-padding; + margin: 2 * $grid-unit-20; background-color: $button-fallback-bg; color: $white; } diff --git a/packages/block-library/src/button/rich-text.android.scss b/packages/block-library/src/button/rich-text.android.scss index 47f6d2e2ae8cbf..66685250f76e3f 100644 --- a/packages/block-library/src/button/rich-text.android.scss +++ b/packages/block-library/src/button/rich-text.android.scss @@ -1,6 +1,6 @@ .richText { background-color: transparent; - padding-left: $panel-padding; - padding-right: $panel-padding; - margin: 10px $panel-padding; + padding-left: $grid-unit-20; + padding-right: $grid-unit-20; + margin: 10px $grid-unit-20; } diff --git a/packages/block-library/src/button/rich-text.ios.scss b/packages/block-library/src/button/rich-text.ios.scss index 0c7d60695ba765..27ec62345fa266 100644 --- a/packages/block-library/src/button/rich-text.ios.scss +++ b/packages/block-library/src/button/rich-text.ios.scss @@ -1,4 +1,4 @@ .richText { - margin: 10px $panel-padding; + margin: 10px $grid-unit-20; background-color: transparent; } diff --git a/packages/components/src/button-group/style.scss b/packages/components/src/button-group/style.scss index 8ac03a2c21e756..aef701d6194a9e 100644 --- a/packages/components/src/button-group/style.scss +++ b/packages/components/src/button-group/style.scss @@ -4,8 +4,8 @@ .components-button { border-radius: 0; display: inline-flex; - color: var(--wp-admin-theme-color); - box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color); + color: $dark-gray-primary; + box-shadow: inset 0 0 0 $border-width $dark-gray-primary; & + .components-button { margin-left: -1px; @@ -29,7 +29,7 @@ // The active button should look pressed. &.is-primary { - box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color); + box-shadow: inset 0 0 0 $border-width $dark-gray-primary; } } } diff --git a/packages/components/src/color-palette/style.native.scss b/packages/components/src/color-palette/style.native.scss index 002228f19c9e82..af618dfafded2f 100644 --- a/packages/components/src/color-palette/style.native.scss +++ b/packages/components/src/color-palette/style.native.scss @@ -1,17 +1,17 @@ .contentContainer { flex-direction: row; - padding: 0 $panel-padding; + padding: 0 $grid-unit-20; } .container { - padding-bottom: $panel-padding; + padding-bottom: $grid-unit-20; } .verticalSeparator { border-width: $border-width / 2; border-color: $light-gray-400; height: 38px; - margin-right: $panel-padding / 2; + margin-right: $grid-unit-20 / 2; align-self: center; } diff --git a/packages/components/src/color-picker/style.native.scss b/packages/components/src/color-picker/style.native.scss index 336e34a17e1d34..068b20273c1f2e 100644 --- a/packages/components/src/color-picker/style.native.scss +++ b/packages/components/src/color-picker/style.native.scss @@ -4,8 +4,8 @@ flex-direction: row; justify-content: space-between; align-items: center; - padding: $panel-padding; - margin-top: $panel-padding; + padding: $grid-unit-20; + margin-top: $grid-unit-20; flex-wrap: wrap; } @@ -43,8 +43,8 @@ } .picker { - padding: $panel-padding; - border-radius: $panel-padding / 2; + padding: $grid-unit-20; + border-radius: $grid-unit-20 / 2; height: 200px; } diff --git a/packages/components/src/custom-select-control/style.scss b/packages/components/src/custom-select-control/style.scss index 332d5464d24aa4..07ae58ed0b5ce6 100644 --- a/packages/components/src/custom-select-control/style.scss +++ b/packages/components/src/custom-select-control/style.scss @@ -4,7 +4,7 @@ .components-custom-select-control__label { display: block; - margin-bottom: 5px; + margin-bottom: $grid-unit-10; } .components-custom-select-control__button { @@ -26,9 +26,9 @@ box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color); } - &-icon { + .components-custom-select-control__button-icon { height: 100%; - padding: 0 4px; + padding: 0; position: absolute; right: 0; top: 0; diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss index d7a857aa6a2edc..a6e698e9e0ce36 100644 --- a/packages/components/src/font-size-picker/style.scss +++ b/packages/components/src/font-size-picker/style.scss @@ -1,5 +1,5 @@ .components-font-size-picker__controls { - max-width: $sidebar-width - ( 2 * $panel-padding ); + max-width: $sidebar-width - ( 2 * $grid-unit-20 ); display: flex; flex-wrap: wrap; align-items: center; @@ -14,7 +14,7 @@ margin-bottom: 0; margin-left: 0; margin-right: $grid-unit-10; - margin-top: 5px; + margin-top: $grid-unit-10; width: 54px; // Show the reset button as disabled until a value is entered. @@ -37,7 +37,7 @@ .components-color-palette__clear { height: 30px; - margin-top: 23px; + margin-top: 26px; } } diff --git a/packages/components/src/form-toggle/index.js b/packages/components/src/form-toggle/index.js index 3dfeaf375cf197..053addfe325400 100644 --- a/packages/components/src/form-toggle/index.js +++ b/packages/components/src/form-toggle/index.js @@ -4,11 +4,6 @@ import classnames from 'classnames'; import { noop } from 'lodash'; -/** - * WordPress dependencies - */ -import { Path, SVG } from '@wordpress/primitives'; - function FormToggle( { className, checked, id, onChange = noop, ...props } ) { const wrapperClasses = classnames( 'components-form-toggle', className, { 'is-checked': checked, @@ -26,30 +21,6 @@ function FormToggle( { className, checked, id, onChange = noop, ...props } ) { /> - { checked ? ( - - - - ) : ( - - ) } ); } diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss index f47777a83b14f3..1c082d87000e8e 100644 --- a/packages/components/src/form-toggle/style.scss +++ b/packages/components/src/form-toggle/style.scss @@ -6,24 +6,6 @@ $toggle-border-width: 2px; position: relative; display: inline-block; - // On/Off icon indicators. - .components-form-toggle__on, - .components-form-toggle__off { - position: absolute; - top: $toggle-border-width * 3; - box-sizing: border-box; - } - - .components-form-toggle__off { - color: $dark-gray-300; - fill: currentColor; - right: $toggle-border-width * 3; - } - - .components-form-toggle__on { - left: $toggle-border-width * 3 + 2px; // Indent 2px extra because icon is thinner. - } - // Unchecked state. .components-form-toggle__track { content: ""; @@ -90,11 +72,6 @@ $toggle-border-width: 2px; border-width: 0; // Zero out the border color to make the thumb invisible in Windows High Contrast Mode. transform: translateX($toggle-width - ($toggle-border-width * 4) - ($toggle-height - ($toggle-border-width * 4))); } - - &::before { - background-color: var(--wp-admin-theme-color); - border: $toggle-border-width solid var(--wp-admin-theme-color); - } } // Disabled state: @@ -126,23 +103,3 @@ $toggle-border-width: 2px; content: ""; } } - -// Ensure on indicator works in normal and Windows high contrast mode both. -.components-form-toggle .components-form-toggle__on { - // Outlines show up in windows high contrast mode. - outline: $border-width solid transparent; - outline-offset: -1px; - - // This colors the indicator black, then inverts it for normal mode. - border: $border-width solid $black; - filter: invert(100%) contrast(500%); // This makes the icon white for normal mode, and it makes it dark blue in Windows High Contrast Mode. -} - -@supports (-ms-high-contrast-adjust: auto) { - // Edge stacks outlines on top of the SVG itself, and when showing them in high contrast mode it means they get inverted again. - // Therefore, show a different style for the on indicator only in Edge and IE11. - .components-form-toggle .components-form-toggle__on { - filter: none; - border: $border-width solid $white; - } -} diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index bcb89d6a312e54..50c8693eb8ee09 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -27,7 +27,7 @@ } .emptyHeader { - margin-top: $panel-padding / 2; + margin-top: $grid-unit-20 / 2; } @@ -174,9 +174,9 @@ // Color Cell .colorCircle { - width: 2 * $panel-padding; - height: 2 * $panel-padding; - border-radius: $panel-padding; + width: 2 * $grid-unit-20; + height: 2 * $grid-unit-20; + border-radius: $grid-unit-20; } // Radio Cell @@ -194,8 +194,8 @@ .bottomSheetHeader { flex-direction: row; align-items: center; - padding-right: $panel-padding; - padding-left: $panel-padding; + padding-right: $grid-unit-20; + padding-left: $grid-unit-20; min-height: 44px; } diff --git a/packages/components/src/mobile/color-settings/style.native.scss b/packages/components/src/mobile/color-settings/style.native.scss index 1aa05378a08107..87480529fcd2ce 100644 --- a/packages/components/src/mobile/color-settings/style.native.scss +++ b/packages/components/src/mobile/color-settings/style.native.scss @@ -18,7 +18,7 @@ justify-content: center; align-items: center; align-content: center; - padding: 12px $panel-padding; + padding: 12px $grid-unit-20; } .colorIndicator { diff --git a/packages/components/src/mobile/picker/styles.native.scss b/packages/components/src/mobile/picker/styles.native.scss index 9a271b80951ef6..fea1095b0a471d 100644 --- a/packages/components/src/mobile/picker/styles.native.scss +++ b/packages/components/src/mobile/picker/styles.native.scss @@ -1,8 +1,8 @@ .separator { - margin-top: $panel-padding / 2; - margin-bottom: $panel-padding / 2; - margin-left: -$panel-padding; - margin-right: -$panel-padding; + margin-top: $grid-unit-20 / 2; + margin-bottom: $grid-unit-20 / 2; + margin-left: -$grid-unit-20; + margin-right: -$grid-unit-20; height: $border-width; background-color: $light-gray-400; } diff --git a/packages/components/src/mobile/segmented-control/style.native.scss b/packages/components/src/mobile/segmented-control/style.native.scss index abacc818804b14..f7a5ed392dba71 100644 --- a/packages/components/src/mobile/segmented-control/style.native.scss +++ b/packages/components/src/mobile/segmented-control/style.native.scss @@ -7,7 +7,7 @@ $border-radius-ios: 7px; .segment { border-radius: $segment-height / 2; - padding: 6px $panel-padding; + padding: 6px $grid-unit-20; align-items: center; justify-content: center; margin-top: $segment-spacing + $border-width; @@ -91,7 +91,7 @@ $border-radius-ios: 7px; .row { flex-direction: row; align-items: center; - padding: $panel-padding / 2 $panel-padding; + padding: $grid-unit-20 / 2 $grid-unit-20; } .flex { diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index ed1d293600f819..0c6bcf45229e69 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -26,7 +26,7 @@ } &.is-opened { - padding: $panel-padding; + padding: $grid-unit-20; } } @@ -34,8 +34,8 @@ display: flex; justify-content: space-between; align-items: center; - padding: 0 $panel-padding; - height: 50px; + padding: 0 $grid-unit-20; + height: $grid-unit-60; border-top: $border-width solid $light-gray-500; border-bottom: $border-width solid $light-gray-500; @@ -63,7 +63,7 @@ @include reduce-motion("transition"); } .components-panel__body.is-opened > .components-panel__body-title { - margin: -1 * $panel-padding; + margin: -1 * $grid-unit-20; margin-bottom: 5px; } @@ -76,12 +76,12 @@ .components-panel__body-toggle.components-button { position: relative; - padding: 15px; + padding: $grid-unit-20; outline: none; width: 100%; - font-weight: 600; + font-weight: 500; text-align: left; - color: $dark-gray-900; + color: $dark-gray-primary; border: none; box-shadow: none; transition: 0.1s background ease-in-out; diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss index 10926a092a4eb1..6bfff09c1d3d0c 100644 --- a/packages/components/src/popover/style.scss +++ b/packages/components/src/popover/style.scss @@ -222,7 +222,7 @@ $arrow-size: 8px; display: flex; height: $panel-header-height; justify-content: space-between; - padding: 0 8px 0 $panel-padding; + padding: 0 8px 0 $grid-unit-20; } .components-popover__header-title { diff --git a/packages/components/src/toggle-control/style.scss b/packages/components/src/toggle-control/style.scss index e376aba9eee786..d051eba00e91f7 100644 --- a/packages/components/src/toggle-control/style.scss +++ b/packages/components/src/toggle-control/style.scss @@ -5,7 +5,7 @@ align-items: center; .components-form-toggle { - margin-right: $grid-unit-20; + margin-right: $grid-unit-15; } .components-toggle-control__label { diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap index db9d191056a3ea..106d6ff671948c 100644 --- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap +++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/plugins-api.test.js.snap @@ -2,6 +2,6 @@ exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Setting sidebar 1`] = `"My Custom Panel"`; -exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`; +exports[`Using Plugins API Sidebar Medium screen Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`; -exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`; +exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`; diff --git a/packages/edit-post/src/components/manage-blocks-modal/style.scss b/packages/edit-post/src/components/manage-blocks-modal/style.scss index d09e9a4891b4c1..0e1e79de891f7f 100644 --- a/packages/edit-post/src/components/manage-blocks-modal/style.scss +++ b/packages/edit-post/src/components/manage-blocks-modal/style.scss @@ -63,7 +63,7 @@ .edit-post-manage-blocks-modal__category-title { position: sticky; top: 0; - padding: $panel-padding 0; + padding: $grid-unit-20 0; background-color: $white; z-index: z-index(".edit-post-manage-blocks-modal__category-title"); diff --git a/packages/edit-post/src/components/sidebar/last-revision/style.scss b/packages/edit-post/src/components/sidebar/last-revision/style.scss index 54c14ec4fdc069..c3068746b419bb 100644 --- a/packages/edit-post/src/components/sidebar/last-revision/style.scss +++ b/packages/edit-post/src/components/sidebar/last-revision/style.scss @@ -1,8 +1,9 @@ // Needs specificity, because this panel is just a button .components-panel__body.is-opened.edit-post-last-revision__panel { padding: 0; + height: $grid-unit-60; } .editor-post-last-revision__title.components-button { - padding: #{ $panel-padding - 3px } $panel-padding; // subtract extra height of dashicon + padding: $grid-unit-20; } diff --git a/packages/edit-post/src/components/sidebar/settings-header/style.scss b/packages/edit-post/src/components/sidebar/settings-header/style.scss index cb23ee73d5f7d6..13f62eb5d55f72 100644 --- a/packages/edit-post/src/components/sidebar/settings-header/style.scss +++ b/packages/edit-post/src/components/sidebar/settings-header/style.scss @@ -1,20 +1,6 @@ -.components-panel__header.edit-post-sidebar__panel-tabs { - justify-content: flex-start; - padding-left: 0; - padding-right: $grid-unit-05; - border-top: 0; - - ul { - display: flex; - } - li { - margin: 0; - } -} - .components-button.edit-post-sidebar__panel-tab { border-radius: 0; - height: 50px - $border-width; + height: $grid-unit-60; background: transparent; border: none; box-shadow: none; @@ -22,8 +8,7 @@ display: inline-block; padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode margin-left: 0; - font-weight: 400; - color: $dark-gray-900; + font-weight: 500; // This pseudo-element "duplicates" the tab label and sets the text to bold. // This ensures that the tab doesn't change width when selected. @@ -41,8 +26,8 @@ &.is-active { // The transparent shadow ensures no jumpiness when focus animates on an active tab. box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color); - font-weight: 600; position: relative; + z-index: z-index(".edit-post-sidebar__panel-tab.is-active"); // This border appears in Windows High Contrast mode instead of the box-shadow. &::before { diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index d3be8c5f30caa5..7b10eaec0d2248 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -1,13 +1,23 @@ .components-panel__header.edit-post-sidebar__panel-tabs { justify-content: flex-start; padding-left: 0; - padding-right: $grid-unit-05; + padding-right: $grid-unit-20; border-top: 0; margin-top: 0; + ul { + display: flex; + } + li { + margin: 0; + } + .components-button.has-icon { display: none; - margin-left: auto; + margin: 0 0 0 auto; + padding: 0; + min-width: $icon-size; + height: $icon-size; @include break-medium() { display: flex; diff --git a/packages/editor/src/components/post-last-revision/style.scss b/packages/editor/src/components/post-last-revision/style.scss index 544183840e91bb..6d44e617e230b1 100644 --- a/packages/editor/src/components/post-last-revision/style.scss +++ b/packages/editor/src/components/post-last-revision/style.scss @@ -8,7 +8,7 @@ } .components-button.editor-post-last-revision__title { - height: auto; + height: 100%; &:hover, &:active { diff --git a/packages/editor/src/components/post-publish-panel/index.js b/packages/editor/src/components/post-publish-panel/index.js index 232d23f5cc0a9d..ade6a3a552ecc5 100644 --- a/packages/editor/src/components/post-publish-panel/index.js +++ b/packages/editor/src/components/post-publish-panel/index.js @@ -17,7 +17,7 @@ import { } from '@wordpress/components'; import { withSelect, withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { close } from '@wordpress/icons'; +import { closeSmall } from '@wordpress/icons'; /** * Internal dependencies @@ -96,7 +96,7 @@ export class PostPublishPanel extends Component { ) }