diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss index d6fd0e2b968ce6..ddcd5afdf21abc 100644 --- a/packages/base-styles/_colors.scss +++ b/packages/base-styles/_colors.scss @@ -25,6 +25,15 @@ $light-gray-200: #f3f4f5; $light-gray-100: #f8f9f9; $white: #fff; +// G2 colors. +$dark-gray-primary: #1e1e1e; +$medium-gray-text: #757575; +$light-gray-secondary: #ccc; +$light-gray-tertiary: #e7e8e9; +$theme-color: theme(button); +$blue-medium-focus: #007cba; // @todo: Currently being used as "spot" color. Needs to be considered in context of themes. +$blue-medium-focus-dark: #fff; + // Dark opacities, for use with light themes. $dark-opacity-900: rgba(#000510, 0.9); $dark-opacity-800: rgba(#00000a, 0.85); @@ -82,8 +91,6 @@ $blue-medium-300: #66c6e4; $blue-medium-200: #bfe7f3; $blue-medium-100: #e5f5fa; $blue-medium-highlight: #b3e7fe; -$blue-medium-focus: #007cba; -$blue-medium-focus-dark: #fff; // Alert colors. $alert-yellow: #f0b849; diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 427b36201aef5c..e74f8924cec7fd 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -123,12 +123,6 @@ cursor: default; } -@mixin button-style__hover { - background-color: $white; - color: $dark-gray-900; - box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white; -} - @mixin button-style__active() { outline: none; background-color: $white; @@ -137,12 +131,10 @@ } @mixin button-style__focus-active() { - background-color: $white; - color: $dark-gray-900; - box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white; + box-shadow: 0 0 0 1px color($theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. - outline: 2px solid transparent; + outline: 1px solid transparent; } // Switch. @@ -154,26 +146,17 @@ outline-offset: 2px; } -// Formatting Buttons. -@mixin formatting-button-style__hover { - color: $dark-gray-500; - box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white; -} -@mixin formatting-button-style__active() { - outline: none; - color: $white; - box-shadow: none; - background: $dark-gray-500; -} - -@mixin formatting-button-style__focus() { - box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white; +/** + * Block Toolbar/Formatting Buttons + */ - // Windows High Contrast mode will show this outline, but not the box-shadow. - outline: 2px solid transparent; +@mixin block-toolbar-button-style__focus() { + box-shadow: inset 0 0 0 2px color($theme-color), inset 0 0 0 4px $white; // Inner halo makes this work on top of a toggled button. + outline: 2px solid transparent; // Shown to Windows 10 High Contrast Mode. } + // Tabs, Inputs, Square buttons. @mixin input-style__neutral() { box-shadow: 0 0 0 transparent; @@ -231,35 +214,26 @@ } @mixin block-style__hover { - background: $light-gray-200; - color: $dark-gray-900; + border-color: $theme-color; + color: $theme-color !important; } @mixin block-style__focus() { - color: $dark-gray-900; - box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500; + box-shadow: inset 0 0 0 1px $white, 0 0 0 2px $theme-color; // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; } @mixin block-style__is-active() { - color: $dark-gray-900; - box-shadow: inset 0 0 0 2px $dark-gray-500; + color: $white; + background: $dark-gray-primary; // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; outline-offset: -2px; } -@mixin block-style__is-active-focus() { - color: $dark-gray-900; - box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500, inset 0 0 0 2px $dark-gray-500; - - // Windows High Contrast mode will show this outline, but not the box-shadow. - outline: 4px solid transparent; - outline-offset: -4px; -} /** * Applies editor left position to the selector passed as argument @@ -337,13 +311,14 @@ border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid; - margin-left: $grid-size-small; + margin-left: $grid-unit-05; // This gives the icon space on the right side consistent with the material // icon standards. margin-right: 2px; } + /** * Allows users to opt-out of animations via OS-level preferences. */ diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 5cb403ffd96a10..6164d7d8b2f0d2 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -1,10 +1,9 @@ @import "./colors"; /** - * Often re-used variables + * Fonts & basic variables. */ -// Fonts & basics $default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif; $default-font-size: 13px; $default-line-height: 1.4; @@ -17,15 +16,49 @@ $editor-line-height: 1.8; $big-font-size: 18px; $mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in" -// Grid size + +/** + * Grid System. + * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ + */ + +$grid-unit: 8px; +$grid-unit-05: 0.5 * $grid-unit; // 4px +$grid-unit-10: 1 * $grid-unit; // 8px +$grid-unit-15: 1.5 * $grid-unit; // 12px +$grid-unit-20: 2 * $grid-unit; // 16px +$grid-unit-30: 3 * $grid-unit; // 24px +$grid-unit-40: 4 * $grid-unit; // 32px +$grid-unit-50: 5 * $grid-unit; // 40px +$grid-unit-60: 6 * $grid-unit; // 48px + +/* @Todo: Move towards custom properties: +:root { + --grid-unit: 8px; + --grid-unit-05: calc(0.5 * var(--grid-unit)); // 4px + --grid-unit-10: calc(1 * var(--grid-unit)); // 8px + --grid-unit-15: calc(1.5 * var(--grid-unit)); // 12px + --grid-unit-20: calc(2 * var(--grid-unit)); // 16px + --grid-unit-30: calc(3 * var(--grid-unit)); // 24px + --grid-unit-40: calc(4 * var(--grid-unit)); // 32px + --grid-unit-50: calc(5 * var(--grid-unit)); // 40px + --grid-unit-60: calc(6 * var(--grid-unit)); // 48px +} +*/ + +// Deprecated grid units. $grid-size-small: 4px; $grid-size: 8px; $grid-size-large: 16px; $grid-size-xlarge: 24px; -// Widths, heights & dimensions + +/** + * Dimensions. + */ + $panel-padding: 16px; -$header-height: 56px; +$header-height: 60px; $panel-header-height: 50px; $admin-bar-height: 32px; $admin-bar-height-big: 46px; @@ -34,25 +67,39 @@ $admin-sidebar-width-big: 190px; $admin-sidebar-width-collapsed: 36px; $empty-paragraph-height: $text-editor-font-size * 4; $modal-min-width: 360px; +$spinner-size: 18px; + + +/** + * Shadows. + */ -// Visuals -$shadow-popover: 0 3px 30px rgba($dark-gray-900, 0.1); -$shadow-toolbar: 0 2px 10px rgba($dark-gray-900, 0.1), 0 0 2px rgba($dark-gray-900, 0.1); -$shadow-below-only: 0 5px 10px rgba($dark-gray-900, 0.05), 0 2px 2px rgba($dark-gray-900, 0.05); +$shadow-popover: 0 2px 6px rgba($black, 0.05); $shadow-modal: 0 3px 30px rgba($dark-gray-900, 0.2); -// Editor Widths + +/** + * Editor widths. + */ + $sidebar-width: 280px; $content-width: 580px; // This is optimized for 70 characters. +$widget-area-width: 700px; + + +/** + * Block UI. + */ -// Block UI $border-width: 1px; -$block-controls-height: 36px; +$icon-button-size: 36px; $inserter-tabs-height: 36px; -$block-toolbar-height: $block-controls-height + $border-width; +$icon-button-size-small: 24px; +$block-toolbar-height: $grid-unit-60; +$resize-handler-size: 15px; +$resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // Make the resize handle container larger so there's a larger grabbable area. -// Blocks -$block-left-border-width: $border-width * 3; +// Block specific dimensions. $block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size. $block-spacing: 4px; // Vertical space between blocks. $block-side-ui-width: 28px; // Width of the movers/drag handle UI. @@ -75,14 +122,11 @@ $block-media-container-to-content: $block-selected-child-margin + $block-selecte $block-selected-vertical-margin-descendant: 2 * $block-selected-to-content; $block-selected-vertical-margin-child: $block-edge-to-content; -// Buttons & UI Widgets + +/** + * Border radii. + */ + $radius-round-rectangle: 4px; $radius-round: 50%; -$icon-button-size: 36px; -$icon-button-size-small: 24px; -$resize-handler-size: 15px; -$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area. -$spinner-size: 18px; - -// Widgets screen -$widget-area-width: 700px; +$radius-block-ui: 2px; diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index ea6d3694635487..e1aa460960a51a 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -28,7 +28,6 @@ $z-layers: ( ".edit-site-header": 62, ".edit-widgets-header": 30, ".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter - ".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter ".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block ".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background. ".wp-block-cover__video-background": 0, // Video background inside cover block. @@ -55,7 +54,6 @@ $z-layers: ( ".block-editor-inner-blocks.has-overlay::after": 60, // The toolbar, when contextual, should be above any adjacent nested block click overlays. - ".block-editor-block-list__layout .reusable-block-edit-panel": 61, ".block-editor-block-contextual-toolbar": 61, // The block mover, particularly in nested contexts, @@ -117,7 +115,8 @@ $z-layers: ( ".components-tooltip": 1000002, // Make sure corner handles are above side handles for ResizableBox component - ".components-resizable-box__side-handle": 1, + ".components-resizable-box__handle": 2, + ".components-resizable-box__side-handle": 2, ".components-resizable-box__corner-handle": 2, // Make sure block manager sticky category titles appear above the options diff --git a/packages/block-directory/src/components/downloadable-block-info/style.scss b/packages/block-directory/src/components/downloadable-block-info/style.scss index e0771f9906a221..d55cd030b8c10d 100644 --- a/packages/block-directory/src/components/downloadable-block-info/style.scss +++ b/packages/block-directory/src/components/downloadable-block-info/style.scss @@ -6,7 +6,7 @@ display: flex; justify-content: space-between; color: $dark-gray-400; - margin-top: $grid-size; + margin-top: $grid-unit-10; font-size: 12px; .block-directory-downloadable-block-info__column { diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 1cbc41293ca13b..40d41b71ad6168 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -345,10 +345,6 @@ _Related_ - -# **MultiBlocksSwitcher** - -Undocumented declaration. - # **MultiSelectScrollIntoView** Scrolls the multi block selection end into view if not in view already. This diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss index b20cdd273b2566..daa9169bb17652 100644 --- a/packages/block-editor/src/components/block-breadcrumb/style.scss +++ b/packages/block-editor/src/components/block-breadcrumb/style.scss @@ -35,7 +35,7 @@ .block-editor-block-breadcrumb__button.components-button, .block-editor-block-breadcrumb__current { - color: $dark-gray-500; - padding: 0 $grid-size; + color: $dark-gray-primary; + padding: 0 $grid-unit-10; font-size: inherit; } diff --git a/packages/block-editor/src/components/block-draggable/index.js b/packages/block-editor/src/components/block-draggable/index.js index dd87e2c5a08fd6..1ee725fc1daf39 100644 --- a/packages/block-editor/src/components/block-draggable/index.js +++ b/packages/block-editor/src/components/block-draggable/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { castArray } from 'lodash'; - /** * WordPress dependencies */ @@ -18,20 +13,18 @@ const BlockDraggable = ( { children, clientIds } ) => { getBlockRootClientId, getTemplateLock, } = select( 'core/block-editor' ); - const normalizedClientIds = castArray( clientIds ); const rootClientId = - normalizedClientIds.length === 1 - ? getBlockRootClientId( normalizedClientIds[ 0 ] ) + clientIds.length === 1 + ? getBlockRootClientId( clientIds[ 0 ] ) : null; const templateLock = rootClientId ? getTemplateLock( rootClientId ) : null; return { - index: getBlockIndex( normalizedClientIds[ 0 ], rootClientId ), + index: getBlockIndex( clientIds[ 0 ], rootClientId ), srcRootClientId: rootClientId, - isDraggable: - normalizedClientIds.length === 1 && 'all' !== templateLock, + isDraggable: clientIds.length === 1 && 'all' !== templateLock, }; }, [ clientIds ] @@ -51,15 +44,14 @@ const BlockDraggable = ( { children, clientIds } ) => { }, [] ); if ( ! isDraggable ) { - return null; + return children( { isDraggable: false } ); } - const normalizedClientIds = castArray( clientIds ); - const blockElementId = `block-${ normalizedClientIds[ 0 ] }`; + const blockElementId = `block-${ clientIds[ 0 ] }`; const transferData = { type: 'block', srcIndex: index, - srcClientId: normalizedClientIds[ 0 ], + srcClientId: clientIds[ 0 ], srcRootClientId, }; @@ -78,6 +70,7 @@ const BlockDraggable = ( { children, clientIds } ) => { > { ( { onDraggableStart, onDraggableEnd } ) => { return children( { + isDraggable: true, onDraggableStart, onDraggableEnd, } ); diff --git a/packages/block-editor/src/components/block-icon/style.scss b/packages/block-editor/src/components/block-icon/style.scss index 07eff392cca18e..7c81a32be891cf 100644 --- a/packages/block-editor/src/components/block-icon/style.scss +++ b/packages/block-editor/src/components/block-icon/style.scss @@ -4,8 +4,6 @@ justify-content: center; width: 24px; height: 24px; - margin: 0; - border-radius: 4px; &.has-colors { svg { diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss index bf01c8b87d38d2..f1dd6839a257d2 100644 --- a/packages/block-editor/src/components/block-inspector/style.scss +++ b/packages/block-editor/src/components/block-inspector/style.scss @@ -1,9 +1,9 @@ .block-editor-block-inspector { .components-base-control { - margin-bottom: #{ $grid-size * 3 }; + margin-bottom: #{ $grid-unit-30 }; &:last-child { - margin-bottom: $grid-size; + margin-bottom: $grid-unit-10; } } .components-panel__body { @@ -12,7 +12,7 @@ } .block-editor-block-card { - padding: $grid-size-large; + padding: $grid-unit-20; } } diff --git a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js index a40c06b5f9fa46..ee8e952b51de59 100644 --- a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js @@ -11,15 +11,17 @@ import { BlockToolbar } from '../'; function BlockContextualToolbar( { focusOnMount, ...props } ) { return ( - - - +
+ + + +
); } diff --git a/packages/block-editor/src/components/block-list/block-popover.js b/packages/block-editor/src/components/block-list/block-popover.js index 2a70b80c2dafa6..1b7b42289ed4cb 100644 --- a/packages/block-editor/src/components/block-list/block-popover.js +++ b/packages/block-editor/src/components/block-list/block-popover.js @@ -160,6 +160,7 @@ function BlockPopover( { className="block-editor-block-list__block-popover" __unstableSticky={ ! showEmptyBlockSideInserter } __unstableSlotName="block-toolbar" + __unstableBoundaryParent // Allow subpixel positioning for the block movement animation. __unstableAllowVerticalSubpixelPosition={ moverDirection !== 'horizontal' && node @@ -169,6 +170,9 @@ function BlockPopover( { } onBlur={ () => setIsToolbarForced( false ) } shouldAnchorIncludePadding + // Popover calculates the width once. Trigger a reset by remounting + // the component. + key={ shouldShowContextualToolbar } > { ( shouldShowContextualToolbar || isToolbarForced ) && (
* { background: $light-gray-100; } @@ -79,60 +75,31 @@ } } + /** - * Block border layout + * Block Layout */ - &::before { - z-index: z-index(".block-editor-block-list__block::before"); - content: ""; + // Navigate mode & Focused wrapper. + // We're using a pseudo element to overflow placeholder borders + // and any border inside the block itself. + &:focus::after { position: absolute; - border: $border-width solid transparent; - border-left: none; - box-shadow: none; + z-index: 1; pointer-events: none; - transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; - @include reduce-motion("transition"); - - // Include a transparent outline for Windows High Contrast mode. - outline: $border-width solid transparent; - - // Go edge-to-edge on mobile. - right: -$block-padding; - left: -$block-padding; - top: -$block-padding; - bottom: -$block-padding; - } - - // Selected style. - &.is-selected { - &::before { - // Use opacity to work in various editor styles. - border-color: $dark-opacity-light-800; - box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500; - - .is-dark-theme & { - border-color: $light-opacity-light-800; - box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600; - } - - // Switch to outset borders on larger screens. - @include break-small() { - box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500; - - .is-dark-theme & { - box-shadow: -$block-left-border-width 0 0 0 $light-gray-600; - } - } - } + content: ""; + top: 0; + bottom: 0; + left: 0; + right: 0; - .is-navigate-mode &::before { - border-color: $blue-medium-focus; - box-shadow: inset $block-left-border-width 0 0 0 $blue-medium-focus; + // 2px outside. + box-shadow: 0 0 0 2px $blue-medium-focus; + border-radius: $radius-block-ui; - @include break-small() { - box-shadow: -$block-left-border-width 0 0 0 $blue-medium-focus; - } + // Show a light color for dark themes. + .is-dark-theme & { + box-shadow: 0 0 0 2px $blue-medium-focus-dark; } } @@ -148,8 +115,18 @@ } } + // Between-blocks dropzone line indicator. &.is-drop-target::before { - border-top: 3px solid theme(primary); + content: ""; + position: absolute; + z-index: 0; + pointer-events: none; + transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear; + right: 0; + left: 0; + top: -$default-block-margin / 2; + border-radius: $radius-block-ui; + border-top: 4px solid $blue-medium-focus; } } @@ -162,17 +139,31 @@ // The primary indicator of selection in text is the native selection marker. // When selecting multiple blocks, we provide an additional selection indicator. + .is-navigate-mode & .block-editor-block-list__block.is-selected, .block-editor-block-list__block.is-multi-selected { + // Show selection borders around every non-nested block's actual footprint. - &:not(.is-block-collapsed), - .is-block-content { + &::after { + position: absolute; + z-index: 1; + pointer-events: none; + content: ""; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + + .is-block-content, // Floats. + &::after { // Everything else. + // 2px outside. box-shadow: 0 0 0 2px $blue-medium-focus; - border-radius: 1px; + border-radius: $radius-block-ui; // Windows High Contrast mode will show this outline. outline: 2px solid transparent; - // Show a lighter blue for dark themes. + // Show a lighter color for dark themes. .is-dark-theme & { box-shadow: 0 0 0 2px $blue-medium-focus-dark; } @@ -185,6 +176,12 @@ } } } + + // Hide the focus indicator for collapsed blocks. + // These serve as only as column containers for floated blocks. + .block-editor-block-list__block.is-block-collapsed::after { + content: none; + } } @@ -211,35 +208,16 @@ } } - &.has-warning::before { - // Use opacity to work in various editor styles. - border-color: $dark-opacity-light-500; - border-left: $border-width solid $dark-opacity-light-500; - - .is-dark-theme & { - border-color: $light-opacity-light-600; - } - } - - &.has-warning.is-selected::before { - // Use opacity to work in various editor styles. - border-color: $dark-opacity-light-800; - border-left-color: transparent; - - .is-dark-theme & { - border-color: $light-opacity-light-800; - } - } - + // Scrim overlay. &.has-warning::after { content: ""; position: absolute; - background-color: rgba($light-gray-100, 0.4); - - top: -$block-padding; - bottom: -$block-padding; - right: -$block-padding; - left: -$block-padding; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: $radius-block-ui; + background-color: rgba($white, 0.4); } // Avoid conflict with the multi-selection highlight color. @@ -247,21 +225,6 @@ background-color: transparent; } - &.has-warning.is-selected::after { - bottom: ( $block-toolbar-height - $block-padding - $border-width ); - - @include break-small() { - bottom: -$block-padding; - } - } - - // Reusable blocks. - &.is-reusable.is-selected::before { - border-left-color: transparent; - border-style: dashed; - border-width: $border-width; - } - // Reusable blocks clickthrough overlays. &.is-reusable > .block-editor-inner-blocks.has-overlay { // Remove only the top click overlay. @@ -328,13 +291,6 @@ margin-left: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width; margin-right: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width; } - - &::before { - left: 0; - right: 0; - border-left-width: 0; - border-right-width: 0; - } } // Clear floats. @@ -347,7 +303,7 @@ .block-editor-block-list__layout { .block-editor-default-block-appender .block-editor-inserter { left: auto; - right: $grid-size; + right: $grid-unit-10; } } } @@ -357,7 +313,7 @@ */ .block-editor-block-list .block-editor-inserter { - margin: $grid-size; + margin: $grid-unit-10; cursor: move; // Fallback for IE/Edge < 14 cursor: grab; } @@ -408,21 +364,13 @@ } } +// Sibling inserter / "inbetweenserter". .block-editor-block-list__insertion-point-inserter, .block-editor-block-list__block-popover-inserter { - // Show a clickable plus. - .block-editor-inserter__toggle { - border-radius: 50%; - color: $blue-medium-focus; - background: $white; - height: $block-padding * 2; - width: $block-padding * 2; - padding: 0; - justify-content: center; - - &:not(:disabled):not([aria-disabled="true"]):hover { - box-shadow: none; - } + .block-editor-inserter__toggle.components-button { + // Special dimensions for this button. + min-width: 32px; + height: 32px; } } @@ -468,17 +416,40 @@ } +/** + * Block Toolbar, top and contextual. + */ +.block-editor-block-contextual-toolbar-wrapper { + padding-left: $block-toolbar-height; // Provide space for the mover control on full-wide items. +} + +.edit-post-header-toolbar__block-toolbar, +.block-editor-block-contextual-toolbar { + // Adapt the height of the toolbar items. + .components-toolbar { + height: $block-toolbar-height; + background: none; + } + + // Adapt the height of all toolbar buttons. + .components-button { + height: $block-toolbar-height; + } +} + + /** * Block Toolbar when contextual. */ -.block-editor-block-contextual-toolbar .block-editor-block-toolbar { - width: 100%; - @include break-small() { - width: auto; +.block-editor-block-contextual-toolbar { + // Block UI appearance. + border: $border-width solid $dark-gray-primary; + border-radius: $radius-block-ui; + background-color: $white; - // Hide right border on desktop, where the .components-toolbar instead has a right border. - border-right: none; + .block-editor-block-toolbar .components-toolbar { + border-right-color: $dark-gray-primary; } } @@ -486,46 +457,46 @@ /** * Block Label for Navigation/Selection Mode */ + .block-editor-block-list__breadcrumb { display: block; - line-height: 1; z-index: z-index(".block-editor-block-list__breadcrumb"); .components-toolbar { display: flex; - background: $white; - border: $border-width solid $blue-medium-focus; - border-left: none; - box-shadow: inset $block-left-border-width 0 0 0 $blue-medium-focus; - height: $block-toolbar-height + $border-width; - font-size: $default-font-size; - line-height: $block-toolbar-height - $grid-size; - padding-left: $grid-size; - padding-right: $grid-size; + border: none; + background: none; + // The button here has a special style to appear as a toolbar. .components-button { - box-shadow: none; - } - - .is-dark-theme & { - border-color: $light-opacity-light-800; + font-size: $default-font-size; + height: $block-toolbar-height; + padding: $grid-unit-15 $grid-unit-20; + + // Block UI appearance. + border: $border-width solid $dark-gray-primary; + border-radius: $radius-block-ui; + background-color: $white; + + // When button is focused, it receives a box-shadow instead of the border. + &:focus { + border: none; + box-shadow: inset 0 0 0 1px color($theme-color), 0 0 0 1px color($theme-color); + } } - @include break-small() { - box-shadow: -$block-left-border-width 0 0 0 $blue-medium-focus; - } + // @todo, it should have the block type icon here. } } + +/** + * Warnings. + */ + .block-editor-block-list__block .block-editor-warning { z-index: z-index(".block-editor-warning"); position: relative; - margin-right: -$block-padding; - margin-left: -$block-padding; - - // Pull the warning upwards to the edge, and add a negative bottom margin to compensate. - margin-bottom: -$block-padding; - transform: translateY(-$block-padding); &.block-editor-block-list__block-crash-warning { // The block crash warning has no block preview underneath it. @@ -537,14 +508,20 @@ } } -.block-editor-block-list__insertion-point-popover { + +/** + * Popovers. + */ + +.block-editor-block-list__insertion-point-popover.is-without-arrow { z-index: z-index(".block-editor-block-list__insertion-point-popover"); - .components-popover__content { + .components-popover__content.components-popover__content { // Needs specificity. background: none; border: none; box-shadow: none; overflow-y: visible; + margin-left: 0; } } @@ -554,6 +531,7 @@ .components-popover__content { margin: 0 !important; min-width: auto; + width: max-content; background: none; border: none; box-shadow: none; @@ -566,10 +544,14 @@ pointer-events: all; } - .block-editor-block-contextual-toolbar, - .block-editor-block-list__breadcrumb { - margin-bottom: $block-padding - $border-width; - margin-left: - $block-padding; + // Position the block toolbar. + .block-editor-block-list__breadcrumb, + .block-editor-block-contextual-toolbar { + margin-bottom: $grid-unit-20; + + // @todo It should position the block transform dialog as the left margin of a block. It currently + // positions instead, the mover control. + margin-left: - $block-toolbar-height - $border-width; } .block-editor-block-contextual-toolbar[data-align="full"], @@ -582,3 +564,7 @@ opacity: 0; } } + +.is-dragging-components-draggable .components-tooltip { + display: none; +} diff --git a/packages/block-editor/src/components/block-mover/icons.js b/packages/block-editor/src/components/block-mover/icons.js index 1ebd7922cd4b44..207b3b285e2684 100644 --- a/packages/block-editor/src/components/block-mover/icons.js +++ b/packages/block-editor/src/components/block-mover/icons.js @@ -1,27 +1,27 @@ /** * WordPress dependencies */ -import { Path, SVG } from '@wordpress/components'; +import { Polygon, Path, SVG } from '@wordpress/components'; export const leftArrow = ( - + ); export const rightArrow = ( - + ); diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js index 1a7290b10dcb00..46889a13537976 100644 --- a/packages/block-editor/src/components/block-mover/index.js +++ b/packages/block-editor/src/components/block-mover/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { first, last, partial, castArray } from 'lodash'; +import { first, last, partial } from 'lodash'; import classnames from 'classnames'; /** @@ -18,7 +18,7 @@ import { withInstanceId, compose } from '@wordpress/compose'; * Internal dependencies */ import { getBlockMoverDescription } from './mover-description'; -import { leftArrow, rightArrow, dragHandle } from './icons'; +import { leftArrow, rightArrow } from './icons'; import { chevronUp, chevronDown } from '@wordpress/icons'; import BlockDraggable from '../block-draggable'; @@ -62,7 +62,7 @@ export class BlockMover extends Component { hideDragHandle, } = this.props; const { isFocused } = this.state; - const blocksCount = castArray( clientIds ).length; + const blocksCount = clientIds.length; if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) { return null; } @@ -98,94 +98,85 @@ export class BlockMover extends Component { }; // We emulate a disabled state because forcefully applying the `disabled` - // attribute on the button while it has focus causes the screen to change + // attribute on the buttons while it has focus causes the screen to change // to an unfocused state (body as active element) without firing blur on, // the rendering parent, leaving it unable to react to focus out. return ( - -
) } - - @@ -319,7 +319,7 @@ export class MediaPlaceholder extends Component { render={ ( { open } ) => { return ( ) } diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss index a996bec6996201..38ac4d82cbd1dd 100644 --- a/packages/block-editor/src/components/media-replace-flow/style.scss +++ b/packages/block-editor/src/components/media-replace-flow/style.scss @@ -5,14 +5,6 @@ display: none; } -.block-editor-media-replace-flow__indicator { - margin-left: 4px; - - &::after { - @include dropdown-arrow(); - } -} - .block-editor-media-flow__url-input { padding: 0 15px; max-width: 255px; diff --git a/packages/block-editor/src/components/multi-selection-inspector/style.scss b/packages/block-editor/src/components/multi-selection-inspector/style.scss index 0723ada11378ae..d531033c34be91 100644 --- a/packages/block-editor/src/components/multi-selection-inspector/style.scss +++ b/packages/block-editor/src/components/multi-selection-inspector/style.scss @@ -1,7 +1,7 @@ .block-editor-multi-selection-inspector__card { display: flex; align-items: flex-start; - padding: $grid-size-large; + padding: $grid-unit-20; } .block-editor-multi-selection-inspector__card-content { diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/style.scss b/packages/block-editor/src/components/rich-text/format-toolbar/style.scss index f7514425d425ed..8b17d64d3987d1 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar/style.scss +++ b/packages/block-editor/src/components/rich-text/format-toolbar/style.scss @@ -1,3 +1,16 @@ -.block-editor-format-toolbar .components-dropdown-menu__toggle .components-dropdown-menu__indicator::after { - margin: 7px; +.block-editor-format-toolbar { + .components-dropdown-menu__toggle { + justify-content: center; + + + // @todo: this should be the same icon as the DownArrow from the mover control. + &::after { + @include dropdown-arrow(); + + // The dropdown is 6px wide. To optically match the icons before it in the inline toolbar, we tweak the paddings. + // @todo: once this becomes an actual icon, and not SVG drawn, this should be unnecessary. + margin-left: 5px; + margin-right: 9px; + } + } } diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss index bfcf0c0e02e242..cd4005ae15c0ce 100644 --- a/packages/block-editor/src/components/rich-text/style.scss +++ b/packages/block-editor/src/components/rich-text/style.scss @@ -53,12 +53,27 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before z-index: z-index(".components-popover.block-editor-rich-text__inline-format-toolbar"); .components-popover__content { + width: auto; min-width: auto; - margin-bottom: 6px; + margin-bottom: $grid-unit; + box-shadow: none; + + // Block UI appearance. + border: $border-width solid $dark-gray-primary; + border-radius: $radius-block-ui; + background-color: $white; } .components-toolbar { // The popover already provides a border. border: none; } + + .components-toolbar__control, + .components-dropdown-menu__toggle { + min-width: $block-toolbar-height; + min-height: $block-toolbar-height; + padding-left: $grid-unit-15; + padding-right: $grid-unit-15; + } } diff --git a/packages/block-editor/src/components/tool-selector/style.scss b/packages/block-editor/src/components/tool-selector/style.scss index 1f61a871dce896..b335e8a5f83c89 100644 --- a/packages/block-editor/src/components/tool-selector/style.scss +++ b/packages/block-editor/src/components/tool-selector/style.scss @@ -1,5 +1,5 @@ .block-editor-tool-selector__help { - padding: $grid-size-large; + padding: $grid-unit-20; border-top: 1px solid $light-gray-500; color: $dark-gray-300; } diff --git a/packages/block-editor/src/components/url-input/style.scss b/packages/block-editor/src/components/url-input/style.scss index 82633eed772ccd..f60004bb670ea6 100644 --- a/packages/block-editor/src/components/url-input/style.scss +++ b/packages/block-editor/src/components/url-input/style.scss @@ -51,7 +51,7 @@ $input-size: 300px; .components-spinner { position: absolute; right: $input-padding; - bottom: $input-padding + $grid-size + 1; + bottom: $input-padding + $grid-unit-10 + 1; margin: 0; } } diff --git a/packages/block-editor/src/components/url-popover/style.scss b/packages/block-editor/src/components/url-popover/style.scss index de47d8049f2b16..0250cb99e94155 100644 --- a/packages/block-editor/src/components/url-popover/style.scss +++ b/packages/block-editor/src/components/url-popover/style.scss @@ -31,19 +31,11 @@ width: 30px; } - &:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover { - box-shadow: none; - - > svg { - @include formatting-button-style__hover; - } - } - &:not(:disabled):focus { box-shadow: none; > svg { - @include formatting-button-style__focus; + @include block-toolbar-button-style__focus(); } } } @@ -86,7 +78,7 @@ } .block-editor-url-popover__link-viewer-url { - margin: $grid-size - $border-width; + margin: $grid-unit-10 - $border-width; flex-grow: 1; flex-shrink: 1; overflow: hidden; diff --git a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap index 05473d1d172b6e..60465c47313b0d 100644 --- a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap @@ -23,8 +23,8 @@ exports[`URLPopover matches the snapshot in its default state 1`] = ` viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > - } @@ -59,8 +59,8 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`] viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" > - } diff --git a/packages/block-editor/src/components/warning/index.js b/packages/block-editor/src/components/warning/index.js index 78d5adce4b3832..02d70f2f5dba7c 100644 --- a/packages/block-editor/src/components/warning/index.js +++ b/packages/block-editor/src/components/warning/index.js @@ -17,43 +17,48 @@ function Warning( { className, actions, children, secondaryActions } ) {

{ children }

- { Children.count( actions ) > 0 && ( + { ( Children.count( actions ) > 0 || secondaryActions ) && (
- { Children.map( actions, ( action, i ) => ( - - { action } - - ) ) } + { Children.count( actions ) > 0 && + Children.map( actions, ( action, i ) => ( + + { action } + + ) ) } + { secondaryActions && ( + ( +
) }
- - { secondaryActions && ( - ( - @@ -337,8 +337,8 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] = width={24} xmlns="http://www.w3.org/2000/svg" > - @@ -511,8 +511,8 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] = width={24} xmlns="http://www.w3.org/2000/svg" > - @@ -685,8 +685,8 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = ` width={24} xmlns="http://www.w3.org/2000/svg" > - @@ -859,8 +859,8 @@ exports[`ColorPicker should only update input view for draft changes 1`] = ` width={24} xmlns="http://www.w3.org/2000/svg" > - @@ -1033,8 +1033,8 @@ exports[`ColorPicker should render color picker 1`] = ` width={24} xmlns="http://www.w3.org/2000/svg" > - diff --git a/packages/components/src/custom-gradient-picker/style.scss b/packages/components/src/custom-gradient-picker/style.scss index 53e5da50784c44..3993426e36d6d5 100644 --- a/packages/components/src/custom-gradient-picker/style.scss +++ b/packages/components/src/custom-gradient-picker/style.scss @@ -12,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-large; + margin-bottom: $grid-unit-10; padding-left: $components-custom-gradient-picker__padding; padding-right: $icon-button-size-small - $components-custom-gradient-picker__padding; diff --git a/packages/components/src/date-time/style.scss b/packages/components/src/date-time/style.scss index 4b05533067037f..c0690e9e216fb5 100644 --- a/packages/components/src/date-time/style.scss +++ b/packages/components/src/date-time/style.scss @@ -5,10 +5,10 @@ /*rtl:end:ignore*/ .components-datetime { - padding: $grid-size-large; + padding: $grid-unit-20; .components-datetime__calendar-help { - padding: $grid-size-large; + padding: $grid-unit-20; h4 { margin: 0; @@ -94,7 +94,7 @@ } .components-datetime__time { - padding-bottom: $grid-size-large; + padding-bottom: $grid-unit-20; fieldset { position: relative; diff --git a/packages/components/src/dropdown-menu/README.md b/packages/components/src/dropdown-menu/README.md index 3790412a69df28..f36c7874ce7773 100644 --- a/packages/components/src/dropdown-menu/README.md +++ b/packages/components/src/dropdown-menu/README.md @@ -142,16 +142,6 @@ The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug to See also: [https://developer.wordpress.org/resource/dashicons/](https://developer.wordpress.org/resource/dashicons/) -#### hasArrowIndicator - -Whether to display an arrow indicator next to the icon. - -- Type: `Boolean` -- Required: No -- Default: `false` - -For backward compatibility, when `icon` is explicitly set to `null` then the arrow indicator will be displayed even when this flag is set to `false`. - #### label A human-readable label to present as accessibility text on the focused collapsed menu button. diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js index 7d7c16f1d7a2a0..288ea6f72d9d41 100644 --- a/packages/components/src/dropdown-menu/index.js +++ b/packages/components/src/dropdown-menu/index.js @@ -9,7 +9,6 @@ import { flatMap, isEmpty, isFunction } from 'lodash'; */ import { DOWN } from '@wordpress/keycodes'; import deprecated from '@wordpress/deprecated'; -import { Fragment } from '@wordpress/element'; /** * Internal dependencies @@ -38,7 +37,6 @@ function DropdownMenu( { children, className, controls, - hasArrowIndicator = false, icon = 'menu', label, popoverProps, @@ -47,6 +45,7 @@ function DropdownMenu( { // The following props exist for backward compatibility. menuLabel, position, + noIcons, } ) { if ( menuLabel ) { deprecated( '`menuLabel` prop in `DropdownComponent`', { @@ -106,23 +105,6 @@ function DropdownMenu( { toggleProps ); - let buttonChildren; - if ( - mergedToggleProps.children || - ! icon || - hasArrowIndicator - ) { - buttonChildren = [ - - { mergedToggleProps.children } - , - - { ( ! icon || hasArrowIndicator ) && ( - - ) } - , - ]; - } return ( ); } } @@ -152,7 +134,10 @@ function DropdownMenu( { const mergedMenuProps = mergeProps( { 'aria-label': menuLabel || label, - className: 'components-dropdown-menu__menu', + className: classnames( + 'components-dropdown-menu__menu', + { 'no-icons': noIcons } + ), }, menuProps ); diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index f57f62a722be45..556af2f580ee9f 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -1,14 +1,9 @@ -.components-dropdown-menu__indicator::after { - @include dropdown-arrow(); -} - .components-dropdown-menu__popover .components-popover__content { width: 200px; } .components-dropdown-menu__menu { width: 100%; - padding: ($grid-size - $border-width) 0; font-family: $default-font; font-size: $default-font-size; line-height: $default-line-height; @@ -19,7 +14,7 @@ padding: 6px; outline: none; cursor: pointer; - margin-bottom: $grid-size-small; + margin-bottom: $grid-unit-05; &.has-separator { margin-top: 6px; @@ -39,15 +34,12 @@ height: 1px; } - // Plain menu styles. - &:focus:not(:disabled):not([aria-disabled="true"]):not(.is-secondary) { - @include menu-style__focus(); - } - - &:hover, - &:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):not(.is-tertiary):not(.is-primary):hover { - @include menu-style__hover(); - box-shadow: none; + &.is-active { + // Block UI appearance. + border: $border-width solid $dark-gray-primary; + border-radius: $radius-block-ui; + color: $white; + background: $dark-gray-primary; } // Formatting buttons @@ -58,22 +50,16 @@ padding: 2px; width: $icon-button-size-small; height: $icon-button-size-small; - margin: -1px $grid-size -1px 0; + margin: -1px $grid-unit-10 -1px 0; } - - &:not(:disabled):not([aria-disabled="true"]):not(.is-secondary).is-active > svg { - @include formatting-button-style__active(); - } - } - - .components-menu-group:not(:last-child) { - border-bottom: $border-width solid $light-gray-500; } .components-menu-item__button, .components-menu-item__button.components-button { + min-height: $icon-button-size; height: auto; padding-left: 2rem; + text-align: left; &.has-icon { padding-left: 0.5rem; @@ -83,4 +69,30 @@ margin-right: 4px; } } + + .components-menu-group { + padding: $grid-unit-15; + margin-top: 0; + margin-bottom: 0; + margin-left: -$grid-unit-15; + margin-right: -$grid-unit-15; + + &:first-child { + margin-top: -$grid-unit-15; + } + + &:last-child { + margin-bottom: -$grid-unit-15; + } + } + + .components-menu-group + .components-menu-group { + margin-top: 0; + border-top: $border-width solid $light-gray-secondary; + padding: $grid-unit-15; + } +} + +.components-dropdown-menu__menu.no-icons .components-menu-item__button.components-button { + padding: 0 $grid-unit-15; } diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.js index ebb9efb6273e7f..cf47a7ac188a4a 100644 --- a/packages/components/src/dropdown/index.js +++ b/packages/components/src/dropdown/index.js @@ -97,7 +97,6 @@ class Dropdown extends Component { { renderToggle( args ) } { isOpen && ( { renderContent( args ) } diff --git a/packages/components/src/dropdown/style.scss b/packages/components/src/dropdown/style.scss index 8aeea6338019a3..5f4b0d355cc12a 100644 --- a/packages/components/src/dropdown/style.scss +++ b/packages/components/src/dropdown/style.scss @@ -1,3 +1,7 @@ .components-dropdown { display: inline-block; } + +.components-dropdown__content .components-popover__content { + padding: $grid-unit-15; +} diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss index 3b61451785631e..ee88ead8871d98 100644 --- a/packages/components/src/font-size-picker/style.scss +++ b/packages/components/src/font-size-picker/style.scss @@ -2,7 +2,7 @@ max-width: $sidebar-width - ( 2 * $panel-padding ); display: flex; align-items: center; - margin-bottom: $grid-size * 3; + margin-bottom: $grid-unit-30; // Apply the same height as the isSmall Reset button. .components-font-size-picker__number { @@ -11,7 +11,7 @@ height: 30px; margin-bottom: 0; margin-left: 0; - margin-right: $grid-size; + margin-right: $grid-unit-10; margin-top: 5px; width: 54px; @@ -30,7 +30,7 @@ // Allow the font-size picker dropdown to grow in width. .components-font-size-picker__select { - margin-right: $grid-size; + margin-right: $grid-unit-10; flex-grow: 1; } diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss index 33d6e7837616b0..d7e42d766ef164 100644 --- a/packages/components/src/form-token-field/style.scss +++ b/packages/components/src/form-token-field/style.scss @@ -3,8 +3,8 @@ flex-wrap: wrap; align-items: flex-start; width: 100%; - margin: 0 0 $grid-size 0; - padding: $grid-size-small; + margin: 0 0 $grid-unit-10 0; + padding: $grid-unit-05; background-color: $white; border: $border-width solid $light-gray-700; color: $dark-gray-700; @@ -47,7 +47,7 @@ .components-form-token-field__label { display: inline-block; - margin-bottom: $grid-size-small; + margin-bottom: $grid-unit-05; } .components-form-token-field__help { @@ -169,7 +169,7 @@ @include reduce-motion("transition"); list-style: none; border-top: $border-width solid $dark-gray-300; - margin: $grid-size-small (-$grid-size-small) (-$grid-size-small); + margin: $grid-unit-05 (-$grid-unit-05) (-$grid-unit-05); padding-top: 3px; } diff --git a/packages/components/src/guide/style.scss b/packages/components/src/guide/style.scss index c563ec2e0c2d2d..0afc819f9f7186 100644 --- a/packages/components/src/guide/style.scss +++ b/packages/components/src/guide/style.scss @@ -5,7 +5,7 @@ .components-button { align-self: flex-start; - margin-top: $grid-size-xlarge; + margin-top: $grid-unit-30; position: static; } } @@ -22,12 +22,12 @@ display: flex; height: 30px; justify-content: center; - margin: auto 0 $grid-size-xlarge 0; + margin: auto 0 $grid-unit-30 0; position: relative; width: 100%; @include break-small() { - margin: $grid-size-xlarge 0 0; + margin: $grid-unit-30 0 0; } } @@ -48,8 +48,8 @@ .components-modal__frame.components-guide { @media (max-width: $break-small) { bottom: 15%; - left: $grid-size-xlarge; - right: $grid-size-xlarge; + left: $grid-unit-30; + right: $grid-unit-30; top: 15%; } } diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss index 6682581a5bfab9..e0ab0cd8bf20aa 100644 --- a/packages/components/src/menu-group/style.scss +++ b/packages/components/src/menu-group/style.scss @@ -1,10 +1,11 @@ -.components-menu-group { - width: 100%; - padding: ($grid-size - $border-width) 0; +.components-menu-group + .components-menu-group { + margin-top: $grid-unit-10; + padding-top: $grid-unit-10; + border-top: $border-width solid $dark-gray-primary; } .components-menu-group__label { - margin-bottom: $grid-size; - color: $dark-gray-300; - padding: 0 ($grid-size - $border-width); + margin-bottom: $grid-unit-10; + color: $medium-gray-text; + padding: 0; } diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss index 584a8d5aa90696..e5b8878c014209 100644 --- a/packages/components/src/menu-item/style.scss +++ b/packages/components/src/menu-item/style.scss @@ -1,12 +1,9 @@ .components-menu-item__button, .components-menu-item__button.components-button { width: 100%; - padding: $grid-size ($grid-size-large - $border-width); - text-align: left; - color: $dark-gray-600; - @include menu-style__neutral; // Target plugin icons that can have arbitrary classes by using an aggressive selector. + // @todo: is this still necessary? .dashicon, .components-menu-items__item-icon, svg.components-menu-items__item-icon, @@ -18,19 +15,6 @@ display: inline-block; flex: 0 0 auto; } - - // This needs to be higher-specificity that the default button hover style. - &.components-button:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):not(.is-tertiary):not(.is-primary):hover { - @include menu-style__hover; - - .components-menu-item__shortcut { - color: $dark-gray-600; - } - } - - &:focus:not(:disabled):not([aria-disabled="true"]) { - @include menu-style__focus; - } } .components-menu-item__info-wrapper { @@ -39,17 +23,17 @@ } .components-menu-item__info { - margin-top: $grid-size-small; + margin-top: $grid-unit-05; font-size: $default-font-size - 1px; - color: $dark-gray-300; + color: $medium-gray-text; } .components-menu-item__shortcut { align-self: center; - color: $dark-gray-300; margin-right: 0; margin-left: auto; - padding-left: $grid-size; + padding-left: $grid-unit-15; + color: currentColor; // Hide the keyboard shortcuts on mobile, because they aren't super-useful // for most mobile users and it frees up screen space for any item diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index f78bd2765a317a..d0eed7aeaf33cd 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -35,7 +35,7 @@ bottom: auto; left: 50%; min-width: $modal-min-width; - max-width: calc(100% - #{ $grid-size-large } - #{ $grid-size-large }); + max-width: calc(100% - #{ $grid-unit-20 } - #{ $grid-unit-20 }); max-height: calc(100% - #{ $header-height } - #{ $header-height }); transform: translate(-50%, -50%); @@ -48,7 +48,7 @@ @keyframes components-modal__appear-animation { from { - margin-top: $grid-size * 4; + margin-top: $grid-unit-40; } to { margin-top: 0; @@ -61,7 +61,7 @@ .components-modal__header { box-sizing: border-box; border-bottom: $border-width solid $light-gray-500; - padding: 0 $grid-size-xlarge; + padding: 0 $grid-unit-30; display: flex; flex-direction: row; justify-content: space-between; @@ -75,7 +75,7 @@ position: relative; position: sticky; top: 0; - margin: 0 -#{$grid-size-xlarge} $grid-size-xlarge; + margin: 0 -#{$grid-unit-30} $grid-unit-30; // Rules inside this query are only run by Microsoft Edge. // Edge has bugs around position: sticky;, so it needs a separate top rule. @@ -97,7 +97,7 @@ .components-button { position: relative; - left: $grid-size; + left: $grid-unit-10; } } @@ -115,7 +115,7 @@ svg { max-width: $icon-button-size; max-height: $icon-button-size; - padding: $grid-size; + padding: $grid-unit-10; } } @@ -123,7 +123,7 @@ .components-modal__content { box-sizing: border-box; height: 100%; - padding: 0 $grid-size-xlarge $grid-size-xlarge; + padding: 0 $grid-unit-30 $grid-unit-30; // Rules inside this query are only run by Microsoft Edge. // This is a companion top padding to the fixed rule in line 77. diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss index 152cef02846983..96828b4eee604d 100644 --- a/packages/components/src/notice/style.scss +++ b/packages/components/src/notice/style.scss @@ -31,7 +31,7 @@ .components-notice__content { flex-grow: 1; - margin: $grid-size-small #{ $icon-button-size-small + $border-width } $grid-size-small 0; + margin: $grid-unit-05 #{ $icon-button-size-small + $border-width } $grid-unit-05 0; } .components-notice__action.components-button { @@ -70,8 +70,8 @@ z-index: z-index(".components-notice-list"); .components-notice__content { - margin-top: $grid-size + $grid-size-small; - margin-bottom: $grid-size + $grid-size-small; + margin-top: $grid-unit-15; + margin-bottom: $grid-unit-15; line-height: 1.6; } diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index f238a32041c567..944186713453d9 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -100,7 +100,7 @@ .components-panel__arrow { position: absolute; - right: $grid-size + 2; + right: $grid-unit-20; top: 50%; transform: translateY(-50%); color: $dark-gray-900; diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index 84f922752bb6a8..dfe1113cd887a8 100644 --- a/packages/components/src/placeholder/style.scss +++ b/packages/components/src/placeholder/style.scss @@ -1,10 +1,15 @@ .components-placeholder.components-placeholder { // This needs specificity to override individual block styles. position: relative; - margin-bottom: $default-block-margin; padding: 1em; min-height: 200px; width: 100%; text-align: left; + margin: 0; + color: $dark-gray-primary; + + // Some editor styles unset this. + -moz-font-smoothing: subpixel-antialiased; + -webkit-font-smoothing: subpixel-antialiased; // IE11 doesn't read rules inside this query. They are applied only to modern browsers. @supports (position: sticky) { @@ -14,12 +19,11 @@ align-items: flex-start; } - // Use opacity to work in various editor styles. - background: $dark-opacity-light-200; - - .is-dark-theme & { - background: $light-opacity-light-200; - } + // Block UI appearance. + border-radius: $radius-block-ui; + background-color: $white; + box-shadow: 0 0 0 $border-width $dark-gray-primary; + outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode. .components-base-control__label { font-size: $default-font-size; @@ -37,7 +41,7 @@ .components-placeholder__label { display: flex; font-weight: 600; - margin-bottom: 1em; + margin-bottom: 1.5em; > svg, .dashicon, @@ -86,8 +90,8 @@ } .components-placeholder__fieldset .components-button { - margin-right: $grid-size; - margin-bottom: $grid-size; // If buttons wrap we need vertical space between. + margin-right: $grid-unit-15; + margin-bottom: $grid-unit-15; // If buttons wrap we need vertical space between. &:last-child { margin-bottom: 0; @@ -135,7 +139,7 @@ } .components-button { - padding: 0 $grid-size 2px; + padding: 0 $grid-unit-10 2px; } } } diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js index 943b1eb0d9b1fc..7d7b57c905857e 100644 --- a/packages/components/src/popover/index.js +++ b/packages/components/src/popover/index.js @@ -232,7 +232,7 @@ const Popover = ( { onKeyDown, children, className, - noArrow = false, + noArrow = true, // Disable reason: We generate the `...contentProps` rest as remainder // of props which aren't explicitly handled by this component. /* eslint-disable no-unused-vars */ @@ -252,6 +252,7 @@ const Popover = ( { __unstableAllowVerticalSubpixelPosition, __unstableAllowHorizontalSubpixelPosition, __unstableFixedPosition = true, + __unstableBoundaryParent, /* eslint-enable no-unused-vars */ ...contentProps } ) => { @@ -323,6 +324,13 @@ const Popover = ( { setStyle( containerRef.current, 'position' ); } + let boundaryElement; + if ( __unstableBoundaryParent ) { + boundaryElement = containerRef.current.closest( + '.popover-slot' + ).parentNode; + } + const { popoverTop, popoverLeft, @@ -336,7 +344,8 @@ const Popover = ( { position, __unstableSticky, containerRef.current, - relativeOffsetTop + relativeOffsetTop, + boundaryElement ); if ( @@ -471,6 +480,7 @@ const Popover = ( { __unstableSticky, __unstableAllowVerticalSubpixelPosition, __unstableAllowHorizontalSubpixelPosition, + __unstableBoundaryParent, ] ); useFocusContentOnMount( focusOnMount, contentRef ); @@ -626,7 +636,7 @@ const Popover = ( { const PopoverContainer = Popover; PopoverContainer.Slot = ( { name = SLOT_NAME } ) => ( - + ); export default PopoverContainer; diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss index a077de513f4a04..7ece47bcdb9d79 100644 --- a/packages/components/src/popover/style.scss +++ b/packages/components/src/popover/style.scss @@ -29,7 +29,7 @@ $arrow-size: 8px; margin-left: 2px; &::before { - border: $arrow-size solid $light-gray-500; + border: $arrow-size solid $dark-gray-primary; } &::after { @@ -143,10 +143,11 @@ $arrow-size: 8px; } .components-popover__content { - box-shadow: $shadow-popover; - border: $border-width solid $light-gray-500; - background: $white; height: 100%; + background: $white; + border: $border-width solid $light-gray-secondary; + box-shadow: $shadow-popover; + border-radius: $radius-block-ui; .components-popover & { position: absolute; @@ -161,7 +162,7 @@ $arrow-size: 8px; overflow-y: visible; min-width: auto; border: none; - border-top: $border-width solid $light-gray-500; + border-top: $border-width solid $dark-gray-primary; } .components-popover[data-y-axis="top"] & { diff --git a/packages/components/src/popover/test/__snapshots__/index.js.snap b/packages/components/src/popover/test/__snapshots__/index.js.snap index 236ae2a7132936..ec650c7ec10784 100644 --- a/packages/components/src/popover/test/__snapshots__/index.js.snap +++ b/packages/components/src/popover/test/__snapshots__/index.js.snap @@ -8,7 +8,7 @@ exports[`Popover should pass additional props to portaled element 1`] = `