WordPress · jasmussen · Apr 13, 2020 · Apr 8, 2020 · Apr 8, 2020 · Apr 8, 2020
diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js
@@ -30,6 +30,7 @@ const DEFAULT_ALIGNMENT_CONTROLS = [
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
+	isAlternate: true,
 };
 
 export function AlignmentToolbar( props ) {

diff --git a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap
@@ -50,6 +50,7 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified
   label="Change text alignment"
   popoverProps={
     Object {
+      "isAlternate": true,
       "position": "bottom right",
     }
   }
@@ -121,6 +122,7 @@ exports[`AlignmentToolbar should match snapshot 1`] = `
   label="Change text alignment"
   popoverProps={
     Object {
+      "isAlternate": true,
       "position": "bottom right",
     }
   }

diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
@@ -81,10 +81,12 @@ $tree-item-height: 36px;
 		margin-right: 6px;
 	}
 
-	&.is-selected,
-	&.is-selected:focus {
+	&.is-selected svg,
+	&.is-selected:focus svg {
 		color: $white;
 		background: $dark-gray-primary;
+		box-shadow: 0 0 0 $border-width $dark-gray-primary;
+		border-radius: $border-width;
 	}
 }
 

diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js
@@ -29,7 +29,7 @@ import BlockSettingsMenuControls from '../block-settings-menu-controls';
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	position: 'bottom right',
-	noArrow: true,
+	isAlternate: true,
 };
 
 export function BlockSettingsMenu( { clientIds } ) {

diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -29,6 +29,11 @@ import BlockStyles from '../block-styles';
 import BlockPreview from '../block-preview';
 import BlockTypesList from '../block-types-list';
 
+const POPOVER_PROPS = {
+	position: 'bottom right',
+	isAlternate: true,
+};
+
 export class BlockSwitcher extends Component {
 	constructor() {
 		super( ...arguments );
@@ -99,7 +104,7 @@ export class BlockSwitcher extends Component {
 
 		return (
 			<Dropdown
-				position="bottom right"
+				popoverProps={ POPOVER_PROPS }
 				className="block-editor-block-switcher"
 				contentClassName="block-editor-block-switcher__popover"
 				renderToggle={ ( { onToggle, isOpen } ) => {

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -6,19 +6,6 @@
 .block-editor-block-switcher__no-switcher-icon,
 .block-editor-block-switcher__toggle {
 	position: relative;
-
-	&::after {
-		display: block;
-		content: "";
-		position: absolute;
-		bottom: 1px;
-		right: 0;
-		border-color: transparent;
-		border-style: solid;
-		border-width: 4px;
-		border-right-color: currentColor;
-		border-bottom-color: currentColor;
-	}
 }
 
 
@@ -82,7 +69,6 @@
 	max-width: calc(340px * 2);
 	display: flex;
 	background: $white;
-	box-shadow: $shadow-popover;
 	padding: 0;
 
 	.components-menu-group {

diff --git a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap
@@ -29,7 +29,12 @@ exports[`BlockSwitcher should render enabled block switcher with multi block whe
 <Dropdown
   className="block-editor-block-switcher"
   contentClassName="block-editor-block-switcher__popover"
-  position="bottom right"
+  popoverProps={
+    Object {
+      "isAlternate": true,
+      "position": "bottom right",
+    }
+  }
   renderContent={[Function]}
   renderToggle={[Function]}
 />
@@ -39,7 +44,12 @@ exports[`BlockSwitcher should render switcher with blocks 1`] = `
 <Dropdown
   className="block-editor-block-switcher"
   contentClassName="block-editor-block-switcher__popover"
-  position="bottom right"
+  popoverProps={
+    Object {
+      "isAlternate": true,
+      "position": "bottom right",
+    }
+  }
   renderContent={[Function]}
   renderToggle={[Function]}
 />

diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { Button, Tooltip, VisuallyHidden } from '@wordpress/components';
 import { _x, sprintf } from '@wordpress/i18n';
-import { Icon, plus } from '@wordpress/icons';
+import { Icon, create } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -63,7 +63,7 @@ function ButtonBlockAppender( {
 							label={ label }
 						>
 							<VisuallyHidden as="span">{ label }</VisuallyHidden>
-							<Icon icon={ plus } />
+							<Icon icon={ create } />
 						</Button>
 					</Tooltip>
 				);

diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
@@ -14,6 +14,7 @@ import { chevronDown } from '@wordpress/icons';
 
 const POPOVER_PROPS = {
 	position: 'bottom right',
+	isAlternate: true,
 };
 
 const FormatToolbar = () => {

diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss
@@ -3,33 +3,6 @@
 	min-height: auto !important;
 }
 
-// Show a footprint fade effect when first selecting any block.
-.block-editor-block-list__block[data-type="core/paragraph"].is-selected {
-	&::before {
-		position: absolute;
-		z-index: 1;
-		pointer-events: none;
-		content: "";
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		animation: block-editor-block-list__block-fade-out-animation 0.3s ease-out 0.2s;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
-	}
-
-	// Only flash it if you're not typing.
-	&:not(.is-typing)::before {
-		background: rgba($black, 0.03);
-
-		// Flash a white color for dark themes.
-		.is-dark-theme & {
-			background: rgba($white, 0.1);
-		}
-	}
-}
-
 @keyframes block-editor-block-list__block-fade-out-animation {
 	from {
 		opacity: 1;

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -212,9 +212,18 @@
 	&.is-secondary.is-busy:disabled,
 	&.is-secondary.is-busy[aria-disabled="true"] {
 		animation: components-button__busy-animation 2500ms infinite linear;
-		background-size: 100px 100%;
-		background-image: repeating-linear-gradient(-45deg, $light-gray-500, $white 11px, $white 10px, $light-gray-500 20px);
 		opacity: 1;
+		background-size: 100px 100%;
+		// Disable reason: This function call looks nicer when each argument is on its own line.
+		/* stylelint-disable */
+		background-image: linear-gradient(
+			-45deg,
+			color($white shade(2%)) 28%,
+			color($white shade(12%)) 28%,
+			color($white shade(12%)) 72%,
+			color($white shade(2%)) 72%
+		);
+		/* stylelint-enable */
 	}
 
 	&.is-small {

diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
@@ -34,20 +34,19 @@
 			height: 1px;
 		}
 
-		&.is-active {
+		&.is-active svg {
 			// Block UI appearance.
-			border: $border-width solid $dark-gray-primary;
-			border-radius: $radius-block-ui;
 			color: $white;
 			background: $dark-gray-primary;
+			box-shadow: 0 0 0 $border-width $dark-gray-primary;
+			border-radius: $border-width;
 		}
 
 		// Formatting buttons
 		> svg {
-			border-radius: $radius-round-rectangle;
+			border-radius: $radius-block-ui;
 			width: $button-size-small;
 			height: $button-size-small;
-			margin: -1px $grid-unit-10 -1px 0;
 		}
 	}
 

diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.js
@@ -78,7 +78,7 @@ class Dropdown extends Component {
 		const {
 			renderContent,
 			renderToggle,
-			position = 'bottom',
+			position = 'bottom right',
 			className,
 			contentClassName,
 			expandOnMobile,

diff --git a/packages/components/src/notice/style.scss b/packages/components/src/notice/style.scss
@@ -79,12 +79,5 @@
 		display: block;
 		margin-left: 0;
 		margin-top: $grid-unit-10;
-
-		// Beyond mobile, align the action button on the right to use the space, and reduce margins so they don't add too much extra line-height.
-		@include break-medium() {
-			float: right;
-			margin-top: -$grid-unit-05;
-			margin-bottom: -$grid-unit-05;
-		}
 	}
 }
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
@@ -233,10 +233,11 @@ const Popover = ( {
 	children,
 	className,
 	noArrow = true,
+	isAlternate,
 	// Disable reason: We generate the `...contentProps` rest as remainder
 	// of props which aren't explicitly handled by this component.
 	/* eslint-disable no-unused-vars */
-	position = 'top',
+	position = 'bottom right',
 	range,
 	focusOnMount = 'firstElement',
 	anchorRef,
@@ -270,6 +271,7 @@ const Popover = ( {
 	useEffect( () => {
 		if ( isExpanded ) {
 			setClass( containerRef.current, 'is-without-arrow', noArrow );
+			setClass( containerRef.current, 'is-alternate', isAlternate );
 			setAttribute( containerRef.current, 'data-x-axis' );
 			setAttribute( containerRef.current, 'data-y-axis' );
 			setStyle( containerRef.current, 'top' );
@@ -392,6 +394,7 @@ const Popover = ( {
 				'is-without-arrow',
 				noArrow || ( xAxis === 'center' && yAxis === 'middle' )
 			);
+			setClass( containerRef.current, 'is-alternate', isAlternate );
 			setAttribute( containerRef.current, 'data-x-axis', xAxis );
 			setAttribute( containerRef.current, 'data-y-axis', yAxis );
 			setStyle(
@@ -575,6 +578,7 @@ const Popover = ( {
 							{
 								'is-expanded': isExpanded,
 								'is-without-arrow': noArrow,
+								'is-alternate': isAlternate,
 							}
 						) }
 						{ ...contentProps }

diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
@@ -140,6 +140,23 @@ $arrow-size: 8px;
 		align-items: center;
 		display: flex;
 	}
+
+	// Add spacing.
+	&.is-from-top {
+		margin-top: $grid-unit-15;
+	}
+
+	&.is-from-bottom {
+		margin-top: -$grid-unit-15;
+	}
+
+	&.is-from-left:not(.is-from-top):not(.is-from-bottom) {
+		margin-left: $grid-unit-15;
+	}
+
+	&.is-from-right:not(.is-from-top):not(.is-from-bottom) {
+		margin-right: $grid-unit-15;
+	}
 }
 
 .components-popover__content {
@@ -149,6 +166,12 @@ $arrow-size: 8px;
 	box-shadow: $shadow-popover;
 	border-radius: $radius-block-ui;
 
+	// Alternate treatment for popovers that put them at elevation zero with high contrast.
+	.is-alternate & {
+		border: $border-width solid $dark-gray-primary;
+		box-shadow: none;
+	}
+
 	.components-popover & {
 		position: absolute;
 		height: auto;

diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss
@@ -39,6 +39,11 @@
 			left: $grid-unit-10;
 			right: $grid-unit-10;
 			z-index: -1;
+
+			// Animate in.
+			animation: components-button__appear-animation 0.1s ease;
+			animation-fill-mode: forwards;
+			@include reduce-motion("animation");
 		}
 
 		svg {
@@ -85,3 +90,13 @@
 		}
 	}
 }
+
+
+@keyframes components-button__appear-animation {
+	from {
+		transform: scaleY(0);
+	}
+	to {
+		transform: scaleY(1);
+	}
+}
diff --git a/packages/icons/src/library/post-list.js b/packages/icons/src/library/post-list.js
@@ -1,17 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Path, Rect, SVG } from '@wordpress/primitives';
+import { Path, SVG } from '@wordpress/primitives';
 
 const postList = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Rect x="11" y="7" width="6" height="2" />
-		<Rect x="11" y="11" width="6" height="2" />
-		<Rect x="11" y="15" width="6" height="2" />
-		<Rect x="7" y="7" width="2" height="2" />
-		<Rect x="7" y="11" width="2" height="2" />
-		<Rect x="7" y="15" width="2" height="2" />
-		<Path d="M20.1,3H3.9C3.4,3,3,3.4,3,3.9v16.2C3,20.5,3.4,21,3.9,21h16.2c0.4,0,0.9-0.5,0.9-0.9V3.9C21,3.4,20.5,3,20.1,3z M19,19H5V5h14V19z" />
+		<Path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 14c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v12zM7 11h2V9H7v2zm0 4h2v-2H7v2zm3-4h7V9h-7v2zm0 4h7v-2h-7v2z" />
 	</SVG>
 );