Upgrade WordPress monorepo (#48729)

* fix(deps): update wordpress monorepo * Use new colors * Tests: update names of internal data control types * Tests: fix selector resolution tests by waiting for one more state update * Fix SftpCard tests by mocking window.matchMedia * Type with hooks * Fix Editing Toolkit build * Remove types/wordpress packages * Fix incorrect usage of i18n context in Gutenboarding * Use original colors where the color modifications were too disruptive * Restore __experimentalMainDashboardButton in expermental features e2e tests * FSE: add type definitions for @wordpress/edit-post module * Final yarn.lock update * e2e: remove test for edit-site as we're testing on edit-post page * Gutenboarding: use granular selectors from onboarding store * Disable the Gutenboarding e2e test Co-authored-by: Renovate Bot <[email protected]> Co-authored-by: Sergio Cinos <[email protected]> Co-authored-by: Jon Surrell <[email protected]> Co-authored-by: Marko Andrijasevic <[email protected]>
Automattic · Jan 21, 2021 · fd759bd · fd759bd
1 parent a41c368
commit fd759bd
Show file tree

Hide file tree

Showing 59 changed files with 996 additions and 2,205 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -377,7 +377,7 @@ module.exports = {
 			{
 				'@wordpress/block-editor': [ '__experimentalBlock', '__experimentalInserterMenuExtension' ],
 				'@wordpress/date': [ '__experimentalGetSettings' ],
-				'@wordpress/interface': [ '__experimentalMainDashboardButton' ],
+				'@wordpress/edit-post': [ '__experimentalMainDashboardButton' ],
 				'@wordpress/components': [ '__experimentalNavigationBackButton' ],
 			},
 		],

diff --git a/...toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-steps/final-step/styles.scss b/...toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-steps/final-step/styles.scss
@@ -1,6 +1,10 @@
 @import '~@automattic/typography/styles/variables';
 @import '~@automattic/onboarding/styles/mixins';
 
+// TODO: This is former dark-gray-500 from @wordpress/base-styles.
+// Replace with a color from the standard palette.
+$nux-text-color: #555d66;
+
 .nux-launch__feature-list {
 	padding: 20px;
 
@@ -10,7 +14,7 @@
 }
 .nux-launch__feature-list-title {
 	margin: 0 0 10px;
-	color: $dark-gray-500;
+	color: $nux-text-color;
 	font-weight: 400;
 }
 ul.nux-launch__feature-item-group {
@@ -22,7 +26,7 @@ ul.nux-launch__feature-item-group {
 	letter-spacing: 0.2px;
 	margin: 4px 0;
 	vertical-align: middle;
-	color: $dark-gray-500;
+	color: $nux-text-color;
 	display: flex;
 	align-items: flex-start;
 

diff --git a/...ting-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/attach-sidebar.tsx b/...ting-toolkit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/attach-sidebar.tsx
@@ -3,7 +3,7 @@
  */
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, createPortal, useState } from '@wordpress/element';
-import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/interface';
+import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/edit-post';
 import { registerPlugin as originalRegisterPlugin, PluginSettings } from '@wordpress/plugins';
 
 /**

diff --git a/...iting-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/create-page/style.scss b/...iting-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/create-page/style.scss
@@ -1,10 +1,14 @@
 @import '~@wordpress/base-styles/colors';
 
+// TODO: This is former light-gray-900 from @wordpress/base-styles.
+// Replace with a color from the standard palette.
+$create-page-text-color: #a2aab2;
+
 .wpcom-block-editor-nav-sidebar-create-page {
 	width: 100%;
 	background: inherit !important;
 	padding: 8px 11px !important;
-	color: $light-gray-900 !important;
+	color: $create-page-text-color !important;
 	margin: 0;
 	min-height: 45px;
 

diff --git a/.../editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/nav-item/style.scss b/.../editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/nav-item/style.scss
@@ -1,6 +1,12 @@
 @import '~@wordpress/base-styles/colors';
 @import '~@wordpress/base-styles/variables';
 
+// TODO: These colors used to be in @wordpress/base-styles.
+// Replace them with colors from the updated standard palette.
+$nav-item-selected-background-color: #40464d; // former $dark-gray-600
+$nav-item-label-background-color: #555d66; // former $dark-gray-500
+$nav-item-untitled-text-color: #b5bcc2; // former $light-gray-800
+
 .wpcom-block-editor-nav-item {
 	display: flex;
 	flex-direction: row;
@@ -27,10 +33,10 @@
 	}
 
 	&.is-selected {
-		background: $dark-gray-600;
+		background: $nav-item-selected-background-color;
 
 		.wpcom-block-editor-nav-item__label {
-			background: $dark-gray-500;
+			background: $nav-item-label-background-color;
 		}
 	}
 }
@@ -43,15 +49,15 @@
 
 	&.is-untitled {
 		font-style: italic;
-		color: $light-gray-800;
+		color: $nav-item-untitled-text-color;
 	}
 }
 
 .wpcom-block-editor-nav-item__label {
 	display: inline-block;
 	padding: 4px;
 	border-radius: $radius-block-ui;
-	background: $dark-gray-500;
+	background: $nav-item-label-background-color;
 	font-weight: 600;
 	margin-left: 4px;
 }
diff --git a/...iting-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/nav-sidebar/style.scss b/...iting-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/components/nav-sidebar/style.scss
@@ -7,6 +7,8 @@ $sidebar-width: 272px;
 $sidebar-transition-period: 100ms;
 $sidebar-background-color: #23282e; // WP-admin gray to match the close button background color
 $sidebar-nav-header-background-color: #32373d; // WP-admin gray to match the close button background hover color
+$sidebar-untitled-text-color: #b5bcc2; // former $light-gray-800
+$sidebar-button-text-color: #a2aab2; // former $light-gray-900
 
 .wpcom-block-editor-nav-sidebar-nav-sidebar__click-guard {
 	position: fixed;
@@ -16,11 +18,13 @@ $sidebar-nav-header-background-color: #32373d; // WP-admin gray to match the clo
 	bottom: 0;
 	// Use the same z-index as the edit-post-layout header
 	z-index: z-index( '.interface-interface-skeleton__header' );
-	animation: wpcom-block-editor-nav-sidebar-nav-sidebar__fade $sidebar-transition-period ease-out forwards;
+	animation: wpcom-block-editor-nav-sidebar-nav-sidebar__fade $sidebar-transition-period ease-out
+		forwards;
 	@include reduce-motion( 'animation' );
 
 	&.is-fading-out {
-		animation: wpcom-block-editor-nav-sidebar-nav-sidebar__fade $sidebar-transition-period ease-in reverse;
+		animation: wpcom-block-editor-nav-sidebar-nav-sidebar__fade $sidebar-transition-period ease-in
+			reverse;
 		@include reduce-motion( 'animation' );
 	}
 }
@@ -48,7 +52,8 @@ $sidebar-nav-header-background-color: #32373d; // WP-admin gray to match the clo
 	@include reduce-motion( 'animation' );
 
 	&.is-sliding-left {
-		animation: wpcom-block-editor-nav-sidebar-nav-sidebar__slide $sidebar-transition-period ease-in reverse;
+		animation: wpcom-block-editor-nav-sidebar-nav-sidebar__slide $sidebar-transition-period ease-in
+			reverse;
 		@include reduce-motion( 'animation' );
 	}
 }
@@ -87,7 +92,7 @@ $sidebar-nav-header-background-color: #32373d; // WP-admin gray to match the clo
 
 	a,
 	a.is-untitled {
-		color: $light-gray-800;
+		color: $sidebar-untitled-text-color;
 
 		&:active,
 		&:focus,
@@ -132,7 +137,8 @@ $sidebar-nav-header-background-color: #32373d; // WP-admin gray to match the clo
 .wpcom-block-editor-nav-sidebar-nav-sidebar__list-heading,
 .wpcom-block-editor-nav-sidebar-nav-sidebar__list-subheading {
 	padding: $grid-unit-05 $grid-unit-20;
-	font-size: $big-font-size;
+	/* stylelint-disable-next-line scales/font-size */
+	font-size: 18px;
 	color: $white;
 	margin: 0 0 8px;
 }
@@ -151,7 +157,7 @@ $sidebar-nav-header-background-color: #32373d; // WP-admin gray to match the clo
 	}
 
 	a {
-		color: $light-gray-900;
+		color: $sidebar-button-text-color;
 	}
 
 	.is-selected {
@@ -169,7 +175,7 @@ $sidebar-nav-header-background-color: #32373d; // WP-admin gray to match the clo
 }
 
 .wpcom-block-editor-nav-sidebar-nav-sidebar__bottom-buttons {
-	border-top: 1px solid $light-gray-900;
+	border-top: 1px solid $sidebar-button-text-color;
 	position: absolute;
 	bottom: 0;
 	width: 100%;

diff --git a/...kit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/test/attach-sidebar.test.ts b/...kit/editing-toolkit-plugin/wpcom-block-editor-nav-sidebar/src/test/attach-sidebar.test.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { __experimentalMainDashboardButton } from '@wordpress/interface';
+import { __experimentalMainDashboardButton } from '@wordpress/edit-post';
 
 test( '__experimentalMainDashboardButton should be available', () => {
 	expect( typeof __experimentalMainDashboardButton ).not.toBe( 'undefined' );

diff --git a/...r-nav-sidebar/src/wp-interface-types.d.ts → ...r-nav-sidebar/src/wp-edit-post-types.d.ts b/...r-nav-sidebar/src/wp-interface-types.d.ts → ...r-nav-sidebar/src/wp-edit-post-types.d.ts
@@ -1,3 +1,3 @@
-declare module '@wordpress/interface' {
+declare module '@wordpress/edit-post' {
 	export const __experimentalMainDashboardButton: React.ComponentType;
 }
diff --git a/...diting-toolkit/editing-toolkit-plugin/wpcom-block-editor-welcome-tour/src/style-tour.scss b/...diting-toolkit/editing-toolkit-plugin/wpcom-block-editor-welcome-tour/src/style-tour.scss
@@ -3,6 +3,8 @@
 @import '~@wordpress/base-styles/variables';
 @import '~@wordpress/base-styles/z-index';
 
+$welcome-tour-button-background-color: #32373c; // former $dark-gray-700. TODO: replace with standard color
+
 .wpcom-editor-welcome-tour-frame {
 	background-color: $white;
 	border-radius: 2px;
@@ -143,7 +145,7 @@
 		width: 32px;
 		min-width: 32px;
 		height: 32px;
-		background: $dark-gray-700;
+		background: $welcome-tour-button-background-color;
 		opacity: 0;
 		transition: opacity 200ms;
 	}

diff --git a/apps/editing-toolkit/package.json b/apps/editing-toolkit/package.json
@@ -104,9 +104,9 @@
 		"@babel/core": "^7.12.3",
 		"@testing-library/jest-dom": "^5.9.0",
 		"@testing-library/react": "^10.0.5",
-		"@wordpress/a11y": "^2.11.0",
+		"@wordpress/a11y": "^2.14.0",
 		"@wordpress/api-fetch": "*",
-		"@wordpress/base-styles": "2.0.1",
+		"@wordpress/base-styles": "^3.3.0",
 		"@wordpress/block-editor": "*",
 		"@wordpress/blocks": "*",
 		"@wordpress/components": "*",
@@ -116,24 +116,23 @@
 		"@wordpress/date": "*",
 		"@wordpress/dependency-extraction-webpack-plugin": "^2.8.0",
 		"@wordpress/dom-ready": "*",
-		"@wordpress/e2e-test-utils": "^4.11.2",
+		"@wordpress/e2e-test-utils": "^4.16.1",
 		"@wordpress/edit-post": "*",
 		"@wordpress/editor": "*",
 		"@wordpress/element": "*",
 		"@wordpress/env": "^2.1.0",
-		"@wordpress/escape-html": "^1.9.0",
+		"@wordpress/escape-html": "^1.11.0",
 		"@wordpress/hooks": "*",
 		"@wordpress/html-entities": "*",
 		"@wordpress/i18n": "*",
 		"@wordpress/icons": "*",
-		"@wordpress/interface": "^0.7.5",
 		"@wordpress/keycodes": "*",
-		"@wordpress/nux": "^3.20.5",
+		"@wordpress/nux": "^3.24.1",
 		"@wordpress/plugins": "*",
 		"@wordpress/primitives": "*",
 		"@wordpress/rich-text": "*",
-		"@wordpress/scripts": "^12.1.1",
-		"@wordpress/server-side-render": "^1.16.5",
+		"@wordpress/scripts": "^12.5.0",
+		"@wordpress/server-side-render": "^1.20.1",
 		"@wordpress/url": "*",
 		"classnames": "^2.2.6",
 		"emotion-theming": "^10.0.27",
@@ -153,7 +152,7 @@
 	"devDependencies": {
 		"@babel/preset-typescript": "^7.12.1",
 		"@types/wordpress__plugins": "^2.3.7",
-		"@wordpress/eslint-plugin": "^7.1.0",
+		"@wordpress/eslint-plugin": "^7.3.0",
 		"babel-jest": "^26.3.0",
 		"webpack": "^4.44.2"
 	}

diff --git a/apps/o2-blocks/package.json b/apps/o2-blocks/package.json
@@ -22,17 +22,17 @@
 		"build": "calypso-build editor='./src/editor.js' view='./src/view.js' --env.WP"
 	},
 	"dependencies": {
-		"@wordpress/api-fetch": "^3.18.0",
-		"@wordpress/base-styles": "^2.0.1",
-		"@wordpress/block-editor": "^4.3.6",
-		"@wordpress/blocks": "^6.20.3",
-		"@wordpress/components": "^10.0.5",
-		"@wordpress/data": "^4.22.3",
-		"@wordpress/editor": "^9.20.6",
-		"@wordpress/element": "^2.16.0",
-		"@wordpress/hooks": "^2.9.0",
-		"@wordpress/i18n": "^3.14.0",
-		"@wordpress/primitives": "^1.7.0",
+		"@wordpress/api-fetch": "^3.21.1",
+		"@wordpress/base-styles": "^3.3.0",
+		"@wordpress/block-editor": "^5.2.1",
+		"@wordpress/blocks": "^6.25.1",
+		"@wordpress/components": "^12.0.1",
+		"@wordpress/data": "^4.26.1",
+		"@wordpress/editor": "^9.25.1",
+		"@wordpress/element": "^2.19.0",
+		"@wordpress/hooks": "^2.11.0",
+		"@wordpress/i18n": "^3.17.0",
+		"@wordpress/primitives": "^1.11.0",
 		"classnames": "^2.2.6",
 		"lodash": "^4.17.20",
 		"moment": "^2.26.0",

diff --git a/apps/o2-blocks/src/todo/editor.scss b/apps/o2-blocks/src/todo/editor.scss
@@ -1,6 +1,10 @@
 @import '~@wordpress/base-styles/colors';
 
 $color-accent-green: #31843f;
+$color-move-button-icon: #555d66; // dark-gray-500
+$color-add-button-text: #555d66; // dark-gray-500
+$color-add-button-border: #ccd0d4; // light-gray-700
+$color-add-button-icon: #7e8993; // dark-gray-200
 
 .wp-block-a8c-todo {
 	margin-bottom: 20px;
@@ -75,7 +79,7 @@ $color-accent-green: #31843f;
 			border-color: $gray-100;
 
 			.dashicon {
-				fill: $dark-gray-500;
+				fill: $color-move-button-icon;
 			}
 		}
 	}
@@ -86,10 +90,10 @@ $color-accent-green: #31843f;
 
 		.components-button {
 			font-size: 13px !important; // yep, I'm a monster.
-			color: $dark-gray-500;
-			border: 1px solid $light-gray-700;
+			color: $color-add-button-text;
+			border: 1px solid $color-add-button-border;
 			background: $gray-100;
-			box-shadow: 0 1px 0 $light-gray-700;
+			box-shadow: 0 1px 0 $color-add-button-border;
 			margin: 0;
 			height: 33px;
 			line-height: 32px;
@@ -98,7 +102,7 @@ $color-accent-green: #31843f;
 			white-space: nowrap;
 
 			.dashicon {
-				fill: $dark-gray-200;
+				fill: $gray-600;
 				vertical-align: middle;
 				display: inline;
 			}

diff --git a/apps/wpcom-block-editor/package.json b/apps/wpcom-block-editor/package.json
@@ -26,22 +26,22 @@
 		"wpcom-sync": "./bin/wpcom-watch-and-sync.sh"
 	},
 	"dependencies": {
-		"@wordpress/block-editor": "^4.3.6",
-		"@wordpress/blocks": "^6.20.3",
-		"@wordpress/components": "^10.0.5",
-		"@wordpress/compose": "^3.19.3",
-		"@wordpress/data": "^4.22.3",
-		"@wordpress/dom-ready": "^2.10.0",
-		"@wordpress/editor": "^9.20.6",
-		"@wordpress/edit-site": "^1.15.6",
-		"@wordpress/element": "^2.16.0",
-		"@wordpress/hooks": "^2.9.0",
-		"@wordpress/i18n": "^3.14.0",
-		"@wordpress/icons": "^2.4.0",
-		"@wordpress/interface": "^0.7.5",
-		"@wordpress/plugins": "^2.20.3",
-		"@wordpress/rich-text": "^3.20.4",
-		"@wordpress/url": "^2.17.0",
+		"@wordpress/block-editor": "^5.2.1",
+		"@wordpress/blocks": "^6.25.1",
+		"@wordpress/components": "^12.0.1",
+		"@wordpress/compose": "^3.23.1",
+		"@wordpress/data": "^4.26.1",
+		"@wordpress/dom-ready": "^2.12.0",
+		"@wordpress/editor": "^9.25.1",
+		"@wordpress/edit-post": "^3.26.1",
+		"@wordpress/edit-site": "^1.16.1",
+		"@wordpress/element": "^2.19.0",
+		"@wordpress/hooks": "^2.11.0",
+		"@wordpress/i18n": "^3.17.0",
+		"@wordpress/icons": "^2.9.0",
+		"@wordpress/plugins": "^2.24.1",
+		"@wordpress/rich-text": "^3.24.1",
+		"@wordpress/url": "^2.21.0",
 		"debug": "^4.1.1",
 		"jquery": "^1.12.3",
 		"lodash": "^4.17.20",

diff --git a/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js b/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js
@@ -10,7 +10,7 @@ import { createBlock, parse } from '@wordpress/blocks';
 import { addAction, addFilter, doAction, removeAction } from '@wordpress/hooks';
 import { addQueryArgs, getQueryArg } from '@wordpress/url';
 import { registerPlugin } from '@wordpress/plugins';
-import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/interface';
+import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/edit-post';
 import {
 	Button,
 	__experimentalNavigationBackButton as NavigationBackButton,

diff --git a/client/landing/gutenboarding/components/domain-picker-button/index.tsx b/client/landing/gutenboarding/components/domain-picker-button/index.tsx
@@ -26,9 +26,12 @@ const DomainPickerButton: React.FunctionComponent = () => {
 	const { __ } = useI18n();
 	const locale = useLocale();
 	const makePath = usePath();
-	const { domain, selectedDesign, siteTitle, siteVertical } = useSelect( ( select ) =>
-		select( ONBOARD_STORE ).getState()
-	);
+	const { domain, selectedDesign, siteTitle, siteVertical } = useSelect( ( select ) => ( {
+		domain: select( ONBOARD_STORE ).getSelectedDomain(),
+		selectedDesign: select( ONBOARD_STORE ).getSelectedDesign(),
+		siteTitle: select( ONBOARD_STORE ).getSelectedSiteTitle(),
+		siteVertical: select( ONBOARD_STORE ).getSelectedVertical(),
+	} ) );
 
 	// Use site title or vertical as search query for a domain suggestion
 	const suggestionQuery = siteTitle || siteVertical?.label || '';